@applicaster/zapp-react-native-ui-components 15.0.0-rc.113 → 15.0.0-rc.115

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -12,12 +12,26 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useEventAlerts } from "./utils/useEventAlerts";
+import {
+  selectRiverById,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { getScreenDataSource } from "./utils/getScreenDataSource";
+import { ScreenResolverFeedProvider } from "../ScreenResolverFeedProvider/ScreenResolverFeedProvider";
 
 const { log_debug } = createLogger({
   category: "ScreenContainer",
   subsystem: "General",
 });
 
+/** Provides screen-feed from general-screen configuration (if defined) */
+const useFeedData = (id) => {
+  const river = useAppSelector((state) => selectRiverById(state, id));
+  const feedData = getScreenDataSource(river);
+
+  return feedData;
+};
+
 export const GeneralContentScreen = ({
   feed,
   screenId,
@@ -103,24 +117,26 @@ export const GeneralContentScreen = ({
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (
-    <ScreenTrackedViewPositionsContext.Provider>
-      <CellTapContext.Provider value={contextValue}>
-        <ComponentsMap
-          feed={feed}
-          riverId={screenId}
-          groupId={groupId || `general-content-screen-${screenId}`}
-          riverComponents={components || uiComponents}
-          scrollViewExtraProps={scrollViewExtraProps}
-          getStaticComponentFeed={getStaticComponentFeed}
-          extraAnchorPointYOffset={extraAnchorPointYOffset}
-          isScreenWrappedInContainer={isScreenWrappedInContainer}
-          parentFocus={parentFocus}
-          focused={focused}
-          containerHeight={containerHeight}
-          preferredFocus={preferredFocus}
-          {...componentsMapExtraProps}
-        />
-      </CellTapContext.Provider>
-    </ScreenTrackedViewPositionsContext.Provider>
+    <ScreenResolverFeedProvider id={screenId} useFeedData={useFeedData}>
+      <ScreenTrackedViewPositionsContext.Provider>
+        <CellTapContext.Provider value={contextValue}>
+          <ComponentsMap
+            feed={feed}
+            riverId={screenId}
+            groupId={groupId || `general-content-screen-${screenId}`}
+            riverComponents={components || uiComponents}
+            scrollViewExtraProps={scrollViewExtraProps}
+            getStaticComponentFeed={getStaticComponentFeed}
+            extraAnchorPointYOffset={extraAnchorPointYOffset}
+            isScreenWrappedInContainer={isScreenWrappedInContainer}
+            parentFocus={parentFocus}
+            focused={focused}
+            containerHeight={containerHeight}
+            preferredFocus={preferredFocus}
+            {...componentsMapExtraProps}
+          />
+        </CellTapContext.Provider>
+      </ScreenTrackedViewPositionsContext.Provider>
+    </ScreenResolverFeedProvider>
   );
 };

package/Components/GeneralContentScreen/__tests__/GeneralContentScreen.test.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { GeneralContentScreen } from "../GeneralContentScreen";
+
+const mockUseAppSelector = jest.fn();
+const mockSelectRiverById = jest.fn();
+const mockProviderSpy = jest.fn();
+
+jest.mock("../../River/ComponentsMap", () => ({
+  ComponentsMap: () => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    return <View testID="components-map" />;
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => jest.fn()),
+}));
+
+jest.mock("../utils", () => ({
+  logger: { warn: jest.fn() },
+  whenMatchingType: jest.fn((_type, value) => value),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  useLayoutVersion: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
+  () => ({
+    useScreenData: jest.fn(() => ({
+      ui_components: [{ id: "ui-component" }],
+      general: {},
+    })),
+  })
+);
+
+jest.mock("../utils/useCurationAPI", () => ({
+  useCurationAPI: jest.fn(() => [{ id: "curation-component" }]),
+}));
+
+jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
+  useRiverInitialState: jest.fn(() => []),
+}));
+
+jest.mock("../utils/useEventAlerts", () => ({
+  useEventAlerts: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  useAppSelector: (...args) => mockUseAppSelector(...args),
+  selectRiverById: (...args) => mockSelectRiverById(...args),
+}));
+
+jest.mock("../utils/getScreenDataSource", () => ({
+  getScreenDataSource: jest.fn(() => ({
+    source: "https://feed",
+    mapping: {},
+  })),
+}));
+
+jest.mock(
+  "../../ScreenResolverFeedProvider/ScreenResolverFeedProvider",
+  () => ({
+    ScreenResolverFeedProvider: ({ id, useFeedData, children }) => {
+      const React = require("react");
+      const { View } = require("react-native");
+
+      mockProviderSpy(id, useFeedData);
+      useFeedData(id);
+
+      return <View testID="screen-resolver-feed-provider">{children}</View>;
+    },
+  })
+);
+
+describe("GeneralContentScreen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseAppSelector.mockImplementation((selector) => selector({}));
+    mockSelectRiverById.mockReturnValue({ id: "screen-1" });
+  });
+
+  it("wraps content with ScreenResolverFeedProvider and renders ComponentsMap", () => {
+    const { getByTestId } = render(
+      <GeneralContentScreen
+        screenId="screen-1"
+        feed={null}
+        components={[{ id: "component-1" }]}
+      />
+    );
+
+    expect(getByTestId("screen-resolver-feed-provider")).toBeDefined();
+    expect(getByTestId("components-map")).toBeDefined();
+
+    expect(mockProviderSpy).toHaveBeenCalledWith(
+      "screen-1",
+      expect.any(Function)
+    );
+  });
+});

package/Components/GeneralContentScreen/utils/__tests__/getScreenDataSource.test.ts

@@ -0,0 +1,19 @@
+import { getScreenDataSource } from "../getScreenDataSource";
+
+describe("getScreenDataSource", () => {
+  it("returns screen_feed data when present", () => {
+    const result = getScreenDataSource({
+      data: {
+        screen_feed: {
+          source: "https://feed",
+        },
+      },
+    });
+
+    expect(result).toEqual({ source: "https://feed" });
+  });
+
+  it("returns undefined when screen_feed is missing", () => {
+    expect(getScreenDataSource({ data: {} })).toBeUndefined();
+  });
+});

package/Components/GeneralContentScreen/utils/getScreenDataSource.ts

@@ -0,0 +1,9 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+
+const lookupPath = ["data", "screen_feed"];
+
+export const getScreenDataSource = (
+  screenData: any
+): Option<ZappDataSource> => {
+  return get(screenData, lookupPath) as ZappDataSource | undefined;
+};

package/Components/HookRenderer/HookRenderer.tsx

@@ -6,7 +6,12 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { PresentationType } from "../ScreenResolver";
+
+import { componentsLogger } from "../../Helpers/logger";
+
+const logger = componentsLogger.addSubsystem("HookRenderer");
+
+const HOOK_PRESENTATION_TYPE = "Hook";
 
 type Props = {
   focused?: boolean;
@@ -15,20 +20,17 @@ type Props = {
   callback: hookCallback;
 };
 
-export const HookRenderer = (props: Props) => {
-  const {
-    focused,
-    screenData: { payload, hookPlugin },
-    callback,
-  } = props;
-
-  const { setVisible: showNavBar } = useSetNavbarState();
+const HookRenderer = (props: Props) => {
+  const { focused, screenData, callback } = props;
+  const { payload, hookPlugin } = screenData;
 
   const {
     module: { Component: HookComponent, presentFullScreen },
     configuration,
   } = hookPlugin;
 
+  const { setVisible: showNavBar } = useSetNavbarState();
+
   useHookAnalytics(props);
 
   const isNavBarVisible = useIsNavBarVisible();
@@ -63,8 +65,36 @@ export const HookRenderer = (props: Props) => {
         hookPlugin,
         focused,
         parentFocus,
-        presentationType: PresentationType.Hook,
+        presentationType: HOOK_PRESENTATION_TYPE,
       }}
     />
   );
 };
+
+/**
+ * Guard component to prevent rendering HookRenderer when screenData or hookPlugin is missing. This is to avoid potential crashes due to missing data.
+ */
+const HookRendererGuard = (props: Props) => {
+  React.useEffect(() => {
+    if (!props.screenData) {
+      logger.error(
+        "HookRenderer received no screenData, screen cannot be rendered"
+      );
+    } else if (!props.screenData.hookPlugin) {
+      logger.error(
+        "HookRenderer received screenData with no hookPlugin, screen cannot be rendered",
+        {
+          screenData: props.screenData,
+        }
+      );
+    }
+  }, [props.screenData]);
+
+  if (!props.screenData || !props.screenData.hookPlugin) {
+    return null;
+  }
+
+  return <HookRenderer {...props} />;
+};
+
+export { HookRendererGuard as HookRenderer };

package/Components/HookRenderer/__tests__/HookRenderer.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { HookRenderer } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isTV: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useBackHandler: jest.fn(),
+  useIsNavBarVisible: jest.fn(() => true),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useHookAnalytics: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useSetNavbarState: jest.fn(() => ({
+    setVisible: jest.fn(),
+  })),
+}));
+
+describe("HookRenderer", () => {
+  it("returns null when hookPlugin is missing", () => {
+    const { toJSON } = render(
+      <HookRenderer callback={jest.fn()} screenData={{ payload: {} } as any} />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it("passes Hook presentationType to rendered hook component", () => {
+    const HookComponent = (props) => (
+      <View testID="hook-component" {...props} />
+    );
+
+    const { getByTestId } = render(
+      <HookRenderer
+        callback={jest.fn()}
+        screenData={{
+          payload: { foo: "bar" },
+          hookPlugin: {
+            module: {
+              Component: HookComponent,
+              presentFullScreen: false,
+            },
+            configuration: {},
+          },
+        }}
+      />
+    );
+
+    expect(getByTestId("hook-component").props.presentationType).toBe("Hook");
+  });
+});

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";
@@ -339,12 +338,6 @@ const PlayerContainerComponent = (props: Props) => {
       playerContainerLogger.error(errorObj);
 
       setState({ error: errorObj });
-
-      if (!isTvOS) {
-        setTimeout(() => {
-          close();
-        }, 800);
-      }
     },
     [close]
   );
@@ -695,8 +688,6 @@ const PlayerContainerComponent = (props: Props) => {
                         </Player>
                       )}
                     </PlayerFocusableWrapperView>
-
-                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
                   {isInlineTV && context.showComponentsContainer ? (

package/Components/PreloaderWrapper/__tests__/index.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { PreloaderWrapper } from "..";
+
+describe("PreloaderWrapper", () => {
+  it("renders children when preloader is hidden", () => {
+    const { getByText } = render(
+      <PreloaderWrapper showPreloader={false}>
+        <Text>content</Text>
+      </PreloaderWrapper>
+    );
+
+    expect(getByText("content")).toBeDefined();
+  });
+
+  it("renders null when preloader is shown", () => {
+    const { queryByText } = render(
+      <PreloaderWrapper showPreloader>
+        <Text>content</Text>
+      </PreloaderWrapper>
+    );
+
+    expect(queryByText("content")).toBeNull();
+  });
+});

package/Components/PreloaderWrapper/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+type PreloaderWrapperProps = {
+  showPreloader?: boolean;
+  children?: React.ReactNode;
+};
+
+export const PreloaderWrapper: React.FC<PreloaderWrapperProps> = ({
+  showPreloader = false,
+  children,
+}) => {
+  return !showPreloader ? children : null;
+};
+
+export default PreloaderWrapper;

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { PreloaderWrapper } from "../PreloaderWrapper";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useFeedLoader } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { componentsLogger } from "../../Helpers/logger";
+
+const logger = componentsLogger.addSubsystem("ScreenFeedLoader");
+
+/** Loads and provides `feedData` and store to  */
+export const ScreenFeedLoader: React.FC<
+  React.PropsWithChildren<{ id: string; feedData: any }>
+> = ({ id, feedData, children }) => {
+  const { source: feedUrl, mapping } = feedData;
+
+  const { data, loading, error } = useFeedLoader({
+    feedUrl,
+    mapping,
+    pipesOptions: {},
+  });
+
+  const feedStore = useScreenContextV2()._feedStore;
+
+  useEffect(() => {
+    if (data && !loading) {
+      feedStore.setState({ screenFeed: data, screenFeedError: null });
+
+      logger.log("screenFeed set for active screen", { data, screenId: id });
+    }
+
+    if (error && !loading) {
+      feedStore.setState({ screenFeed: data, screenFeedError: error });
+
+      logger.warning("Feed data error:", {
+        data,
+        loading,
+        error,
+        screenId: id,
+      });
+    }
+  }, [data, loading, error, feedStore, id]);
+
+  return (
+    <PreloaderWrapper showPreloader={loading}>{children}</PreloaderWrapper>
+  );
+};

package/Components/ScreenFeedLoader/__tests__/ScreenFeedLoader.test.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, waitFor } from "@testing-library/react-native";
+import { ScreenFeedLoader } from "../ScreenFeedLoader";
+
+const mockUseFeedLoader = jest.fn();
+const mockUseScreenContextV2 = jest.fn();
+const mockSetState = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useFeedLoader: (...args) => mockUseFeedLoader(...args),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContextV2: (...args) => mockUseScreenContextV2(...args),
+  })
+);
+
+describe("ScreenFeedLoader", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _feedStore: {
+        setState: mockSetState,
+      },
+    });
+  });
+
+  it("hides children while loading", () => {
+    mockUseFeedLoader.mockReturnValue({
+      data: null,
+      loading: true,
+      error: null,
+    });
+
+    const { queryByText } = render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    expect(queryByText("child")).toBeNull();
+  });
+
+  it("writes loaded feed data to _feedStore", async () => {
+    const data = { entry: { id: "1" } };
+
+    mockUseFeedLoader.mockReturnValue({
+      data,
+      loading: false,
+      error: null,
+    });
+
+    render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    await waitFor(() => {
+      expect(mockSetState).toHaveBeenCalledWith({
+        screenFeed: data,
+        screenFeedError: null,
+      });
+    });
+  });
+
+  it("writes feed error to _feedStore", async () => {
+    const error = new Error("feed failed");
+    const data = { fallback: true };
+
+    mockUseFeedLoader.mockReturnValue({
+      data,
+      loading: false,
+      error,
+    });
+
+    render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    await waitFor(() => {
+      expect(mockSetState).toHaveBeenCalledWith({
+        screenFeed: data,
+        screenFeedError: error,
+      });
+    });
+  });
+});

package/Components/ScreenFeedLoader/index.ts

@@ -0,0 +1 @@
+export { ScreenFeedLoader } from "./ScreenFeedLoader";

package/Components/ScreenResolver/__tests__/screenResolver.test.js

@@ -53,6 +53,9 @@ const mockComponents = { ScreenType1, ScreenType2, PlayerController };
 
 const mockState = {
   components: mockComponents,
+  remoteConfigurations: {
+    assets: {},
+  },
   plugins: [
     mockScreenType3,
     mockScreenType4,
@@ -127,6 +130,21 @@ const getWrapper = (screenId, screenType, screenData) => {
   );
 };
 
+const getWrappedWrapper = (screenId, screenType, screenData) => {
+  const ScreenResolver = require("../").ScreenResolver;
+
+  return renderWithProviders(
+    <ScreenResolver
+      {...{
+        screenId,
+        screenType,
+        screenData,
+      }}
+    />,
+    mockState
+  );
+};
+
 describe("<ScreenResolver />", () => {
   it("renders correctly", () => {
     const wrapper = getWrapper("1234", "screen_type_1", {});
@@ -134,6 +152,12 @@ describe("<ScreenResolver />", () => {
     expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
   });
 
+  it("renders correctly when wrapped with default screen context", () => {
+    const wrapper = getWrappedWrapper("1234", "screen_type_1", {});
+
+    expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
+  });
+
   it("picks screen from plugins if it exists", () => {
     const wrapper = getWrapper("A1234", "screen_type_3", {});
 

package/Components/ScreenResolver/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useGetComponent } from "./useGetComponent";
+
+export { useScreenComponentResolver } from "./useScreenComponentResolver";

package/Components/ScreenResolver/hooks/useGetComponent.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { toPascalCase } from "@applicaster/zapp-react-native-utils/stringUtils";
+import {
+  useAppSelector,
+  selectComponents,
+} from "@applicaster/zapp-react-native-redux";
+
+export const useGetComponent = (screenType) => {
+  const components = useAppSelector(selectComponents);
+
+  return React.useMemo(() => {
+    return components[toPascalCase(screenType)];
+  }, [components, screenType]);
+};

package/Components/ScreenResolver/hooks/useScreenComponentResolver.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { path, prop } from "ramda";
+import {
+  findPluginByType,
+  findPluginByIdentifier,
+} from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { HandlePlayable } from "../../HandlePlayable";
+import { HookRenderer } from "../../HookRenderer";
+import { LinkHandler } from "../../LinkHandler";
+import { Favorites } from "../../Favorites";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { useGetComponent } from "./useGetComponent";
+import { getScreenTypeProps } from "../utils";
+
+export enum PresentationType {
+  Standalone = "Standalone",
+  Hook = "Hook",
+}
+
+const screenTypeComponents = {
+  favorites: Favorites,
+  link: LinkHandler,
+  playable: HandlePlayable,
+  hooks: HookRenderer,
+};
+
+export const useScreenComponentResolver = (screenType, props) => {
+  const plugins = usePlugins();
+  const { hookPlugin } = props.screenData || {};
+  const component = useGetComponent(screenType);
+
+  const screenAction = useCallbackActions(
+    hookPlugin || props.screenData,
+    props.screenData.callback
+  );
+
+  const {
+    videoModalState: { mode },
+  } = useNavigation();
+
+  const componentProps = {
+    ...props,
+    mode,
+    screenAction,
+  };
+
+  const ScreenTypeComponent = screenTypeComponents?.[screenType];
+
+  if (ScreenTypeComponent) {
+    return (
+      <ScreenTypeComponent
+        {...getScreenTypeProps(screenType, componentProps)}
+      />
+    );
+  }
+
+  const ScreenPlugin =
+    findPluginByType(screenType, plugins, { skipWarning: true }) ||
+    findPluginByIdentifier(screenType, plugins) ||
+    findPluginByIdentifier(hookPlugin && hookPlugin.identifier, plugins) ||
+    component;
+
+  const ScreenComponent =
+    path(["module", "Component"], ScreenPlugin) ||
+    prop("module", ScreenPlugin) ||
+    prop("Component", ScreenPlugin) ||
+    ScreenPlugin;
+
+  const configuration =
+    prop("configuration", ScreenPlugin) ||
+    prop("__plugin_configuration", ScreenComponent);
+
+  if (!ScreenComponent) {
+    return null;
+  }
+
+  return (
+    <ScreenComponent
+      {...props}
+      callback={props.resultCallback || screenAction}
+      screenId={props.screenId}
+      screenData={props.screenData}
+      presentationType={PresentationType.Standalone}
+      configuration={configuration}
+    />
+  );
+};

package/Components/ScreenResolver/index.tsx

@@ -1,29 +1,17 @@
 import * as React from "react";
-import { path, prop } from "ramda";
-import {
-  findPluginByType,
-  findPluginByIdentifier,
-} from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { HandlePlayable } from "../HandlePlayable";
-import { toPascalCase } from "@applicaster/zapp-react-native-utils/stringUtils";
-import { HookRenderer } from "../HookRenderer";
-import { LinkHandler } from "../LinkHandler";
-import { Favorites } from "../Favorites";
-import { ZappPipesScreenContext } from "../../Contexts";
+
 import { componentsLogger } from "../../Helpers/logger";
-import {
-  useAppSelector,
-  usePlugins,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  useNavigation,
-  useRivers,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 
-import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
 import { ScreenResultCallback } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/callbackNavigationAction";
-import { selectComponents } from "@applicaster/zapp-react-native-redux";
+import { useScreenComponentResolver } from "./hooks/useScreenComponentResolver";
+import { withDefaultScreenContext } from "./withDefaultScreenContext";
+
+export enum PresentationType {
+  Standalone = "Standalone",
+  Hook = "Hook",
+}
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -44,95 +32,14 @@ type Props = {
   groupId?: string;
 };
 
-export enum PresentationType {
-  Standalone = "Standalone",
-  Hook = "Hook",
-}
-
 export function ScreenResolverComponent(props: Props) {
-  useScreenAnalytics(props);
-
-  const { screenType, screenId, screenData, groupId } = props;
-
-  const { hookPlugin } = screenData || {};
-
-  const plugins = usePlugins();
-
-  const components = useAppSelector(selectComponents);
-
-  const {
-    videoModalState: { mode },
-  } = useNavigation();
+  const { screenType } = props;
+  const component = useScreenComponentResolver(screenType, props);
 
-  const parentCallback = props.resultCallback;
-
-  const screenAction = useCallbackActions(
-    hookPlugin || screenData,
-    screenData.callback
-  );
-
-  const callbackAction = parentCallback || screenAction;
-
-  const ScreenPlugin =
-    findPluginByType(screenType, plugins, { skipWarning: true }) ||
-    findPluginByIdentifier(screenType, plugins) ||
-    findPluginByIdentifier(hookPlugin && hookPlugin.identifier, plugins) ||
-    components[toPascalCase(screenType)];
-
-  if (screenType === "favorites") {
-    return <Favorites screenData={screenData} />;
-  }
-
-  if (screenType === "link") {
-    return <LinkHandler screenData={screenData} />;
-  }
-
-  if (screenType === "playable") {
-    return (
-      // @ts-ignore
-      <HandlePlayable
-        item={screenData}
-        mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
-        isModal={false}
-        groupId={groupId}
-      />
-    );
-  }
-
-  if (hookPlugin || screenType === "hooks") {
-    return (
-      screenData && (
-        <HookRenderer
-          callback={callbackAction}
-          screenData={screenData}
-          focused={props.focused}
-          parentFocus={props.parentFocus as ParentFocus}
-        />
-      )
-    );
-  }
-
-  const ScreenComponent =
-    path(["module", "Component"], ScreenPlugin) ||
-    prop("module", ScreenPlugin) ||
-    prop("Component", ScreenPlugin) ||
-    ScreenPlugin;
-
-  const configuration =
-    prop("configuration", ScreenPlugin) ||
-    prop("__plugin_configuration", ScreenComponent);
+  useScreenAnalytics(props);
 
-  if (ScreenComponent) {
-    return (
-      <ScreenComponent
-        {...props}
-        callback={callbackAction}
-        screenId={screenId}
-        screenData={screenData}
-        configuration={configuration}
-        presentationType={PresentationType.Standalone}
-      />
-    );
+  if (component) {
+    return component;
   }
 
   logger.warning({
@@ -143,17 +50,4 @@ export function ScreenResolverComponent(props: Props) {
   return null;
 }
 
-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/ScreenResolver/utils/__tests__/getScreenTypeProps.test.ts

@@ -0,0 +1,45 @@
+import { getScreenTypeProps } from "../getScreenTypeProps";
+
+const baseProps = {
+  screenData: { id: "entry-1" },
+  mode: "PIP",
+  screenId: "screen-1",
+  groupId: "group-1",
+  focused: true,
+  parentFocus: { nextFocusDown: { current: null } },
+  screenAction: jest.fn(),
+  resultCallback: null,
+};
+
+describe("getScreenTypeProps", () => {
+  it("returns props for favorites/link", () => {
+    expect(getScreenTypeProps("favorites", baseProps)).toEqual({
+      screenData: baseProps.screenData,
+    });
+
+    expect(getScreenTypeProps("link", baseProps)).toEqual({
+      screenData: baseProps.screenData,
+    });
+  });
+
+  it("returns props for playable", () => {
+    expect(getScreenTypeProps("playable", baseProps)).toEqual({
+      item: baseProps.screenData,
+      mode: "PIP",
+      isModal: false,
+      groupId: "group-1",
+    });
+  });
+
+  it("returns props for hooks", () => {
+    const result = getScreenTypeProps("hooks", baseProps);
+
+    expect(result).toMatchObject({
+      screenData: baseProps.screenData,
+      focused: true,
+      parentFocus: baseProps.parentFocus,
+    });
+
+    expect(result.callback).toBe(baseProps.screenAction);
+  });
+});

package/Components/ScreenResolver/utils/getScreenTypeProps.ts

@@ -0,0 +1,43 @@
+export const getScreenTypeProps = (
+  screenType: "favorites" | "link" | "playable" | "hooks",
+  props
+) => {
+  const {
+    screenData,
+    mode,
+    screenId,
+    groupId,
+    focused,
+    parentFocus,
+    screenAction,
+    resultCallback,
+  } = props;
+
+  switch (screenType) {
+    case "favorites":
+    case "link":
+      return {
+        screenData,
+      };
+    case "playable":
+      return {
+        item: screenData,
+        mode: mode === "PIP" ? "PIP" : "FULLSCREEN",
+        isModal: false,
+        groupId: groupId,
+      };
+    case "hooks":
+      return {
+        screenData,
+        callback: resultCallback || screenAction,
+        focused,
+        parentFocus: parentFocus as ParentFocus,
+      };
+    default:
+      return {
+        callback: resultCallback || screenAction,
+        screenId: screenId,
+        screenData,
+      };
+  }
+};

package/Components/ScreenResolver/utils/index.ts

@@ -0,0 +1 @@
+export { getScreenTypeProps } from "./getScreenTypeProps";

package/Components/ScreenResolver/withDefaultScreenContext.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { ZappPipesScreenContext } from "../../Contexts";
+
+export 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>
+    );
+  };
+}

package/Components/ScreenResolverFeedProvider/ScreenResolverFeedProvider.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ScreenFeedLoader } from "../ScreenFeedLoader/ScreenFeedLoader";
+
+/** Resolves screen-feed for a given screen `id` by using the provided `useFeedData` hook */
+export const ScreenResolverFeedProvider = ({
+  id,
+  children,
+  useFeedData,
+}: {
+  id: string;
+  children: React.ReactNode;
+  useFeedData: (id: string) => Option<ZappDataSource>;
+}) => {
+  const feedData = useFeedData(id);
+
+  if (feedData?.source) {
+    return (
+      <ScreenFeedLoader id={id} feedData={feedData}>
+        {children}
+      </ScreenFeedLoader>
+    );
+  } else {
+    return <>{children}</>;
+  }
+};

package/Components/ScreenResolverFeedProvider/__tests__/ScreenResolverFeedProvider.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { ScreenResolverFeedProvider } from "../ScreenResolverFeedProvider";
+
+jest.mock("../../ScreenFeedLoader/ScreenFeedLoader", () => ({
+  ScreenFeedLoader: ({ children }) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    return <View testID="feed-loader">{children}</View>;
+  },
+}));
+
+describe("ScreenResolverFeedProvider", () => {
+  it("renders ScreenFeedLoader when screen feed source exists", () => {
+    const useFeedData = jest.fn(() => ({
+      source: "https://feed",
+      mapping: {},
+    }));
+
+    const { getByTestId, getByText } = render(
+      <ScreenResolverFeedProvider id="screen-1" useFeedData={useFeedData}>
+        <Text>content</Text>
+      </ScreenResolverFeedProvider>
+    );
+
+    expect(getByTestId("feed-loader")).toBeDefined();
+    expect(getByText("content")).toBeDefined();
+  });
+
+  it("renders children directly when screen feed source is missing", () => {
+    const useFeedData = jest.fn(() => ({}));
+
+    const { queryByTestId, getByText } = render(
+      <ScreenResolverFeedProvider id="screen-1" useFeedData={useFeedData}>
+        <Text>content</Text>
+      </ScreenResolverFeedProvider>
+    );
+
+    expect(queryByTestId("feed-loader")).toBeNull();
+    expect(getByText("content")).toBeDefined();
+  });
+});

package/Components/ScreenResolverFeedProvider/index.ts

@@ -0,0 +1 @@
+export { ScreenResolverFeedProvider } from "./ScreenResolverFeedProvider";

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

@@ -91,9 +91,13 @@ const createStore = () =>
 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;
   /**
@@ -116,6 +120,7 @@ type ScreenContextType = {
 export const ScreenContext = createContext<ScreenContextType>({
   _stateStore: createStateStore(),
   _navBarStore: createStore(),
+  _feedStore: createFeedStore(),
   navBar: {
     visible: true,
     title: "",
@@ -157,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;
@@ -179,6 +188,13 @@ 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.
@@ -237,6 +253,7 @@ export function ScreenContextProvider({
         () => ({
           _navBarStore: getScreenNavBarState(),
           _stateStore: getScreenState(),
+          _feedStore: screenFeedStoreRef.current,
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
           _componentStateStore: componentStateStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.113",
+  "version": "15.0.0-rc.115",
   "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-rc.113",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.113",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.113",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.113",
+    "@applicaster/applicaster-types": "15.0.0-rc.115",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.115",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.115",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.115",
     "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);