temp

projects/packages/videopress/package.json

@@ -85,6 +85,6 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"react-router-dom": "^5.3.4",
-		"tus-js-client": "2.3.0"
+		"tus-js-client": "4.1.0"
 	}
 }

projects/packages/videopress/src/client/admin/components/admin-page/index.tsx

@@ -45,8 +45,17 @@ import styles from './styles.module.scss';
 
 const useDashboardVideos = () => {
 	const { uploadVideo, uploadVideoFromLibrary, setVideosQuery } = useDispatch( STORE_ID );
-	const { items, uploading, uploadedVideoCount, isFetching, search, page, itemsPerPage, total } =
-		useVideos();
+	const {
+		items,
+		uploadErrors,
+		uploading,
+		uploadedVideoCount,
+		isFetching,
+		search,
+		page,
+		itemsPerPage,
+		total,
+	} = useVideos();
 	const { items: localVideos, uploadedLocalVideoCount } = useLocalVideos();
 	const { hasVideoPressPurchase } = usePlan();
 
@@ -105,9 +114,10 @@ const useDashboardVideos = () => {
 	}, [ totalOfPages, page, pageFromSearchParam, search, searchFromSearchParam, tempPage.current ] );
 
 	// Do not show uploading videos if not in the first page or searching
-	let videos = page > 1 || Boolean( search ) ? items : [ ...uploading, ...items ];
+	let videos = page > 1 || Boolean( search ) ? items : [ ...uploadErrors, ...uploading, ...items ];
 
-	const hasVideos = uploadedVideoCount > 0 || isFetching || uploading?.length > 0;
+	const hasVideos =
+		uploadedVideoCount > 0 || isFetching || uploading?.length > 0 || uploadErrors?.length > 0;
 	const hasLocalVideos = uploadedLocalVideoCount > 0;
 
 	const handleFilesUpload = ( files: File[] ) => {
@@ -144,7 +154,7 @@ const useDashboardVideos = () => {
 		handleFilesUpload,
 		handleLocalVideoUpload,
 		loading: isFetching,
-		uploading: uploading?.length > 0,
+		uploading: uploading?.length > 0 || uploadErrors?.length > 0,
 		hasVideoPressPurchase,
 	};
 };

projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx

@@ -125,10 +125,12 @@ export const VideoPressLibrary = ( { videos, totalVideos, loading }: VideoLibrar
 	const history = useHistory();
 	const { search } = useVideos();
 	const videosToDisplay = [
-		// First comes the videos that are uploading
+		// First comes video upload errors
+		...videos.filter( video => video.error ),
+		// Then comes the videos that are uploading
 		...videos.filter( video => video.uploading ),
 		// Then the videos that are not uploading, at most 6
-		...videos.filter( video => ! video.uploading ).slice( 0, 6 ),
+		...videos.filter( video => ! video.uploading && ! video.error ).slice( 0, 6 ),
 	];
 
 	const libraryTypeFromLocalStorage = localStorage.getItem(

projects/packages/videopress/src/client/admin/components/video-card/error.tsx

@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import { Button, Title, useBreakpointMatch } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { usePermission } from '../../hooks/use-permission';
+import useVideo from '../../hooks/use-video';
+/**
+ * Internal dependencies
+ */
+import PublishFirstVideoPopover from '../publish-first-video-popover';
+import { ConnectVideoQuickActions } from '../video-quick-actions';
+import VideoThumbnail from '../video-thumbnail';
+import styles from './style.module.scss';
+import { VideoCardProps } from './types';
+/**
+ * Types
+ */
+import type React from 'react';
+
+const QuickActions = ( {
+	id,
+	onVideoDetailsClick,
+	className,
+}: {
+	id: VideoCardProps[ 'id' ];
+	onVideoDetailsClick: VideoCardProps[ 'onVideoDetailsClick' ];
+	className?: VideoCardProps[ 'className' ];
+} ) => {
+	const { canPerformAction } = usePermission();
+
+	return (
+		<div className={ clsx( styles[ 'video-card__quick-actions-section' ], className ) }>
+			<Button
+				variant="primary"
+				size="small"
+				onClick={ onVideoDetailsClick }
+				className={ styles[ 'video-card__quick-actions__edit-button' ] }
+				disabled={ ! canPerformAction }
+			>
+				{ __( 'View error', 'jetpack-videopress-pkg' ) }
+			</Button>
+
+			{ id && <ConnectVideoQuickActions videoId={ id } /> }
+		</div>
+	);
+};
+
+/**
+ * Video Card component
+ *
+ * @param {VideoCardProps} props - Component props.
+ * @returns {React.ReactNode} - VideoCardError react component.
+ */
+export const VideoCardError = ( {
+	title,
+	id,
+	duration,
+	plays,
+	thumbnail,
+	editable,
+	showQuickActions = true,
+	loading = false,
+	isUpdatingPoster = false,
+	uploading = false,
+	processing = false,
+	uploadProgress,
+	onVideoDetailsClick,
+}: VideoCardProps ) => {
+	const isBlank = ! title && ! duration && ! plays && ! thumbnail && ! loading;
+
+	const [ anchor, setAnchor ] = useState( null );
+	const [ isSm ] = useBreakpointMatch( 'sm' );
+	const [ isOpen, setIsOpen ] = useState( false );
+	const disabled = false;
+
+	return (
+		<>
+			<div
+				className={ clsx( styles[ 'video-card__wrapper' ], {
+					[ styles[ 'is-blank' ] ]: isBlank,
+					[ styles.disabled ]: isSm,
+				} ) }
+				{ ...( isSm && ! disabled && { onClick: () => setIsOpen( wasOpen => ! wasOpen ) } ) }
+			>
+				{ ! isSm && <div className={ styles[ 'video-card__background' ] } /> }
+
+				<VideoThumbnail
+					className={ styles[ 'video-card__thumbnail' ] }
+					thumbnail={ thumbnail }
+					loading={ loading || isUpdatingPoster }
+					uploading={ uploading }
+					processing={ processing }
+					duration={ loading ? null : duration }
+					editable={ loading ? false : editable }
+					uploadProgress={ uploadProgress }
+					ref={ setAnchor }
+					hasError={ true }
+				/>
+
+				<div className={ styles[ 'video-card__title-section' ] }>
+					{ isSm && (
+						<div className={ styles.chevron }>
+							{ isOpen && <Icon icon={ chevronUp } /> }
+							{ ! isOpen && <Icon icon={ chevronDown } /> }
+						</div>
+					) }
+
+					<Title className={ styles[ 'video-card__title' ] } mb={ 0 } size="small">
+						{ title }
+					</Title>
+				</div>
+
+				<PublishFirstVideoPopover id={ id } anchor={ anchor } />
+
+				{ showQuickActions && ! isSm && (
+					<QuickActions
+						id={ id }
+						onVideoDetailsClick={ onVideoDetailsClick }
+						className={ clsx( [ styles[ 'is-blank' ] ] ) }
+					/>
+				) }
+			</div>
+
+			{ showQuickActions && isSm && isOpen && (
+				<QuickActions
+					id={ id }
+					onVideoDetailsClick={ onVideoDetailsClick }
+					className={ styles.small }
+				/>
+			) }
+		</>
+	);
+};
+
+export const ConnectVideoCard = ( { id, ...restProps }: VideoCardProps ) => {
+	const { isDeleting, uploading, processing, isUpdatingPoster, data, uploadProgress } =
+		useVideo( id );
+
+	const loading = ( isDeleting || restProps?.loading ) && ! uploading && ! processing;
+	const editable = restProps?.editable && ! isDeleting && ! uploading && ! processing;
+
+	return (
+		<VideoCardError
+			id={ id }
+			{ ...restProps }
+			loading={ loading }
+			uploading={ uploading }
+			isUpdatingPoster={ isUpdatingPoster }
+			processing={ processing }
+			editable={ editable }
+			privacySetting={ data.privacySetting }
+			uploadProgress={ uploadProgress }
+		/>
+	);
+};
+
+export default ConnectVideoCard;