@applicaster/zapp-react-native-utils 12.0.0-rc.9 → 12.0.0-rc.90

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -41,6 +41,11 @@ export type ChapterMarkerEvent = {
   actions: ActionChapter[];
 };
 
+export type TitleSummaryEvent = {
+  title: string | number;
+  summary: string | number;
+};
+
 type ChapterMarkersObserverProps = {
   player: Player;
 };
@@ -60,6 +65,11 @@ export type PlayNextState = PlayNextConfig & {
 export class OverlaysObserver {
   readonly chapterSubject: BehaviorSubject<ChapterMarkerEvent>;
   private playNextSubject: BehaviorSubject<PlayNextState>;
+  private titleSummarySubject: BehaviorSubject<TitleSummaryEvent>;
+  private feedUrl: string;
+  private reloadData: () => void;
+  private updateTitleAndDescription: (data: any) => void;
+  private feedDataInterval: any;
   private releasePlayerObserver?: () => void;
   readonly entry: ZappEntry;
   private chapterMarkerEvents: ChapterMarkerEvent[];
@@ -70,14 +80,55 @@ export class OverlaysObserver {
   constructor({ player }: ChapterMarkersObserverProps) {
     this.chapterSubject = new BehaviorSubject(null);
     this.playNextSubject = new BehaviorSubject(null);
+
+    this.titleSummarySubject = new BehaviorSubject<TitleSummaryEvent>({
+      title: player.getEntry()?.title || "",
+      summary: player.getEntry()?.summary || "",
+    });
+
     this.entry = player.getEntry();
     this.player = player;
 
     this.chapterMarkerEvents = this.prepareChapterMarkers();
     this.releasePlayerObserver = this.subscribeToPlayerEvents();
+    this.feedUrl = "";
+    this.reloadData = () => {};
+    this.updateTitleAndDescription = () => {};
+    this.feedDataInterval = null;
     void this.preparePlayNext();
   }
 
+  private setupFeedDataInterval(interval: number) {
+    if (this.feedUrl && this.reloadData && this.updateTitleAndDescription) {
+      this.feedDataInterval = setInterval(() => {
+        this.reloadData();
+      }, interval * 1000);
+    }
+  }
+
+  public clearFeedDataInterval() {
+    if (this.feedDataInterval) {
+      clearInterval(this.feedDataInterval);
+      this.feedDataInterval = null;
+    }
+  }
+
+  public setFeedDataHandlers(
+    feedUrl: string,
+    reloadData: () => void,
+    interval: number,
+    updateTitleAndDescription: (data: any) => void
+  ) {
+    this.feedUrl = feedUrl;
+    this.reloadData = reloadData;
+    this.updateTitleAndDescription = updateTitleAndDescription;
+    this.setupFeedDataInterval(interval);
+  }
+
+  public getTitleSummaryObservable(): Observable<TitleSummaryEvent> {
+    return this.titleSummarySubject.asObservable().pipe(distinctUntilChanged());
+  }
+
   handleUserCancelPlayNext = () => {
     this.isCanceledByUser = true;
     this.playNextSubject.next(null);
@@ -281,7 +332,9 @@ export class OverlaysObserver {
   onPlayerClose = () => {
     this.chapterSubject.complete();
     this.playNextSubject.complete();
+    this.titleSummarySubject.complete();
     this.releasePlayerObserver?.();
+    this.clearFeedDataInterval();
     this.releasePlayerObserver = null;
   };
 

package/appUtils/playerManager/conts.ts

@@ -7,6 +7,7 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerPause = "onPlayerPause",
   OnLoad = "onLoad",
   OnError = "onError",
+  OnVideoError = "onVideoError",
   OnVideoEnd = "onVideoEnd",
   OnPlaybackRateChange = "onPlaybackRateChange",
   OnVideoLoad = "onVideoLoad",
@@ -20,6 +21,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",

package/appUtils/playerManager/index.ts

@@ -11,6 +11,7 @@ import {
 } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 import { setUserLanguagePreference } from "./userLanguagePreference";
 import { PlayerRole } from "./conts";
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const { log_error, log_debug, log_warning } = createLogger({
   category: "General",
@@ -164,6 +165,10 @@ export class PlayerManager {
     this.addPlayer(id, playerController);
 
     if (playerController.playerRole === PlayerRole.Primary) {
+      if (playerController.playerPluginId !== "QuickBrickPlayerPlugin") {
+        RNPlayerManager?.["QuickBrickPlayerPlugin"]?.stopBackgroundPlayback?.();
+      }
+
       playerController.addListener({
         id: this.getPlayerListenerId(id),
         listener: {
@@ -361,9 +366,9 @@ export class PlayerManager {
     // TODO: Remove
     if (this.castingReceiver) {
       this.castingReceiver.rewind(deltaTime);
+    } else {
+      this.getActivePlayer()?.rewind(deltaTime);
     }
-
-    this.getActivePlayer()?.rewind(deltaTime);
   }
 
   public forward(deltaTime = null) {
@@ -371,9 +376,9 @@ export class PlayerManager {
 
     if (this.castingReceiver) {
       this.castingReceiver.forward(deltaTime);
+    } else {
+      this.getActivePlayer()?.forward(deltaTime);
     }
-
-    this.getActivePlayer()?.forward(deltaTime);
   }
 
   public seeking(time) {
@@ -436,7 +441,7 @@ export class PlayerManager {
     }
 
     // Call method on player just in case
-    return this.getActivePlayer()?.setLanguage(track);
+    return this.getActivePlayer()?.selectTrack(track);
   }
 
   public isRegistered() {
@@ -461,6 +466,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
+      this.getActivePlayer().closeNativePlayer();
       this.invokeHandler("close");
     }
   }

package/appUtils/playerManager/nativePlayerManager.ts

@@ -0,0 +1,12 @@
+import { NativeModules } from "react-native";
+import { isApplePlatform } from "../../reactUtils";
+
+export const RNPlayerManager = {
+  QuickBrickPlayerPlugin: isApplePlatform()
+    ? NativeModules.PlayerModule
+    : NativeModules.QuickBrickDefaultPlayerModule,
+  KalturaPlayerPlugin: isApplePlatform()
+    ? NativeModules.KalturaPlayerModule
+    : NativeModules.QBKalturaPlayerModule,
+  "quick-brick-player-brightcove": NativeModules.BrightcovePlayerModule,
+};

package/appUtils/playerManager/player.ts

@@ -42,7 +42,7 @@ export class Player {
 
   protected startPosition?: number | null;
   readonly playerRole: PlayerRole = PlayerRole.Unspecified;
-  private chaptersObserver?: OverlaysObserver | null;
+  private overlaysObserver?: OverlaysObserver | null;
   private entryObservable?: BehaviorSubject<ZappEntry> | null;
 
   protected listeners: {
@@ -95,11 +95,11 @@ export class Player {
   }
 
   getOverlayObservable = () => {
-    if (!this.chaptersObserver) {
-      this.chaptersObserver = new OverlaysObserver({ player: this });
+    if (!this.overlaysObserver) {
+      this.overlaysObserver = new OverlaysObserver({ player: this });
     }
 
-    return this.chaptersObserver;
+    return this.overlaysObserver;
   };
 
   getEntryObservable = (): BehaviorSubject<ZappEntry | null> => {
@@ -278,6 +278,10 @@ export class Player {
     return this.playerState.isBuffering;
   };
 
+  isReadyToPlay = (): boolean => {
+    return this.playerState.isReadyToPlay;
+  };
+
   // Methods to call actions on the player
   seekTo = (_position: number) => {};
 
@@ -355,6 +359,13 @@ export class Player {
     });
   };
 
+  onVideoError = (error: Error) => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.OnVideoError,
+      event: error,
+    });
+  };
+
   onError = (error: Error) => {
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnError,
@@ -410,6 +421,32 @@ export class Player {
     });
   };
 
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillPresent,
+    });
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidPresent,
+    });
+  };
+
   public invokeListenersUpdate = ({
     callbackName,
     event = {},
@@ -620,6 +657,7 @@ export class Player {
     onPlayerSeekComplete: this.onSeekComplete,
     onVideoEnd: this.onVideoEnd,
     onError: this.onError,
+    onVideoError: this.onVideoError,
     onLoad: this.onLoad,
     onPlayerPause: this.onPlayerPause,
     onPlayerResume: this.onPlayerResume,
@@ -630,6 +668,12 @@ export class Player {
     onBufferStart: this.onBufferStart,
     onBufferComplete: this.onBufferComplete,
 
+    onPlayerClose: this.onPlayerClose,
+    onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
+    onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+    onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+
     // Ads Callbacks:
     onAdBegin: this.onAdBegin,
     onAdBreakBegin: this.onAdBreakBegin,
@@ -648,9 +692,10 @@ export class Player {
   play = () => {};
   pause = () => {};
   disableBufferAnimation = (): boolean => true;
-  setLanguage = (
-    _selected?: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
-  ) => {};
+
+  setPlaybackRate = (_rate) => {};
+  startSleepTimer = (_timestamp) => {};
+  cancelSleepTimer = () => {};
 
   getPluginConfiguration = () => null;
   appStateChange = (_appState, _previousAppState) => {};
@@ -685,4 +730,7 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
+  public supportNativeCast = (): boolean => false;
 }

package/appUtils/playerManager/playerFactory.ts

@@ -1,17 +1,31 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { Player } from "./player";
+import { PlayerRole } from "./conts";
 
 type PlayerFactoryItem = {
   Component: any;
   controller: Player;
 };
 
+type PlayerFactoryProps = {
+  player: any;
+  playerId: string;
+  autoplay: boolean;
+  entry: ZappEntry;
+  muted: boolean;
+  playerPluginId: string;
+  screenConfig: Record<string, any>;
+  playerRole: PlayerRole;
+};
+
 interface PlayerConstructor {
   new (params: any): Player;
 }
 
-export const playerFactory = (config: any): PlayerFactoryItem | null => {
+export const playerFactory = (
+  config: PlayerFactoryProps
+): PlayerFactoryItem | null => {
   const IDENTIFIER = config?.playerPluginId;
 
   if (!IDENTIFIER) {

package/appUtils/playerManager/playerNative.ts

@@ -2,18 +2,10 @@ import * as R from "ramda";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { Player } from "./player";
-import { findNodeHandle, NativeModules } from "react-native";
-import { isApplePlatform } from "../../reactUtils";
+import { findNodeHandle } from "react-native";
 import { PlayerRole } from "./conts";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { toBooleanWithDefaultFalse } from "../../booleanUtils";
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const logger = createLogger({
   category: "PlayerNativeController",
@@ -41,6 +33,9 @@ const PlayerModuleFuncNames = {
   rewind: "rewind",
   play: "play",
   pause: "pause",
+  startSleepTimer: "startSleepTimer",
+  cancelSleepTimer: "cancelSleepTimer",
+  getSleepTimerEnd: "getSleepTimerEnd",
 };
 
 export class PlayerNative extends Player {
@@ -107,7 +102,7 @@ export class PlayerNative extends Player {
       return;
     }
 
-    const newPosition = R.clamp(0, position, this.playerState.seekableDuration);
+    const newPosition = R.clamp(0, this.playerState.seekableDuration, position);
 
     if (
       !this.invokeNativeFunction(
@@ -172,12 +167,35 @@ export class PlayerNative extends Player {
     }
   };
 
+  startSleepTimer = (sleepTimestamp: number) => {
+    if (
+      !this.invokeNativeFunction(
+        PlayerModuleFuncNames.startSleepTimer,
+        sleepTimestamp
+      )
+    ) {
+      this.currentPlayerComponent()?.["startSleepTimer"](sleepTimestamp);
+    }
+  };
+
+  cancelSleepTimer = () => {
+    if (!this.invokeNativeFunction(PlayerModuleFuncNames.cancelSleepTimer)) {
+      this.currentPlayerComponent()?.[
+        PlayerModuleFuncNames.cancelSleepTimer
+      ]?.();
+    }
+  };
+
   disableBufferAnimation = (): boolean => false;
 
-  setLanguage = (
+  selectTrack = (
     selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {
-    this.currentPlayerComponent()?.["setLanguage"]?.(selected);
+    this.currentPlayerComponent()?.["selectTrack"]?.(selected);
+  };
+
+  setPlaybackRate = (rate: number) => {
+    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
   };
 
   getPluginConfiguration = () => {
@@ -265,4 +283,12 @@ export class PlayerNative extends Player {
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
+
+  supportsNativeControls = (): boolean =>
+    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+
+  supportNativeCast = (): boolean =>
+    toBooleanWithDefaultFalse(
+      this.playerPluginId === "quick-brick-player-brightcove"
+    );
 }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -34,10 +35,14 @@ export const usePlayerControllerSetup = ({
   useValidatePlayerConfig(config);
 
   useEffect(() => {
+    const newConfig = isAppleTV()
+      ? { supports_native_controls: true, ...config }
+      : config;
+
     const newPlayerController = new ControllerType({
       player: ref,
       listener: props as any,
-      config,
+      config: newConfig,
       playerId,
       entry,
       playerPluginId: pluginId,

package/appUtils/playerManager/usePlayerState.tsx

@@ -9,6 +9,7 @@ type PlayerState = {
   isLive: boolean;
   isPaused: boolean;
   isBuffering: boolean;
+  isReadyToPlay: boolean;
 };
 
 export const usePlayerState = (
@@ -20,12 +21,14 @@ export const usePlayerState = (
   const [seekableDuration, setSeekableDuration] = React.useState<number>(null);
   const [isLive, setIsLive] = React.useState<boolean>(null);
   const [isBuffering, setIsBuffering] = React.useState<boolean>(false);
+  const [isReadyToPlay, setIsReadyToPlay] = React.useState<boolean>(false);
   const [isPaused, setIsPaused] = React.useState<boolean>(false);
 
   const player: Player = usePlayer(playerId);
 
   const onPlayerChangeState = React.useCallback(() => {
     setIsBuffering(player.isBuffering());
+    setIsReadyToPlay(player.isReadyToPlay);
     setCurrentTime(player.getContentPosition());
     setDuration(player.getDuration());
     setSeekableDuration(player.getSeekableDuration());
@@ -60,7 +63,16 @@ export const usePlayerState = (
       isLive,
       isPaused,
       isBuffering,
+      isReadyToPlay,
     }),
-    [currentTime, duration, seekableDuration, isLive, isPaused, isBuffering]
+    [
+      currentTime,
+      duration,
+      seekableDuration,
+      isLive,
+      isPaused,
+      isBuffering,
+      isReadyToPlay,
+    ]
   );
 };

package/appUtils/playerManager/usePlayerTitleSummaryOverlay.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
+import { useFeedLoader } from "../../reactHooks";
+import { usePlayer } from "./usePlayer";
+
+export const useTitleSummaryOverlay = (
+  feedUrl,
+  entry,
+  isLive = false,
+  interval: number
+) => {
+  const player = usePlayer();
+  const [title, setTitle] = useState<string | number>(entry?.title || "");
+  const [summary, setSummary] = useState<string | number>(entry?.summary || "");
+
+  // Hook to load feed data
+  const { data: feedData, reloadData } = useFeedLoader({ feedUrl });
+
+  useEffect(() => {
+    if (player && feedUrl && isLive) {
+      const observer = new OverlaysObserver({ player });
+
+      observer.setFeedDataHandlers(feedUrl, reloadData, interval, (entry) => {
+        setTitle(entry?.title || "");
+        setSummary(entry?.summary || "");
+      });
+
+      const subscription = observer
+        .getTitleSummaryObservable()
+        .subscribe(({ title, summary }) => {
+          setTitle(title);
+          setSummary(summary);
+        });
+
+      return () => {
+        subscription.unsubscribe();
+        observer.clearFeedDataInterval();
+      };
+    }
+  }, [player, feedUrl, reloadData, isLive]);
+
+  useEffect(() => {
+    if (isLive && feedData?.entry?.[0]) {
+      setTitle(feedData.entry[0].title || "");
+      setSummary(feedData.entry[0].summary || "");
+    }
+  }, [feedData]);
+
+  return { title, summary };
+};

package/arrayUtils/__tests__/isFilledArray.test.ts

@@ -0,0 +1,63 @@
+import { isFilledArray } from "..";
+
+describe("isFilledArray", () => {
+  it("non-empty array is not empty", () => {
+    const value = [1, 2, 3];
+
+    expect(isFilledArray(value)).toBe(true);
+  });
+
+  it("empty array is empty", () => {
+    const value = [];
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("number is not array", () => {
+    const value = 123;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("string is not array", () => {
+    const value = "vfnjdk";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty string is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("NaN is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("object is not array", () => {
+    const value = { test: 1 };
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty object is not array", () => {
+    const value = {};
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("undefined is not array", () => {
+    const value = undefined;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("null is not array", () => {
+    const value = null;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+});

package/arrayUtils/index.ts

@@ -95,3 +95,8 @@ export const makeListOfIndexes = (size: number): number[] =>
 export const makeListOf = (value: unknown, size: number): number[] => {
   return Array(size).fill(value);
 };
+
+/** Checks if a value is a non-empty array */
+export function isFilledArray(value: unknown): boolean {
+  return R.is(Array, value) && R.length(value) > 0;
+}

package/booleanUtils/index.ts

@@ -1,7 +1,7 @@
-import * as R from "ramda";
+import { is, toLower } from "ramda";
 
 export const toBoolean = (value: any): boolean | undefined => {
-  if (R.is(Boolean, value)) {
+  if (is(Boolean, value)) {
     return value;
   }
 
@@ -17,12 +17,12 @@ export const toBooleanWithDefaultTrue = toBooleanWithDefault(true);
 
 export const toBooleanWithDefaultFalse = toBooleanWithDefault(false);
 
-export const isTrue = (value: any): boolean => {
+export const isTrue = (value: unknown): boolean => {
   if (value === true) {
     return true;
   }
 
-  if (R.is(String, value) && value.toLowerCase() === "true") {
+  if (is(String, value) && toLower(value) === "true") {
     return true;
   }