@applicaster/zapp-react-native-ui-components 14.0.0-alpha.2332850672 → 14.0.0-alpha.2385258459

package/Components/VideoModal/hooks/useModalSize.ts

@@ -9,6 +9,12 @@ import {
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { StatusBar } from "react-native";
+import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
 
 const { Logger } = getXray();
 
@@ -27,12 +33,17 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();
 
   const [modalSize, setModalSize] = React.useState<Size>({
     width: frame.width,
-    height: frame.height,
+    height: isOldAndroidDevice
+      ? frame.height + StatusBar.currentHeight
+      : frame.height,
   });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
@@ -44,7 +55,12 @@ export const useModalSize = (): Size => {
         return oldSize;
       }
 
-      return newSize;
+      return {
+        width: newSize.width,
+        height: isOldAndroidDevice
+          ? newSize.height + StatusBar.currentHeight
+          : newSize.height,
+      };
     });
 
     logger.debug({

package/Components/VideoModal/utils.ts

@@ -34,6 +34,9 @@ export const useConfiguration = () => {
     minimised_height = 0,
     minimised_height_tablet = 0,
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    screen_background_color,
+    audio_player_background_color,
   } = config;
 
   const minimisedHeight = useIsTablet()
@@ -43,6 +46,9 @@ export const useConfiguration = () => {
   return {
     minimised_height: Number(minimisedHeight),
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    audio_player_background_color,
+    screen_background_color,
   };
 };
 

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { act, create as render } from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
 
 import { ViewportAware } from "../";
 import { ViewportTracker } from "../../ViewportTracker";
@@ -12,21 +12,17 @@ import ReactNative from "react-native";
 
 jest.useFakeTimers();
 
-jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
-  return {
-    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
-    measureLayout: (handle, parent, error, success) => {
-      success(100, 100, 400, 400);
-    },
-  };
-});
+const { ScrollView } = ReactNative;
 
-jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
-  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
-  findNodeHandle: () => 1234,
-}));
+jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
 
-const { ScrollView } = ReactNative;
+ReactNative.UIManager.measureLayout = jest.fn(
+  (handle, parent, error, success) => {
+    success(100, 100, 400, 400);
+  }
+);
+
+ReactNative.findNodeHandle = () => 1234;
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -138,7 +134,7 @@ describe("<ViewportAware />", () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(onViewportEnter).toHaveBeenCalled();
 
-    const scrollviews = wrapper.root.findAllByType(ScrollView);
+    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 
@@ -179,7 +175,7 @@ describe("<ViewportAware />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
 
-    const scrollviews = wrapper.root.findAllByType(ScrollView);
+    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 

package/Components/Viewport/ViewportTracker/__tests__/viewportTracker.test.js

@@ -1,14 +1,19 @@
 import * as React from "react";
-import { ScrollView } from "react-native";
-import TestRenderer, { act } from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
 import { ViewportEvents } from "../../ViewportEvents";
+import ReactNative from "react-native";
+
+const { ScrollView } = ReactNative;
 
 const TestComponent = () => <ScrollView />;
 
-jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
-  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
-  findNodeHandle: () => 1234,
-}));
+jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
+
+ReactNative.UIManager.measureLayout = jest.fn(
+  (handle, parent, error, success) => {
+    success(100, 100, 400, 400);
+  }
+);
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -23,32 +28,49 @@ const event = {
 };
 
 describe("<ViewportTracker />", () => {
-  // eslint-disable-next-line react/prop-types
-  const ReactWrapper = ({ children }) => (
-    <ViewportTracker viewportEventsManager={viewportEventsManager}>
-      <ScrollView>{children}</ScrollView>
-    </ViewportTracker>
-  );
-
-  const wrapper = TestRenderer.create(
-    <ReactWrapper>
-      <TestComponent />
-    </ReactWrapper>
-  );
-
-  const scrollView = wrapper.root.findByType(ScrollView);
-
   beforeEach(() => {
     viewportEventSpy.mockClear();
   });
 
   it("renders correctly", () => {
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(scrollView.props).toMatchSnapshot();
   });
 
   it("notifies viewport listeners when layout changes", () => {
-    act(() => scrollView.props.onLayout(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+    });
 
     expect(viewportEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -63,12 +85,50 @@ describe("<ViewportTracker />", () => {
   });
 
   it("notifies viewport listeners when content scrolls", () => {
-    act(() => scrollView.props.onScroll(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onScroll(event);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 
   it("notifies viewport listeners when content size changes", () => {
-    act(() => scrollView.props.onContentSizeChange(100, 100));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onContentSizeChange(100, 100);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 });

package/Components/Viewport/VisibilitySensor/VisibilitySensor.tsx

@@ -4,8 +4,8 @@ which helps in detecting whether a given component is visible within the viewpor
 It is useful for implementing lazy loading or triggering specific actions when a component comes into view.
 */
 
-import React, { useEffect, useState, useRef, ReactNode, FC } from "react";
-import { View, Dimensions } from "react-native";
+import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+import { Dimensions, View } from "react-native";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -78,7 +78,7 @@ const VisibilitySensorComponent: FC<Props> = ({
   };
 
   const stopWatching = () => {
-    interval = clearInterval(interval);
+    clearInterval(interval);
   };
 
   const isInViewPort = () => {

package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/index.ts

@@ -1,10 +1,10 @@
 import {
-  getColor,
   ACTIVE_COLOR,
   BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
   FOCUSED_TEXT_COLOR,
-} from "../../../colors/index";
+  getColor,
+  MAIN_TEXT_COLOR,
+} from "../../../colors";
 
 const Image = "Image";
 const View = "View";

package/Decorators/ConfigurationWrapper/withConfigurationProvider.tsx

@@ -21,13 +21,13 @@ const prepareConfiguration = (
   keys: [string]
 ) => R.compose(R.evolve(keysMap), R.pickAll(keys))(configuration);
 
+const configurationKeys = R.keys(keysMap);
+
 export function withConfigurationProvider(Component: React.ComponentType<any>) {
   return function WithConfigurationProvider(props: Props) {
     const styles = props?.screenData?.styles;
     const general = props?.screenData?.general;
 
-    const configurationKeys = React.useMemo(() => R.keys(keysMap), []);
-
     const configuration = React.useMemo(
       () => prepareConfiguration({ ...general, ...styles }, configurationKeys),
       []

package/Decorators/RiverResolver/__tests__/riverResolver.test.tsx

@@ -13,12 +13,9 @@ const rivers = {
   },
 };
 
-jest.doMock(
-  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
-  () => ({
-    usePickFromState: jest.fn(() => ({ rivers })),
-  })
-);
+jest.doMock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePickFromState: jest.fn(() => ({ rivers })),
+}));
 
 jest.doMock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname",

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();
+  });
+});