@applicaster/zapp-react-native-utils 12.0.0-alpha.5812543239 → 12.0.0-alpha.5895113034

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: {
@@ -91,15 +91,17 @@ export class Player {
     this.onVideoProgress = this.onVideoProgress.bind(this);
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
+    this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
+
     this.entryObservable = null;
   }
 
   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 +280,10 @@ export class Player {
     return this.playerState.isBuffering;
   };
 
+  isReadyToPlay = (): boolean => {
+    return this.playerState.isReadyToPlay;
+  };
+
   // Methods to call actions on the player
   seekTo = (_position: number) => {};
 
@@ -317,7 +323,7 @@ export class Player {
    * You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
    * This allows you to use one method for everything.
    */
-  onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
+  onPlayerSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
     const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
@@ -332,10 +338,11 @@ export class Player {
     });
   };
 
-  onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
+  onPlayerSeekComplete(event: QuickBrickPlayer.OnSeekCompleteEvent) {
     const { isLive, seekableDuration, currentTime, duration } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
+
     this.playerState.seekPosition = null;
 
     if (!isLive) {
@@ -346,7 +353,7 @@ export class Player {
       callbackName: SharedPlayerCallBacksKeys.OnPlayerSeekComplete,
       event,
     });
-  };
+  }
 
   onVideoEnd = (event) => {
     this.invokeListenersUpdate({
@@ -410,6 +417,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 = {},
@@ -616,8 +649,8 @@ export class Player {
   };
 
   public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
-    onPlayerSeekStart: this.onSeekStart,
-    onPlayerSeekComplete: this.onSeekComplete,
+    onPlayerSeekStart: this.onPlayerSeekStart,
+    onPlayerSeekComplete: this.onPlayerSeekComplete,
     onVideoEnd: this.onVideoEnd,
     onError: this.onError,
     onLoad: this.onLoad,
@@ -630,6 +663,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,
@@ -652,6 +691,10 @@ export class Player {
     _selected?: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {};
 
+  setPlaybackRate = (_rate) => {};
+  startSleepTimer = (_timestamp) => {};
+  cancelSleepTimer = () => {};
+
   getPluginConfiguration = () => null;
   appStateChange = (_appState, _previousAppState) => {};
 
@@ -685,4 +728,12 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
+  public supportNativeCast = (): boolean => false;
+
+  public isInDelayedSeek = (): boolean => false;
+  public enterDelayedSeek() {}
+
+  public exitDelayedSeek() {}
 }

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

@@ -5,6 +5,7 @@ import { Player } from "./player";
 import { findNodeHandle, NativeModules } from "react-native";
 import { isApplePlatform } from "../../reactUtils";
 import { PlayerRole } from "./conts";
+import { toBooleanWithDefaultFalse } from "../../booleanUtils";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -41,6 +42,9 @@ const PlayerModuleFuncNames = {
   rewind: "rewind",
   play: "play",
   pause: "pause",
+  startSleepTimer: "startSleepTimer",
+  cancelSleepTimer: "cancelSleepTimer",
+  getSleepTimerEnd: "getSleepTimerEnd",
 };
 
 export class PlayerNative extends Player {
@@ -66,7 +70,7 @@ export class PlayerNative extends Player {
   currentPlayerComponent = (): ReactComponent<PlayerProps> =>
     this.playerComponent?.current;
 
-  getState = () => this.currentPlayerComponent()?.["getState"]?.() ?? {};
+  getState = () => this.playerState;
 
   // TODO: Try to add module interface
   invokeNativeFunction = (funcName: string, ...params: any[]): boolean => {
@@ -107,7 +111,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,6 +176,25 @@ 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 = (
@@ -180,6 +203,10 @@ export class PlayerNative extends Player {
     this.currentPlayerComponent()?.["setLanguage"]?.(selected);
   };
 
+  setPlaybackRate = (rate: number) => {
+    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
+  };
+
   getPluginConfiguration = () => {
     return (this.currentPlayerComponent() as any)?.props?.pluginConfiguration;
   };
@@ -204,9 +231,10 @@ export class PlayerNative extends Player {
 
   onVideoLoad = (event) => {
     if (this.startPosition) {
-      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
       this.seekTo(this.startPosition);
       this.startPosition = null;
+
+      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
     } else {
       super.onVideoLoad(event);
     }
@@ -265,4 +293,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,9 @@ 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";
+import { isTV } from "../../reactUtils";
+import { DelayedSeekPlayerWrapper } from "./DelayedSeekPlayerWrapper";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -34,17 +37,33 @@ export const usePlayerControllerSetup = ({
   useValidatePlayerConfig(config);
 
   useEffect(() => {
-    const newPlayerController = new ControllerType({
+    const newConfig = isAppleTV()
+      ? { supports_native_controls: true, ...config }
+      : config;
+
+    const combinedProps = {
       player: ref,
       listener: props as any,
-      config,
+      config: newConfig,
       playerId,
       entry,
       playerPluginId: pluginId,
       playerRole: PlayerRole.Primary,
-    });
+    };
 
-    setPlayerController(newPlayerController);
+    if (isTV()) {
+      const wrappedPlayerController = new ControllerType({
+        ...combinedProps,
+        playerRole: PlayerRole.Unspecified,
+        playerId: playerId + "." + "wrapped",
+      });
+
+      setPlayerController(
+        new DelayedSeekPlayerWrapper(combinedProps, wrappedPlayerController)
+      );
+    } else {
+      setPlayerController(new ControllerType(combinedProps));
+    }
   }, [playerId, entry?.id]);
 
   React.useEffect(() => {

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/cellUtils/__tests__/cellUtils.test.ts

@@ -14,6 +14,7 @@ import {
   castAndFallbackColor,
   compact,
   getValue,
+  getColorFromData,
 } from "../";
 
 import {
@@ -388,3 +389,50 @@ describe("getValue", () => {
     expect(getValue({ value })(value)).toBeNull();
   });
 });
+
+describe("getColorFromData", () => {
+  it("should return value directly if valid color", () => {
+    const result = getColorFromData({
+      data: entry,
+      valueFromLayout: "#123456",
+    });
+
+    expect(result).toBe("#123456");
+  });
+
+  it("should return valid rgba color name", () => {
+    const result = getColorFromData({
+      data: entry,
+      valueFromLayout: "rgba(255, 255, 255, 0)",
+    });
+
+    expect(result).toBe("rgba(255, 255, 255, 0)");
+  });
+
+  it("should return path value if path value is set and is valid color", () => {
+    const result = getColorFromData({
+      data: entry,
+      valueFromLayout: "background_color",
+    });
+
+    expect(result).toBe("#123456");
+  });
+
+  it("should return path value if path value is set, nested and is valid color", () => {
+    const result = getColorFromData({
+      data: entry,
+      valueFromLayout: "extensions.background_color",
+    });
+
+    expect(result).toBe("#123456");
+  });
+
+  it("should return valueFromLayout if path does not exist", () => {
+    const result = getColorFromData({
+      data: entry,
+      valueFromLayout: "invalid_color",
+    });
+
+    expect(result).toBe("invalid_color");
+  });
+});

package/cellUtils/__tests__/fixtures.ts

@@ -1,5 +1,7 @@
 /* eslint-disable max-len */
 
+export const defaultColor = "#ffffff";
+
 export const entry = {
   type: {
     value: "video",
@@ -26,7 +28,9 @@ export const entry = {
     type: "video/mp4",
     src: "https://wino-feed.s3.amazonaws.com/movieFeed/Ford+v+Ferrari.mp4",
   },
+  background_color: "#123456",
   extensions: {
+    background_color: "#123456",
     free: false,
     duration: 9000,
     section: "New Releases",
@@ -46,7 +50,11 @@ export const componentStyle = {
   horizontal_list_cell_width: "400",
   cell_plugin_configuration_id: "267bd05a-08bd-4675-bdd3-9b73899773f0",
   horizontal_list_scaled_switch: false,
+  background_color: "#123456",
   component_background_color: "rgba(255, 255, 255, 0)",
+  background_color_1: "extensions.background_color",
+  background_color_2: "invalidColorKey",
+  background_color_3: "extensions.invalidColorKeyPath",
   component_padding_left: "",
   horizontal_list_next_offset: 20,
   component_margin_bottom: "",
@@ -93,6 +101,11 @@ export const VAL = {
   upper: "STRING",
   width: 400,
   height: 225,
+  colorKey: "background_color",
+  colorKeyRgba: "component_background_color",
+  colorKeyPath: "background_color_1",
+  invalidColorKey: "background_color_2",
+  invalidColorKeyPath: "background_color_3",
 };
 
 export const TRANSFORM = {

package/cellUtils/index.ts

@@ -1,5 +1,6 @@
 import * as R from "ramda";
 import dayjs from "dayjs";
+import validateColor from "validate-color";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
 import { transformColorCode as fixColorHexCode } from "../transform";
@@ -181,8 +182,8 @@ export const getHeight = (width, aspectRatio) => {
  * @returns {string} duration
  */
 
-export const getDurationInMinutes = (seconds: number): string => {
-  if (seconds === (null || undefined)) return "00:00";
+export const getDurationInMinutes = (seconds?: number): string => {
+  if (!seconds) return "00:00";
   const minutes = Math.floor(Number(seconds) / 60);
   const secondsReminder = Math.floor(Number(seconds)) % 60;
   const pad = (num: number): string => `${num < 10 ? "0" : ""}${num}`;
@@ -343,6 +344,19 @@ export const ifElseFocused = R.curry(
     state === "focused" ? focusedValue : defaultValue
 );
 
+export const ifElseSelected = R.curry(
+  (state: string, selectedValue, defaultValue) => {
+    switch (state) {
+      case "selected":
+        return selectedValue;
+      case "focused_selected":
+        return selectedValue;
+      default:
+        return defaultValue;
+    }
+  }
+);
+
 /**
  * Map textAlign values to their corresponding alignSelf values
  * This is so that we could use the same field for both properties
@@ -430,3 +444,27 @@ export const toResizeMode = (
     resizeMode: "contain",
   };
 };
+
+type GetColorFromData = {
+  data: Record<string, any>;
+  valueFromLayout: string;
+};
+
+export const getColorFromData = ({
+  data,
+  valueFromLayout,
+}: GetColorFromData): string => {
+  // Temporary hack to fix color validation when alpha is floating point number
+  // https://github.com/dreamyguy/validate-color/issues/44
+  if (validateColor(valueFromLayout.replace(".00", ""))) {
+    return valueFromLayout;
+  }
+
+  const pathValue = R.path(valueFromLayout.split("."), data);
+
+  if (pathValue && validateColor(pathValue)) {
+    return pathValue;
+  }
+
+  return valueFromLayout;
+};

package/dateUtils/index.ts

@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import isoWeek from "dayjs/plugin/isoWeek";
+
+// Extend dayjs with plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isoWeek);
+
+export { dayjs };

package/focusManager/index.ts

@@ -86,7 +86,7 @@ export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
 
 type Props = {
   component: ZappUIComponent;
-  zappPipesData: ZappPipesData;
+  zappPipesData?: ZappPipesData;
 } & Record<string, any>;
 
 export const useIsFocusable = (props: Props): void => {

package/functionUtils/__tests__/__snapshots__/functionUtils.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`subscriber can be invoked without args 1`] = `
+exports[`functionUtils subscriber can be invoked without args 1`] = `
 Object {
   "handlers": Object {},
   "invokeHandler": [Function],
@@ -9,7 +9,7 @@ Object {
 }
 `;
 
-exports[`subscriber returns the original object with additional methods 1`] = `
+exports[`functionUtils subscriber returns the original object with additional methods 1`] = `
 Object {
   "foo": "bar",
   "handlers": Object {},