@applicaster/zapp-react-native-utils 14.0.0-alpha.4055325032 → 14.0.0-alpha.4104749434

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -351,86 +351,6 @@ function getPlayerConfiguration({ platform, version }) {
           ],
         },
       ]),
-      fieldsGroup(
-        "Partial Player (Roku only)",
-        "This section allows you to configure width and height of video player in Partial Player",
-        [
-          {
-            key: "video_theater_width",
-            label: "Width of player",
-            type: "number_input",
-            initial_value: "1420",
-            placeHolder: "1420",
-          },
-          {
-            key: "video_theater_height",
-            label: "Height of player",
-            type: "number_input",
-            initial_value: "900",
-            placeHolder: "900",
-          },
-          {
-            key: "full_screen_button_offset_x",
-            label: "Fullscreen button X",
-            type: "number_input",
-            initial_value: 160,
-            placeHolder: "160",
-          },
-          {
-            key: "full_screen_button_offset_y",
-            label: "Fullscreen button Y",
-            type: "number_input",
-            initial_value: 160,
-            placeHolder: "160",
-          },
-          {
-            key: "full_screen_button_w",
-            label: "Fullscreen button width",
-            type: "number_input",
-            initial_value: 120,
-            placeHolder: "120",
-          },
-          {
-            key: "full_screen_button_h",
-            label: "Fullscreen button height",
-            type: "number_input",
-            initial_value: 120,
-            placeHolder: "120",
-          },
-          {
-            key: "full_screen_button_background_color",
-            type: "color_picker",
-            label: "Fullscreen Button background color",
-            initial_value: "#00000000",
-            placeHolder: "color",
-            label_tooltip: "Pick Color",
-          },
-          {
-            key: "full_screen_button_background_url",
-            type: "text_input",
-            label: "Fullscreen Button background Url",
-            initial_value: "pkg:/images/tv_fullscreen.png",
-            placeHolder: "",
-            label_tooltip: "",
-          },
-          {
-            key: "full_screen_button_highlighted_background_color",
-            type: "color_picker",
-            label: "Fullscreen Button highlighted background color",
-            initial_value: "#00000000",
-            placeHolder: "color",
-            label_tooltip: "Pick Color",
-          },
-          {
-            key: "full_screen_button_highlighted_background_url",
-            type: "text_input",
-            label: "Fullscreen Button highlighted Url",
-            initial_value: "pkg:/images/tv_fullscreen.png",
-            placeHolder: "",
-            label_tooltip: "",
-          },
-        ]
-      ),
       fieldsGroup(
         "Skip Button",
         "This section allows you to configure the skip button styles for tv",
@@ -562,20 +482,6 @@ function getPlayerConfiguration({ platform, version }) {
             key: "skip_button_style_text_android_font_size",
             initial_value: 24,
           },
-          {
-            type: "roku_font_selector",
-            label_tooltip: "",
-            label: "Roku Font Family",
-            key: "skip_button_style_text_roku_font_family",
-            initial_value: "Ubuntu-Bold",
-          },
-          {
-            type: "number_input",
-            label_tooltip: "",
-            label: "Roku Font Size",
-            key: "skip_button_style_text_roku_font_size",
-            initial_value: 24,
-          },
           {
             type: "select",
             options: [
@@ -3424,60 +3330,6 @@ function getPlayerConfiguration({ platform, version }) {
           },
         ]
       ),
-      fieldsGroup(
-        "Roku only",
-        "This section allows you to configure RAF - Roku Ad Framework settings",
-        [
-          {
-            key: "raf_enabled",
-            type: "switch",
-            initial_value: false,
-          },
-          {
-            key: "raf_url",
-            type: "text_input",
-            label: "Ad Url",
-            label_tooltip:
-              "Publisher's ad URL. The default is he roku ad server with single preroll placeholder, with revenue spilt ad sharing by default. TO GET PAID A URL MUST BE PASSED IN HERE. Note: If you are putting ads in child targetted content then your ad url will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
-          },
-          {
-            key: "genre",
-            type: "text_input",
-            label: "Roku Genre",
-            initial_value: "Entertainment",
-            label_tooltip:
-              "Choose value from Roku genre tags, from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md",
-          },
-          {
-            key: "nielsen_enabled",
-            type: "checkbox",
-            initial_value: false,
-            label_tooltip:
-              "Required only for apps launched in the US market, See developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md for details on configuration",
-          },
-          {
-            key: "nielsen_app_id",
-            type: "text_input",
-            initial_value: "",
-            label_tooltip:
-              "id of your app for nielsen leave blank if you don't have a specific id (that is almost always the case)",
-          },
-          {
-            key: "nielsen_genre",
-            type: "text_input",
-            initial_value: "General",
-            label_tooltip:
-              "genre from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md#nielsen-dar-genre-tags",
-          },
-          {
-            key: "is_kids_content",
-            type: "checkbox",
-            initial_value: false,
-            label_tooltip:
-              "If your content is directed at kids, this must be checked. See developer.roku.com/docs/developer-program/advertising/raf-api.md#setcontentgenregenres-as-string-kidscontent-as-boolean for more info. Also note your ad urls will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
-          },
-        ]
-      ),
       fieldsGroup(
         "Audio Tracks",
         "This section allows you to configure default audio track behavior for videos with multiple audio tracks",

package/manifestUtils/keys.js

@@ -485,18 +485,6 @@ const TV_MENU_LABEL_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "LG letter spacing",
   },
-  {
-    type: ZAPPIFEST_FIELDS.font_selector.roku,
-    suffix: "Roku font family",
-  },
-  {
-    type: ZAPPIFEST_FIELDS.number_input,
-    suffix: "Roku font size",
-  },
-  {
-    type: ZAPPIFEST_FIELDS.number_input,
-    suffix: "Roku line height",
-  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "text transform",

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -424,12 +424,6 @@ const titleFields = [
     key: "vizio_font_family",
     initial_value: fontFamily,
   },
-  {
-    type: "roku_font_selector",
-    label: "Roku TV Font Family",
-    key: "roku_font_family",
-    initial_value: fontFamily,
-  },
   ...generateFontConfiguration(),
   // text transform
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.4055325032",
+  "version": "14.0.0-alpha.4104749434",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.4055325032",
+    "@applicaster/applicaster-types": "14.0.0-alpha.4104749434",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -1,25 +1,27 @@
 import React from "react";
 
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
+import { act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import { useTrackedView } from "../useTrackedView";
 
 const mockUpdateComponentsPositions = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",
   () => ({
-    useScreenTrackedViewPositionsContext: jest.fn().mockReturnValue({
+    useScreenTrackedViewPositionsContext: jest.fn(() => ({
       updateComponentsPositions: mockUpdateComponentsPositions,
       value: {
         "123": { componentId: "123", centerX: 0.4, centerY: 0.5 },
         "124": { componentId: "124", centerX: 0.2, centerY: 0.3 },
       },
-    }),
+    })),
   })
 );
 
-jest.useFakeTimers({ legacyFakeTimers: true });
+jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
@@ -32,10 +34,8 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
   <Provider store={store}>{children}</Provider>
 );
 
-const { useTrackedView } = require("../useTrackedView");
-
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component - onViewportEnter", () => {
+  it("should update position for selected component - onViewportEnter", async () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
@@ -46,14 +46,13 @@ describe("useTrackCurrentAutoScrollingElement", () => {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(async () => {
-      await result.current.onPositionUpdated(mockRect);
+    act(() => {
+      result.current.onPositionUpdated(mockRect);
     });
 
-    // Fast-forward until all timers have been executed
-    jest.runAllTimers();
-
-    expect(result.current.inViewPort).toBe(true);
+    await waitFor(() => {
+      expect(result.current.inViewPort).toBe(true);
+    });
 
     expect(mockUpdateComponentsPositions).toHaveBeenCalledWith(
       "123",

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

@@ -1,8 +1,7 @@
 import { renderHook } from "@testing-library/react-hooks";
-import * as reduxMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import React from "react";
-import * as ReactRedux from "react-redux";
+import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 jest.mock("../../navigation");
 
@@ -13,17 +12,18 @@ jest.mock(
   })
 );
 
-const useBatchLoading = require("../useBatchLoading").useBatchLoading;
-const allFeedsIsReady = require("../useBatchLoading").allFeedsIsReady;
-
-const mockStore = reduxMockStore.default([thunk]);
-
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <ReactRedux.Provider store={store}>{children}</ReactRedux.Provider>
-);
+const wrapper = WrappedWithProviders;
 
 describe("useBatchLoading", () => {
-  const useDispatchSpy = jest.spyOn(ReactRedux, "useDispatch");
+  const data = [
+    { data: { source: "url1" }, component_type: "any" },
+    { data: { source: "url2" }, component_type: "any" },
+    { data: { source: "url3" }, component_type: "any" },
+    { data: { source: "url4" }, component_type: "any" },
+    { data: { source: "url5" }, component_type: "any" },
+    { data: { source: "url6" }, component_type: "any" },
+    // ... more items
+  ];
 
   beforeAll(() => {
     jest.useFakeTimers();
@@ -34,7 +34,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading not started requests", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: true,
@@ -53,29 +53,17 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(2);
 
@@ -91,7 +79,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -110,31 +98,17 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
-    expect(useDispatchSpy).toBeCalledTimes(0);
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
 
@@ -145,38 +119,26 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData has been called when no data cached", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(3);
   });
 
   it("initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -194,19 +156,11 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-    ];
-
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
       { wrapper, initialProps: { store } }
@@ -216,12 +170,10 @@ describe("useBatchLoading", () => {
   });
 
   it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
@@ -231,11 +183,11 @@ describe("useBatchLoading", () => {
         component_type: "gallery-qb",
         ui_components: [{ data: { source: "url1" } }],
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
+      { data: { source: "url4" }, component_type: "any" },
+      { data: { source: "url5" }, component_type: "any" },
+      { data: { source: "url6" }, component_type: "any" },
       // ... more items
     ];
 
@@ -244,13 +196,13 @@ describe("useBatchLoading", () => {
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
   });
 
   it("gallery-qb: initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -258,20 +210,19 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
+    const data = [
       {
         component_type: "gallery-qb",
-        ui_components: [{ data: { source: "url1" } }],
+        data: {},
+        ui_components: [{ data: { source: "url1" } }] as any,
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
     ];
 
     const { result } = renderHook(

package/reactHooks/navigation/index.ts

@@ -14,7 +14,7 @@ import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
 
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
 
 export { useNavigation } from "./useNavigation";
@@ -127,11 +127,13 @@ export function isNavBarVisible(
 
 export const useBackHandler = (cb: () => boolean) => {
   useEffect(() => {
-    BackHandler.addEventListener("hardwareBackPress", cb);
+    if (!isWeb()) {
+      const unsubscribe = BackHandler.addEventListener("hardwareBackPress", cb);
 
-    return () => {
-      BackHandler.removeEventListener("hardwareBackPress", cb);
-    };
+      return () => {
+        unsubscribe.remove();
+      };
+    }
   }, [cb]);
 };
 

package/testUtils/index.tsx

@@ -1,17 +1,16 @@
-import * as R from "ramda";
-
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { render } from "@testing-library/react-native";
 import React, { PropsWithChildren } from "react";
-import { View } from "react-native";
-
+import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
+import { View } from "react-native";
 import thunk from "redux-thunk";
-import configureStore from "redux-mock-store";
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import * as R from "ramda";
+
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
-import { render } from "@testing-library/react-native";
-import { AnalyticsProvider } from "../analyticsUtils";
 import { ThemeContext } from "../theme";
+import { AnalyticsProvider } from "../analyticsUtils";
 
 export { getByTestId } from "./getByTestId";