@applicaster/zapp-react-native-ui-components 15.0.0-rc.13 → 15.0.0-rc.131

package/Components/VideoModal/playerWrapperUtils.ts

@@ -0,0 +1,91 @@
+import { Dimensions, DimensionValue, Platform, ViewStyle } from "react-native";
+import { Edge } from "react-native-safe-area-context";
+
+export type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
+};
+
+export type Configuration = {
+  [key: string]: any;
+  tablet_landscape_sidebar_width?: string;
+  tablet_landscape_player_container_background_color?: string;
+};
+
+// This is safe, remembering screen dimensions once as they do not change during runtime
+// TODO: consider sharing screen orientation as a shared function for the app
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
+export const getWindowDimensions = () => {
+  const { width, height } = Dimensions.get("window");
+
+  return { width, height };
+};
+
+export const getMaxWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.max(width, height);
+};
+
+export const getMinWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.min(width, height);
+};
+
+export const getScreenAspectRatio = () => {
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
+
+  return longEdge / shortEdge;
+};
+
+export const getEdges = (
+  isTablet: boolean,
+  isInlineModal: boolean
+): readonly Edge[] => {
+  if (isTablet) {
+    return ["top"];
+  }
+
+  if (!isInlineModal && Platform.OS === "android") {
+    return [];
+  }
+
+  return ["top"];
+};
+
+export const getBaseDimensions = (
+  isInlineModal: boolean,
+  isTabletLandscape: boolean,
+  tabletWidth: DimensionValue
+): ViewStyle => ({
+  width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
+  height: undefined,
+});
+
+export const calculateAspectRatio = (
+  isInlineModal: boolean,
+  pip?: boolean
+): number => {
+  return !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9;
+};
+
+export const getPlayerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio: number
+): ViewStyle => ({
+  ...(baseDimensions as any),
+  width: baseDimensions.width,
+  aspectRatio,
+});
+
+export const getContainerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio?: string | number
+): ViewStyle => ({
+  ...baseDimensions,
+  aspectRatio,
+});

package/Components/VideoModal/utils.ts

@@ -1,31 +1,35 @@
 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";
 
 export const useConfiguration = () => {
   const {
     videoModalState: { item },
   } = useNavigation();
 
-  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
-    "rivers",
-    "contentTypes",
-    "pluginConfigurations",
-  ]);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   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 config = mergeRight(playerPluginConfig, {
-    ...pluginConfiguration,
+    ...configuration_json,
     ...targetScreenConfiguration?.general,
     ...targetScreenConfiguration?.styles,
   });
@@ -52,6 +56,12 @@ export const useConfiguration = () => {
   };
 };
 
+export const useAnimationStateStore = create<{
+  isAnimationInProgress: boolean;
+}>(() => ({
+  isAnimationInProgress: false,
+}));
+
 const fullSize = {
   width: "100%",
   height: "100%",

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/ZappUIComponent/index.tsx

@@ -144,12 +144,23 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       [props, parent]
     );
 
+    const hasError = !!zappPipesData?.error;
+
     React.useEffect(() => {
       if (!skipOnLoadFinished && !isLoading) {
         onLoadFinished();
       }
     }, [isLoading]);
 
+    React.useEffect(() => {
+      if (hasError) {
+        onLoadFailed?.({
+          error: zappPipesData.error,
+          index: componentIndex,
+        });
+      }
+    }, [hasError, componentIndex, onLoadFailed, zappPipesData?.error]);
+
     if (isDataSourceEmpty(props) && allowsEmptyDataSource) {
       return RenderComponent(Component, componentProps);
     }
@@ -158,12 +169,7 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       return RenderComponent(LoadingComponent || Placeholder, componentProps);
     }
 
-    if (zappPipesData?.error) {
-      onLoadFailed?.({
-        error: zappPipesData.error,
-        index: componentIndex,
-      });
-
+    if (hasError) {
       return RenderComponent(ErrorComponent, componentProps);
     }
 

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/Components/index.js

@@ -10,7 +10,7 @@ export { ContentScreen } from "./ContentScreen";
 
 export { TextInputTv } from "./TextInputTv";
 
-export { HookRenderer } from "./HookRenderer";
+export { HookRenderer } from "./HookRenderer/HookRenderer";
 
 export { Touchable } from "./Touchable";
 

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

@@ -2,6 +2,32 @@ import { render } from "@testing-library/react-native";
 import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
 import React from "react";
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(() => ({})),
+  useNavigation: jest.fn(() => ({
+    data: {},
+    modalData: null,
+    videoModalState: {},
+    canGoBack: jest.fn(() => false),
+  })),
+  useRoute: jest.fn(() => ({ screenData: null })),
+  isNavBarVisible: jest.fn(() => true),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext",
+  () => ({
+    useModalNavigationContext: jest.fn(() => false),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext",
+  () => ({
+    useNestedNavigationContext: jest.fn(() => false),
+  })
+);
+
 describe("ScreenContext", () => {
   describe("ScreneContext context", () => {
     it("should return the context", () => {
@@ -13,6 +39,37 @@ describe("ScreenContext", () => {
     it("should return the provider", () => {
       expect(ScreenContextProvider).toBeDefined();
     });
+
+    it("recreates _feedStore when pathname changes", () => {
+      const contexts = [];
+
+      const CaptureContext = () => {
+        const context = React.useContext(ScreenContext);
+        contexts.push(context);
+
+        return null;
+      };
+
+      const { rerender } = render(
+        <ScreenContextProvider pathname="/screen-a">
+          <CaptureContext />
+        </ScreenContextProvider>
+      );
+
+      const first = contexts[contexts.length - 1];
+      first._feedStore.setState({ screenFeed: "screen-a" });
+
+      rerender(
+        <ScreenContextProvider pathname="/screen-b">
+          <CaptureContext />
+        </ScreenContextProvider>
+      );
+
+      const second = contexts[contexts.length - 1];
+
+      expect(second._feedStore).not.toBe(first._feedStore);
+      expect(second._feedStore.getState()).toEqual({});
+    });
   });
 
   describe("withScreenContext", () => {

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,35 +65,62 @@ 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>>((_) => ({})));
+
+const createFeedStore = () =>
+  create(subscribeWithSelector<Record<string, unknown>>((_) => ({})));
 
 type ScreenContextType = {
   _navBarStore: ReturnType<typeof createStore>;
   _stateStore: ReturnType<typeof createStateStore>;
+  _feedStore: ReturnType<typeof createFeedStore>;
   navBar: NavBarState;
   legacyFormatScreenData: LegacyNavigationScreenData | null;
+  /**
+   * Zustand store for component-level state within a screen.
+   *
+   * **Purpose:** Persists state across component mount/unmount cycles (e.g., during virtualization)
+   * and enables state sharing between components using the same key within the same screen.
+   *
+   * **Lifecycle:** Tied to the screen/route — recreated on each route change.
+   *
+   * @example
+   * // Used by useComponentScreenState hook:
+   * const store = useScreenContextV2()._componentStateStore;
+   * store.setState({ 'my-key': value });
+   * const value = store.getState()['my-key'];
+   */
+  _componentStateStore: ReturnType<typeof createScreenComponentsStore>;
 };
 
 export const ScreenContext = createContext<ScreenContextType>({
   _stateStore: createStateStore(),
   _navBarStore: createStore(),
+  _feedStore: createFeedStore(),
   navBar: {
     visible: true,
     title: "",
@@ -100,6 +130,7 @@ export const ScreenContext = createContext<ScreenContextType>({
     setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
+  _componentStateStore: createScreenComponentsStore(),
 });
 
 export function ScreenContextProvider({
@@ -131,6 +162,10 @@ export function ScreenContextProvider({
     null
   );
 
+  const screenFeedStoreRef = useRef<null | ReturnType<typeof createFeedStore>>(
+    null
+  );
+
   const getScreenState = useCallback(() => {
     if (screenStateRef.current !== null) {
       return screenStateRef.current;
@@ -153,6 +188,21 @@ export function ScreenContextProvider({
     return navBarState;
   }, []);
 
+  // Assign feed store to ref to persist it across re-renders, but recreate on pathname change
+  const screenFeedStore = useMemo(() => createFeedStore(), [pathname]);
+
+  if (screenFeedStoreRef.current !== screenFeedStore) {
+    screenFeedStoreRef.current = screenFeedStore;
+  }
+
+  // Component state store - recreated when pathname changes (route change).
+  // Unlike _navBarStore and _stateStore (cached via refs), this store
+  // resets only when pathname changes to provide a clean state for the new route.
+  const componentStateStore = useMemo(
+    () => createScreenComponentsStore(),
+    [pathname]
+  );
+
   const screenNavBarState = getScreenNavBarState()(
     useShallow((state) => ({
       visible: state.visible,
@@ -203,10 +253,12 @@ export function ScreenContextProvider({
         () => ({
           _navBarStore: getScreenNavBarState(),
           _stateStore: getScreenState(),
+          _feedStore: screenFeedStoreRef.current,
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
+          _componentStateStore: componentStateStore,
         }),
-        [navBarState, screenData, routeScreenData]
+        [navBarState, screenData, routeScreenData, componentStateStore]
       )}
     >
       {children}

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/Contexts/ZappHookModalContext/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { create } from "zustand";
 
 type HookModalState = {
   path: string;
@@ -10,11 +10,12 @@ export type HookModalContextT = {
   setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => void;
   isRunningInBackground: boolean;
   isPresentationFullScreen: boolean;
-  setIsRunningInBackground: (hookBackgroundProcessState?: boolean) => void;
-  setIsPresentingFullScreen: (hookBackgroundProcessState?: boolean) => void;
+  setIsRunningInBackground: () => void;
+  setIsPresentingFullScreen: () => void;
   state: HookModalState;
   setState: (state: HookModalState) => void;
   resetState: () => void;
+  hookPresentationMode: HookPresentationMode;
 };
 
 const initialState = {
@@ -24,68 +25,43 @@ const initialState = {
 
 type HookPresentationMode = "background" | "fullScreen";
 
-const ReactContext = React.createContext<HookModalContextT>({
-  isHooksExecutionInProgress: false,
-  setIsHooksExecutionInProgress: () => {},
-  isRunningInBackground: null,
-  setIsRunningInBackground: () => {},
-  setIsPresentingFullScreen: () => {},
-  isPresentationFullScreen: null,
+// Use useZappHookModalStore() in React components (hooks)
+// Use zappHookModalStore.getState() in non-React functions (utility functions, etc.)
+export const useZappHookModalStore = create<HookModalContextT>()((set) => ({
   state: initialState,
-  setState: () => null,
-  resetState: () => null,
-});
-
-const Provider = ({ children }: { children: React.ReactNode }) => {
-  const [state, setState] = React.useState<HookModalState>(initialState);
-
-  const [hookPresentationMode, setHookPresentationMode] =
-    React.useState<HookPresentationMode>(null);
-
-  const resetState = useCallback(() => {
-    setState(initialState);
-  }, [setState]);
-
-  const [isHooksExecutionInProgress, setIsHooksExecutionInProgress] =
-    React.useState(false);
+  isHooksExecutionInProgress: false,
+  hookPresentationMode: null as HookPresentationMode,
+  isRunningInBackground: false,
+  isPresentationFullScreen: false,
 
-  const setIsRunningInBackground = () => {
-    setHookPresentationMode("background");
-  };
+  setState: (newState: HookModalState) => {
+    set({ state: newState });
+  },
 
-  const setIsPresentingFullScreen = () => {
-    setHookPresentationMode("fullScreen");
-  };
+  setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => {
+    set({ isHooksExecutionInProgress: hookExecutionState ?? false });
+  },
 
-  return (
-    <ReactContext.Provider
-      value={{
-        isRunningInBackground: hookPresentationMode === "background",
-        setIsRunningInBackground,
-        setIsPresentingFullScreen,
-        isPresentationFullScreen: hookPresentationMode === "fullScreen",
-        isHooksExecutionInProgress,
-        setIsHooksExecutionInProgress,
-        state,
-        setState,
-        resetState,
-      }}
-    >
-      {children}
-    </ReactContext.Provider>
-  );
-};
+  setIsRunningInBackground: () => {
+    set({
+      hookPresentationMode: "background",
+      isRunningInBackground: true,
+      isPresentationFullScreen: false,
+    });
+  },
 
-const withProvider = (Component) => {
-  const WithProvider = (props) => {
-    return (
-      <Provider>
-        <Component {...props} />
-      </Provider>
-    );
-  };
+  setIsPresentingFullScreen: () => {
+    set({
+      hookPresentationMode: "fullScreen",
+      isRunningInBackground: false,
+      isPresentationFullScreen: true,
+    });
+  },
 
-  return WithProvider;
-};
+  resetState: () => {
+    set({ state: initialState });
+  },
+}));
 
-export const ZappHookModalContext = { withProvider, ReactContext };
+// Export an alias for clearer non-React usage (utility functions, etc.)
+export const zappHookModalStore = useZappHookModalStore;