feat(videodetail): add loading and error screen

jwplayer · Jun 18, 2021 · 808ba61 · 808ba61
1 parent 8e661fe
commit 808ba61
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 87 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';
 
@@ -73,9 +75,7 @@ const Movie = ({
     setTimeout(() => setHasShared(false), 2000);
   };
 
-  if (isLoading) return <p>Loading...</p>;
-  if (error) return <p>Error loading list</p>;
-  if (!item) return <p>Can not find medium</p>;
+  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;
@@ -101,45 +101,49 @@ const Movie = ({
         <meta property="og:video:type" content="text/html" />
         <meta property="og:video:width" content="1280" />
         <meta property="og:video:height" content="720" />
-        {item.tags.split(',').map(tag => <meta property="og:video:tag" content={tag} key={tag} />)}
+        {item.tags.split(',').map((tag) => <meta property="og:video:tag" content={tag} key={tag} />)}
         {item ? <script type="application/ld+json">{generateMovieJSONLD(item)}</script> : null}
       </Helmet>
       <PlaylistContainer playlistId={config?.recommendationsPlaylist || ''} relatedItem={item}>
-        {({ playlist, isLoading }) => (
-          <VideoComponent
-            title={item.title}
-            item={item}
-            trailerItem={trailerItem}
-            play={play}
-            startPlay={startPlay}
-            goBack={goBack}
-            onComplete={() => playNext(playlist.playlist)}
-            poster={posterFading ? 'fading' : 'normal'}
-            enableSharing={enableSharing}
-            hasShared={hasShared}
-            onShareClick={onShareClick}
-            playTrailer={playTrailer}
-            onTrailerClick={() => setPlayTrailer(true)}
-            onTrailerClose={() => setPlayTrailer(false)}
-            isFavorited={isFavorited}
-            onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
-          >
-            {config.recommendationsPlaylist ? (
-              <>
-                <div className={styles.related}>
-                  <h3>{playlist.title}</h3>
-                </div>
-                <CardGrid
-                  playlist={playlist.playlist}
-                  onCardClick={onCardClick}
-                  isLoading={isLoading}
-                  currentCardItem={item}
-                  currentCardLabel={t('currently_playing')}
-                />
-              </>
-            ) : undefined}
-          </VideoComponent>
-        )}
+        {({ playlist }) =>
+          isLoading ? (
+            <LoadingOverlay />
+          ) : (
+            <VideoComponent
+              title={item.title}
+              item={item}
+              trailerItem={trailerItem}
+              play={play}
+              startPlay={startPlay}
+              goBack={goBack}
+              onComplete={() => playNext(playlist.playlist)}
+              poster={posterFading ? 'fading' : 'normal'}
+              enableSharing={enableSharing}
+              hasShared={hasShared}
+              onShareClick={onShareClick}
+              playTrailer={playTrailer}
+              onTrailerClick={() => setPlayTrailer(true)}
+              onTrailerClose={() => setPlayTrailer(false)}
+              isFavorited={isFavorited}
+              onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
+            >
+              {config.recommendationsPlaylist ? (
+                <>
+                  <div className={styles.related}>
+                    <h3>{playlist.title}</h3>
+                  </div>
+                  <CardGrid
+                    playlist={playlist.playlist}
+                    onCardClick={onCardClick}
+                    isLoading={isLoading}
+                    currentCardItem={item}
+                    currentCardLabel={t('currently_playing')}
+                  />
+                </>
+              ) : undefined}
+            </VideoComponent>
+          )
+        }
       </PlaylistContainer>
     </React.Fragment>
   );

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';
 
@@ -93,12 +95,14 @@ const Series = ({
     }
   }, [history, searchParams, seriesPlaylist]);
 
-  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 (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 = seriesPlaylist && item ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}` : window.location.href;
+  const canonicalUrl =
+    seriesPlaylist && item
+      ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}`
+      : window.location.href;
 
   return (
     <React.Fragment>
@@ -121,51 +125,59 @@ const Series = ({
         <meta property="og:video:type" content="text/html" />
         <meta property="og:video:width" content="1280" />
         <meta property="og:video:height" content="720" />
-        {item.tags.split(',').map(tag => <meta property="og:video:tag" content={tag} key={tag} />)}
-        {seriesPlaylist && item ? <script type="application/ld+json">{generateEpisodeJSONLD(seriesPlaylist, item)}</script> : null}
+        {item.tags.split(',').map((tag) => (
+          <meta property="og:video:tag" content={tag} key={tag} />
+        ))}
+        {seriesPlaylist && item ? (
+          <script type="application/ld+json">{generateEpisodeJSONLD(seriesPlaylist, item)}</script>
+        ) : null}
       </Helmet>
-      <VideoComponent
-        title={seriesPlaylist.title}
-        item={item}
-        trailerItem={trailerItem}
-        play={play}
-        startPlay={startPlay}
-        goBack={goBack}
-        onComplete={() => playNext()}
-        poster={posterFading ? 'fading' : 'normal'}
-        enableSharing={enableSharing}
-        hasShared={hasShared}
-        onShareClick={onShareClick}
-        playTrailer={playTrailer}
-        onTrailerClick={() => setPlayTrailer(true)}
-        onTrailerClose={() => setPlayTrailer(false)}
-        isFavorited={isFavorited}
-        onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
-        isSeries
-      >
-        <>
-          <div className={styles.episodes}>
-            <h3>{t('episodes')}</h3>
-            {filters.length > 1 && (
-              <Filter
-                name="categories"
-                value={seasonFilter}
-                valuePrefix="Season "
-                defaultLabel="All"
-                options={filters}
-                setValue={setSeasonFilter}
-              />
-            )}
-          </div>
-          <CardGrid
-            playlist={filteredPlaylist}
-            onCardClick={onCardClick}
-            isLoading={isLoading}
-            currentCardItem={item}
-            currentCardLabel={t('current_episode')}
-          />
-        </>
-      </VideoComponent>
+      {isLoading || playlistIsLoading ? (
+        <LoadingOverlay />
+      ) : (
+        <VideoComponent
+          title={seriesPlaylist.title}
+          item={item}
+          trailerItem={trailerItem}
+          play={play}
+          startPlay={startPlay}
+          goBack={goBack}
+          onComplete={() => playNext()}
+          poster={posterFading ? 'fading' : 'normal'}
+          enableSharing={enableSharing}
+          hasShared={hasShared}
+          onShareClick={onShareClick}
+          playTrailer={playTrailer}
+          onTrailerClick={() => setPlayTrailer(true)}
+          onTrailerClose={() => setPlayTrailer(false)}
+          isFavorited={isFavorited}
+          onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
+          isSeries
+        >
+          <>
+            <div className={styles.episodes}>
+              <h3>{t('episodes')}</h3>
+              {filters.length > 1 && (
+                <Filter
+                  name="categories"
+                  value={seasonFilter}
+                  valuePrefix="Season "
+                  defaultLabel="All"
+                  options={filters}
+                  setValue={setSeasonFilter}
+                />
+              )}
+            </div>
+            <CardGrid
+              playlist={filteredPlaylist}
+              onCardClick={onCardClick}
+              isLoading={isLoading}
+              currentCardItem={item}
+              currentCardLabel={t('current_episode')}
+            />
+          </>
+        </VideoComponent>
+      )}
     </React.Fragment>
   );
 };