Merge branch 'develop' into feat/video-detail-loading-screen

public/index.html

@@ -53,6 +53,5 @@
   }
 </script>
 <script type="module" src="/dist/index.js"></script>
-<script type="module" src="/jwpltx.js"></script>
 </body>
 </html>

src/components/Video/Video.tsx

@@ -25,6 +25,7 @@ type Poster = 'fading' | 'normal';
 type Props = {
   title: string;
   item: PlaylistItem;
+  feedId?: string;
   trailerItem?: PlaylistItem;
   play: boolean;
   startPlay: () => void;
@@ -46,6 +47,7 @@ type Props = {
 const Video: React.FC<Props> = ({
   title,
   item,
+  feedId,
   trailerItem,
   play,
   startPlay,
@@ -165,6 +167,7 @@ const Video: React.FC<Props> = ({
           <div className={styles.player}>
             <Cinema
               item={item}
+              feedId={feedId}
               onPlay={() => setIsPlaying(true)}
               onPause={() => setIsPlaying(false)}
               onComplete={onComplete}

src/containers/Cinema/Cinema.tsx

@@ -17,16 +17,17 @@ type Props = {
   onPlay?: () => void;
   onPause?: () => void;
   onComplete?: () => void;
+  feedId?: string;
   isTrailer?: boolean;
 };
 
-const Cinema: React.FC<Props> = ({ item, onPlay, onPause, onComplete, isTrailer = false }: Props) => {
+const Cinema: React.FC<Props> = ({ item, onPlay, onPause, onComplete, feedId, isTrailer = false }: Props) => {
   const config: Config = useContext(ConfigContext);
   const [initialized, setInitialized] = useState(false);
   const file = item.sources?.[0]?.file;
   const scriptUrl = `https://content.jwplatform.com/libraries/${config.player}.js`;
   const enableWatchHistory = config.options.enableContinueWatching && !isTrailer;
-  const setPlayer = useOttAnalytics(item);
+  const setPlayer = useOttAnalytics(item, feedId);
 
   const getProgress = (): VideoProgress | null => {
     const player = window.jwplayer && (window.jwplayer('cinema') as jwplayer.JWPlayer);

src/hooks/useOttAnalytics.ts

@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react';
 import { ConfigContext } from '../providers/ConfigProvider';
 import type { PlaylistItem } from '../../types/playlist';
 
-const useOttAnalytics = (item?: PlaylistItem) => {
+const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
   const config = useContext(ConfigContext);
   const [player, setPlayer] = useState<jwplayer.JWPlayer>();
 
@@ -12,41 +12,41 @@ const useOttAnalytics = (item?: PlaylistItem) => {
       return;
     }
 
-    player.on('ready', () => {
+    const readyHandler = () => {
       if (!config.analyticsToken) return;
 
       window.jwpltx.ready(
         config.analyticsToken,
         window.location.hostname,
-        item.feedid,
+        feedId,
         item.mediaid,
         item.title
       );
-    });
-
-    player.on('ready', () => {
-      if (!config.analyticsToken) return;
-
-      window.jwpltx.ready(
-        config.analyticsToken,
-        window.location.hostname,
-        item.feedid,
-        item.mediaid,
-        item.title
-      );
-    });
+    }
 
-    player.on('complete', () => {
+    const completeHandler = () => {
       window.jwpltx.complete();
-    });
+    };
 
-    player.on('time', ({ position, duration  }) => {
+    const timeHandler = ({ position, duration }: jwplayer.TimeParam) => {
       window.jwpltx.time(position, duration);
-    });
+    };
 
-    player.on('adImpression', () => {
+    const adImpressionHandler = () => {
       window.jwpltx.adImpression();
-    });
+    };
+
+    player.on('ready', readyHandler);
+    player.on('complete', completeHandler);
+    player.on('time', timeHandler);
+    player.on('adImpression', adImpressionHandler);
+
+    return () => {
+      player.off('ready', readyHandler);
+      player.off('complete', completeHandler);
+      player.off('time', timeHandler);
+      player.off('adImpression', adImpressionHandler);
+    }
   }, [player]);
 
   return setPlayer;

src/providers/ConfigProvider.tsx

@@ -5,6 +5,7 @@ import { calculateContrastColor } from '../utils/common';
 import loadConfig, { validateConfig } from '../services/config.service';
 import type { Config, Options } from '../../types/Config';
 import LoadingOverlay from '../components/LoadingOverlay/LoadingOverlay';
+import { addScript } from '../utils/dom';
 
 const defaultConfig: Config = {
   id: '',
@@ -49,6 +50,7 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
         .then((configValidated) => {
           setConfig(() => merge({}, defaultConfig, configValidated));
           setCssVariables(configValidated.options);
+          maybeInjectAnalyticsLibrary(config);
           onLoading(false);
           setLoading(false);
           onValidationCompleted(config);
@@ -79,6 +81,14 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     }
   };
 
+  const maybeInjectAnalyticsLibrary = (config: Config) => {
+    if (!config.analyticsToken) return;
+
+    return new Promise<void>((resolve) => {
+      addScript('/jwpltx.js', () => resolve());
+    });
+  } 
+
   return (
     <ConfigContext.Provider value={config}>
       {loading ? <LoadingOverlay /> : null}

src/screens/Movie/Movie.tsx

@@ -39,6 +39,7 @@ const Movie = ({
 
   const { hasItem, saveItem, removeItem } = useFavorites();
   const play = searchParams.get('play') === '1';
+  const feedId = searchParams.get('l');
   const posterFading: boolean = config ? config.options.posterFading === true : false;
 
   const [hasShared, setHasShared] = useState<boolean>(false);
@@ -112,6 +113,7 @@ const Movie = ({
           <VideoComponent
             title={item.title}
             item={item}
+            feedId={feedId ?? undefined}
             trailerItem={trailerItem}
             play={play}
             startPlay={startPlay}

src/screens/Series/Series.tsx

@@ -46,6 +46,7 @@ const Series = ({
 
   const { hasItem, saveItem, removeItem } = useFavorites();
   const play = searchParams.get('play') === '1';
+  const feedId = searchParams.get('l');
   const posterFading: boolean = config ? config.options.posterFading === true : false;
 
   const [hasShared, setHasShared] = useState<boolean>(false);
@@ -124,6 +125,7 @@ const Series = ({
       <VideoComponent
         title={seriesPlaylist.title}
         item={item}
+        feedId={feedId ?? undefined}
         trailerItem={trailerItem}
         play={play}
         startPlay={startPlay}