@applicaster/zapp-react-native-utils 14.0.0-alpha.1235043154 → 14.0.0-alpha.1355728993

package/playerUtils/configurationUtils.ts

@@ -1,6 +1,50 @@
 import { parseJsonIfNeeded } from "../functionUtils";
 import * as R from "ramda";
 
+import { getNativeName as nativeNameUtil } from "../localizationUtils/localeLanguage";
+
+export const modifyDefaultConfigValues = (
+  configuration: ConfigurationKeys,
+  mapping: ConfigValuesMapping
+): DefaultConfiguration => {
+  return R.mapObjIndexed((value, key) => {
+    const isFieldlessKey = key === "custom_configuration_fields";
+    const keyMapping = mapping[key];
+    const fields = value?.fields || value;
+
+    if (!keyMapping) {
+      return value;
+    }
+
+    const mapper = (obj) => {
+      if (obj.fields) {
+        return R.mergeLeft({ fields: R.map(mapper)(obj.fields) })(obj);
+      }
+
+      return R.mergeLeft(keyMapping?.[obj.key])(obj);
+    };
+
+    const mappedFields = R.map(mapper)(fields);
+
+    return R.unless(() => isFieldlessKey, R.objOf("fields"))(mappedFields);
+  })(configuration);
+};
+
+export function nativeName(localeCode) {
+  try {
+    const {
+      getNativeName,
+    } = require("@applicaster/zapp-react-native-utils/localizationUtils/localeLanguage");
+
+    return getNativeName(localeCode);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn("Could not load localeLanguage utils from QB", error);
+
+    return nativeNameUtil(localeCode);
+  }
+}
+
 const setTrackType = R.curry(
   (
     type: QuickBrickPlayer.TrackType,

package/playerUtils/index.ts

@@ -5,8 +5,7 @@ import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getBoolFromConfigValue } from "../configurationUtils";
-
-export { getPlayerActionButtons } from "./getPlayerActionButtons";
+import { Dimensions } from "react-native";
 
 /**
  * Gets duration value from player manager, and from extensions
@@ -97,3 +96,53 @@ export const isAudioItem = (item: Option<ZappEntry>) => {
 export const isInlineTV = (screenData) => {
   return isTV() && isFilledArray(screenData?.ui_components);
 };
+
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
+type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
+};
+
+export const getTabletWidth = (
+  tablet_landscape_sidebar_width,
+  dimensions: DimensionsT
+) => {
+  const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+
+  const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return widthValue * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return widthValue * 0.65;
+  }
+
+  return widthValue - sidebarWidth;
+};

package/playerUtils/useValidatePlayerConfig.tsx

@@ -1,37 +1,34 @@
 import * as React from "react";
+import * as R from "ramda";
+import generateConfiguration from "./configurationGenerator";
 import { createLogger } from "../logger";
-import { createConfig } from "../manifestUtils/createConfig";
-import { getAllFields, getConfigurationDiff } from "./_internals";
 
 export const logger = createLogger({
   category: "useValidatePlayerConfig",
   subsystem: "useValidatePlayerConfig",
 });
 
-/** Default Player Configuration */
-const {
-  styles,
-  general,
-  localizations,
-  custom_configuration_fields,
-}: DefaultConfiguration = createConfig(
-  () => {
-    return {};
-  },
-  { extend: "player" }
-) as any;
-
-const QBPlayerConfigFields = getAllFields(
-  styles,
-  general,
-  localizations,
-  custom_configuration_fields
-);
+const configuration = generateConfiguration();
 
 export const useValidatePlayerConfig = (config) => {
   React.useEffect(() => {
     try {
-      const diff = getConfigurationDiff(QBPlayerConfigFields, config);
+      const QBPlayerConfigFields = R.compose(
+        R.map(R.prop("key")),
+        R.flatten,
+        R.map(R.compose(R.when(R.propEq("group", true), R.prop("fields")))),
+        R.concat
+      )(
+        configuration.styles.fields,
+        configuration.general.fields,
+        configuration.localizations.fields,
+        configuration.custom_configuration_fields
+      );
+
+      const diff = R.compose(
+        R.difference(QBPlayerConfigFields),
+        R.keys
+      )(config);
 
       logger.log_info(
         "Missing following configuration properties. Some elements of the player may not work correctly. Check QuickBrickPlayerPlugin for the configuration reference https://github.com/applicaster/QuickBrick/tree/main/plugins/zapp-react-native-default-player/manifests",

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

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

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

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

package/reactHooks/feed/useBatchLoading.ts

@@ -144,11 +144,11 @@ export const useBatchLoading = (
         }
       }
     });
-  }, [feedUrls, feeds]);
+  }, [feedUrls]);
 
   React.useEffect(() => {
     runBatchLoading();
-  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
+  }, []);
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/navigation/index.ts

@@ -127,10 +127,10 @@ export function isNavBarVisible(
 
 export const useBackHandler = (cb: () => boolean) => {
   useEffect(() => {
-    const unsubscribe = BackHandler.addEventListener("hardwareBackPress", cb);
+    BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
-      unsubscribe.remove();
+      BackHandler.removeEventListener("hardwareBackPress", cb);
     };
   }, [cb]);
 };

package/testUtils/index.tsx

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

package/utils/index.ts

@@ -2,15 +2,4 @@ export { chunk } from "./chunk";
 
 export { times } from "./times";
 
-export {
-  cloneDeep as clone,
-  flatten,
-  drop,
-  size,
-  isNil,
-  isEmpty,
-  get,
-  has,
-  flatMap,
-  difference,
-} from "lodash";
+export { cloneDeep as clone, flatten, drop, size, isNil } from "lodash";

package/arrayUtils/__tests__/isEmptyArray.test.ts

@@ -1,63 +0,0 @@
-import { isEmptyArray } from "..";
-
-describe("isEmptyArray", () => {
-  it("non-empty array is not empty", () => {
-    const value = [1, 2, 3];
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("empty array is empty", () => {
-    const value = [];
-
-    expect(isEmptyArray(value)).toBe(true);
-  });
-
-  it("number is not array", () => {
-    const value = 123;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("string is not array", () => {
-    const value = "vfnjdk";
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("empty string is not array", () => {
-    const value = "";
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("NaN is not array", () => {
-    const value = NaN;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("object is not array", () => {
-    const value = { test: 1 };
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("empty object is not array", () => {
-    const value = {};
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("undefined is not array", () => {
-    const value = undefined;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("null is not array", () => {
-    const value = null;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-});