implement new error components on grid and list

Automattic · Aug 13, 2024 · 7b2bcde · 7b2bcde
1 parent 9a0ee77
commit 7b2bcde
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/projects/packages/videopress/src/client/admin/components/video-grid/index.tsx b/projects/packages/videopress/src/client/admin/components/video-grid/index.tsx
@@ -6,6 +6,7 @@ import { Container, Col } from '@automattic/jetpack-components';
  * Internal dependencies
  */
 import VideoCard from '../video-card';
+import VideoCardError from '../video-card/error';
 import styles from './style.module.scss';
 import { VideoGridProps } from './types';
 import type React from 'react';
@@ -29,15 +30,19 @@ const VideoGrid = ( { videos, count = 6, onVideoDetailsClick, loading }: VideoGr
 				{ gridVideos.map( ( video, index ) => {
 					return (
 						<Col key={ video?.guid ?? video?.id } sm={ 4 } md={ 4 } lg={ 4 }>
-							<VideoCard
-								id={ video?.id }
-								title={ video.title }
-								thumbnail={ video?.posterImage } // TODO: we should use thumbnail when the API is ready https://github.com/Automattic/jetpack/issues/26319
-								duration={ video.duration }
-								plays={ video.plays }
-								onVideoDetailsClick={ handleClickWithIndex( index, onVideoDetailsClick ) }
-								loading={ loading }
-							/>
+							{ video.error ? (
+								<VideoCardError id={ video?.id } title={ video.title } />
+							) : (
+								<VideoCard
+									id={ video?.id }
+									title={ video.title }
+									thumbnail={ video?.posterImage } // TODO: we should use thumbnail when the API is ready https://github.com/Automattic/jetpack/issues/26319
+									duration={ video.duration }
+									plays={ video.plays }
+									onVideoDetailsClick={ handleClickWithIndex( index, onVideoDetailsClick ) }
+									loading={ loading }
+								/>
+							) }
 						</Col>
 					);
 				} ) }

diff --git a/projects/packages/videopress/src/client/admin/components/video-list/index.tsx b/projects/packages/videopress/src/client/admin/components/video-list/index.tsx
@@ -19,6 +19,7 @@ import { usePlan } from '../../hooks/use-plan';
 import useVideos from '../../hooks/use-videos';
 import Checkbox from '../checkbox';
 import ConnectVideoRow, { LocalVideoRow, Stats } from '../video-row';
+import VideoRowError from '../video-row/error';
 import styles from './style.module.scss';
 /**
  * Types
@@ -74,7 +75,9 @@ const VideoList = ( {
 				const isPrivate =
 					VIDEO_PRIVACY_LEVELS[ video.privacySetting ] === VIDEO_PRIVACY_LEVEL_PRIVATE;
 
-				return (
+				return video.error ? (
+					<VideoRowError key={ video?.guid ?? video?.id } id={ video?.id } title={ video?.title } />
+				) : (
 					<ConnectVideoRow
 						key={ video?.guid ?? video?.id }
 						id={ video?.id }