@applicaster/zapp-react-native-utils 12.0.0-alpha.3510522252 → 12.0.0-alpha.3977160850

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 {
@@ -23,6 +24,7 @@ import {
   EMPTY,
   FALLBACK,
   TRANSFORM,
+  defaultColor,
 } from "./fixtures";
 
 describe("getKeyForLabel", () => {
@@ -388,3 +390,60 @@ describe("getValue", () => {
     expect(getValue({ value })(value)).toBeNull();
   });
 });
+
+describe("getColorFromData", () => {
+  it("should return value directly if valid color", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: "background_color",
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe("#123456");
+  });
+
+  it("should return valid rgba color name", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: "component_background_color",
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    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,
+      key: VAL.colorKeyPath,
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe("#123456");
+  });
+
+  it("should return defaultColor if key value and path value are invalid", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: VAL.invalidColorKey,
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe(defaultColor);
+  });
+
+  it("should return defaultColor if path does not exist", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: VAL.invalidColorKeyPath,
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe(defaultColor);
+  });
+});

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";
@@ -443,3 +444,31 @@ export const toResizeMode = (
     resizeMode: "contain",
   };
 };
+
+type GetColorFromData = {
+  data: Record<string, any>;
+  key: string;
+  getValue: Function;
+  defaultColor: string;
+};
+
+export const getColorFromData = ({
+  data,
+  key,
+  getValue,
+  defaultColor,
+}: GetColorFromData): string => {
+  const value = getValue(key);
+
+  if (validateColor(value)) {
+    return value;
+  }
+
+  const pathValue = R.path(value.split("."), data);
+
+  if (pathValue && validateColor(pathValue)) {
+    return pathValue;
+  }
+
+  return defaultColor;
+};

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 {},