@applicaster/zapp-react-native-utils 12.0.0-rc.98 → 13.0.0-alpha.2322412833

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

@@ -77,8 +77,6 @@ describe("useBatchLoading", () => {
 
     const actions = store.getActions();
 
-    expect(useDispatchSpy).toBeCalledTimes(1);
-
     expect(actions).toHaveLength(2);
 
     expect(actions[0]).toMatchObject({
@@ -129,6 +127,8 @@ describe("useBatchLoading", () => {
       // ... more items
     ];
 
+    expect(useDispatchSpy).toBeCalledTimes(0);
+
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
@@ -136,8 +136,6 @@ describe("useBatchLoading", () => {
 
     const actions = store.getActions();
 
-    expect(useDispatchSpy).toBeCalledTimes(1);
-
     expect(actions).toHaveLength(1);
 
     expect(actions[0]).toMatchObject({
@@ -172,8 +170,6 @@ describe("useBatchLoading", () => {
       initialProps: { store },
     });
 
-    expect(useDispatchSpy).toBeCalledTimes(1);
-
     const actions = store.getActions();
 
     expect(actions).toHaveLength(3);
@@ -218,6 +214,73 @@ describe("useBatchLoading", () => {
 
     expect(result.current).toBe(true);
   });
+
+  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
+    const store = mockStore({
+      zappPipes: {},
+      test: "true",
+    });
+
+    useDispatchSpy.mockReturnValue(store.dispatch);
+
+    const initialBatchSize = 3;
+    const riverId = "123";
+
+    const data = [
+      {
+        component_type: "gallery-qb",
+        ui_components: [{ 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();
+
+    expect(actions).toHaveLength(1);
+  });
+
+  it("gallery-qb: initial batch ready when all initial items loaded", () => {
+    const store = mockStore({
+      zappPipes: {
+        url1: {
+          loading: false,
+          error: false,
+          data: {},
+        },
+      },
+    });
+
+    useDispatchSpy.mockReturnValue(store.dispatch);
+
+    const initialBatchSize = 3;
+    const riverId = "123";
+
+    const data: Partial<ZappUIComponent>[] = [
+      {
+        component_type: "gallery-qb",
+        ui_components: [{ data: { source: "url1" } }],
+      },
+      { data: { source: "url2" } },
+      { data: { source: "url3" } },
+    ];
+
+    const { result } = renderHook(
+      () => useBatchLoading(data, { initialBatchSize, riverId }),
+      { wrapper, initialProps: { store } }
+    );
+
+    expect(result.current).toBe(true);
+  });
 });
 
 describe("allFeedsIsReady", () => {

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

@@ -135,7 +135,11 @@ describe("useFeedLoader", () => {
       );
 
       expect(result.current.data).toBeNull();
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {});
+
+      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        clearCache: true,
+        riverId: undefined,
+      });
 
       const store2 = mockStore({
         plugins: [],
@@ -172,7 +176,11 @@ describe("useFeedLoader", () => {
       );
 
       expect(result.current.data).toBeNull();
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {});
+
+      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        clearCache: true,
+        riverId: undefined,
+      });
 
       const store2 = mockStore({
         plugins: [],

package/reactHooks/feed/useBatchLoading.ts

@@ -45,19 +45,23 @@ const filterEmptyData = (data) => {
   return true;
 };
 
-const extractData = compose(uniq, map(dataOf));
+const getData = (rawData) =>
+  rawData.component_type === "gallery-qb"
+    ? rawData.ui_components[0].data
+    : rawData.data;
+
+const extractData = compose(uniq, map(getData));
 
 export const allFeedsIsReady = (
   feeds: ZappPipesCollection,
   urls: (ZappDataSourceSource | null)[]
 ): boolean =>
-  urls
-    .filter(complement(isNil))
-    .map((url) => (url ? checkFeedIsReady(feeds[url]) : false))
-    .every(Boolean);
+  urls.every((url) =>
+    isNil(url) ? true : url && feeds[url] ? checkFeedIsReady(feeds[url]) : false
+  );
 
 export const useBatchLoading = (
-  data: { data?: ZappDataSource }[],
+  componentsToRender: { data?: ZappDataSource; component_type: string }[],
   options: Options
 ) => {
   const dispatch = useDispatch();
@@ -65,10 +69,18 @@ export const useBatchLoading = (
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
 
-  const takeBatchSize = take(
-    min(options.initialBatchSize ?? DEFAULT_BATCH_SIZE, data.length)
-  );
+  // if first component is gallery-qb, take only one component for initial load
+  const takeSize =
+    componentsToRender?.[0]?.component_type === "gallery-qb"
+      ? 1
+      : min(
+          options.initialBatchSize ?? DEFAULT_BATCH_SIZE,
+          componentsToRender.length
+        );
+
+  const takeBatchSize = React.useCallback(take(takeSize), [takeSize]);
 
+  // Prepare inflated url for datasource
   const getUrl = React.useCallback(
     (data) => {
       const mappedFeed = data.mapping
@@ -88,13 +100,16 @@ export const useBatchLoading = (
     [entryContext, screenContext, searchContext]
   );
 
-  const batchData = takeBatchSize(data);
+  // components for initial load
+  const batchComponents = takeBatchSize(componentsToRender);
 
+  // contains datasources from batch components loading
   const feedData: ZappDataSource[] = React.useMemo(
-    () => extractData(batchData).filter(filterEmptyData),
-    [batchData]
+    () => extractData(batchComponents).filter(filterEmptyData),
+    [batchComponents]
   );
 
+  // contains inflated urls from batch components loading
   const feedUrls: ZappDataSourceSource[] = React.useMemo(
     () =>
       feedData.map((data) => {
@@ -102,34 +117,43 @@ export const useBatchLoading = (
 
         return mappedFeedUrl;
       }),
-    [] // No watchers as batch loaders is used only for initial load
+    []
   );
 
   const feeds = useZappPipesFeeds(feedUrls);
 
-  React.useEffect(() => {
-    const datasources = map(dataOf, batchData)
-      .filter(filterEmptyData)
-      .filter((data) => {
-        const feed = feeds[data.source];
+  // dispatch loadPipesData for each feed that is not loaded
+  const runBatchLoading = React.useCallback(() => {
+    batchComponents.forEach((rawData: any) => {
+      // 1. get data (dataOf)
 
-        if (!feed) return true;
+      const data = getData(rawData);
 
-        return !feedHasData(feed) && !feedIsLoading(feed);
-      });
+      // 2. filter out empty data filterEmptyData
+      if (!filterEmptyData(data)) return false;
 
-    datasources.forEach((data) => {
-      const mappedFeedUrl = getUrl(data);
+      // 3. filter out data that is already loaded (feeds[data.source]) &  !feedHasData(feed) && !feedIsLoading(feed);
+      const feed = feeds[data?.source];
 
-      if (mappedFeedUrl) {
-        return dispatch(
-          loadPipesData(mappedFeedUrl, { riverId: options.riverId })
-        );
+      if (!feed || (!feedHasData(feed) && !feedIsLoading(feed))) {
+        const mappedFeedUrl = getUrl(data);
+
+        if (mappedFeedUrl) {
+          // 4. load data
+          return dispatch(
+            loadPipesData(mappedFeedUrl, { riverId: options.riverId })
+          );
+        }
       }
     });
-  }, []); // No watchers as batch loaders is used only for initial load
+  }, [feedUrls]);
+
+  React.useEffect(() => {
+    runBatchLoading();
+  }, []);
 
   React.useEffect(() => {
+    // check if all feeds are ready and set hasEverBeenReady to true
     if (allFeedsIsReady(feeds, feedUrls) && !hasEverBeenReady) {
       setHasEverBeenReady(true);
     }

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect } from "react";
-import { path } from "ramda";
 import { useDispatch } from "react-redux";
 
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender } from "../utils";
+import { useIsInitialRender, shouldDispatchData } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -56,8 +55,6 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const cachedFeed = React.useMemo(() => path(["data"])(currentFeed), []);
-
   const riverId = screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
@@ -92,11 +89,18 @@ export const useFeedLoader = ({
     }
   }, [callableFeedUrl, currentFeed?.data]);
 
-  // If feed doesn't exist, load it
   useEffect(() => {
-    if (!cachedFeed || pipesOptions.clearCache) {
+    if (
+      shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
+    ) {
       if (callableFeedUrl) {
-        dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+        dispatch(
+          loadPipesData(callableFeedUrl, {
+            ...pipesOptions,
+            clearCache: true,
+            riverId,
+          })
+        );
       } else {
         logger.info({
           message:

package/reactHooks/layout/useDimensions/__tests__/useDimensions.test.ts

@@ -0,0 +1,134 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { Dimensions, StatusBar } from "react-native";
+
+const mockUsePickFromState = jest.fn();
+const mockUseIsScreenActive = jest.fn();
+const mockGetInitialDimensions = jest.fn();
+const mockGetDeviceInfo = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  ...(jest.requireActual("@applicaster/zapp-react-native-redux/hooks") as {}),
+  usePickFromState: mockUsePickFromState,
+}));
+
+jest.mock("../../../navigation", () => ({
+  useIsScreenActive: mockUseIsScreenActive,
+}));
+
+jest.mock("../helpers", () => ({
+  getInitialDimensions: mockGetInitialDimensions,
+}));
+
+jest.mock("../../getDeviceInfo", () => ({
+  getDeviceInfo: mockGetDeviceInfo,
+}));
+
+const { useDimensions } = require("../useDimensions");
+
+describe("useDimensions", () => {
+  const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
+  const mockAppData = { someData: "test" };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
+
+    Dimensions.addEventListener = jest.fn().mockReturnValue({
+      remove: jest.fn(),
+    });
+
+    mockUsePickFromState.mockReturnValue({ appData: mockAppData });
+    mockUseIsScreenActive.mockReturnValue(true);
+    mockGetInitialDimensions.mockReturnValue(mockDimensions);
+    mockGetDeviceInfo.mockReturnValue({ deviceInfo: "testDeviceInfo" });
+  });
+
+  it("returns correct initial dimensions", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { fullDimensions: false })
+    );
+
+    expect(result.current).toEqual({
+      ...mockDimensions,
+      statusBarHeight: StatusBar.currentHeight,
+    });
+
+    expect(mockGetInitialDimensions).toHaveBeenCalledWith("window");
+  });
+
+  it("calls handler on mount", () => {
+    renderHook(() => useDimensions("window", { fullDimensions: false }));
+
+    expect(Dimensions.addEventListener).toHaveBeenCalledWith(
+      "change",
+      expect.any(Function)
+    );
+  });
+
+  it("calls handler on isActive change", () => {
+    const { rerender } = renderHook(() =>
+      useDimensions("window", { fullDimensions: false })
+    );
+
+    mockUseIsScreenActive.mockReturnValue(false);
+    rerender();
+
+    expect(Dimensions.addEventListener).toHaveBeenCalledWith(
+      "change",
+      expect.any(Function)
+    );
+  });
+
+  it("handles fullDimensions option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { fullDimensions: true })
+    );
+
+    expect(result.current).toEqual({
+      ...mockDimensions,
+      scale: 1,
+      fontScale: 1,
+      statusBarHeight: StatusBar.currentHeight,
+    });
+  });
+
+  it("handles excludeStatusBar option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { excludeStatusBar: true })
+    );
+
+    expect(result.current.height).toBe(
+      mockDimensions.height - StatusBar.currentHeight ?? 0
+    );
+  });
+
+  it("handles rounded option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { rounded: true })
+    );
+
+    expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
+    expect(result.current.height).toBe(Math.ceil(mockDimensions.height));
+  });
+
+  it("handles deviceInfo option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { deviceInfo: true })
+    );
+
+    expect(result.current.deviceInfo).toMatchObject({
+      deviceInfo: "testDeviceInfo",
+    });
+  });
+
+  it("logs deprecation warning when fullDimensions is boolean", () => {
+    const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
+    renderHook(() => useDimensions("window", true));
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "Deprecation Warning\nSecond argument is now the options object. {fullDimensions: boolean, ...}"
+    );
+
+    consoleWarnSpy.mockRestore();
+  });
+});

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -95,6 +95,8 @@ export const useDimensions: UseDimensions = (
 
     const activeSubscription = Dimensions.addEventListener("change", handler);
 
+    handler({ [context]: Dimensions.get(context) });
+
     return () => {
       activeSubscription.remove();
     };

package/reactHooks/navigation/index.ts

@@ -17,7 +17,7 @@ import {
   QUICK_BRICK_NAVBAR,
   QUICK_BRICK_CONTENT,
 } from "@applicaster/quick-brick-core/const";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
@@ -320,16 +320,19 @@ export const useZappHooksForEntry = (
         callbacks?.handleHookComplete?.(props);
       };
 
-      const hookManager = HooksManager(hooksOptions)
+      const hookManager = HooksManager(hooksOptions);
+
+      hookManager.subscriber
         .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
         .on(HOOKS_EVENTS.ERROR, handleHookError)
         .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
         .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
-        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete)
-        .handleHooks(entry);
+        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete);
+
+      hookManager.handleHooks(entry);
 
       return () => {
-        hookManager
+        hookManager.subscriber
           .removeHandler(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .removeHandler(HOOKS_EVENTS.ERROR, handleHookError)
           .removeHandler(HOOKS_EVENTS.CANCEL, handleHookCancel)

package/reactHooks/player/useAutoSeek.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import * as R from "ramda";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
@@ -17,10 +16,6 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   const intervalTimer = React.useRef(null);
   const prevRunning = usePrevious(isRunning);
 
-  const setIntervalTimer = (cb) => {
-    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
-  };
-
   const clearIntervalTimer = () => {
     try {
       clearInterval(intervalTimer.current);
@@ -29,6 +24,11 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
     }
   };
 
+  const setIntervalTimer = (cb) => {
+    clearIntervalTimer();
+    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
+  };
+
   const resetState = () => {
     setIsRunning(false);
     setDirection(null);
@@ -42,7 +42,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
     if (!player) return;
 
     if (direction) {
-      player[direction](R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
+      player[direction](Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
       resetHUDTimer();
     }
   }, [multiplier, direction]);
@@ -50,7 +50,9 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   useEffect(() => {
     if (isRunning && isRunning !== prevRunning) {
       setIntervalTimer(() => {
-        setMultiplier(R.add(1));
+        setMultiplier((prev) => {
+          return prev + 1;
+        });
       });
     } else if (!isRunning && isRunning !== prevRunning) {
       resetState();

package/reactHooks/resolvers/useCellResolver.ts

@@ -48,7 +48,11 @@ export function useCellResolver({
   ...cellResolverOptions
 }: Props) {
   let _component = Object.assign({}, component);
-  const { width, height } = useDimensions("screen");
+
+  const { width, height } = useDimensions("screen", {
+    updateForInactiveScreens: false,
+  });
+
   const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
   const isRTL = useIsRTL();
 

package/reactHooks/useConfiguration.ts

@@ -67,7 +67,7 @@ export const useConfiguration = ({
       if (component) {
         const remappedStylesConfiguration = remapUpdatedKeys(
           pluginManifest,
-          component.styles
+          component
         );
 
         R.forEachObjIndexed((value, key) => {
@@ -83,7 +83,7 @@ export const useConfiguration = ({
 
         const styles = populateConfigurationValues(
           pluginManifest?.styles?.fields,
-          remappedStylesConfiguration,
+          remappedStylesConfiguration.styles,
           skipDefaults
         );
 

package/reactHooks/utils/index.ts

@@ -30,3 +30,16 @@ export const useIsInitialRender = (): boolean => {
 
   return isInitialRenderRef.current;
 };
+
+export const checkIsLocalFeed = (feedUrl) => feedUrl?.startsWith("pipesv2://");
+
+export const shouldDispatchData = (
+  url: string,
+  feed: ZappPipesData | null,
+  clearCache: boolean
+) => {
+  const currentFeedHasData = feed?.data;
+  const isLocalFeed = checkIsLocalFeed(url);
+
+  return !currentFeedHasData || clearCache || isLocalFeed;
+};

package/reactUtils/index.ts

@@ -109,20 +109,6 @@ export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
 
-declare global {
-  interface Window {
-    VIZIO?: {
-      Chromevox: {
-        play: (text: string) => void;
-      };
-      exitApplication: () => void;
-      setClosedCaptionHandler: (
-        callback: (isCCEnabled: boolean) => void
-      ) => void;
-    };
-  }
-}
-
 /**
  * Platforms found in userAgent string, please note that simulators
  * might not have the same agents that the devices have
@@ -152,8 +138,7 @@ export const hasTizen = typeof window?.tizen !== "undefined";
  */
 export const hasWebOS = typeof window?.webOS !== "undefined";
 
-export const getUserAgent = () =>
-  window?.navigator?.userAgent || global?.navigator?.userAgent;
+export const getUserAgent = () => window?.navigator?.userAgent;
 
 export const isLgPlatform = () => {
   const userAgent = getUserAgent();

package/services/localStorageServiceSync.web.ts

@@ -0,0 +1,48 @@
+import {
+  DEFAULT_STORAGE_NAMESPACE,
+  getWebStorageKey,
+  NAMESPACE_STORAGE_SEPARATOR_WEB,
+} from "./storageWebUtils.web";
+
+export function saveSync(
+  key: string,
+  value: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return localStorage.setItem(storageWebKey, value);
+}
+
+export function getSync(
+  key: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return localStorage.getItem(storageWebKey);
+}
+
+export function getAllSync(namespace: string = DEFAULT_STORAGE_NAMESPACE) {
+  const allItems = {};
+
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+
+    if (key && key.startsWith(namespace + NAMESPACE_STORAGE_SEPARATOR_WEB)) {
+      const itemKey = key.split(NAMESPACE_STORAGE_SEPARATOR_WEB)[1];
+      allItems[itemKey] = localStorage.getItem(key);
+    }
+  }
+
+  return allItems;
+}
+
+export function removeSync(
+  key: string,
+  namespace: string = DEFAULT_STORAGE_NAMESPACE
+) {
+  const storageWebKey = getWebStorageKey(key, namespace);
+
+  return localStorage.removeItem(storageWebKey);
+}