feat(player): update player settings

- Pass `adSchedule`to the player
- Enable casting by default
- Disable sharing in the player
- Initialzie adSchedule data when having adSchedule in config

src/components/Player/Player.tsx

@@ -9,11 +9,14 @@ import type { PlaylistItem } from '#types/playlist';
 import useEventCallback from '#src/hooks/useEventCallback';
 import useOttAnalytics from '#src/hooks/useOttAnalytics';
 import { logDev, testId } from '#src/utils/common';
+import { useConfigStore } from '#src/stores/ConfigStore';
 
 type Props = {
   playerId: string;
   feedId?: string;
   item: PlaylistItem;
+  startTime?: number;
+  autostart?: boolean;
   onReady?: (player?: JWPlayer) => void;
   onPlay?: () => void;
   onPause?: () => void;
@@ -26,8 +29,6 @@ type Props = {
   onNext?: () => void;
   onPlaylistItem?: () => void;
   onPlaylistItemCallback?: (item: PlaylistItem) => Promise<undefined | PlaylistItem>;
-  startTime?: number;
-  autostart?: boolean;
 };
 
 const Player: React.FC<Props> = ({
@@ -57,6 +58,8 @@ const Player: React.FC<Props> = ({
   const scriptUrl = `${import.meta.env.APP_API_BASE_URL}/libraries/${playerId}.js`;
   const setPlayer = useOttAnalytics(item, feedId);
 
+  const { adScheduleData } = useConfigStore((s) => s);
+
   const handleBeforePlay = useEventCallback(onBeforePlay);
   const handlePlay = useEventCallback(onPlay);
   const handlePause = useEventCallback(onPause);
@@ -156,16 +159,27 @@ const Player: React.FC<Props> = ({
       if (!window.jwplayer || !playerElementRef.current) return;
 
       playerRef.current = window.jwplayer(playerElementRef.current) as JWPlayer;
+
       // player options are untyped
       const playerOptions: { [key: string]: unknown } = {
+        advertising: adScheduleData,
         aspectratio: false,
-        playlist: [deepCopy({ ...item, starttime: startTimeRef.current })],
-        width: '100%',
+        controls: true,
+        displaytitle: false,
+        displayHeading: false,
+        displaydescription: false,
+        floating: {
+          mode: 'never',
+        },
         height: '100%',
         mute: false,
+        playbackRateControls: true,
+        pipIcon: 'disabled',
+        playlist: [deepCopy({ ...item, starttime: startTimeRef.current })],
         repeat: false,
-        displaytitle: false,
-        displaydescription: false,
+        cast: {},
+        stretching: 'uniform',
+        width: '100%',
       };
 
       // only set the autostart parameter when it is defined or it will override the player.defaults autostart setting
@@ -184,7 +198,7 @@ const Player: React.FC<Props> = ({
     if (libLoaded) {
       initializePlayer();
     }
-  }, [libLoaded, item, detachEvents, attachEvents, playerId, setPlayer, autostart]);
+  }, [libLoaded, item, detachEvents, attachEvents, playerId, setPlayer, autostart, adScheduleData]);
 
   useEffect(() => {
     return () => {

src/containers/TrailerModal/TrailerModal.tsx

@@ -7,7 +7,7 @@ import Modal from '#components/Modal/Modal';
 import Player from '#components/Player/Player';
 import ModalCloseButton from '#components/ModalCloseButton/ModalCloseButton';
 import Fade from '#components/Animation/Fade/Fade';
-import { useConfigStore } from '#src/stores/ConfigStore';
+import { DEFAULT_PLAYER_ID } from '#src/config';
 
 type Props = {
   item?: PlaylistItem | null;
@@ -17,7 +17,6 @@ type Props = {
 };
 
 const TrailerModal: React.FC<Props> = ({ item, open, title, onClose }) => {
-  const { player } = useConfigStore((s) => s.config);
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [userActive, setUserActive] = useState(true);
 
@@ -33,7 +32,7 @@ const TrailerModal: React.FC<Props> = ({ item, open, title, onClose }) => {
       <div className={styles.container}>
         <Player
           item={item}
-          playerId={player}
+          playerId={DEFAULT_PLAYER_ID}
           onPlay={handlePlay}
           onPause={handlePause}
           onComplete={onClose}

src/pages/Home/Home.test.tsx

@@ -12,7 +12,6 @@ describe('Home Component tests', () => {
     useConfigStore.setState({
       config: {
         description: '',
-        player: 'abcdefgh',
         integrations: {},
         assets: {},
         menu: [],

src/services/api.service.ts

@@ -2,6 +2,7 @@ import { addQueryParams } from '#src/utils/formatting';
 import { getDataOrThrow } from '#src/utils/api';
 import { filterMediaOffers } from '#src/utils/entitlements';
 import type { GetPlaylistParams, Playlist, PlaylistItem } from '#types/playlist';
+import type { AdSchedule } from '#types/ad-schedule';
 import type { GetSeriesParams, Series } from '#types/series';
 import { useConfigStore as ConfigStore } from '#src/stores/ConfigStore';
 import { generateImageData } from '#src/utils/image';
@@ -148,3 +149,20 @@ export const getSeriesByMediaIds = async (mediaIds: string[]): Promise<{ [key in
   const response = await fetch(url);
   return await getDataOrThrow(response);
 };
+
+/**
+ * Get series by id
+ * @param {string} id
+ * @param params
+ */
+export const getAdSchedule = async (id: string | undefined | null): Promise<AdSchedule | undefined> => {
+  if (!id) {
+    throw new Error('Ad Schedule ID is required');
+  }
+
+  const url = import.meta.env.APP_API_BASE_URL + `/v2/advertising/schedules/${id}.json`;
+  const response = await fetch(url);
+  const data = await getDataOrThrow(response);
+
+  return data;
+};

src/services/config.service.ts

@@ -55,7 +55,6 @@ const configSchema: SchemaOf<Config> = object({
   id: string().notRequired(),
   siteName: string().notRequired(),
   description: string().defined(),
-  player: string().defined(),
   analyticsToken: string().nullable(),
   adSchedule: string().nullable(),
   assets: object({

src/stores/ConfigController.ts

@@ -0,0 +1,12 @@
+import { useConfigStore } from '#src/stores/ConfigStore';
+import { getAdSchedule } from '#src/services/api.service';
+
+export const initializeAdSchedule = async () => {
+  const { config } = useConfigStore.getState();
+
+  const adScheduleData = await getAdSchedule(config?.adSchedule);
+
+  useConfigStore.setState({
+    adScheduleData,
+  });
+};

src/stores/ConfigStore.ts

@@ -1,6 +1,7 @@
 import { createStore } from './utils';
 
 import type { AccessModel, Config } from '#types/Config';
+import type { AdSchedule } from '#types/ad-schedule';
 
 export enum PersonalShelf {
   ContinueWatching = 'continue_watching',
@@ -19,6 +20,7 @@ type CleengData = {
 type ConfigState = {
   config: Config;
   accessModel: AccessModel;
+  adScheduleData: AdSchedule | null | undefined;
   getCleengData: () => CleengData;
 };
 
@@ -46,6 +48,7 @@ export const useConfigStore = createStore<ConfigState>('ConfigStore', (_, get) =
     },
   },
   accessModel: 'SVOD',
+  adScheduleData: null,
   getCleengData: (): CleengData => {
     const cleeng = get().config?.integrations?.cleeng;
 

src/utils/configLoad.ts

@@ -8,6 +8,7 @@ import type { AccessModel, Config, Styling } from '#types/Config';
 import { initializeAccount } from '#src/stores/AccountController';
 import { restoreWatchHistory } from '#src/stores/WatchHistoryController';
 import { initializeFavorites } from '#src/stores/FavoritesController';
+import { initializeAdSchedule } from '#src/stores/ConfigController';
 
 const CONFIG_HOST = import.meta.env.APP_API_BASE_URL;
 
@@ -61,7 +62,6 @@ export async function loadAndValidateConfig(configSource: string | undefined) {
     id: '',
     siteName: '',
     description: '',
-    player: '',
     assets: {
       banner: '/images/logo.png',
     },
@@ -124,6 +124,10 @@ export async function loadAndValidateConfig(configSource: string | undefined) {
     await initializeFavorites();
   }
 
+  if (config.adSchedule) {
+    await initializeAdSchedule();
+  }
+
   return config;
 }
 

types/Config.d.ts

@@ -6,7 +6,6 @@ export type Config = {
   id?: string;
   siteName?: string;
   description: string;
-  player: string;
   analyticsToken?: string | null;
   adSchedule?: string | null;
   integrations: {

types/ad-schedule.d.ts

@@ -0,0 +1,5 @@
+export type AdSchedule = {
+  adscheduleid: string;
+  client: string;
+  schedule: string;
+};