fix(inlineplayer): display correct video title after play next clicked …

…BC-229

src/components/Player/Player.tsx

@@ -23,6 +23,7 @@ type Props = {
   onBeforePlay?: () => void;
   onFirstFrame?: () => void;
   onRemove?: () => void;
+  onNext?: () => void;
   onPlaylistItem?: () => void;
   onPlaylistItemCallback?: (item: PlaylistItem) => Promise<undefined | PlaylistItem>;
   startTime?: number;
@@ -43,6 +44,7 @@ const Player: React.FC<Props> = ({
   onRemove,
   onPlaylistItem,
   onPlaylistItemCallback,
+  onNext,
   feedId,
   startTime = 0,
   autostart,
@@ -65,6 +67,7 @@ const Player: React.FC<Props> = ({
   const handleRemove = useEventCallback(onRemove);
   const handlePlaylistItem = useEventCallback(onPlaylistItem);
   const handlePlaylistItemCallback = useEventCallback(onPlaylistItemCallback);
+  const handleNextClick = useEventCallback(onNext);
   const handleReady = useEventCallback(() => onReady && onReady(playerRef.current));
 
   const attachEvents = useCallback(() => {
@@ -78,6 +81,7 @@ const Player: React.FC<Props> = ({
     playerRef.current?.on('firstFrame', handleFirstFrame);
     playerRef.current?.on('remove', handleRemove);
     playerRef.current?.on('playlistItem', handlePlaylistItem);
+    playerRef.current?.on('nextClick', handleNextClick);
     playerRef.current?.setPlaylistItemCallback(handlePlaylistItemCallback);
   }, [
     handleReady,
@@ -90,6 +94,7 @@ const Player: React.FC<Props> = ({
     handleFirstFrame,
     handleRemove,
     handlePlaylistItem,
+    handleNextClick,
     handlePlaylistItemCallback,
   ]);
 

src/containers/Cinema/Cinema.tsx

@@ -16,6 +16,7 @@ type Props = {
   onPause?: () => void;
   onComplete?: () => void;
   onClose?: () => void;
+  onNext?: () => void;
   feedId?: string;
   title: string;
   primaryMetadata: React.ReactNode;
@@ -35,6 +36,7 @@ const Cinema: React.FC<Props> = ({
   onPause,
   onComplete,
   onClose,
+  onNext,
   feedId,
   liveStartDateTime,
   liveEndDateTime,
@@ -60,6 +62,10 @@ const Cinema: React.FC<Props> = ({
     onComplete && onComplete();
   }, [onComplete]);
 
+  const handleNext = useCallback(() => {
+    onNext && onNext();
+  }, [onNext]);
+
   const handleUserActive = useCallback(() => setUserActive(true), []);
   const handleUserInactive = useCallback(() => setUserActive(false), []);
 
@@ -87,6 +93,7 @@ const Cinema: React.FC<Props> = ({
           onComplete={handleComplete}
           onUserActive={handleUserActive}
           onUserInActive={handleUserInactive}
+          onNext={handleNext}
           liveEndDateTime={liveEndDateTime}
           liveFromBeginning={liveFromBeginning}
           liveStartDateTime={liveStartDateTime}

src/containers/PlayerContainer/PlayerContainer.tsx

@@ -18,6 +18,7 @@ type Props = {
   onClose?: () => void;
   onUserActive?: () => void;
   onUserInActive?: () => void;
+  onNext?: () => void;
   feedId?: string;
   liveStartDateTime?: string | null;
   liveEndDateTime?: string | null;
@@ -33,6 +34,7 @@ const PlayerContainer: React.FC<Props> = ({
   onComplete,
   onUserActive,
   onUserInActive,
+  onNext,
   liveEndDateTime,
   liveFromBeginning,
   liveStartDateTime,
@@ -125,6 +127,7 @@ const PlayerContainer: React.FC<Props> = ({
       onRemove={handleRemove}
       onUserActive={onUserActive}
       onUserInActive={onUserInActive}
+      onNext={onNext}
       onPlaylistItemCallback={handlePlaylistItemCallback}
       startTime={startTime}
       autostart={autostart}

src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx

@@ -168,6 +168,7 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
               primaryMetadata={primaryMetadata}
               onComplete={handleComplete}
               feedId={feedId ?? undefined}
+              onNext={handleComplete}
             />
           )
         }