@applicaster/zapp-react-native-utils 12.0.0-rc.13 → 12.0.0-rc.130

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 {
@@ -66,7 +61,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 +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,
@@ -45,7 +50,7 @@ export const usePlayerControllerSetup = ({
     });
 
     setPlayerController(newPlayerController);
-  }, [playerId, entry?.id]);
+  }, [playerId, entry?.id, ref.current]);
 
   React.useEffect(() => {
     if (!playerController) {
@@ -67,6 +72,7 @@ export const usePlayerControllerSetup = ({
 
     return () => {
       playerManager.unregisterPlayer(playerId);
+      playerController.destroy?.();
     };
   }, [playerId, playerController]);
 

package/appUtils/playerManager/usePlayerState.tsx

@@ -9,28 +9,35 @@ type PlayerState = {
   isLive: boolean;
   isPaused: boolean;
   isBuffering: boolean;
+  isReadyToPlay: boolean;
 };
 
 export const usePlayerState = (
   listenerId: string,
   playerId?: string
 ): PlayerState => {
-  const [currentTime, setCurrentTime] = React.useState<number>(null);
-  const [duration, setDuration] = React.useState<number>(null);
-  const [seekableDuration, setSeekableDuration] = React.useState<number>(null);
-  const [isLive, setIsLive] = React.useState<boolean>(null);
-  const [isBuffering, setIsBuffering] = React.useState<boolean>(false);
-  const [isPaused, setIsPaused] = React.useState<boolean>(false);
+  const [state, setState] = React.useState<PlayerState>({
+    currentTime: null,
+    duration: null,
+    seekableDuration: null,
+    isLive: null,
+    isPaused: null,
+    isBuffering: false,
+    isReadyToPlay: false,
+  });
 
   const player: Player = usePlayer(playerId);
 
   const onPlayerChangeState = React.useCallback(() => {
-    setIsBuffering(player.isBuffering());
-    setCurrentTime(player.getContentPosition());
-    setDuration(player.getDuration());
-    setSeekableDuration(player.getSeekableDuration());
-    setIsLive(player.isLive());
-    setIsPaused(player.isPaused());
+    setState({
+      currentTime: player.getContentPosition(),
+      duration: player.getDuration(),
+      seekableDuration: player.getSeekableDuration(),
+      isLive: player.isLive(),
+      isPaused: player.isPaused(),
+      isBuffering: player.isBuffering(),
+      isReadyToPlay: player.isReadyToPlay(),
+    });
   }, [player]);
 
   React.useEffect(() => {
@@ -52,15 +59,5 @@ export const usePlayerState = (
     }
   }, [player]);
 
-  return React.useMemo(
-    () => ({
-      currentTime,
-      duration,
-      seekableDuration,
-      isLive,
-      isPaused,
-      isBuffering,
-    }),
-    [currentTime, duration, seekableDuration, isLive, isPaused, isBuffering]
-  );
+  return state;
 };

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

@@ -1,5 +1,6 @@
 /* eslint-disable unused-imports/no-unused-vars */
 import * as R from "ramda";
+import { invariant } from "@applicaster/zapp-react-native-utils/errorUtils";
 
 /**
  * shifts an array by the given offset. a negative offset will take items
@@ -95,3 +96,18 @@ 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;
+}
+
+// get random item from the list
+export const sample = (xs: unknown[]): unknown => {
+  invariant(R.is(Array, xs), `input value is not a array: ${xs}`);
+  invariant(isFilledArray(xs), `input array is empty: ${xs}`);
+
+  const index = Math.floor(Math.random() * xs.length);
+
+  return xs[index];
+};

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;
   }
 

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";
@@ -30,13 +31,12 @@ export const getKeyForLabel = (dataKey, customKey) => {
  * This method will return true if the argument passed to it is either empty or nil
  * The method prevents zero from being evaluated as falsey in an || condition
  * i.e. - NaN, null, {}, "", [], should all return true
- * @param {*} argument - argument passed to it could be any type
  * @returns {Boolean} returns true if empty or nil
+ * @param value
  */
-export const isEmptyOrNil = R.either(
-  R.equals(NaN),
-  R.either(R.isEmpty, R.isNil)
-);
+
+export const isEmptyOrNil = (value: any): boolean =>
+  Number.isNaN(value) || value == null || R.isEmpty(value);
 
 /**
  * This method is used to find the appropriate label for any given text field.
@@ -181,8 +181,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}`;
@@ -319,6 +319,7 @@ export const ifElseFocusedSelected = (
  * @param {Object} stylesObj styles object with keys from zapp { button_icon_width: "10" }
  * @returns {*} value, returns any type that can be used as styles
  */
+
 export const getValue = (stylesObj) => (key) => {
   return R.propOr(null, key, stylesObj);
 };
@@ -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,60 @@ 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;
+};
+
+export const getImageStyles = ({
+  image,
+  value,
+}: {
+  image: any;
+  value: any;
+}) => {
+  return {
+    width: image.imageContentWidth,
+    height: image.imageContentHeight,
+    aspectRatio: image.aspectRatio,
+    borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+  };
+};
+
+export const getImageContainerPaddingStyles = ({ value }: { value: any }) => {
+  return {
+    paddingTop: value("image_padding_top"),
+    paddingBottom: value("image_padding_bottom"),
+    paddingLeft: value("image_padding_left"),
+    paddingRight: value("image_padding_right"),
+  };
+};
+
+export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
+  return {
+    marginTop: value("image_margin_top"),
+    marginBottom: value("image_margin_bottom"),
+    marginLeft: value("image_margin_left"),
+    marginRight: value("image_margin_right"),
+  };
+};

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/FocusManager.ts

@@ -18,6 +18,7 @@ class FocusManager {
   private static instance: FocusManager;
 
   private _focusedId: string | null = null;
+  private _prevFocusedId: string | null = null;
   public previousNavigationDirection: FocusManager.Android.NavDir = null;
 
   /**
@@ -47,10 +48,22 @@ class FocusManager {
     return focusedRef?.current;
   }
 
+  get prevFocused() {
+    const focusedRef = this.prevFocusedId
+      ? FocusManager.findFocusable(this.prevFocusedId)
+      : { current: null };
+
+    return focusedRef?.current;
+  }
+
   get focusedId() {
     return FocusManager.instance._focusedId;
   }
 
+  get prevFocusedId() {
+    return FocusManager.instance._prevFocusedId;
+  }
+
   public static getInstance(): FocusManager {
     if (!FocusManager.instance) {
       FocusManager.instance = new FocusManager();
@@ -151,9 +164,8 @@ class FocusManager {
   }
 
   private setFocusLocal(nextFocus: FocusManager.TouchableReactRef) {
+    FocusManager.instance._prevFocusedId = FocusManager.instance._focusedId;
     FocusManager.instance._focusedId = nextFocus?.current?.props?.id ?? null;
-
-    this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.FOCUS, nextFocus);
   }
 
   private setPreviousNavigationDirection(
@@ -217,8 +229,11 @@ class FocusManager {
 
       FocusManager.instance.setFocus(nextNextFocus, options);
     } else {
-      FocusManager.instance.blurPrevious(options);
       FocusManager.instance.setFocusLocal(nextFocus);
+
+      FocusManager.instance.blurPrevious(options);
+      this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.FOCUS, nextFocus);
+
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
       nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
@@ -227,8 +242,8 @@ class FocusManager {
 
   blurPrevious(options?: FocusManager.Android.CallbackOptions) {
     if (options) {
-      FocusManager.instance.focused?.onBlur?.(
-        FocusManager.instance.focused,
+      FocusManager.instance.prevFocused?.onBlur?.(
+        FocusManager.instance.prevFocused,
         options
       );
     }

package/focusManager/__tests__/FocusManager.test.ts

@@ -156,7 +156,6 @@ describe("FocusManager", () => {
     child1.current.onBlur.mockClear();
     focusManager.setFocus(child1.current.props.id);
     focusManager.blurPrevious({ direction: "down" });
-    expect(child1.current.onBlur).toBeCalled();
   });
 
   it("focusManager - focus shouldn't change if nextFocus has blockFocus", () => {

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 => {