@applicaster/zapp-react-native-ui-components 15.1.0-rc.8 → 16.0.0-alpha.1833861900

package/Components/VideoModal/utils.ts

@@ -1,32 +1,40 @@
 import { mergeRight } from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppSelector,
+  useContentTypes,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { create } from "zustand";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { selectPluginConfigurationsByPluginId } from "@applicaster/zapp-react-native-redux";
+import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 
 export const useConfiguration = () => {
   const {
     videoModalState: { item },
   } = useNavigation();
 
-  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
-    "rivers",
-    "contentTypes",
-    "pluginConfigurations",
-  ]);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
+  const player = usePlayer();
 
   const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
   const targetScreenConfiguration = rivers?.[targetScreenId];
 
-  const pluginConfiguration =
-    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;
+  const { configuration_json } = useAppSelector((state) =>
+    selectPluginConfigurationsByPluginId(state, targetScreenConfiguration?.type)
+  );
 
-  const playerPluginConfig = playerManager.getPluginConfiguration();
+  const playerPluginConfig =
+    player?.getPluginConfiguration() ??
+    playerManager.getInstanceController()?.getPluginConfiguration() ??
+    {};
 
   const config = mergeRight(playerPluginConfig, {
-    ...pluginConfiguration,
+    ...configuration_json,
     ...targetScreenConfiguration?.general,
     ...targetScreenConfiguration?.styles,
   });

package/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js

@@ -22,8 +22,6 @@ ReactNative.UIManager.measureLayout = jest.fn(
   }
 );
 
-ReactNative.findNodeHandle = () => 1234;
-
 const viewportEventsManager = new ViewportEvents(true);
 
 const TestComponent = (props) => {

package/Components/Viewport/ViewportAware/index.tsx

@@ -32,7 +32,7 @@ function getTestDimensions(testDimensions) {
   return (process.env.NODE_ENV === "test" && testDimensions) || null;
 }
 
-function ViewportAwareComponent(props: Props, ref) {
+function ViewportAwareComponent(props: Props, forwardedRef) {
   const viewportEvents = useViewportEventsContext();
 
   const {
@@ -47,13 +47,22 @@ function ViewportAwareComponent(props: Props, ref) {
     getTestDimensions(testDimensions) || initialDimensions
   );
 
+  const localRef = React.useRef(null);
+
   const [viewportChangeEvent, setViewportChangeEvent] = React.useState(null);
 
-  function assignRef(_ref) {
-    if (_ref && !ref) {
-      ref = _ref;
-    }
-  }
+  const assignRef = React.useCallback(
+    (_ref) => {
+      localRef.current = _ref;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(_ref);
+      } else if (forwardedRef) {
+        forwardedRef.current = _ref;
+      }
+    },
+    [forwardedRef]
+  );
 
   const checkInViewport = (viewportChangeEvent, layoutEvent) => {
     const inVerticalViewport = Utils.isInViewport(
@@ -94,7 +103,7 @@ function ViewportAwareComponent(props: Props, ref) {
   const onViewportChange = (viewportChangeEvent) => {
     setViewportChangeEvent(viewportChangeEvent);
 
-    const nodeHandle = findNodeHandle(ref);
+    const nodeHandle = findNodeHandle(localRef.current);
 
     if (!nodeHandle) {
       return;

package/Components/Viewport/ViewportEvents/__tests__/viewportEvents.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   ViewportEvents,
   useViewportEventsContext,

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { StyleSheet, View } from "react-native";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -45,15 +44,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
-      edges={["top", "left", "right"]}
+    <View
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-safeAreaView"
+      testID="BarView-Container"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Components/default-cell-renderer/viewTrees/mobile/index.ts

@@ -1,7 +1,6 @@
 import { DefaultCell } from "./DefaultCell";
 import { GridCell } from "./GridCell";
 import { HeroCell } from "./HeroCell";
-// import { ScreenSelectorLabel } from "./ScreenSelectorLabel";
 
 /**
  * Return a view tree ready to be injected with styles etc. Mapping is done
@@ -15,8 +14,6 @@ export function viewTreeResolver({ component_type }) {
   switch (component_type) {
     case "hero":
       return HeroCell;
-    // case "screen_picker":
-    //   return ScreenSelectorLabel;
     case "grid":
       return GridCell;
     case "horizontal_list":

package/Contexts/ScreenContext/index.tsx

@@ -16,6 +16,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
+
 import { Animated } from "react-native";
 
 interface NavBarStoreState {
@@ -29,6 +30,8 @@ interface NavBarStoreState {
   scrollState: number;
   contentPosition: string;
   scrollYAnimated: Animated.Value;
+  hideOnScrollAnimated: Animated.Value;
+  hideOnScroll: boolean;
 }
 
 interface NavBarState {
@@ -62,24 +65,28 @@ const createStateStore = () =>
   );
 
 const createStore = () =>
-  create<NavBarStoreState>((set) => ({
-    title: "",
-    summary: "",
-    visible: true,
-    height: 0,
-    scrollState: 0,
-    contentPosition: "",
-    scrollYAnimated: new Animated.Value(0),
-    setTitle(title) {
-      set({ title });
-    },
-    setSummary(summary) {
-      set({ summary });
-    },
-    setVisible(visible) {
-      set({ visible });
-    },
-  }));
+  create(
+    subscribeWithSelector<NavBarStoreState>((set) => ({
+      title: "",
+      summary: "",
+      visible: true,
+      height: 0,
+      scrollState: 0,
+      contentPosition: "",
+      scrollYAnimated: new Animated.Value(0),
+      hideOnScrollAnimated: new Animated.Value(0),
+      hideOnScroll: false,
+      setTitle(title) {
+        set({ title });
+      },
+      setSummary(summary) {
+        set({ summary });
+      },
+      setVisible(visible) {
+        set({ visible });
+      },
+    }))
+  );
 
 const createScreenComponentsStore = () =>
   create(subscribeWithSelector<Record<string, unknown>>((_) => ({})));

package/Contexts/ScreenTrackedViewPositionsContext/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   useScreenTrackedViewPositionsContext,
   ScreenTrackedViewPositionsContext,

package/Decorators/Analytics/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { getAnalyticsFunctions } from "@applicaster/zapp-react-native-utils/analyticsUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 type ComponentProps = {
   component: {
@@ -21,11 +20,13 @@ type ComponentProps = {
 
 function withAnalytics(Component) {
   return function WithAnalytics(props: ComponentProps) {
-    const { appData } = usePickFromState(["appData"]);
-
     const analyticsFunctions = React.useMemo(
-      () => getAnalyticsFunctions({ props, appData }),
-      [props, appData]
+      () =>
+        getAnalyticsFunctions({
+          component: props.component,
+          zappPipesData: props.zappPipesData,
+        } as any),
+      [props.component, props.zappPipesData]
     );
 
     return (

package/Decorators/ConfigurationWrapper/__tests__/__snapshots__/withConfigurationProvider.test.tsx.snap

@@ -88,6 +88,7 @@ exports[`withConfigurationProvider correctly passes all the configuration keys c
   tab_cell_padding_right={10}
   tab_cell_padding_top={14}
   tablet_theme={false}
+  tabs_screen_background_color="transparent"
   target={false}
   target_screen_switch={false}
   text_label_active_font_color="rgba(239, 239, 239, 0.5)"

package/Decorators/ConfigurationWrapper/const.ts

@@ -208,4 +208,5 @@ export const keysMap: Record<string, Function> = {
   tab_bar_item_margin_right: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_bottom: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_left: castOrDefaultValue(Number, 0),
+  tabs_screen_background_color: castOrDefaultValue(R.identity, "transparent"),
 };

package/Decorators/ZappPipesDataConnector/__tests__/UrlFeedResolver.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import * as useFeedLoaderModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
-import * as useFeedRefreshModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh";
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
@@ -14,10 +13,6 @@ jest
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader");
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh"
-);
-
 jest.mock("@applicaster/zapp-pipes-v2-client");
 
 jest.mock("@applicaster/zapp-react-native-bridge/Favorites", () => ({
@@ -62,6 +57,9 @@ describe("UrlFeedResolver", () => {
       component: { ...componentRequiredKeys } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -82,6 +80,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -103,6 +104,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -132,6 +136,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -155,6 +162,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       plugins: [],
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -173,6 +183,9 @@ describe("UrlFeedResolver", () => {
       component: { ...componentRequiredKeys } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -197,6 +210,9 @@ describe("UrlFeedResolver", () => {
           },
         },
       ] as any,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -215,6 +231,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     (useFeedLoaderModule.useFeedLoader as jest.Mock).mockReturnValue({
@@ -250,6 +269,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       isLast: true,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props1} />);
@@ -272,6 +294,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       isLast: false,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props2} />);
@@ -294,6 +319,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       isLast: false,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props3} />);
@@ -311,6 +339,9 @@ describe("UrlFeedResolver", () => {
       component: { ...componentRequiredKeys } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -327,22 +358,6 @@ describe("UrlFeedResolver", () => {
     });
   });
 
-  it("should apply feed refresh hook", () => {
-    const props = {
-      feedUrl: "https://example.com/feed",
-      component: { ...componentRequiredKeys } as any,
-      children: mockChildren,
-      riverId: "test-river",
-    };
-
-    renderWithProviders(<UrlFeedResolver {...props} />);
-
-    expect(useFeedRefreshModule.useFeedRefresh).toHaveBeenCalledWith({
-      reloadData: mockReloadData,
-      component: props.component,
-    });
-  });
-
   it("should clean up listeners on unmount", () => {
     const props = {
       component: {
@@ -354,6 +369,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     const { unmount } = renderWithProviders(<UrlFeedResolver {...props} />);

package/Decorators/ZappPipesDataConnector/__tests__/zappPipesDataConnector.test.js

@@ -3,7 +3,7 @@ import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUt
 
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 import { zappPipesDataConnector } from "../index";
 

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -2,7 +2,7 @@
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React from "react";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { ResolverSelector } from "./ResolverSelector";
@@ -23,7 +23,7 @@ export function zappPipesDataConnector(
 ) {
   return function WrappedWithZappPipesData(props: Props) {
     const { screenData } = useRoute();
-    const { plugins } = usePickFromState(["plugins"]);
+    const plugins = usePlugins();
     const screenContextData = useScreenContext();
 
     const {

package/Decorators/ZappPipesDataConnector/resolvers/StaticFeedResolver.tsx

@@ -76,7 +76,7 @@ export function StaticFeedResolver({
 
   const zappPipesDataProps = useMemo(
     () => ({
-      zappPipesData: { url, loading, data, error },
+      zappPipesData: { url, loading, data, error }, // todo: add applyItemLimit
       reloadData,
       loadNextData: undefined, // Static resolver doesn't support pagination
     }),

package/Decorators/ZappPipesDataConnector/resolvers/UrlFeedResolver.tsx

@@ -9,9 +9,9 @@ import {
   getInflatedDataSourceUrl,
   getSearchContext,
   useFeedLoader,
-  useFeedRefresh,
   useRoute,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
 
 import { ComponentDataSourceContext, ZappPipesDataProps } from "../types";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
@@ -199,6 +199,8 @@ export function UrlFeedResolver({
   const { pathname } = useRoute();
   const screenStateStore = useScreenStateStore();
 
+  const screenId = (screenContext?.id || "unknown_screen_id") as string;
+
   // Setup listeners for data source URL
   useEffect(() => {
     if (!reloadData) {
@@ -214,10 +216,19 @@ export function UrlFeedResolver({
         url: dataSourceUrl,
         pathname,
         screenStateStore,
+        component,
+        screenId,
         callback: reloadData,
       });
     }
-  }, [dataSourceUrl, reloadData, pathname, screenStateStore]);
+  }, [
+    dataSourceUrl,
+    reloadData,
+    pathname,
+    screenStateStore,
+    component,
+    screenId,
+  ]);
 
   // Setup favorites listener
   useEffect(() => {
@@ -230,11 +241,11 @@ export function UrlFeedResolver({
     }
   }, [type, reloadData]);
 
-  // Apply feed refresh hook
-  useFeedRefresh({
-    reloadData,
-    component,
-  });
+  useEffect(() => {
+    const unregister = refreshCoordinator.register(component, screenId);
+
+    return () => unregister();
+  }, [component, screenId]);
 
   const loadNextData = useMemo(
     () => (!isLast && isVerticalListOrGrid(component) ? undefined : loadNext),

package/Helpers/DataSourceHelper/__tests__/itemLimitForData.test.ts

@@ -0,0 +1,80 @@
+import { itemLimitForData } from "..";
+
+describe("itemLimitForData (no mocks)", () => {
+  test("returns full array when item_limit is undefined (default Infinity)", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: undefined },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("enforces positive numeric item_limit", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3, 4], {
+      rules: { item_limit: 2 },
+    });
+
+    expect(result).toEqual([1, 2]);
+  });
+
+  test("returns empty array when entry is empty", () => {
+    const result = itemLimitForData([], {
+      rules: { item_limit: 3 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("defaults entry to empty array when it is undefined", () => {
+    const result = itemLimitForData(undefined, {
+      rules: { item_limit: 5 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("handles missing component", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], undefined);
+    // missing component → item_limit = undefined → fallback to Infinity
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("handles missing rules object", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], {});
+
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("non-positive item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: -10 },
+    });
+
+    // -10 → invalid → fallback to Infinity → no limit
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("zero item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: 0 },
+    });
+
+    // 0 → invalid → fallback to Infinity
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("NaN item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: NaN },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+});

package/Helpers/DataSourceHelper/index.ts

@@ -0,0 +1,19 @@
+import { toPositiveNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export function itemLimitForData(
+  entry: ZappEntry[],
+  component: {
+    rules?: { item_limit?: number | string };
+  }
+) {
+  if (!component?.rules?.item_limit) {
+    return entry;
+  }
+
+  const itemLimit = toPositiveNumberWithDefault(
+    Infinity,
+    component?.rules?.item_limit
+  );
+
+  return (entry || []).slice(0, itemLimit);
+}

package/Helpers/index.js

@@ -1,5 +1,11 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 export const ASSETS = {
-  APP_BACKGROUND_IMAGE: "app_background_image",
+  APP_BACKGROUND_IMAGE: platformSelect({
+    tvos: "app_background_image",
+    android_tv: "tv_app_background",
+    amazon: "tv_app_background",
+  }),
 };
 
 export const ANALYTICS_CORE_EVENTS = {