diff --git a/public/index.html b/public/index.html index e78f99a8e..6597046db 100644 --- a/public/index.html +++ b/public/index.html @@ -53,6 +53,5 @@ } - diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx index 4568a3929..a3c5b8630 100644 --- a/src/components/Video/Video.tsx +++ b/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 = ({ title, item, + feedId, trailerItem, play, startPlay, @@ -165,6 +167,7 @@ const Video: React.FC = ({
setIsPlaying(true)} onPause={() => setIsPlaying(false)} onComplete={onComplete} diff --git a/src/containers/Cinema/Cinema.tsx b/src/containers/Cinema/Cinema.tsx index aa31d82dd..603355c0a 100644 --- a/src/containers/Cinema/Cinema.tsx +++ b/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 = ({ item, onPlay, onPause, onComplete, isTrailer = false }: Props) => { +const Cinema: React.FC = ({ 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); diff --git a/src/hooks/useOttAnalytics.ts b/src/hooks/useOttAnalytics.ts index bd98c75b7..bf4dbf71d 100644 --- a/src/hooks/useOttAnalytics.ts +++ b/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(); @@ -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; diff --git a/src/providers/ConfigProvider.tsx b/src/providers/ConfigProvider.tsx index 8ddc05478..19ed1a9cb 100644 --- a/src/providers/ConfigProvider.tsx +++ b/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 = ({ .then((configValidated) => { setConfig(() => merge({}, defaultConfig, configValidated)); setCssVariables(configValidated.options); + maybeInjectAnalyticsLibrary(config); onLoading(false); setLoading(false); onValidationCompleted(config); @@ -79,6 +81,14 @@ const ConfigProvider: FunctionComponent = ({ } }; + const maybeInjectAnalyticsLibrary = (config: Config) => { + if (!config.analyticsToken) return; + + return new Promise((resolve) => { + addScript('/jwpltx.js', () => resolve()); + }); + } + return ( {loading ? : null} diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx index 2d6353e71..5d89f27e3 100644 --- a/src/screens/Movie/Movie.tsx +++ b/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(false); @@ -112,6 +113,7 @@ const Movie = ({ (false); @@ -124,6 +125,7 @@ const Series = ({