@applicaster/zapp-react-native-utils 13.0.0-alpha.1724095599 → 13.0.0-alpha.1731130113

package/playerUtils/index.ts

@@ -1,5 +1,9 @@
 import * as R from "ramda";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { isString } from "@applicaster/zapp-react-native-utils/typeGuards";
+import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 import { getBoolFromConfigValue } from "../configurationUtils";
 
 /**
@@ -72,3 +76,22 @@ function isLiveByManager(): boolean {
 export function isLive(entry: ZappEntry): boolean {
   return isEntryLive(entry) || isLiveByManager();
 }
+
+export const isAudioItem = (item: Option<ZappEntry>) => {
+  if (
+    isString(item?.content?.type) &&
+    item?.content?.type?.includes?.("audio")
+  ) {
+    return true;
+  }
+
+  if (isString(item?.type?.value) && item?.type?.value?.includes?.("audio")) {
+    return true;
+  }
+
+  return false;
+};
+
+export const isInlineTV = (screenData) => {
+  return isTV() && isFilledArray(screenData?.ui_components);
+};

package/reactHooks/advertising/index.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 import { useNavigation } from "../navigation";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { dismissModal, openModal } from "../../modalState";
 
 const GOOGLE_ADS_IDENTIFIER = "google-admob-ads-qb";
 
@@ -14,9 +15,8 @@ const ModalContainer = platformSelect({
 });
 
 export function useAdvertisingInterstitial() {
-  const navigator = useNavigation();
+  const { screenData, currentRoute } = useNavigation();
   const { plugins } = usePickFromState();
-  const { screenData } = navigator;
 
   return useEffect(() => {
     // TODD: typing problem: fix any type
@@ -26,7 +26,7 @@ export function useAdvertisingInterstitial() {
         plugins
       );
 
-      navigator.openModal({
+      openModal({
         item: {},
         options: {
           ModalContainer,
@@ -36,11 +36,11 @@ export function useAdvertisingInterstitial() {
           screenType: "hooks",
           screenData: {
             payload: screenData,
-            callback: navigator.dismissModal,
+            callback: dismissModal,
             hookPlugin: GoogleAdsPlugin,
           },
         },
       });
     }
-  }, [navigator.currentRoute, screenData?.id]);
+  }, [currentRoute, screenData?.id]);
 }

package/reactHooks/app/useAppState.ts

@@ -14,10 +14,10 @@ export function useAppState(returnIsActive) {
   };
 
   React.useEffect(() => {
-    AppState.addEventListener("change", setAppState);
+    const subscription = AppState.addEventListener("change", setAppState);
 
     return () => {
-      AppState.removeEventListener("change", setAppState);
+      subscription.remove();
     };
   }, []);
 

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

@@ -35,25 +35,23 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component", async () => {
+  it("should update position for selected component - onViewportEnter", () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
 
-    // Fast-forward until all timers have been executed
-    jest.advanceTimersByTime(3000);
-
     expect(result.current.inViewPort).toBe(false);
 
     const mockRect = {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(() => {
-      result.current.onPositionUpdated(mockRect);
+    act(async () => {
+      await result.current.onPositionUpdated(mockRect);
     });
 
-    jest.advanceTimersByTime(3000);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
 
     expect(result.current.inViewPort).toBe(true);
 

package/reactHooks/autoscrolling/useTrackedView.ts

@@ -2,6 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { findTrackedView } from "./utils/findTrackedView";
+import { isNil } from "ramda";
+import { withTimeout } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT = 500; // ms
 
 const getNormalizedRect = (rect, componentId, screenWidth, screenHeight) => {
   if (!rect) {
@@ -37,9 +41,16 @@ export const useTrackedView = (componentId: string) => {
   );
 
   const onPositionUpdated = useCallback(
-    ({ rect }) => {
+    async ({ rect }) => {
       const currentPosition = normalizedRect(componentId, rect);
 
+      // There is an issue on the native side where they are unable to guarantee
+      // that the order of onViewportLeave and onViewportEnter events is always correct.
+      // This workaround/hack delays the onViewportEnter event to ensure it is received last.
+      if (!isNil(currentPosition)) {
+        await withTimeout(TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT);
+      }
+
       updateComponentsPositions(componentId, currentPosition as any);
 
       setInViewPort(!!currentPosition);

package/reactHooks/feed/useBatchLoading.ts

@@ -1,7 +1,7 @@
-import { isNil, complement, compose, map, min, prop, take, uniq } from "ramda";
+import { complement, compose, isNil, map, min, prop, take, uniq } from "ramda";
 import { useDispatch } from "react-redux";
 import * as React from "react";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
+import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -9,6 +9,7 @@ import {
   getInflatedDataSourceUrl,
   getSearchContext,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useScreenContext } from "../screen/useScreenContext";
 
 type Options = {
@@ -46,9 +47,7 @@ const filterEmptyData = (data) => {
 };
 
 const getData = (rawData) =>
-  rawData.component_type === "gallery-qb"
-    ? rawData.ui_components[0].data
-    : rawData.data;
+  isGallery(rawData) ? rawData.ui_components[0].data : rawData.data;
 
 const extractData = compose(uniq, map(getData));
 
@@ -70,13 +69,12 @@ export const useBatchLoading = (
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
 
   // 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 takeSize = isGallery(componentsToRender?.[0])
+    ? 1
+    : min(
+        options.initialBatchSize ?? DEFAULT_BATCH_SIZE,
+        componentsToRender.length
+      );
 
   const takeBatchSize = React.useCallback(take(takeSize), [takeSize]);
 

package/reactHooks/feed/useFeedLoader.tsx

@@ -5,7 +5,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender, shouldDispatchData } from "../utils";
+import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -20,6 +20,7 @@ type Props = {
     silentRefresh?: boolean;
     method?: "get" | "post";
     bodyParams?: Record<string, unknown>;
+    skipLoading?: boolean;
   };
 };
 
@@ -55,7 +56,9 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId = screenData?.id;
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {
@@ -93,7 +96,7 @@ export const useFeedLoader = ({
     if (
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
-      if (callableFeedUrl) {
+      if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
           loadPipesData(callableFeedUrl, {
             ...pipesOptions,
@@ -101,26 +104,33 @@ export const useFeedLoader = ({
             riverId,
           })
         );
-      } else {
+      } else if (!callableFeedUrl) {
         logger.info({
           message:
             "Feed is not defined or not inflated, skipping loading. \nMake sure you have correct feedUrl and mapping.",
           jsOnly: true,
         });
+      } else {
+        logger.info({
+          message:
+            "Loading skipped as per pipesOptions.skipLoading configuration.",
+          data: { url: callableFeedUrl },
+          jsOnly: true,
+        });
       }
     } else {
       logger.info({
         message:
-          "Feed already exist, skipping loading. \nCall reloadData() if you want to refresh data.",
+          "Feed already exists, skipping loading. \nCall reloadData() if you want to refresh data.",
         data: { url: callableFeedUrl },
         jsOnly: true,
       });
     }
   }, []);
 
-  // Reload feed when feedUrl changes
+  // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
-    if (!isInitialRender && callableFeedUrl) {
+    if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
       dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
     }
   }, [callableFeedUrl]);
@@ -156,7 +166,6 @@ export const useFeedLoader = ({
     currentFeed?.data,
     currentFeed?.error,
     currentFeed?.loading,
-
     reloadData,
     loadNext,
   ]);

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -0,0 +1,39 @@
+import { reactHooksLogger } from "../../logger";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useHookModalScreenData = (): VariousScreenData | undefined => {
+  const hookModalState = useZappHooksModalState();
+
+  if (!hookModalState.state?.screenData) {
+    return;
+  }
+
+  try {
+    const screenData = hookModalState.state.screenData?.payload;
+    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+
+    if (hookPlugin?.screen_id) {
+      return {
+        ...screenData,
+        targetScreen: hookPlugin,
+      };
+    }
+
+    return hookModalState.state.screenData?.payload;
+  } catch (error) {
+    logger.error({
+      message: "Hook modal screen data creation failed",
+      data: {
+        error,
+        hookModalState,
+      },
+      jsOnly: true,
+    });
+
+    return hookModalState.state.screenData?.payload;
+  }
+};

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -310,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -329,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -348,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -366,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

package/reactHooks/navigation/{useGetTabBarHeight.ts → getTabBarHeight.ts}

@@ -3,7 +3,7 @@ import { platformSelect } from "../../reactUtils";
 const TAB_BAR_HEIGHT_IOS = 49;
 const TAB_BAR_HEIGHT_ANDROID = 56;
 
-export const useGetTabBarHeight = () =>
+export const getTabBarHeight = () =>
   platformSelect({
     ios: TAB_BAR_HEIGHT_IOS,
     android: TAB_BAR_HEIGHT_ANDROID,

package/reactHooks/navigation/index.ts

@@ -108,11 +108,13 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 

package/reactHooks/navigation/useGetBottomTabBarHeight.ts

@@ -1,12 +1,19 @@
 import { useGetNavBarTopBorderWidth } from "./useGetNavBarTopBorderWidth";
-import { useGetTabBarHeight } from "./useGetTabBarHeight";
+import { getTabBarHeight } from "./getTabBarHeight";
+import { useNavigation } from "./useNavigation";
 import { MenuTypes, useNavigationType } from "./useNavigationType";
+import { useNavigationPluginData } from "./useNavigationPluginData";
 
 export const useGetBottomTabBarHeight = (): number => {
+  const { activeRiver } = useNavigation();
+
+  const navigationPluginData = useNavigationPluginData(activeRiver);
+  const navigationType = useNavigationType(navigationPluginData);
+
   const topBorderWidth = useGetNavBarTopBorderWidth();
-  const tabBarHeight = useGetTabBarHeight();
+  const tabBarHeight = getTabBarHeight();
 
-  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
+  const isBottomBarNavigation = navigationType === MenuTypes.bottomTabBar;
 
   return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
 };

package/reactHooks/navigation/useNavigationPluginData.ts

@@ -1,13 +1,17 @@
 import { useRoute } from "./useRoute";
 
-export const useNavigationPluginData = (): ZappNavigation | undefined => {
+export const useNavigationPluginData = (
+  screenData?: LegacyNavigationScreenData | null
+): ZappNavigation | undefined => {
   const {
     screenData: useRouteScreenData,
   }: { screenData: QuickBrickNavigationData | null } = useRoute();
 
-  const navigations = useRouteScreenData?.targetScreen
-    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
-    : (useRouteScreenData as ZappRiver).navigations;
+  const activeScreenData = screenData ?? useRouteScreenData;
+
+  const navigations = activeScreenData?.targetScreen
+    ? (activeScreenData.targetScreen as ZappRiver).navigations
+    : (activeScreenData as ZappRiver).navigations;
 
   const navigationMenu = navigations?.find((nav) => nav.category === "menu");
 

package/reactHooks/navigation/useNavigationType.ts

@@ -5,8 +5,10 @@ export enum MenuTypes {
   bottomTabBar = "BOTTOM_TAB_BAR",
 }
 
-export const useNavigationType = (): MenuTypes => {
-  const navigationMenu = useNavigationPluginData();
+export const useNavigationType = (navigation?: ZappNavigation): MenuTypes => {
+  const navigationPluginData = useNavigationPluginData();
+
+  const navigationMenu = navigation ?? navigationPluginData;
 
   return !navigationMenu ||
     navigationMenu.navigation_type === "quick_brick_side_menu"

package/reactHooks/navigation/useRoute.ts

@@ -7,12 +7,11 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
-
 import { getTargetScreenData } from "../screen/useTargetScreenData";
+import { useHookModalScreenData } from "../hookModal/hooks/useHookModalScreenData";
 
 import { useNavigation } from "./useNavigation";
-import { useModalStore } from "../../modalState";
+import { useModalStoreState } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { usePathname } from "./usePathname";
 
@@ -44,12 +43,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
+  const modalState = useModalStoreState();
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
+  const hookModalScreenData = useHookModalScreenData();
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

package/reactHooks/screen/__tests__/useScreenBackgroundColor.test.tsx

@@ -0,0 +1,69 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+const {
+  useScreenConfiguration,
+} = require("@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration");
+
+const { useScreenBackgroundColor } = require("../useScreenBackgroundColor");
+
+describe("useScreenBackgroundColor", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return the background color from screen configuration", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "#FF0000",
+    });
+
+    // Render the hook with a screen ID
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("#FF0000");
+
+    expect(useScreenConfiguration).toHaveBeenCalledWith("test-screen-id");
+  });
+
+  it("should return 'transparent' when background color is empty", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "",
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is null", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: null,
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is undefined", () => {
+    useScreenConfiguration.mockReturnValue({});
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+});

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -1,23 +1,11 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 
+const DEFAULT_BACKGROUND_FALLBACK = "transparent";
+
 export const useScreenBackgroundColor = (screenId: string): string => {
   const { backgroundColor: screenBackgroundColor } =
     useScreenConfiguration(screenId);
 
-  const theme = useTheme();
-
-  const themeBackgroundColor = React.useMemo(
-    () => theme.app_background_color,
-    [theme.app_background_color]
-  );
-
-  const backgroundColor = ifEmptyUseFallback(
-    screenBackgroundColor,
-    themeBackgroundColor
-  );
-
-  return backgroundColor;
+  return ifEmptyUseFallback(screenBackgroundColor, DEFAULT_BACKGROUND_FALLBACK);
 };