@applicaster/zapp-react-native-ui-components 15.0.0-alpha.9102699023 → 15.0.0-alpha.9102777840

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -13,7 +13,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useEventAlerts } from "./utils/useEventAlerts";
 
-const { log_info } = createLogger({
+const { log_debug } = createLogger({
   category: "ScreenContainer",
   subsystem: "General",
 });
@@ -54,20 +54,15 @@ export const GeneralContentScreen = ({
     useEffect(() => {
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
-          log_info(
-            "ScreenContainer: starting to check river action providers to initialize",
-            { actionsInitialStateSetters }
-          );
-
           allSettled(actionsInitialStateSetters).finally(() => {
-            log_info(
+            log_debug(
               "ScreenContainer: action provider ready, completed. Starting to present screen"
             );
 
             setRiverActionProvidersReady(true);
           });
         } else {
-          log_info(
+          log_debug(
             "ScreenContainer: no action provider to check, completed. Starting to present screen"
           );
 

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -5,8 +5,6 @@ import {
   usePlugins,
 } from "@applicaster/zapp-react-native-redux/hooks";
 import {
-  useDimensions,
-  useIsTablet as isTablet,
   useNavigation,
   useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
@@ -15,8 +13,8 @@ import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
 import { ViewStyle } from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { findCastPlugin, getPlayer } from "./utils";
+import { useWaitForValidOrientation } from "../Screen/hooks";
 
 type Props = {
   item: ZappEntry;
@@ -31,13 +29,6 @@ type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
 
-const dimensionsContext: "window" | "screen" = platformSelect({
-  android_tv: "window",
-  amazon: "window",
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  default: isTablet() ? "window" : "screen", // on tablet, window represents correct values, on phone it's not as the screen could be rotated
-});
-
 export function HandlePlayable({
   item,
   isModal,
@@ -97,27 +88,23 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } =
-    useDimensions(dimensionsContext);
-
   const modalSize = useModalSize();
 
-  const style = React.useMemo(
-    () =>
-      ({
-        width: isModal
-          ? modalSize.width
-          : mode === "PIP"
-            ? "100%"
-            : screenWidth,
-        height: isModal
-          ? modalSize.height
-          : mode === "PIP"
-            ? "100%"
-            : screenHeight,
-      }) as ViewStyle,
-    [screenWidth, screenHeight, modalSize, isModal, mode]
-  );
+  const isOrientationReady = useWaitForValidOrientation();
+
+  const style = React.useMemo(() => {
+    const isFullScreenReady =
+      mode === "PIP" || (mode === "FULLSCREEN" && isOrientationReady);
+
+    const getDimensionValue = (value: string | number) => {
+      return isModal ? value : isFullScreenReady ? "100%" : 0; // do not show player, until full screen mode is ready
+    };
+
+    return {
+      width: getDimensionValue(modalSize.width),
+      height: getDimensionValue(modalSize.height),
+    } as ViewStyle;
+  }, [modalSize, isModal, mode, isOrientationReady]);
 
   const Component = playable?.Component;
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -46,7 +46,6 @@ import {
   PlayerContainerContextProvider,
 } from "./PlayerContainerContext";
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
-import { ErrorDisplay } from "./ErrorDisplay";
 import { PlayerFocusableWrapperView } from "./WappersView/PlayerFocusableWrapperView";
 import { FocusableGroupMainContainerId } from "./index";
 import { isPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypeMatchers";
@@ -61,7 +60,6 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
-import { useRestrictMobilePlayback } from "./useRestrictMobilePlayback";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -274,12 +272,6 @@ const PlayerContainerComponent = (props: Props) => {
     );
   }, [playerManager.isRegistered()]);
 
-  const { isRestricted } = useRestrictMobilePlayback({
-    player,
-    entry: item,
-    close,
-  });
-
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
@@ -346,12 +338,6 @@ const PlayerContainerComponent = (props: Props) => {
       playerContainerLogger.error(errorObj);
 
       setState({ error: errorObj });
-
-      if (!isTvOS) {
-        setTimeout(() => {
-          close();
-        }, 800);
-      }
     },
     [close]
   );
@@ -669,7 +655,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {!Player || isRestricted ? null : (
+                      {!Player ? null : (
                         <Player
                           source={{
                             uri,
@@ -702,8 +688,6 @@ const PlayerContainerComponent = (props: Props) => {
                         </Player>
                       )}
                     </PlayerFocusableWrapperView>
-
-                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
                   {isInlineTV && context.showComponentsContainer ? (

package/Components/River/RefreshControl.tsx

@@ -5,6 +5,8 @@ import {
   StyleSheet,
 } from "react-native";
 import * as R from "ramda";
+import { path } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
@@ -62,9 +64,13 @@ export const usePullToRefresh = (
 
   const [refreshing, setRefreshing] = React.useState(false);
 
-  const feeds: string[] =
-    riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
-    [];
+  const feeds: string[] = React.useMemo(
+    () =>
+      (riverComponents || [])
+        .map((riverComponent) => path(["data", "source"], riverComponent))
+        .filter((feed) => !isNilOrEmpty(feed)),
+    [riverComponents]
+  );
 
   const feedsLength = feeds.length;
 

package/Components/Screen/__tests__/Screen.test.tsx

@@ -11,6 +11,7 @@ const mockIsOrientationCompatible = jest.fn(() => true);
 jest.mock("react-native-safe-area-context", () => ({
   ...jest.requireActual("react-native-safe-area-context"),
   useSafeAreaInsets: () => ({ top: 44 }),
+  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
 }));
 
 jest.mock("../../RouteManager", () => ({

package/Components/Screen/hooks.ts

@@ -5,15 +5,85 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import {
   useCurrentScreenData,
-  useDimensions,
   useRoute,
   useIsTablet,
+  useIsScreenActive,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+
+type MemoizedSafeAreaFrameWithActiveStateOptions = {
+  updateForInactiveScreens?: boolean;
+  isActive: boolean;
+};
+
+/**
+ * Base hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
+ * Requires isActive to be passed explicitly - use useMemoizedSafeAreaFrame for automatic detection.
+ *
+ * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
+ * @param options.isActive - Whether the screen is currently active
+ * @returns The memoized safe area frame { x, y, width, height }
+ */
+export const useMemoizedSafeAreaFrameWithActiveState = (
+  options: MemoizedSafeAreaFrameWithActiveStateOptions
+) => {
+  const { updateForInactiveScreens = true, isActive } = options;
+  const frame = useSafeAreaFrame();
+
+  const [memoFrame, setMemoFrame] = useState(frame);
+
+  useEffect(() => {
+    const shouldUpdate = isActive || updateForInactiveScreens;
+
+    const dimensionsChanged =
+      frame.width !== memoFrame.width || frame.height !== memoFrame.height;
+
+    if (shouldUpdate && dimensionsChanged) {
+      setMemoFrame(frame);
+    }
+  }, [
+    frame.width,
+    frame.height,
+    isActive,
+    updateForInactiveScreens,
+    frame,
+    memoFrame.width,
+    memoFrame.height,
+  ]);
+
+  return memoFrame;
+};
+
+type MemoizedSafeAreaFrameOptions = {
+  updateForInactiveScreens?: boolean;
+};
+
+/**
+ * Hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
+ * Uses useIsScreenActive() internally to determine active state - use useMemoizedSafeAreaFrameWithActiveState
+ * if you need to pass isActive explicitly.
+ *
+ * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
+ * @returns The memoized safe area frame { x, y, width, height }
+ */
+export const useMemoizedSafeAreaFrame = (
+  options: MemoizedSafeAreaFrameOptions = {}
+) => {
+  const { updateForInactiveScreens = true } = options;
+  const isActive = useIsScreenActive();
+
+  return useMemoizedSafeAreaFrameWithActiveState({
+    updateForInactiveScreens,
+    isActive,
+  });
+};
 
 export const useWaitForValidOrientation = () => {
-  const { width: screenWidth, height } = useDimensions("screen", {
-    fullDimensions: true,
+  // Use memoized safe area frame to synchronize with Scene's dimension source
+  // This prevents race conditions where the orientation check passes before
+  // Scene's memoFrame has updated to the new dimensions
+  const { width: screenWidth, height } = useMemoizedSafeAreaFrame({
     updateForInactiveScreens: false,
   });
 

package/Components/Screen/index.tsx

@@ -92,7 +92,13 @@ export function Screen(_props: Props) {
   const isActive = useIsScreenActive();
 
   const ref = React.useRef(null);
-  const isReady = useWaitForValidOrientation();
+  const isOrientationReady = useWaitForValidOrientation();
+
+  // Playable screens handle their own orientation via the native player plugin,
+  // so we skip the orientation wait gate to avoid a deadlock where the screen
+  // waits for landscape but blocks rendering that would trigger the rotation.
+  const isPlayableRoute = pathname?.includes("/playable");
+  const isReady = isOrientationReady || isPlayableRoute;
 
   React.useEffect(() => {
     if (ref.current && isActive && isReady) {

package/Components/ScreenResolver/index.tsx

@@ -57,7 +57,6 @@ export function ScreenResolverComponent(props: Props) {
   const { hookPlugin } = screenData || {};
 
   const plugins = usePlugins();
-  const rivers = useRivers();
 
   const components = useAppSelector(selectComponents);
 
@@ -65,12 +64,6 @@ export function ScreenResolverComponent(props: Props) {
     videoModalState: { mode },
   } = useNavigation();
 
-  const [, setScreenContext] = ZappPipesScreenContext.useZappPipesContext();
-
-  React.useEffect(() => {
-    setScreenContext(rivers[screenId]);
-  }, [rivers, screenId, setScreenContext]);
-
   const parentCallback = props.resultCallback;
 
   const screenAction = useCallbackActions(
@@ -150,6 +143,17 @@ export function ScreenResolverComponent(props: Props) {
   return null;
 }
 
-export const ScreenResolver = ZappPipesScreenContext.withProvider(
-  ScreenResolverComponent
-);
+function withDefaultScreenContext(Component: React.ComponentType<any>) {
+  return function WithDefaultScreenContext(props: any) {
+    const screenId = props.screenId;
+    const rivers = useRivers();
+
+    return (
+      <ZappPipesScreenContext.Provider initialContextValue={rivers[screenId]}>
+        <Component {...props} />
+      </ZappPipesScreenContext.Provider>
+    );
+  };
+}
+
+export const ScreenResolver = withDefaultScreenContext(ScreenResolverComponent);

package/Components/Transitioner/Scene.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
-import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 import { useScreenOrientationHandler } from "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler";
+import { useMemoizedSafeAreaFrameWithActiveState } from "@applicaster/zapp-react-native-ui-components/Components/Screen/hooks";
 
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
@@ -94,19 +94,13 @@ function SceneComponent({
     isActive,
   });
 
-  const frame = useSafeAreaFrame();
-
-  const [memoFrame, setMemoFrame] = React.useState(frame);
-
-  useEffect(() => {
-    if (isActive) {
-      setMemoFrame((oldFrame) =>
-        oldFrame.width === frame.width && oldFrame.height === frame.height
-          ? oldFrame
-          : frame
-      );
-    }
-  }, [isActive, frame.width, frame.height]);
+  // Use shared memoized frame hook - synchronized with useWaitForValidOrientation
+  // to prevent race conditions during orientation changes
+  // Pass isActive from props since Scene knows its active state from Transitioner
+  const memoFrame = useMemoizedSafeAreaFrameWithActiveState({
+    updateForInactiveScreens: false,
+    isActive,
+  });
 
   const isAnimating = animating && overlayStyle;
 

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

@@ -88,11 +88,29 @@ const createStore = () =>
     }))
   );
 
+const createScreenComponentsStore = () =>
+  create(subscribeWithSelector<Record<string, unknown>>((_) => ({})));
+
 type ScreenContextType = {
   _navBarStore: ReturnType<typeof createStore>;
   _stateStore: ReturnType<typeof createStateStore>;
   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>({
@@ -107,6 +125,7 @@ export const ScreenContext = createContext<ScreenContextType>({
     setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
+  _componentStateStore: createScreenComponentsStore(),
 });
 
 export function ScreenContextProvider({
@@ -160,6 +179,14 @@ export function ScreenContextProvider({
     return navBarState;
   }, []);
 
+  // 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,
@@ -212,8 +239,9 @@ export function ScreenContextProvider({
           _stateStore: getScreenState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
+          _componentStateStore: componentStateStore,
         }),
-        [navBarState, screenData, routeScreenData]
+        [navBarState, screenData, routeScreenData, componentStateStore]
       )}
     >
       {children}

package/Contexts/ZappPipesContext/ZappPipesContextFactory.tsx

@@ -5,10 +5,10 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import * as R from "ramda";
 
-type ProviderProps = {
+type ProviderProps<S> = {
   children: React.ReactChild;
+  initialContextValue?: S;
 };
 
 type ContextType<T> = {
@@ -27,21 +27,29 @@ export function createZappPipesContext<T, S = T>(
 ) {
   const Context = createContext<ContextType<S>>(initialContext);
 
-  const { selector = R.identity, prepareContext = R.identity } = options || {};
+  const defaultSelector = (c: any) => c;
+  const defaultPrepareContext = (n: any) => n;
+  const joinArgs = (args: any[]) => args.join("-");
+
+  const { selector = defaultSelector, prepareContext = defaultPrepareContext } =
+    options || {};
 
   function useZappPipesContext(...hookArgs: any[]): [T, (T) => void] {
     const { context, setContext } = useContext(Context);
+    const joinedArgs = joinArgs(hookArgs);
 
     const contextValue = useMemo(
       () => selector(context, ...hookArgs),
-      [context, R.join("-", hookArgs)]
+      // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+      [context, joinedArgs]
     );
 
     const contextSetter = useCallback(
       (newContext: T) => {
         setContext(prepareContext(newContext, context, ...hookArgs));
       },
-      [context, setContext, R.join("-", hookArgs)]
+      // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+      [context, joinedArgs]
     );
 
     return useMemo(
@@ -50,8 +58,11 @@ export function createZappPipesContext<T, S = T>(
     );
   }
 
-  function Provider({ children }: ProviderProps) {
-    const [context, setContext] = useState<S>(initialContext.context);
+  /** Provider accepts `initialContextValue` prop to set the initial context value */
+  function Provider({ children, initialContextValue }: ProviderProps<S>) {
+    const [context, setContext] = useState<S>(
+      initialContextValue ?? initialContext.context
+    );
 
     return (
       <Context.Provider value={{ context, setContext }}>

package/Decorators/ZappPipesDataConnector/ResolverSelector.tsx

@@ -1,4 +1,3 @@
-// ResolverSelector.tsx
 import React from "react";
 import { ComponentDataSourceContext, ZappPipesDataProps } from "./types";
 import { StaticFeedResolver } from "./resolvers/StaticFeedResolver";
@@ -12,14 +11,33 @@ type ResolverSelectorProps = ComponentDataSourceContext & {
 export function ResolverSelector(props: ResolverSelectorProps) {
   const { getStaticComponentFeed, component, feedUrl, children } = props;
 
-  // Determine which resolver to use
+  const renderDefaultResolver = (
+    fallbackChildren: (dataProps: ZappPipesDataProps) => React.ReactNode
+  ) => {
+    if (feedUrl || component?.data?.source) {
+      return <UrlFeedResolver {...props}>{fallbackChildren}</UrlFeedResolver>;
+    }
+
+    return <NullFeedResolver>{fallbackChildren}</NullFeedResolver>;
+  };
+
   if (getStaticComponentFeed) {
-    return <StaticFeedResolver {...props}>{children}</StaticFeedResolver>;
-  }
+    return (
+      <StaticFeedResolver {...props}>
+        {(zappPipesDataProps) => {
+          const { data, loading, error } = zappPipesDataProps.zappPipesData;
+
+          const shouldFallback = !loading && data === null && !error;
+
+          if (shouldFallback) {
+            return renderDefaultResolver(children);
+          }
 
-  if (feedUrl || component?.data?.source) {
-    return <UrlFeedResolver {...props}>{children}</UrlFeedResolver>;
+          return children(zappPipesDataProps);
+        }}
+      </StaticFeedResolver>
+    );
   }
 
-  return <NullFeedResolver>{children}</NullFeedResolver>;
+  return renderDefaultResolver(children);
 }

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

@@ -7,15 +7,30 @@ import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
 import { NullFeedResolver } from "../resolvers/NullFeedResolver";
 
 jest.mock("../resolvers/StaticFeedResolver", () => ({
-  StaticFeedResolver: jest.fn(() => null),
+  StaticFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: true, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 jest.mock("../resolvers/UrlFeedResolver", () => ({
-  UrlFeedResolver: jest.fn(() => null),
+  UrlFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: true, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 jest.mock("../resolvers/NullFeedResolver", () => ({
-  NullFeedResolver: jest.fn(() => null),
+  NullFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: false, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 const testPlugin = {
@@ -52,7 +67,7 @@ describe("ResolverSelector", () => {
       expect.objectContaining({
         getStaticComponentFeed: props.getStaticComponentFeed,
         component: mockComponent,
-        children: mockChildren,
+        children: expect.any(Function),
       }),
       expect.anything()
     );
@@ -151,7 +166,10 @@ describe("ResolverSelector", () => {
     render(<ResolverSelector {...props} />);
 
     expect(StaticFeedResolver).toHaveBeenCalledWith(
-      expect.objectContaining(props),
+      expect.objectContaining({
+        ...props,
+        children: expect.any(Function),
+      }),
       expect.anything()
     );
   });
@@ -202,4 +220,193 @@ describe("ResolverSelector", () => {
     expect(UrlFeedResolver).not.toHaveBeenCalled();
     expect(NullFeedResolver).not.toHaveBeenCalled();
   });
+
+  describe("Fallback Logic", () => {
+    it("should fallback to UrlFeedResolver when StaticFeedResolver returns null and feedUrl is present", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+
+      expect(UrlFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          feedUrl: props.feedUrl,
+          component: mockComponent,
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should fallback to UrlFeedResolver when StaticFeedResolver returns null and component.data.source is present", () => {
+      const componentWithSource = {
+        ...mockComponent,
+        data: {
+          source: "data-source",
+        },
+      };
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        component: componentWithSource,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+
+      expect(UrlFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          component: componentWithSource,
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should fallback to NullFeedResolver when StaticFeedResolver returns null and no feedUrl/source is present", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(NullFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should NOT fallback and call children with static data when StaticFeedResolver returns data", () => {
+      const staticData = { entry: [{ id: "1" }] };
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: staticData, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            data: staticData,
+          }),
+        })
+      );
+    });
+
+    it("should NOT fallback and call children with loading state when StaticFeedResolver is loading", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: true, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: true,
+          }),
+        })
+      );
+    });
+
+    it("should NOT fallback and call children with error when StaticFeedResolver returns error", () => {
+      const error = new Error("Static error");
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            error,
+          }),
+        })
+      );
+    });
+  });
 });

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.9102699023",
+  "version": "15.0.0-alpha.9102777840",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.9102699023",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.9102699023",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.9102699023",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.9102699023",
+    "@applicaster/applicaster-types": "15.0.0-alpha.9102777840",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.9102777840",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.9102777840",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.9102777840",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-import * as R from "ramda";
-import { Text, TextStyle, View, ViewStyle } from "react-native";
-
-import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
-import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
-
-type Props = {
-  styles: {};
-  error: {};
-  remoteConfigurations: { localizations: {} };
-};
-
-const defaultAppStyles = {
-  loading_error_label: {
-    color: "#aaa",
-  },
-};
-
-const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
-  color: getAppStylesColor("loading_error_label", appStyles),
-  fontSize: 36,
-  textAlign: "center",
-});
-
-const errorStyles = ({ backgroundColor }): ViewStyle => ({
-  flex: 1,
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  zIndex: 100,
-  backgroundColor,
-});
-
-export function ErrorDisplayComponent({
-  styles,
-  remoteConfigurations: { localizations },
-}: Props) {
-  const theme = useTheme();
-  const backgroundColor = theme?.app_background_color;
-
-  const { stream_error_message = "Cannot play stream" } = getLocalizations({
-    localizations,
-  });
-
-  const appStyles = R.prop(styleKeys.style_namespace, styles);
-
-  return (
-    <View style={errorStyles({ backgroundColor })}>
-      <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
-    </View>
-  );
-}

package/Components/PlayerContainer/ErrorDisplay/index.ts

@@ -1,9 +0,0 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
-
-import { ErrorDisplayComponent } from "./ErrorDisplay";
-
-export const ErrorDisplay = R.compose(
-  connectToStore(R.pick(["remoteConfigurations"]))
-)(ErrorDisplayComponent);

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -1,131 +0,0 @@
-import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
-import NetInfo from "@react-native-community/netinfo";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
-import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
-import { log_info } from "./logger";
-import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
-type RestrictMobilePlaybackProps = {
-  player?: Player;
-  entry?: ZappEntry;
-  close: () => void;
-};
-
-export const useRestrictMobilePlayback = ({
-  player,
-  entry,
-  close,
-}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
-  const dialogVisibleRef = useRef<boolean>(false);
-  const theme = useTheme();
-  const plugins = usePlugins();
-
-  const restrictMobilePlugin = useMemo(
-    () =>
-      plugins.find((p) => p.identifier === "quick-brick-hook-restrict-mobile"),
-    [plugins]
-  );
-
-  const localizations = useMemo(
-    () => restrictMobilePlugin?.configuration?.localizations,
-    [restrictMobilePlugin]
-  );
-
-  const localize = useCallback(
-    (key: string) => {
-      const l = localizations && getLocalizations({ localizations });
-
-      return (l && l[key]) || "";
-    },
-    [localizations]
-  );
-
-  useEffect(() => {
-    return () => {
-      if (isTV()) {
-        return;
-      }
-
-      dialogVisibleRef.current = false;
-    };
-  }, []);
-
-  const isConnectionRestricted = useMemo(() => {
-    if (isTV()) {
-      return false;
-    }
-
-    // Only restrict if the plugin exists
-    if (!restrictMobilePlugin) {
-      return false;
-    }
-
-    return player && isTrue(entry?.extensions?.connection_restricted);
-  }, [player, entry, restrictMobilePlugin]);
-
-  const [isRestricted, setIsRestricted] = useState<boolean>(
-    isConnectionRestricted
-  );
-
-  useEffect(() => {
-    if (!isConnectionRestricted) {
-      return;
-    }
-
-    const stopPlayer = () => {
-      log_info(
-        "Stopping player due to mobile restriction, connection_restricted: true"
-      );
-
-      player?.closeNativePlayer();
-      playerManager?.invokeHandler("close");
-
-      dialogVisibleRef.current = true;
-
-      showAlertDialog({
-        title:
-          localize("restrict_mobile_playback_error_title") ||
-          "Restricted Connection Type",
-        message:
-          localize("restrict_mobile_playback_error_message") ||
-          "This content can only be viewed over a Wi-Fi or LAN network.",
-        okButtonText: theme.ok_button || "OK",
-        completion: () => {
-          dialogVisibleRef.current = false;
-
-          close();
-        },
-      });
-    };
-
-    return NetInfo.addEventListener((state) => {
-      if (state.type === "cellular") {
-        setIsRestricted(true);
-
-        if (dialogVisibleRef.current) {
-          return;
-        }
-
-        stopPlayer();
-      } else {
-        setIsRestricted(false);
-      }
-    });
-  }, [
-    close,
-    entry?.extensions?.connection_restricted,
-    localizations,
-    localize,
-    player,
-    theme.ok_button,
-    isConnectionRestricted,
-  ]);
-
-  return { isRestricted };
-};