From eefa98700387b3c39f551a6ba701d50940876606 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 21 Jun 2021 11:37:33 +0200
Subject: [PATCH] feat(videodetail): player render optimizations

---
 src/components/Video/Video.module.scss        |  39 +++--
 src/components/Video/Video.tsx                |  27 +--
 .../Video/__snapshots__/Video.test.tsx.snap   |  10 +-
 src/containers/Cinema/Cinema.module.scss      |   5 +
 src/containers/Cinema/Cinema.tsx              | 144 ++++++++++++----
 .../Cinema/__snapshots__/Cinema.test.tsx.snap |   6 +-
 src/hooks/useOttAnalytics.ts                  |   8 +-
 src/hooks/useRecommendationsPlaylist.ts       |  21 +++
 src/screens/Movie/Movie.tsx                   | 154 +++++++++---------
 src/screens/Series/Series.tsx                 |   8 +-
 types/global.d.ts                             |   2 +-
 11 files changed, 274 insertions(+), 150 deletions(-)
 create mode 100644 src/containers/Cinema/Cinema.module.scss
 create mode 100644 src/hooks/useRecommendationsPlaylist.ts

diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
index 1453e4757..46ca11210 100644
--- a/src/components/Video/Video.module.scss
+++ b/src/components/Video/Video.module.scss
@@ -9,50 +9,55 @@
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
 }
 .mainPadding {
-  padding: 56px;
   @include responsive.tablet-only() {
-    padding: 24px;
-    padding-top: 34px;
+    padding: 34px 24px 24px;
   }
+
   @include responsive.mobile-only() {
     padding: 16px;
   }
-  padding-top: 37px;
-  padding-bottom: 0px;
+
+  padding: 37px 56px 0;
 }
 .main {
   display: flex;
+
   &.hidden {
     display: none;
   }
+
   &.posterNormal {
     position: relative;
   }
 }
+
 .info {
-  width: 450px;
-  min-height: 380px;
   @include responsive.tablet-only() {
     width: 350px;
   }
+
   @include responsive.mobile-only() {
     width: 100%;
     padding-top: 225px;
   }
+
+  width: 450px;
+  min-height: 380px;
 }
+
 .title {
-  font-size: 34px;
-  font-weight: 700;
-  line-height: 36px;
-  letter-spacing: 0.25px;
-  margin: 8px 0px;
   @include responsive.mobile-only() {
     font-size: 20px;
     line-height: 20px;
     letter-spacing: 0.15px;
-    margin: 0px;
   }
+
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 40px;
+  letter-spacing: 0.25px;
 }
+
 .metaContainer {
   display: flex;
   flex-direction: column;
@@ -202,7 +207,7 @@
 .playerContent {
   position: absolute;
   top: 0;
-  margin: 30px 62px;
+  margin: 24px 56px;
   max-width: 50%;
   display: flex;
 
@@ -212,16 +217,18 @@
   }
 }
 .backButton {
-  margin: 6px 0px;
+  margin-right: 24px;
   opacity: 1;
+
   > svg {
     width: 36px;
     height: 36px;
   }
 }
+
 .playerInfo {
-  margin: 0px 30px;
 }
+
 .trailerMeta {
   position: absolute;
   z-index: 1;
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
index 9c70774df..49cf530a8 100644
--- a/src/components/Video/Video.tsx
+++ b/src/components/Video/Video.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import type { PlaylistItem } from 'types/playlist';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -69,6 +69,13 @@ const Video: React.FC<Props> = ({
   const [userActive, setUserActive] = useState(true);
   const breakpoint: Breakpoint = useBreakpoint();
   const { t } = useTranslation(['video', 'common']);
+
+  const handleUserActive = useCallback(() => setUserActive(true), []);
+  const handleUserInactive = useCallback(() => setUserActive(false), []);
+  const handlePlay = useCallback(() => setIsPlaying(true), []);
+  const handlePause = useCallback(() => setIsPlaying(false), []);
+  const handleComplete = useCallback(() => onComplete && onComplete(), [onComplete]);
+
   const isLargeScreen = breakpoint >= Breakpoint.md;
   const isMobile = breakpoint === Breakpoint.xs;
   const imageSourceWidth = 640 * (window.devicePixelRatio > 1 || isLargeScreen ? 2 : 1);
@@ -160,11 +167,11 @@ const Video: React.FC<Props> = ({
             <Cinema
               item={item}
               feedId={feedId}
-              onPlay={() => setIsPlaying(true)}
-              onPause={() => setIsPlaying(false)}
-              onComplete={onComplete}
-              onUserActive={() => setUserActive(true)}
-              onUserInActive={() => setUserActive(false)}
+              onPlay={handlePlay}
+              onPause={handlePause}
+              onComplete={handleComplete}
+              onUserActive={handleUserActive}
+              onUserInActive={handleUserInactive}
             />
             <div className={classNames(styles.playerOverlay, { [styles.hidden]: isPlaying && !userActive })} />
           </div>
@@ -186,11 +193,11 @@ const Video: React.FC<Props> = ({
         <Modal onClose={onTrailerClose} closeButtonVisible={!isPlaying || userActive}>
           <Cinema
             item={trailerItem}
-            onPlay={() => setIsPlaying(true)}
-            onPause={() => setIsPlaying(false)}
+            onPlay={handlePlay}
+            onPause={handlePause}
             onComplete={onTrailerClose}
-            onUserActive={() => setUserActive(true)}
-            onUserInActive={() => setUserActive(false)}
+            onUserActive={handleUserActive}
+            onUserInActive={handleUserInactive}
             isTrailer
           />
           <div className={classNames(styles.playerOverlay, { [styles.hidden]: isPlaying && !userActive })} />
diff --git a/src/components/Video/__snapshots__/Video.test.tsx.snap b/src/components/Video/__snapshots__/Video.test.tsx.snap
index 965652296..e4b5ecbfc 100644
--- a/src/components/Video/__snapshots__/Video.test.tsx.snap
+++ b/src/components/Video/__snapshots__/Video.test.tsx.snap
@@ -129,8 +129,10 @@ exports[`<Video> renders and matches snapshot 1`] = `
         class="player"
       >
         <div
-          id="cinema"
-        />
+          class="cinema"
+        >
+          <div />
+        </div>
         <div
           class="playerOverlay"
         />
@@ -158,9 +160,7 @@ exports[`<Video> renders and matches snapshot 1`] = `
             </g>
           </svg>
         </div>
-        <div
-          class="playerInfo"
-        >
+        <div>
           <h2
             class="title"
           >
diff --git a/src/containers/Cinema/Cinema.module.scss b/src/containers/Cinema/Cinema.module.scss
new file mode 100644
index 000000000..17eb2ec45
--- /dev/null
+++ b/src/containers/Cinema/Cinema.module.scss
@@ -0,0 +1,5 @@
+.cinema {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/containers/Cinema/Cinema.tsx b/src/containers/Cinema/Cinema.tsx
index 0dc731559..04cea5b5e 100644
--- a/src/containers/Cinema/Cinema.tsx
+++ b/src/containers/Cinema/Cinema.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import type { Config } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 import type { VideoProgress } from 'types/video';
@@ -11,6 +11,8 @@ import { ConfigContext } from '../../providers/ConfigProvider';
 import { addScript } from '../../utils/dom';
 import useOttAnalytics from '../../hooks/useOttAnalytics';
 
+import styles from './Cinema.module.scss';
+
 type Props = {
   item: PlaylistItem;
   onPlay?: () => void;
@@ -22,59 +24,139 @@ type Props = {
   isTrailer?: boolean;
 };
 
-const Cinema: React.FC<Props> = ({ item, onPlay, onPause, onComplete, onUserActive, onUserInActive, feedId, isTrailer = false }: Props) => {
+const Cinema: React.FC<Props> = (
+  {
+    item,
+    onPlay,
+    onPause,
+    onComplete,
+    onUserActive,
+    onUserInActive,
+    feedId,
+    isTrailer = false,
+  }: Props,
+) => {
   const config: Config = useContext(ConfigContext);
-  const [initialized, setInitialized] = useState(false);
-  const file = item.sources?.[0]?.file;
+  const playerElementRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<JWPlayer>();
   const scriptUrl = `https://content.jwplatform.com/libraries/${config.player}.js`;
   const enableWatchHistory = config.options.enableContinueWatching && !isTrailer;
   const setPlayer = useOttAnalytics(item, feedId);
 
   const getProgress = (): VideoProgress | null => {
-    const player = window.jwplayer && (window.jwplayer('cinema') as JWPlayer);
-    if (!player) return null;
+    if (!playerRef.current) return null;
 
-    const duration = player.getDuration();
-    const progress = player.getPosition() / duration;
+    const duration = playerRef.current.getDuration();
+    const progress = playerRef.current.getPosition() / duration;
 
     return { duration, progress } as VideoProgress;
   };
+
   const { saveItem } = useWatchHistory();
   useWatchHistoryListener(() => (enableWatchHistory ? saveItem(item, getProgress) : null));
 
   useEffect(() => {
-    const getPlayer = () => window.jwplayer && (window.jwplayer('cinema') as JWPlayer);
-    const loadVideo = () => {
-      const player = getPlayer();
+    if (!config.player) {
+      return;
+    }
+
+    const loadPlaylist = () => {
+      if (!item || !playerRef.current) {
+        return;
+      }
+
+      const currentItem = playerRef.current?.getPlaylistItem() as PlaylistItem | null;
+
+      // we already loaded this item
+      if (currentItem && currentItem.mediaid === item.mediaid) {
+        return;
+      }
+
+      // load new item
+      playerRef.current.load([{
+        mediaid: item.mediaid,
+        image: item.image,
+        title: item.title,
+        description: item.description,
+        sources: item.sources.map(source => ({ ...source })),
+      }]);
+    };
+
+    const initializePlayer = () => {
+      if (!window.jwplayer || !playerElementRef.current) return;
+
       const { watchHistory } = watchHistoryStore.getRawState();
       const watchHistoryItem = watchHistory.find(({ mediaid }) => mediaid === item.mediaid);
       let applyWatchHistory = !!watchHistory && enableWatchHistory;
 
-      player.setup({ file, image: item.image, title: item.title, autostart: 'viewable' });
-      setPlayer(player);
-      player.on('play', () => onPlay && onPlay());
-      player.on('pause', () => onPause && onPause());
-      player.on('beforePlay', () => {
-        if (applyWatchHistory) {
-          applyWatchHistory = false; // Only the first time beforePlay
-          const { progress, duration } = watchHistoryItem || {};
-          if (progress && duration && progress > VideoProgressMinMax.Min && progress < VideoProgressMinMax.Max) {
-            player.seek(duration * progress);
-          }
-        }
+      playerRef.current = window.jwplayer(playerElementRef.current);
+
+      playerRef.current.setup({
+        playlist: [{
+          mediaid: item.mediaid,
+          image: item.image,
+          title: item.title,
+          description: item.description,
+          sources: item.sources.map(source => ({ ...source })),
+        }],
+        aspect: false,
+        width: '100%',
+        height: '100%',
+        mute: false,
+        autostart: true,
       });
-      player.on('complete', () => onComplete && onComplete());
-      player.on('userActive', () => onUserActive && onUserActive());
-      player.on('userInactive', () => onUserInActive && onUserInActive());
+
+      setPlayer(playerRef.current);
+
+      const handlePlay = () => onPlay && onPlay();
+      const handlePause = () => onPause && onPause();
+      const handleComplete = () => onComplete && onComplete();
+      const handleUserActive = () => onUserActive && onUserActive();
+      const handleUserInactive = () => onUserInActive && onUserInActive();
+
+      const handleBeforePlay = () => {
+        if (!applyWatchHistory) {
+          return;
+        }
+
+        applyWatchHistory = false; // Only the first time beforePlay
+        const { progress, duration } = watchHistoryItem || {};
+
+        if (playerRef.current && progress && duration && progress > VideoProgressMinMax.Min && progress < VideoProgressMinMax.Max) {
+          playerRef.current.seek(duration * progress);
+        }
+      };
+
+      playerRef.current.on('play', handlePlay);
+      playerRef.current.on('pause', handlePause);
+      playerRef.current.on('complete', handleComplete);
+
+      playerRef.current.on('beforePlay', handleBeforePlay);
+
+      playerRef.current.on('userActive', handleUserActive);
+      playerRef.current.on('userInactive', handleUserInactive);
     };
 
-    if (config.player && !initialized) {
-      getPlayer() ? loadVideo() : addScript(scriptUrl, loadVideo);
-      setInitialized(true);
+    if (playerRef.current) {
+      return loadPlaylist();
     }
-  }, [item, onPlay, onPause, onComplete, onUserActive, onUserInActive, config.player, file, scriptUrl, initialized, enableWatchHistory, setPlayer]);
 
-  return <div id="cinema" />;
+    window.jwplayer ? initializePlayer() : addScript(scriptUrl, initializePlayer);
+  }, [item, onPlay, onPause, onUserActive, onUserInActive, onComplete, config.player, scriptUrl, enableWatchHistory, setPlayer]);
+
+  useEffect(() => {
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.remove();
+      }
+    };
+  }, []);
+
+  return (
+    <div className={styles.cinema}>
+      <div ref={playerElementRef} />
+    </div>
+  );
 };
 
 export default Cinema;
diff --git a/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap b/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
index fa6311ed3..e33773a0c 100644
--- a/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
+++ b/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
@@ -3,7 +3,9 @@
 exports[`<Cinema> renders and matches snapshot 1`] = `
 <div>
   <div
-    id="cinema"
-  />
+    class="cinema"
+  >
+    <div />
+  </div>
 </div>
 `;
diff --git a/src/hooks/useOttAnalytics.ts b/src/hooks/useOttAnalytics.ts
index bf4dbf71d..0f29feb37 100644
--- a/src/hooks/useOttAnalytics.ts
+++ b/src/hooks/useOttAnalytics.ts
@@ -5,14 +5,14 @@ import type { PlaylistItem } from '../../types/playlist';
 
 const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
   const config = useContext(ConfigContext);
-  const [player, setPlayer] = useState<jwplayer.JWPlayer>();
+  const [player, setPlayer] = useState<jwplayer.JWPlayer | null>(null);
 
   useEffect(() => {
     if (!window.jwpltx || !config.analyticsToken || !player || !item) {
       return;
     }
 
-    const readyHandler = () => {
+    const playlistItemHandler = () => {
       if (!config.analyticsToken) return;
 
       window.jwpltx.ready(
@@ -36,13 +36,13 @@ const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
       window.jwpltx.adImpression();
     };
 
-    player.on('ready', readyHandler);
+    player.on('playlistItem', playlistItemHandler);
     player.on('complete', completeHandler);
     player.on('time', timeHandler);
     player.on('adImpression', adImpressionHandler);
 
     return () => {
-      player.off('ready', readyHandler);
+      player.off('playlistItem', playlistItemHandler);
       player.off('complete', completeHandler);
       player.off('time', timeHandler);
       player.off('adImpression', adImpressionHandler);
diff --git a/src/hooks/useRecommendationsPlaylist.ts b/src/hooks/useRecommendationsPlaylist.ts
new file mode 100644
index 000000000..6ee849025
--- /dev/null
+++ b/src/hooks/useRecommendationsPlaylist.ts
@@ -0,0 +1,21 @@
+import { UseBaseQueryResult, useQuery } from 'react-query';
+import type { Playlist, PlaylistItem } from 'types/playlist';
+
+import { getPlaylistById } from '../services/api.service';
+
+export type UseRecommendationsPlaylistResult<TData = Playlist, TError = unknown> = UseBaseQueryResult<TData, TError>;
+
+export default function useRecommendedPlaylist (playlistId: string, relatedItem?: PlaylistItem, enabled: boolean = true): UseRecommendationsPlaylistResult {
+  return useQuery(['recommendationsPlaylist', playlistId, relatedItem?.mediaid],
+    () => getPlaylistById(playlistId, relatedItem?.mediaid).then(playlist => {
+      if (playlist?.playlist && relatedItem && !playlist.playlist.some(item => item.mediaid === relatedItem.mediaid)) {
+        playlist.playlist.unshift(relatedItem);
+      }
+
+      return playlist;
+    }),
+    {
+      enabled: !!playlistId && !!relatedItem && enabled,
+      retry: false,
+    });
+}
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index ff2024823..3566069f8 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -1,10 +1,9 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import { useFavorites } from '../../stores/FavoritesStore';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
@@ -17,6 +16,7 @@ import useMedia from '../../hooks/useMedia';
 import { generateMovieJSONLD } from '../../utils/structuredData';
 import { copyToClipboard } from '../../utils/dom';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
+import useRecommendedPlaylist from '../../hooks/useRecommendationsPlaylist';
 
 import styles from './Movie.module.scss';
 
@@ -24,16 +24,18 @@ type MovieRouteParams = {
   id: string;
 };
 
-const Movie = ({
-  match: {
-    params: { id },
-  },
-  location,
-}: RouteComponentProps<MovieRouteParams>): JSX.Element => {
+const Movie = (
+  {
+    match: {
+      params: { id },
+    },
+    location,
+  }: RouteComponentProps<MovieRouteParams>,
+): JSX.Element => {
   const config = useContext(ConfigContext);
   const history = useHistory();
   const { t } = useTranslation('video');
-  const searchParams = new URLSearchParams(location.search);
+  const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
   const { isLoading, error, data: item } = useMedia(id);
   const { data: trailerItem } = useMedia(item?.trailerId || '');
 
@@ -55,15 +57,6 @@ 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;
 
@@ -81,10 +74,21 @@ const Movie = ({
     return () => {
       if (play) document.body.style.overflowY = '';
     };
-  }, [play])
+  }, [play]);
+
+  const { data: playlist } = useRecommendedPlaylist(config.recommendationsPlaylist || '', item);
+
+  const handleComplete = useCallback(() => {
+    if (!id || !playlist) return;
+
+    const index = playlist.playlist.findIndex(({ mediaid }) => mediaid === id);
+    const nextItem = playlist.playlist[index + 1];
+
+    return nextItem && history.push(videoUrl(nextItem, searchParams.get('r'), true));
+  }, [history, id, playlist, searchParams]);
 
   if (isLoading) return <LoadingOverlay />;
-  if (error || !item) return <ErrorPage title="Video not found!" />;
+  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;
@@ -93,66 +97,62 @@ const Movie = ({
     <React.Fragment>
       <Helmet>
         <title>{pageTitle}</title>
-        <link rel="canonical" href={canonicalUrl} />
-        <meta name="description" content={item.description} />
-        <meta property="og:description" content={item.description} />
-        <meta property="og:title" content={pageTitle} />
-        <meta property="og:type" content="video.other" />
-        {item.image && <meta property="og:image" content={item.image?.replace(/^https:/, 'http:')} />}
-        {item.image && <meta property="og:image:secure_url" content={item.image?.replace(/^http:/, 'https:')} />}
-        <meta property="og:image:width" content={item.image ? '720' : ''} />
-        <meta property="og:image:height" content={item.image ? '406' : ''} />
-        <meta name="twitter:title" content={pageTitle} />
-        <meta name="twitter:description" content={item.description} />
-        <meta name="twitter:image" content={item.image} />
-        <meta property="og:video" content={canonicalUrl.replace(/^https:/, 'http:')} />
-        <meta property="og:video:secure_url" content={canonicalUrl.replace(/^http:/, 'https:')} />
-        <meta property="og:video:type" content="text/html" />
-        <meta property="og:video:width" content="1280" />
-        <meta property="og:video:height" content="720" />
+        <link rel='canonical' href={canonicalUrl} />
+        <meta name='description' content={item.description} />
+        <meta property='og:description' content={item.description} />
+        <meta property='og:title' content={pageTitle} />
+        <meta property='og:type' content='video.other' />
+        {item.image && <meta property='og:image' content={item.image?.replace(/^https:/, 'http:')} />}
+        {item.image && <meta property='og:image:secure_url' content={item.image?.replace(/^http:/, 'https:')} />}
+        <meta property='og:image:width' content={item.image ? '720' : ''} />
+        <meta property='og:image:height' content={item.image ? '406' : ''} />
+        <meta name='twitter:title' content={pageTitle} />
+        <meta name='twitter:description' content={item.description} />
+        <meta name='twitter:image' content={item.image} />
+        <meta property='og:video' content={canonicalUrl.replace(/^https:/, 'http:')} />
+        <meta property='og:video:secure_url' content={canonicalUrl.replace(/^http:/, 'https:')} />
+        <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} />
+          <meta property='og:video:tag' content={tag} key={tag} />
         ))}
-        {item ? <script type="application/ld+json">{generateMovieJSONLD(item)}</script> : null}
+        {item ? <script type='application/ld+json'>{generateMovieJSONLD(item)}</script> : null}
       </Helmet>
-      <PlaylistContainer playlistId={config?.recommendationsPlaylist || ''} relatedItem={item}>
-        {({ playlist }) => (
-          <VideoComponent
-            title={item.title}
-            item={item}
-            feedId={feedId ?? undefined}
-            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>
+      <VideoComponent
+        title={item.title}
+        item={item}
+        feedId={feedId ?? undefined}
+        trailerItem={trailerItem}
+        play={play}
+        startPlay={startPlay}
+        goBack={goBack}
+        onComplete={handleComplete}
+        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))}
+      >
+        {playlist ? (
+          <>
+            <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>
     </React.Fragment>
   );
 };
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index 9c2a8e8d3..5cf1d0c70 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
@@ -62,14 +62,14 @@ const Series = ({
 
   const onCardClick = (item: PlaylistItem) => seriesPlaylist && history.push(episodeURL(seriesPlaylist, item.mediaid));
 
-  const playNext = () => {
+  const handleComplete = useCallback(() => {
     if (!item || !seriesPlaylist) return;
 
     const index = seriesPlaylist.playlist.findIndex(({ mediaid }) => mediaid === item.mediaid);
     const nextItem = seriesPlaylist.playlist[index + 1];
 
     return nextItem && history.push(episodeURL(seriesPlaylist, nextItem.mediaid, true));
-  };
+  }, [history, item, seriesPlaylist]);
 
   const onShareClick = (): void => {
     if (!item) return;
@@ -142,7 +142,7 @@ const Series = ({
         play={play}
         startPlay={startPlay}
         goBack={goBack}
-        onComplete={() => playNext()}
+        onComplete={handleComplete}
         poster={posterFading ? 'fading' : 'normal'}
         enableSharing={enableSharing}
         hasShared={hasShared}
diff --git a/types/global.d.ts b/types/global.d.ts
index 0c861e1ba..8030da544 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,6 +1,6 @@
 interface Window {
   configLocation: configLocation;
   configId: string;
-  jwplayer: (id: string) => unknown;
+  jwplayer?: jwplayer.JWPlayerStatic;
   jwpltx: Jwpltx;
 }