@applicaster/zapp-react-native-ui-components 14.0.0-rc.37 → 14.0.0-rc.39

package/Components/River/TV/River.tsx

@@ -4,10 +4,6 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
-import {
-  useFeedLoader,
-  useLayoutVersion,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -21,6 +17,7 @@ type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
   feedUrl?: string;
+  feedData?: PipesDataObject["data"];
   extraProps?: any;
   screenResolverExtraProps?: any;
   componentsMapExtraProps?: any;
@@ -32,7 +29,7 @@ type Props = {
 export const River = (props: Props) => {
   const {
     screenId,
-    feedUrl,
+    feedData,
     extraProps,
     screenResolverExtraProps,
     componentsMapExtraProps,
@@ -46,7 +43,6 @@ export const River = (props: Props) => {
     useSetNavbarState();
 
   const rivers = useRivers();
-  const isV2 = useLayoutVersion({ isV2: true });
 
   const river = React.useMemo(() => rivers?.[screenId], [screenId]);
 
@@ -55,17 +51,6 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const connectedScreenUrl = React.useMemo(() => {
-    // Avoid using feedUrl or content.src on layouts v2
-    if (isV2) return null;
-
-    return feedUrl || R.path(["content", "src"], screenData);
-  }, [feedUrl, screenData]);
-
-  const { data: feedData } = useFeedLoader({
-    feedUrl: connectedScreenUrl,
-  });
-
   const stringOrEmpty = (value: string | number | undefined): string =>
     R.isNil(value) ? "" : String(value);
 

package/Components/River/TV/index.tsx

@@ -2,8 +2,10 @@ import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
+import { withRiverDataLoader } from "./withRiverDataLoader";
 
 export const River = compose(
   withTvEventHandler,
-  withComponentsMapOffsetContext
+  withComponentsMapOffsetContext,
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withPipesV1DataLoader.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { path } from "ramda";
+
+import {
+  useFeedLoader,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+type Props = {
+  screenId: string;
+  screenData: ZappRiver | ZappEntry;
+  feedUrl?: string;
+  river?: ZappRiver | ZappEntry;
+};
+
+export const withPipesV1DataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithPipesV1DataLoaderComponent(props: Props) {
+    const { screenId, feedUrl } = props;
+
+    const rivers = useRivers();
+
+    const river = React.useMemo(() => rivers?.[screenId], [screenId]);
+
+    const screenData = React.useMemo(
+      () => props.screenData || props.river || river,
+      [screenId]
+    );
+
+    const connectedScreenUrl = useMemo(() => {
+      // Avoid using feedUrl or content.src on layouts v2
+
+      return feedUrl || path(["content", "src"], screenData);
+    }, [feedUrl, screenData]);
+
+    const { data: feedData } = useFeedLoader({
+      feedUrl: connectedScreenUrl,
+    });
+
+    return <WrappedComponent {...props} feedData={feedData} />;
+  };
+};

package/Components/River/TV/withRiverDataLoader.tsx

@@ -0,0 +1,17 @@
+import { useLayoutVersion } from "@applicaster/zapp-react-native-utils/reactHooks";
+import React from "react";
+import { withPipesV1DataLoader } from "./withPipesV1DataLoader";
+
+export const withRiverDataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithRiverDataLoaderComponent(props) {
+    const isV2 = useLayoutVersion({ isV2: true });
+
+    if (isV2) {
+      return <WrappedComponent {...props} />;
+    }
+
+    return withPipesV1DataLoader(WrappedComponent)(props);
+  };
+};

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -11,6 +11,7 @@ import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
+import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 
 export enum PlayerAnimationStateEnum {
   minimize = "minimize",
@@ -102,14 +103,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     setStartComponentsAnimation(false);
   }, []);
 
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      resetPlayerAnimationState();
-      yTranslate.current?.setValue(Dimensions.get("window").height);
-    }
-  }, [visible, resetPlayerAnimationState]);
-
   // Animated values
   const lastScrollY = React.useRef(new Animated.Value(0)).current;
   const dragScrollY = React.useRef(new Animated.Value(0)).current;
@@ -122,6 +115,29 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
   const startComponentsAnimationDistance = Math.round((height * 60) / 100);
+  const isTabletLandscape = useIsTabletLandscape();
+  const windowDimensions = Dimensions.get("window");
+
+  useEffect(() => {
+    // Reset player animation state when video modal is closed
+    if (!visible) {
+      resetPlayerAnimationState();
+
+      if (!isTabletLandscape) {
+        // restore to portrait ( in portrait mode height is bigger)
+        if (windowDimensions.height > windowDimensions.width) {
+          yTranslate.current?.setValue(windowDimensions.height);
+        }
+      } else {
+        yTranslate.current?.setValue(windowDimensions.height);
+      }
+    }
+  }, [
+    visible,
+    resetPlayerAnimationState,
+    windowDimensions.height,
+    isTabletLandscape,
+  ]);
 
   React.useEffect(() => {
     if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {

package/Decorators/ZappPipesDataConnector/ResolverSelector.tsx

@@ -0,0 +1,25 @@
+// ResolverSelector.tsx
+import React from "react";
+import { ComponentDataSourceContext, ZappPipesDataProps } from "./types";
+import { StaticFeedResolver } from "./resolvers/StaticFeedResolver";
+import { UrlFeedResolver } from "./resolvers/UrlFeedResolver";
+import { NullFeedResolver } from "./resolvers/NullFeedResolver";
+
+type ResolverSelectorProps = ComponentDataSourceContext & {
+  children: (dataProps: ZappPipesDataProps) => React.ReactNode;
+};
+
+export function ResolverSelector(props: ResolverSelectorProps) {
+  const { getStaticComponentFeed, component, feedUrl, children } = props;
+
+  // Determine which resolver to use
+  if (getStaticComponentFeed) {
+    return <StaticFeedResolver {...props}>{children}</StaticFeedResolver>;
+  }
+
+  if (feedUrl || component?.data?.source) {
+    return <UrlFeedResolver {...props}>{children}</UrlFeedResolver>;
+  }
+
+  return <NullFeedResolver>{children}</NullFeedResolver>;
+}

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { NullFeedResolver } from "../resolvers/NullFeedResolver";
+import { ReloadDataFunction } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
+
+type MockChildrenArgs = {
+  zappPipesData?: {
+    loading: boolean;
+    data?: any;
+    error?: Error | null;
+  };
+  reloadData?: ReloadDataFunction;
+  loadNextData?: () => void;
+};
+
+describe("NullFeedResolver", () => {
+  it("should render children with correct default props", () => {
+    const mockChildren = jest.fn((_args: MockChildrenArgs) => (
+      <View testID="mock-children" />
+    ));
+
+    render(<NullFeedResolver>{mockChildren}</NullFeedResolver>);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: {
+          url: "",
+          loading: false,
+          data: null,
+          error: null,
+        },
+        reloadData: expect.any(Function),
+        loadNextData: undefined,
+      })
+    );
+  });
+
+  it("should render children component", () => {
+    const { getByTestId } = render(
+      <NullFeedResolver>{() => <View testID="test-child" />}</NullFeedResolver>
+    );
+
+    expect(getByTestId("test-child")).toBeTruthy();
+  });
+
+  it("should create a memoized data object that doesn't change on re-renders", () => {
+    const mockChildren = jest.fn(() => <View testID="mock-children" />);
+
+    const { rerender } = render(
+      <NullFeedResolver>{mockChildren}</NullFeedResolver>
+    );
+
+    expect(mockChildren).toHaveBeenCalled();
+    // @ts-ignore
+    const firstCallDataProps = mockChildren.mock.calls[0][0];
+
+    rerender(<NullFeedResolver>{mockChildren}</NullFeedResolver>);
+
+    // @ts-ignore
+    const secondCallDataProps = mockChildren.mock.calls[1][0];
+
+    expect(firstCallDataProps).toBe(secondCallDataProps);
+  });
+
+  it("should have reloadData function that returns null", () => {
+    const mockChildren = jest.fn(() => <View testID="mock-children" />);
+
+    render(<NullFeedResolver>{mockChildren}</NullFeedResolver>);
+
+    expect(mockChildren).toHaveBeenCalled();
+
+    // @ts-ignore
+    const { reloadData } = mockChildren.mock.calls[0][0];
+
+    expect(reloadData()).toBeNull();
+  });
+});

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

@@ -0,0 +1,205 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { ResolverSelector } from "../ResolverSelector";
+import { StaticFeedResolver } from "../resolvers/StaticFeedResolver";
+import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
+import { NullFeedResolver } from "../resolvers/NullFeedResolver";
+
+jest.mock("../resolvers/StaticFeedResolver", () => ({
+  StaticFeedResolver: jest.fn(() => null),
+}));
+
+jest.mock("../resolvers/UrlFeedResolver", () => ({
+  UrlFeedResolver: jest.fn(() => null),
+}));
+
+jest.mock("../resolvers/NullFeedResolver", () => ({
+  NullFeedResolver: jest.fn(() => null),
+}));
+
+const testPlugin = {
+  identifier: "test-plugin",
+  name: "test",
+  type: "general" as PluginType,
+  module: jest.fn(),
+};
+
+describe("ResolverSelector", () => {
+  const mockChildren = jest.fn(() => <View testID="mock-children" />);
+
+  const mockComponent = {
+    id: "test-component",
+    type: "vertical_list",
+    styles: {},
+  } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render StaticFeedResolver when getStaticComponentFeed is provided", () => {
+    const props = {
+      getStaticComponentFeed: jest.fn(),
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(StaticFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        getStaticComponentFeed: props.getStaticComponentFeed,
+        component: mockComponent,
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(UrlFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should render UrlFeedResolver when feedUrl is provided", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(UrlFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        feedUrl: props.feedUrl,
+        component: mockComponent,
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(StaticFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should render UrlFeedResolver when component.data.source is provided", () => {
+    const componentWithSource = {
+      ...mockComponent,
+      data: {
+        source: "data-source",
+      },
+    };
+
+    const props = {
+      component: componentWithSource,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(UrlFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        component: componentWithSource,
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(StaticFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should render NullFeedResolver when no data source is provided", () => {
+    const props = {
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(NullFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(StaticFeedResolver).not.toHaveBeenCalled();
+    expect(UrlFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should pass all props to StaticFeedResolver", () => {
+    const props = {
+      getStaticComponentFeed: jest.fn(),
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: true,
+      componentIndex: 1,
+      isScreenWrappedInContainer: true,
+      entryContext: { entry: "test" },
+      screenContext: { screen: "test" },
+      searchContext: "search",
+      screenData: { data: "test" },
+      plugins: [testPlugin],
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(StaticFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining(props),
+      expect.anything()
+    );
+  });
+
+  it("should pass all props to UrlFeedResolver", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: true,
+      componentIndex: 1,
+      isScreenWrappedInContainer: true,
+      entryContext: { entry: "test" },
+      screenContext: { screen: "test" },
+      searchContext: "search",
+      screenData: { data: "test" },
+      plugins: [testPlugin],
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(UrlFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining(props),
+      expect.anything()
+    );
+  });
+
+  it("should prioritize StaticFeedResolver over UrlFeedResolver when both conditions are met", () => {
+    const componentWithSource = {
+      ...mockComponent,
+      data: {
+        source: "data-source",
+      },
+    };
+
+    const props = {
+      getStaticComponentFeed: jest.fn(),
+      feedUrl: "https://example.com/feed",
+      component: componentWithSource,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(StaticFeedResolver).toHaveBeenCalled();
+    expect(UrlFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+});