@applicaster/zapp-react-native-utils 12.0.0-alpha.9262886003 → 12.0.0-alpha.9417984401

package/manifestUtils/index.js

@@ -22,7 +22,11 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
-const { secondaryImage, getUpdatedSecondaryImageKeys } = require("./secondaryImage");
+
+const {
+  secondaryImage,
+  getUpdatedSecondaryImageKeys,
+} = require("./secondaryImage");
 
 module.exports = {
   fontKey,

package/manifestUtils/keys.js

@@ -17,10 +17,11 @@ const ZAPPIFEST_FIELDS = {
     lg: "lg_tv_font_selector",
     samsung: "samsung_font_selector",
     roku: "roku_font_selector",
+    vizio: "vizio_font_selector",
   },
 };
 
-const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku"];
+const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
 
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {

package/manifestUtils/secondaryImage/index.js

@@ -132,29 +132,32 @@ function secondaryImage({
 
 const POSITION_OVER_IMAGE = toSnakeCase(position_over_image);
 
-const getUpdatedSecondaryImageKeys = (secondaryImageManifest) => secondaryImageManifest.fields.reduce((acc, item) => {
-  const key = item.key;
+const getUpdatedSecondaryImageKeys = (secondaryImageManifest) =>
+  secondaryImageManifest.fields.reduce((acc, item) => {
+    const key = item.key;
 
-  const conditionalFields = (item.conditional_fields || []).map((field) => field.key);
+    const conditionalFields = (item.conditional_fields || []).map(
+      (field) => field.key
+    );
 
-  const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
-    const updatedKey = field.replace("secondary_image_", "nested_image_");
+    const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
+      const updatedKey = field.replace("secondary_image_", "nested_image_");
+
+      return {
+        ...acc,
+        [updatedKey]: field,
+      };
+    }, {});
+
+    const updatedKey = key.replace("secondary_image_", "nested_image_");
 
     return {
       ...acc,
-      [updatedKey]: field,
+      ...updatedConditionalFields,
+      [updatedKey]: key,
     };
   }, {});
 
-  const updatedKey = key.replace("secondary_image_", "nested_image_");
-
-  return {
-    ...acc,
-    ...updatedConditionalFields,
-    [updatedKey]: key,
-  };
-}, {});
-
 module.exports = {
   secondaryImage,
   getUpdatedSecondaryImageKeys,

package/navigationUtils/index.ts

@@ -592,3 +592,51 @@ export function isMenuDisabled(
 export function routeIsPlayerScreen(currentRoute) {
   return currentRoute?.includes("/playable");
 }
+
+export const getNavBarProps =
+  (currentRiver: ZappRiver, pathname: string, title: string) => () => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  };
+
+export const findMenuPlugin = (
+  navigations: ZappNavigation[],
+  plugins
+): QuickBrickPlugin => {
+  return resolveNavigationPlugin({
+    category: "menu",
+    navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+};
+
+export const shouldNavBarDisplayMenu = (currentRiver: ZappRiver, plugins) =>
+  findMenuPlugin(currentRiver.navigations, plugins)?.identifier ===
+    "quick_brick_side_menu" ||
+  currentRiver?.navigations.findIndex(
+    (nav) => nav.category === "nav_bar" && nav.general?.override_menu_target
+  ) > -1;
+
+export const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};

package/numberUtils/__tests__/isLikeNumber.test.ts

@@ -7,12 +7,24 @@ describe("isLikeNumber", () => {
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a number", () => {
+    const value = 123.45;
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is a string as number", () => {
     const value = "123";
 
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a string as number", () => {
+    const value = "123.45";
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is empty string", () => {
     const value = "";
 
@@ -54,4 +66,10 @@ describe("isLikeNumber", () => {
 
     expect(isLikeNumber(value)).toBe(false);
   });
+
+  it("NaN is not a number", () => {
+    const value = NaN;
+
+    expect(isLikeNumber(value)).toBe(false);
+  });
 });

package/numberUtils/__tests__/toNumber.test.ts

@@ -2,7 +2,7 @@ import { toNumber } from "..";
 
 describe("toNumber", () => {
   it("return number if input is number", () => {
-    const inputs = [-1, 0, 1, 100];
+    const inputs = [-1, 0, 1, 100, 0.2];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -12,7 +12,7 @@ describe("toNumber", () => {
   });
 
   it("return number if input is string as number", () => {
-    const inputs = ["-1", "0", "1", "100"];
+    const inputs = ["-1", "0", "1", "100", "0.2"];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {

package/numberUtils/index.ts

@@ -50,28 +50,19 @@ export const toFiniteNumberWithDefault = (
   return possibleNumber;
 };
 
-export const isLikeNumber = (value: any): boolean => {
-  if (R.isEmpty(value)) {
-    return false;
-  }
-
-  if (R.is(Number, value)) {
-    return true;
-  }
+export const isLikeNumber = (value: unknown): boolean => {
+  const possibleNumber = toNumber(value);
 
-  if (R.is(String, value)) {
-    const onlyDigit = value
-      .split("")
-      .filter((char) =>
-        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(char)
-      )
-      .join("");
-
-    return value === onlyDigit;
+  if (R.isNil(possibleNumber)) {
+    return false;
   }
 
-  return false;
+  return true;
 };
 
 export const isZero = (value: unknown): boolean =>
   Object.is(value, -0) || Object.is(value, 0);
+
+export const isMinusZero = (value: number) => {
+  return 1 / value === -Infinity;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.9262886003",
+  "version": "12.0.0-alpha.9417984401",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.9262886003",
+    "@applicaster/applicaster-types": "12.0.0-alpha.9417984401",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/playerUtils/configurationGenerator.ts

@@ -22,6 +22,7 @@ function getDevice(platform) {
     case "android_tv_for_quickbrick":
     case "lg_tv":
     case "samsung_tv":
+    case "vizio":
     case "web":
       return "tv";
   }
@@ -1659,7 +1660,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu for TV
@@ -1796,6 +1798,30 @@ function getPlayerConfiguration({ platform }) {
             key: "menu_header_samsung_letter_spacing",
             initial_value: 0,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "menu_header_vizio_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "menu_header_vizio_font_size",
+            initial_value: 30,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Line Height",
+            key: "menu_header_vizio_line_height",
+            initial_value: 60,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Letter Spacing",
+            key: "menu_header_vizio_letter_spacing",
+            initial_value: 0,
+          },
         ]
       ),
       // Captions Menu - Item Text Label
@@ -1875,6 +1901,30 @@ function getPlayerConfiguration({ platform }) {
             key: "menu_item_samsung_letter_spacing",
             initial_value: 0,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "menu_item_vizio_font_family",
+            initial_value: "Ubuntu-Medium",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "menu_item_vizio_font_size",
+            initial_value: 25,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Line Height",
+            key: "menu_item_vizio_line_height",
+            initial_value: 40,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Letter Spacing",
+            key: "menu_item_vizio_letter_spacing",
+            initial_value: 0,
+          },
         ]
       ),
       // Captions Menu - Item Border
@@ -2018,6 +2068,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_video_player_title_font_size",
             initial_value: 58,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_video_player_title_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_video_player_title_font_size",
+            initial_value: 58,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2091,6 +2153,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_video_player_summary_font_size",
             initial_value: 30,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_video_player_summary_font_family",
+            initial_value: "Ubuntu-Medium",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_video_player_summary_font_size",
+            initial_value: 30,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2158,6 +2232,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_title_font_size",
             initial_value: 40,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_title_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_title_font_size",
+            initial_value: 40,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2213,6 +2299,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_summary_font_size",
             initial_value: 22,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_summary_font_family",
+            initial_value: "Ubuntu-Medium",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_summary_font_size",
+            initial_value: 22,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2268,6 +2366,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_player_time_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_player_time_font_family",
+            initial_value: "Ubuntu-Medium",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_player_time_font_size",
+            initial_value: 20,
+          },
           {
             type: "android_font_selector",
             label: "Android TV Font Family",
@@ -2323,6 +2433,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_run_time_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_run_time_font_family",
+            initial_value: "Ubuntu-Medium",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_run_time_font_size",
+            initial_value: 20,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",

package/playerUtils/imaScriptDom.ts

@@ -0,0 +1,59 @@
+import { createLogger } from "../logger";
+
+export const logger = createLogger({
+  category: "ImaDomUtils",
+  subsystem: "Player/ImaDomUtils",
+});
+
+const { log_debug, log_error, log_verbose } = logger;
+
+const removeElement = (node) => {
+  if (node) {
+    const parentNode = node.parentNode;
+
+    if (parentNode) {
+      parentNode.removeChild(node);
+    }
+  }
+};
+
+// TODO: This should probably be loaded to root of project before player init
+export const loadIMAScript = async () => {
+  return new Promise((resolve) => {
+    // If ima script is already loaded, resolve
+    const imaScript = document.getElementById("ima-script");
+
+    if (imaScript) {
+      log_verbose("loadIMAScript: IMA script already loaded");
+
+      return resolve(true);
+    }
+
+    const script = document.createElement("script");
+
+    if (__DEV__) {
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3_debug.js";
+    } else {
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
+    }
+
+    script.async = true;
+    script.id = "ima-script";
+
+    script.onload = () => {
+      removeElement(script);
+      log_debug("loadIMAScript: Loaded ima script", script.src);
+      resolve(true);
+    };
+
+    script.onerror = (_e) => {
+      removeElement(script);
+      log_error("loadIMAScript: Failed to load ima script", script.src);
+      resolve(false);
+    };
+
+    if (document.head) {
+      document.head.appendChild(script);
+    }
+  });
+};

package/pluginUtils/index.ts

@@ -245,3 +245,12 @@ export function generateManifest({ manifestConfig, version }) {
 
   return manifestConfig({ platform, version });
 }
+
+const getPluginType = R.pathOr("unknown_plugin_type", [
+  "state",
+  "screen",
+  "plugin_type",
+]);
+
+export const isPlayerPlugin = (routeState): boolean =>
+  getPluginType(routeState) === "player";

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -12,6 +12,8 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 jest.useFakeTimers();
 
 const {

package/reactHooks/autoscrolling/__tests__/{useTrackedView.test.ts → useTrackedView.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { act, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const mockUpdateComponentsPositions = jest.fn();
 
@@ -17,11 +21,24 @@ jest.mock(
 
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChild }) => (
+  /* @ts-ignore */
+  <Provider store={store}>{children}</Provider>
+);
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
   it("should update position for selected component", async () => {
-    const { result } = renderHook(() => useTrackedView("123"));
+    const { result } = renderHook(() => useTrackedView("123"), {
+      wrapper: Wrapper,
+    });
 
     // Fast-forward until all timers have been executed
     jest.advanceTimersByTime(3000);

package/reactHooks/cell-click/__tests__/index.test.js

@@ -1,11 +1,14 @@
 import * as React from "react";
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
 import { waitFor } from "@testing-library/react-native";
 
 const navigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),
+  data: {},
 };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
@@ -42,9 +45,15 @@ const mockProps = {
 
 const onCellTap = jest.fn();
 
+const actionExecutor = {
+  handleEntryActions: jest.fn(() => Promise.resolve()),
+};
+
 const wrapper = ({ children }) => (
   <CellTapContext.Provider value={onCellTap}>
-    {children}
+    <ActionExecutorContext.Provider value={actionExecutor}>
+      {children}
+    </ActionExecutorContext.Provider>
   </CellTapContext.Provider>
 );
 

package/reactHooks/cell-click/index.ts

@@ -11,9 +11,9 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { noop } from "../../functionUtils";
-import { useContext } from "react";
-import { ActionExecutorContext } from "../../actionsExecutor/ActionExecutorContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
+import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
 
@@ -30,12 +30,12 @@ type Props = {
   zappPipesData?: ZappPipesData;
 };
 
-export const useCellClick = (props: Props) => {
-  const { component, zappPipesData } = props;
+export const useCellClick = ({ component, zappPipesData, item }: Props) => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-  const onCellTap = React.useContext(CellTapContext);
-  const actionExecutor = useContext(ActionExecutorContext);
+
+  const onCellTap: Option<Function> = React.useContext(CellTapContext);
+  const actionExecutor = React.useContext(ActionExecutorContext);
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -47,7 +47,7 @@ export const useCellClick = (props: Props) => {
   const logTimestamp = useProfilerLogging();
 
   const sendAnalyticsOnPress = useSendAnalyticsOnPress(
-    props.item,
+    item,
     component,
     zappPipesData
   );
@@ -56,7 +56,7 @@ export const useCellClick = (props: Props) => {
     async (_item?: ZappEntry | any, _index?: number) => {
       // Making sure we are not getting GestureResponderEvent in here.
       const isZappEntry = _item?.id && _item?.type;
-      const selectedItem = isZappEntry ? _item : props.item;
+      const selectedItem = isZappEntry ? _item : item;
       setEntryContext?.(selectedItem);
 
       if (!selectedItem?.type?.value) {
@@ -80,10 +80,10 @@ export const useCellClick = (props: Props) => {
           });
         }
       } else {
-        if (typeof onCellTap === "function") {
-          onCellTap(selectedItem, _index);
+        if (isFunction(onCellTap)) {
+          onCellTap?.(selectedItem, _index);
         } else {
-          if (currentRoute === pathname || pathname === "videoModal") {
+          if (currentRoute === pathname || pathname.includes("video-modal")) {
             const targetScreen = component?.data?.target;
 
             push(