Merge pull request #65 from Videodock/feat/video-detail-loading-and-e…

…rror Feat / video detail loading and error
jwplayer · Jun 20, 2021 · 23d0284 · 23d0284
2 parents f5a46c2 + e4edfa0
commit 23d0284
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 25 deletions.
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -11,10 +11,12 @@ import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { cardUrl, movieURL, videoUrl } from '../../utils/formatting';
 import type { PlaylistItem } from '../../../types/playlist';
 import VideoComponent from '../../components/Video/Video';
+import ErrorPage from '../../components/ErrorPage/ErrorPage';
 import CardGrid from '../../components/CardGrid/CardGrid';
 import useMedia from '../../hooks/useMedia';
 import { generateMovieJSONLD } from '../../utils/structuredData';
 import { copyToClipboard } from '../../utils/dom';
+import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 
 import styles from './Movie.module.scss';
 
@@ -79,11 +81,10 @@ const Movie = ({
     return () => {
       if (play) document.body.style.overflowY = '';
     };
-  }, [play]);
+  }, [play])
 
-  if (isLoading) return <p>Loading...</p>;
-  if (error) return <p>Error loading list</p>;
-  if (!item) return <p>Can not find medium</p>;
+  if (isLoading) return <LoadingOverlay />;
+  if (error || !item) return <ErrorPage title="Video not found!" />;
 
   const pageTitle = `${item.title} - ${config.siteName}`;
   const canonicalUrl = item ? `${window.location.origin}${movieURL(item)}` : window.location.href;
@@ -115,7 +116,7 @@ const Movie = ({
         {item ? <script type="application/ld+json">{generateMovieJSONLD(item)}</script> : null}
       </Helmet>
       <PlaylistContainer playlistId={config?.recommendationsPlaylist || ''} relatedItem={item}>
-        {({ playlist, isLoading }) => (
+        {({ playlist }) => (
           <VideoComponent
             title={item.title}
             item={item}

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -14,9 +14,11 @@ import type { PlaylistItem } from '../../../types/playlist';
 import VideoComponent from '../../components/Video/Video';
 import useMedia from '../../hooks/useMedia';
 import usePlaylist from '../../hooks/usePlaylist';
+import ErrorPage from '../../components/ErrorPage/ErrorPage';
 import { generateEpisodeJSONLD } from '../../utils/structuredData';
 import { copyToClipboard } from '../../utils/dom';
 import { filterSeries, getFiltersFromSeries } from '../../utils/collection';
+import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 
 import styles from './Series.module.scss';
 
@@ -34,20 +36,13 @@ const Series = ({
   const history = useHistory();
   const { t } = useTranslation('video');
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
-  const {
-    isLoading: playlistIsLoading,
-    error: playlistError,
-    data: seriesPlaylist = { title: '', playlist: [] },
-  } = usePlaylist(id, undefined, true, false);
+  const { isLoading: playlistIsLoading, error: playlistError, data: seriesPlaylist = { title: '', playlist: [] } } = usePlaylist(id, undefined, true, false);
   const { isLoading, error, data: item } = useMedia(searchParams.get('e') || '');
   const { data: trailerItem } = useMedia(item?.trailerId || '');
 
   const [seasonFilter, setSeasonFilter] = useState<string>('');
   const filters = getFiltersFromSeries(seriesPlaylist.playlist);
-  const filteredPlaylist = useMemo(() => filterSeries(seriesPlaylist.playlist, seasonFilter), [
-    seriesPlaylist,
-    seasonFilter,
-  ]);
+  const filteredPlaylist = useMemo(() => filterSeries(seriesPlaylist.playlist, seasonFilter), [seriesPlaylist, seasonFilter]);
 
   const { hasItem, saveItem, removeItem } = useFavorites();
   const play = searchParams.get('play') === '1';
@@ -101,9 +96,9 @@ const Series = ({
     };
   }, [play]);
 
-  if (isLoading || playlistIsLoading) return <p>Loading...</p>;
-  if (error || playlistError) return <p>Error loading list</p>;
-  if (!seriesPlaylist || !item) return <p>Can not find medium</p>;
+  if (isLoading || playlistIsLoading) return <LoadingOverlay />;
+  if (error || !item) return <ErrorPage title="Episode not found!" />;
+  if (playlistError || !seriesPlaylist) return <ErrorPage title="Series not found!" />;
 
   const pageTitle = `${item.title} - ${config.siteName}`;
   const canonicalUrl =
@@ -163,14 +158,7 @@ const Series = ({
           <div className={styles.episodes}>
             <h3>{t('episodes')}</h3>
             {filters.length > 1 && (
-              <Filter
-                name="categories"
-                value={seasonFilter}
-                valuePrefix="Season "
-                defaultLabel="All"
-                options={filters}
-                setValue={setSeasonFilter}
-              />
+              <Filter name="categories" value={seasonFilter} valuePrefix="Season " defaultLabel="All" options={filters} setValue={setSeasonFilter} />
             )}
           </div>
           <CardGrid