feat(videodetail): add playnext for movie

jwplayer · Jun 17, 2021 · 7564a88 · 7564a88
1 parent 467501c
commit 7564a88
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 30 deletions.
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
@@ -29,6 +29,7 @@ type Props = {
   play: boolean;
   startPlay: () => void;
   goBack: () => void;
+  onComplete?: () => void;
   isFavorited: boolean;
   onFavoriteButtonClick: () => void;
   poster: Poster;
@@ -49,6 +50,7 @@ const Video: React.FC<Props> = ({
   play,
   startPlay,
   goBack,
+  onComplete,
   poster,
   enableSharing,
   hasShared,
@@ -161,7 +163,12 @@ const Video: React.FC<Props> = ({
       {play && (
         <div className={styles.playerContainer} onMouseMove={mouseActivity} onClick={mouseActivity}>
           <div className={styles.player}>
-            <Cinema item={item} onPlay={() => setIsPlaying(true)} onPause={() => setIsPlaying(false)} />
+            <Cinema
+              item={item}
+              onPlay={() => setIsPlaying(true)}
+              onPause={() => setIsPlaying(false)}
+              onComplete={onComplete}
+            />
           </div>
           <div className={classNames(styles.playerContent, { [styles.hidden]: isPlaying && !mouseActive })}>
             <IconButton aria-label={t('common:back')} onClick={goBack}>

diff --git a/src/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import type { Playlist } from 'types/playlist';
+import type { Playlist, PlaylistItem } from 'types/playlist';
 
 import { PersonalShelf, PersonalShelves } from '../../enum/PersonalShelf';
 import usePlaylist, { UsePlaylistResult } from '../../hooks/usePlaylist';
@@ -14,17 +14,17 @@ type ChildrenParams = {
 
 type Props = {
   playlistId: string;
-  relatedMediaId?: string;
+  relatedItem?: PlaylistItem;
   onPlaylistUpdate?: (playlist: Playlist) => void;
   children: (childrenParams: ChildrenParams) => JSX.Element;
 };
 
-const PlaylistContainer = ({ playlistId, relatedMediaId, onPlaylistUpdate, children }: Props): JSX.Element | null => {
+const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, children }: Props): JSX.Element | null => {
   const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf);
   const { isLoading, error, data: fetchedPlaylist = { title: '', playlist: [] } }: UsePlaylistResult = usePlaylist(
     playlistId,
-    relatedMediaId,
-    !isAlternativeShelf,
+    relatedItem?.mediaid,
+    !isAlternativeShelf && !!playlistId,
   );
 
   let playlist = fetchedPlaylist;
@@ -44,6 +44,10 @@ const PlaylistContainer = ({ playlistId, relatedMediaId, onPlaylistUpdate, child
   if (!playlistId) return <p>No playlist id</p>;
   if (!playlist.playlist.length) return null;
 
+  if (relatedItem && !playlist.playlist.some(({ mediaid }) => mediaid === relatedItem.mediaid)) {
+    playlist.playlist.unshift(relatedItem);
+  }
+
   return children({ playlist, isLoading, error });
 };
 

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -51,6 +51,15 @@ const Movie = ({
 
   const onCardClick = (item: PlaylistItem) => history.push(cardUrl(item));
 
+  const playNext = (playlist: PlaylistItem[] | null) => {
+    if (!item || !playlist) return;
+
+    const index = playlist.findIndex(({ mediaid }) => mediaid === item.mediaid);
+    const nextItem = playlist[index + 1];
+
+    return nextItem && history.push(videoUrl(nextItem, searchParams.get('r'), true));
+  };
+
   const onShareClick = (): void => {
     if (!item) return;
 
@@ -93,26 +102,27 @@ const Movie = ({
           <meta property="og:video:tag" content={tag} key={tag} />
         ))}
       </Helmet>
-      <VideoComponent
-        title={item.title}
-        item={item}
-        trailerItem={trailerItem}
-        play={play}
-        startPlay={startPlay}
-        goBack={goBack}
-        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 ? (
-          <PlaylistContainer playlistId={config.recommendationsPlaylist} relatedMediaId={item.mediaid}>
-            {({ playlist, isLoading }) => (
+      <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>
@@ -125,10 +135,10 @@ const Movie = ({
                   currentCardLabel={t('currently_playing')}
                 />
               </>
-            )}
-          </PlaylistContainer>
-        ) : undefined}
-      </VideoComponent>
+            ) : undefined}
+          </VideoComponent>
+        )}
+      </PlaylistContainer>
     </React.Fragment>
   );
 };