@applicaster/zapp-react-native-utils 12.0.0-rc.14 → 12.0.0-rc.141

package/navigationUtils/index.ts

@@ -93,19 +93,68 @@ export function resolveNavigationPlugin({
  * @param {Object} navigator to look for navigation props
  * @param {String} category to look for in screen navigations
  * @returns {Object} props
+ * @deprecated use getNavigationPropsV2 instead
  */
 export function getNavigationProps({
-  navigator: { activeRiver },
+  navigator,
   title = "",
   category,
 }: {
   navigator: QuickBrickAppNavigator;
   title: string;
   category: string;
-}): Nullable<
-  Partial<ZappNavigation> & { selected: string; title: string; home: boolean }
-> {
-  const { navigations, id: selected, home } = activeRiver;
+}): {
+  selected: string;
+  title: string;
+  home: boolean;
+  styles: unknown;
+  assets: ZappNavBarAssets;
+  rules: ZappNavBarRules;
+  nav_items: NavBarItem[];
+} | null {
+  const { activeRiver } = navigator;
+  const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
+
+  const navigation: ZappNavigation = R.find(
+    R.propEq("category", category),
+    navigations
+  );
+
+  if (!navigation) {
+    return null;
+  }
+
+  const { styles, assets, nav_items, rules } = navigation;
+
+  return {
+    selected,
+    title,
+    home,
+    styles,
+    assets: assets as ZappNavBarAssets,
+    nav_items: nav_items as any as NavBarItem[],
+    rules: rules as any as ZappNavBarRules,
+  };
+}
+
+export function getNavigationPropsV2({
+  currentRiver,
+  title = "",
+  category,
+}: {
+  currentRiver: ZappRiver;
+  title: string;
+  category: string;
+}): {
+  selected: string;
+  title: string;
+  home: boolean;
+  styles: unknown;
+  assets: ZappNavBarAssets;
+  rules: ZappNavBarRules;
+  nav_items: NavBarItem[];
+} | null {
+  const { navigations, id: selected, home } = currentRiver; // use useRiver hook instead
   const navigation = R.find(R.propEq("category", category), navigations);
 
   if (!navigation) {
@@ -170,7 +219,7 @@ export function getScreenIdForContentType(payload, contentTypes) {
 export function getItemTargetId(
   item: ZappEntry | ZappRiver,
   screenType?: string, // todo: creat screen types enum
-  contentTypes?: ZappContentTypes,
+  contentTypes?: ZappContentTypes | null,
   rivers?: Record<string, ZappRiver>
 ) {
   // Pipes v2 resolution
@@ -214,10 +263,10 @@ export function getTargetRoute(
   pathname = "",
   {
     contentTypes = undefined,
-    layoutVersion = undefined,
+    layoutVersion = "v2",
     rivers = {},
   }: {
-    contentTypes?: ZappContentTypes;
+    contentTypes?: ZappContentTypes | null;
     layoutVersion?: Maybe<ZappLayoutVersions>;
     rivers?: Record<string, ZappRiver>;
   } = {}
@@ -543,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/__tests__/toPositiveNumberWithDefault.test.ts

@@ -0,0 +1,66 @@
+import { toPositiveNumberWithDefault } from "..";
+
+describe("toNumber", () => {
+  const DEFAULT = 5;
+
+  it("return number if input is positive number", () => {
+    const inputs = [0, 1, 2, 100, 200.12, Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is positive number as string", () => {
+    const inputs = ["0", "1", "2", "100", "200.12"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return default number if input is negative number", () => {
+    const inputs = [-1, -2, -100, -Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default number if input is negative number as string", () => {
+    const inputs = ["-1", "-2", "-100"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is not a number or infinite", () => {
+    const inputs = [
+      "vfdvf",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+});

package/numberUtils/__tests__/toPositiveNumberWithDefaultZero.test.ts

@@ -0,0 +1,66 @@
+import { toPositiveNumberWithDefaultZero } from "..";
+
+const DEFAULT = 0;
+
+describe("toNumber", () => {
+  it("return number if input is positive number", () => {
+    const inputs = [0, 1, 2, 100, 200.12];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is positive number as string", () => {
+    const inputs = ["0", "1", "2", "100", "200.12"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return default number if input is negative number", () => {
+    const inputs = [-1, -2, -100];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default number if input is negative number as string", () => {
+    const inputs = ["-1", "-2", "-100"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is not a number or infinite", () => {
+    const inputs = [
+      "vfdvf",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+});

package/numberUtils/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-rc.14",
+  "version": "12.0.0-rc.141",
   "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-rc.14",
+    "@applicaster/applicaster-types": "12.0.0-rc.141",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",
@@ -44,6 +44,7 @@
     "immer": "*",
     "react": "17.0.2",
     "react-native": "0.68.6",
+    "validate-color": "*",
     "zustand": "*"
   },
   "devDependencies": {

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";
   }
@@ -46,6 +47,14 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Enable if you want to have adaptive background gradient based on audio background image.",
       },
+      {
+        key: "audio_player_background_image_query",
+        label: "Audio Player Image Query",
+        initial_value: "",
+        type: "text_input",
+        label_tooltip:
+          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
+      },
     ],
   };
 
@@ -1651,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
@@ -1788,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
@@ -1867,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
@@ -2010,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",
@@ -2083,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",
@@ -2150,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",
@@ -2205,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",
@@ -2260,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",
@@ -2315,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);
+    }
+  });
+};