@applicaster/zapp-react-native-utils 12.0.0-alpha.9433151351 → 12.0.0-alpha.9456036075

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/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(

package/reactHooks/debugging/__tests__/index.test.js

@@ -4,38 +4,77 @@ import {
   timers,
 } from "@applicaster/zapp-react-native-utils/reactHooks/debugging";
 
-jest.useFakeTimers();
-
 describe("Debug utils", () => {
+  let performanceNowMock;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    // Clear the timers object
+    Object.keys(timers).forEach((key) => delete timers[key]);
+
+    // Mock performance.now()
+    // eslint-disable-next-line no-undef
+    performanceNowMock = jest.spyOn(performance, "now");
+    performanceNowMock.mockReturnValue(0); // Initial value
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+    performanceNowMock.mockRestore();
+  });
+
   describe("Unit Test: time", () => {
     it("should create new timer if timer with a label does not exist", () => {
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
       expect(timers["timer1"]).toBeDefined();
+      expect(timers["timer1"].startTime).toBe(1000);
     });
 
     it("should update start time of timer if timer with a label exists", () => {
+      // First call to time()
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
       const previousStartTime = timers["timer1"].startTime;
-      jest.advanceTimersByTime(1000);
+
+      // Second call to time()
+      performanceNowMock.mockReturnValue(2000);
       time("timer1");
       const currentStartTime = timers["timer1"].startTime;
-      expect(previousStartTime).not.toEqual(currentStartTime);
+
+      expect(previousStartTime).toBe(1000);
+      expect(currentStartTime).toBe(2000);
     });
   });
 
   describe("Unit Test: timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
 
-      expect(logSpy).toHaveBeenCalled();
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.any(Object)
+      );
     });
 
     it("should not log elapsed time if accumulative: true in settings", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1", { accumulative: true });
 
       expect(logSpy).not.toHaveBeenCalled();
@@ -43,21 +82,52 @@ describe("Debug utils", () => {
   });
 
   describe("Integration Test: time and timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time on timeEnd call", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
-      expect(logSpy).toHaveBeenCalled();
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.objectContaining({
+          label: "timer1",
+          settings: undefined,
+        })
+      );
     });
 
-    it("should log total and average time on timeEnd call without accumulative option", () => {
+    it("should log total and average time when accumulative timing is complete", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      // First timing
+      performanceNowMock.mockReturnValue(1000);
       time("timer2");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer2", { accumulative: true });
-      timeEnd("timer2");
-      expect(logSpy).toHaveBeenCalled();
+
+      // Second timing
+      performanceNowMock.mockReturnValue(3000);
+      time("timer2");
+
+      performanceNowMock.mockReturnValue(5000);
+      timeEnd("timer2"); // This will log because timer is accumulative (callCount > 1)
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer2: 2000.000ms 2",
+        expect.objectContaining({
+          label: "timer2",
+          settings: undefined,
+        })
+      );
     });
   });
 });

package/reactHooks/feed/__tests__/useBuildPipesUrl.test.tsx

@@ -1,77 +1,26 @@
-import React from "react";
 import { renderHook } from "@testing-library/react-hooks";
-import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import { Provider } from "react-redux";
-
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
-const mockStore = configureStore([thunk]);
-
-jest.useFakeTimers();
-
 const appData = {
   platform: "foo",
   version_name: "1.2.0",
   sdk_version: "2.0.0",
 };
 
-const pipesEndpoints = {
-  "http://foo.com/show": {
-    context_obj: [
-      { type: "ctx", key: "platform" },
-      { type: "query", mapper: "version", key: "appVersion" },
-      { type: "header", mapper: "SDK", key: "sdkVersion" },
-    ],
-  },
-};
-
-const store_mock = { appData, pipesEndpoints };
-
-const defaultStore = mockStore({
-  pipesEndpoints,
-  appData,
-});
+let INFLATED_URL;
 
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <Provider store={store}>{children}</Provider>
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
+  () => ({
+    useInflatedUrl: () => INFLATED_URL,
+  })
 );
 
-const navigator = {
-  currentRoute: "/river/A1234",
-};
-
-jest.mock("../../navigation", () => ({
-  useNavigation: jest.fn(() => navigator),
-  useRoute: jest.fn(() => ({})),
-}));
-
-const contexts = {
-  entry: { id: "show-1" },
-  search: {},
-  screen: {},
-};
-
-const contextMock = (type) => ({
-  useZappPipesContext: () => [contexts[type] || {}],
-});
-
-jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
-  ZappPipesEntryContext: contextMock("entry"),
-  ZappPipesSearchContext: contextMock("search"),
-  ZappPipesScreenContext: contextMock("screen"),
-}));
-
-jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
-  appStore: {
-    get: jest.fn((prop) => store_mock[prop]),
-  },
-}));
-
 const { useBuildPipesUrl } = require("../useBuildPipesUrl");
 
 describe("useBuildPipesUrl", () => {
   it("returns the proper url", async () => {
+    INFLATED_URL = "http://foo.com/show/show-1";
     const url = "http://foo.com/show/{{showId}}";
 
     const mapping = {
@@ -81,12 +30,20 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    const buildResult = {
+      params: {
+        ctx: encodeParams({ platform: appData.platform }),
+        version: appData.version_name,
+      },
+      headers: { SDK: appData.sdk_version },
+    };
+
+    const mockedRequestBuilder = {
+      build: jest.fn(() => Promise.resolve(buildResult)),
+    };
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
@@ -108,6 +65,7 @@ describe("useBuildPipesUrl", () => {
   });
 
   it("returns empty object if url is not in endpoints", async () => {
+    INFLATED_URL = "http://foobar.com/show-1";
     const url = "http://foobar.com/{{showId}}";
 
     const mapping = {
@@ -117,12 +75,14 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    const buildResult = {};
+
+    const mockedRequestBuilder = {
+      build: jest.fn(() => Promise.resolve(buildResult)),
+    };
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");

package/reactHooks/feed/__tests__/useFeedRefresh.test.tsx

@@ -1,9 +1,13 @@
 import { renderHook } from "@testing-library/react-hooks";
 
-import { useFeedRefresh, feedRefreshLogger } from "../";
-
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useIsScreenActive: () => true,
+}));
+
+const { useFeedRefresh, feedRefreshLogger } = require("..");
+
 describe("useFeedRefresh", () => {
   const reloadData = jest.fn();