@applicaster/zapp-react-native-ui-components 14.0.0-alpha.1661204539 → 14.0.0-alpha.2175196485

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,19 +1,9 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
-import { showDetails } from "../utils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
-  withTimeout$: jest.fn(),
-}));
-
-jest.mock("../utils", () => ({
-  showDetails: jest.fn(),
-}));
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useIsTablet: jest.fn(),
+  useIsTablet: jest.fn().mockReturnValue(false),
 }));
 
 describe("useDelayedPlayerDetails", () => {
@@ -21,69 +11,41 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
-    });
-
+  it("should return true initially", () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
-    expect(result.current).toBe(false);
+    expect(result.current).toBe(true);
   });
 
-  it("should return true if showDetails returns true", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(true);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isPip is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: true })
     );
 
-    expect(result.current).toBe(true);
+    expect(result.current).toBe(false);
   });
 
-  it("should return false if showDetails returns false", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(false);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isDocked is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: false })
     );
 
     expect(result.current).toBe(false);
   });
 
-  it("should unsubscribe on unmount", () => {
-    const unsubscribeMock = jest.fn();
+  it("should return true for tablet regardless of other flags", () => {
+    (useIsTablet as jest.Mock).mockReturnValue(true);
 
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: unsubscribeMock }),
-    });
-
-    const { unmount } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+    const { result } = renderHook(() =>
+      useDelayedPlayerDetails({
+        isInline: false,
+        isDocked: false,
+        isPip: false,
+      })
     );
 
-    unmount();
-
-    expect(unsubscribeMock).toHaveBeenCalled();
+    expect(result.current).toBe(true);
   });
 });

package/Components/VideoModal/hooks/index.ts

@@ -1,5 +1,3 @@
-export { useBackgroundColor } from "./useBackgroundColor";
-
 export { useDelayedPlayerDetails } from "./useDelayedPlayerDetails";
 
 export { useInitialPlayerState } from "./useInitialPlayerState";

package/Components/VideoModal/hooks/useDelayedPlayerDetails.ts

@@ -1,13 +1,23 @@
-import * as React from "react";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 import { showDetails } from "./utils";
 
-const TIMEOUT = 100; // ms
-
 type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
 
+const showPlayerDetails = (
+  isInline: boolean,
+  isDocked: boolean,
+  isPip: boolean,
+  isTablet: boolean
+) => {
+  return showDetails({
+    isMobile: !isTablet,
+    isInline,
+    isDocked,
+    isPip,
+  });
+};
+
 /**
  * Custom hook to determine whether to show player details with a delay.
  *
@@ -22,28 +32,7 @@ export const useDelayedPlayerDetails = ({
   isDocked,
   isPip,
 }: Props): boolean => {
-  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);
-
   const isTablet = useIsTablet();
 
-  React.useEffect(() => {
-    const subscription = withTimeout$(TIMEOUT).subscribe({
-      next: () => {
-        setShouldShowDetails(() => {
-          return showDetails({
-            isMobile: !isTablet,
-            isInline,
-            isDocked,
-            isPip,
-          });
-        });
-      },
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [isDocked, isTablet, isInline, isPip]);
-
-  return shouldShowDetails;
+  return showPlayerDetails(isInline, isDocked, isPip, isTablet);
 };

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

@@ -13,7 +13,6 @@ import {
   loadDatasources,
   usePipesContexts,
 } from "./utils";
-import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 type RiverProps = {
   dispatch: DispatchProp;
@@ -26,7 +25,7 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
   return function WrappedWithRiverFeedLoader(props: RiverProps) {
     const { river } = props;
     const { screenData, pathname } = useRoute();
-    const resolvers = useScreenResolvers(pathname);
+
     const pipesContexts = usePipesContexts(river.id, pathname);
 
     const componentsToLoad = ignoreComponentsWithClearCacheFlag(
@@ -50,12 +49,7 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
         item?.filter((item2) => item2 !== undefined)
       );
 
-      loadDatasources(
-        nonEmptyDataSources,
-        river?.id,
-        props.dispatch,
-        resolvers
-      );
+      loadDatasources(nonEmptyDataSources, river?.id, props.dispatch);
     }, []);
 
     return <Component {...props} />;

package/Decorators/RiverFeedLoader/utils/index.ts

@@ -12,16 +12,11 @@ export { getDatasourceUrl } from "./getDatasourceUrl";
 
 export const DATASOURCE_CHUNKS = 10;
 
-export async function loadDatasources(
-  urls: string[][],
-  riverId,
-  dispatch,
-  resolvers
-) {
+export async function loadDatasources(urls: string[][], riverId, dispatch) {
   return reducePromises<string, void>(
     mapPromises<string, void>((url) => {
       if (url) {
-        return dispatch(loadPipesData(url, { riverId, resolvers }));
+        return dispatch(loadPipesData(url, { riverId }));
       }
     }),
     undefined,

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -19,10 +19,7 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import { isVerticalListOrGrid } from "./utils";
-import {
-  subscribeForUrlContextKeyChanges,
-  subscribeForUrlScreenKeyChanges,
-} from "@applicaster/zapp-pipes-v2-client";
+import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 type Props = {
   component: ZappUIComponent;
@@ -207,7 +204,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData, pathname } = useRoute();
+    const { screenData } = useRoute();
     const { plugins } = usePickFromState(["plugins"]);
 
     const screenContextData = useScreenContext();
@@ -289,17 +286,6 @@ export function zappPipesDataConnector(
       componentIndex
     );
 
-    useEffect(() => {
-      if (!(dataSourceUrl?.includes("pipesv2://") && reloadData)) {
-        return subscribeForUrlScreenKeyChanges(
-          dataSourceUrl,
-          pathname,
-          {},
-          reloadData
-        );
-      }
-    }, [dataSourceUrl, reloadData]);
-
     useEffect(() => {
       if (dataSourceUrl?.includes("pipesv2://") && reloadData) {
         const addListener = getListenerFromPlugin(dataSourceUrl, plugins);

package/index.d.ts

@@ -24,7 +24,6 @@ type GeneralContentScreenProps = {
   } & Record<string, any>;
   focused?: boolean;
   parentFocus?: ParentFocus;
-  extraOffset?: number;
   containerHeight?: number;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.1661204539",
+  "version": "14.0.0-alpha.2175196485",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,14 +27,11 @@
     "url": "https://github.com/applicaster/quickbrick/issues"
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
-  "devDependencies": {
-    "redux-mock-store": "^1.5.3"
-  },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1661204539",
+    "@applicaster/applicaster-types": "14.0.0-alpha.2175196485",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.2175196485",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.2175196485",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.2175196485",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
@@ -45,7 +42,6 @@
     "immer": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",
     "validate-color": "*",

package/Components/AudioPlayer/Artwork.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { View, Image } from "react-native";
-
-type Props = {
-  srcImage: string;
-  config?: {
-    titleColor: string;
-    summaryColor: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-  };
-};
-
-const containerStyles = {
-  marginHorizontal: 24,
-};
-
-const imageStyles = {
-  width: 400,
-  height: 400,
-};
-
-export function Artwork({ srcImage }: Props) {
-  return (
-    <View style={containerStyles}>
-      <Image
-        fadeDuration={0}
-        source={{ uri: srcImage }}
-        style={imageStyles}
-        resizeMode="cover"
-      />
-    </View>
-  );
-}