@applicaster/zapp-react-native-ui-components 15.1.0-rc.8 → 16.0.0-alpha.1833861900

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { Animated, StyleSheet } from "react-native";
+import { Animated } from "react-native";
+
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { Overlay } from "./Overlay";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
 import {
@@ -10,13 +12,6 @@ import {
   emitScreenRevealManagerIsNotReadyToShow,
 } from "./utils";
 
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    position: "absolute",
-  },
-});
-
 export const TIMEOUT = 300; // 300 ms
 
 const HIDDEN = 0; // opacity = 0
@@ -77,7 +72,7 @@ export const withScreenRevealManager = (Component) => {
 
     if (isFirstComponentScreenPicker(componentsToRender)) {
       // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
-      return <Component {...props} initialNumberToLoad={1} />;
+      return <Component {...props} />;
     }
 
     return (
@@ -93,17 +88,11 @@ export const withScreenRevealManager = (Component) => {
           onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
         />
         {isShowOverlay ? (
-          <Animated.View
-            style={[
-              styles.container,
-              {
-                opacity: opacityRef.current,
-                // TODO: we should support background image as well, but for now we will use background color from theme
-                backgroundColor:
-                  props.backgroundColor ?? theme.app_background_color,
-              },
-            ]}
-            testID="animated-component"
+          <Overlay
+            opacity={opacityRef.current}
+            backgroundColor={
+              props.backgroundColor ?? theme.app_background_color
+            }
           />
         ) : null}
       </>

package/Components/Tabs/TabContent.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { View, ViewStyle } from "react-native";
+import { View, StyleSheet } from "react-native";
 
 import { River } from "@applicaster/zapp-react-native-ui-components/Components";
 import { withNestedNavigationContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
 
 type Props = {
-  styles: Record<string, ViewStyle>;
   minHeight: number;
   changingTab: boolean;
   feedUrl: string;
@@ -14,9 +13,14 @@ type Props = {
   backgroundColor: string;
 };
 
+const styles = StyleSheet.create({
+  riverWrapper: {
+    flex: 1,
+  },
+});
+
 function TabContentComponent(props: Props) {
   const {
-    styles,
     minHeight,
     backgroundColor,
     changingTab,
@@ -29,7 +33,6 @@ function TabContentComponent(props: Props) {
     <View
       style={[
         styles.riverWrapper,
-
         {
           backgroundColor,
           minHeight,

package/Components/TopCutoffOverlay/__tests__/TopCutoffOverlay.test.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/TopCutoffOverlay/hooks",
+  () => ({
+    useMarginTop: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+import { TopCutoffOverlay } from "../index";
+import { useMarginTop } from "../hooks";
+import { useScreenConfiguration } from "../../River/useScreenConfiguration";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+// Recursively find a View with position: absolute in the JSON tree
+const findOverlayStyle = (node: any): Record<string, any> | null => {
+  if (!node) return null;
+
+  // Style can be a plain object or an array of style objects
+  const styles = Array.isArray(node.props?.style)
+    ? node.props.style
+    : node.props?.style
+      ? [node.props.style]
+      : [];
+
+  const styleObj = styles.find((s: any) => s?.position === "absolute");
+  if (styleObj) return styleObj;
+
+  const children = node.children || [];
+
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  const propChildren = node.props?.children;
+
+  if (propChildren && Array.isArray(propChildren)) {
+    for (const child of propChildren) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  if (
+    typeof propChildren === "object" &&
+    propChildren !== null &&
+    "type" in propChildren
+  ) {
+    return findOverlayStyle(propChildren);
+  }
+
+  return null;
+};
+
+describe("TopCutoffOverlay", () => {
+  const mockUseMarginTop = useMarginTop as jest.MockedFunction<
+    typeof useMarginTop
+  >;
+
+  const mockUseScreenConfig = useScreenConfiguration as jest.MockedFunction<
+    typeof useScreenConfiguration
+  >;
+
+  const mockUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseMarginTop.mockReturnValue(60);
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#1a1a1a" });
+    mockUseTheme.mockReturnValue({ app_background_color: "#222222" });
+  });
+
+  it("renders children when applyTopCutoff is false", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+
+  it("does not render overlay when applyTopCutoff is false", () => {
+    const tree = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).toBeNull();
+  });
+
+  it("renders overlay when applyTopCutoff is true (default)", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).not.toBeNull();
+  });
+
+  it("renders overlay with correct height from useMarginTop", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.height).toBe(60);
+  });
+
+  it("uses screenBackgroundColor from useScreenConfiguration when available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#ff0000" });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#ff0000");
+  });
+
+  it("falls back to themeBackgroundColor when screenBackgroundColor is not available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#222222");
+  });
+
+  it("falls back to transparent when neither screenBackgroundColor nor themeBackgroundColor is available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+    mockUseTheme.mockReturnValue({});
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe(
+      "transparent"
+    );
+  });
+
+  it("passes targetScreenId to useMarginTop and useScreenConfiguration", () => {
+    render(
+      <TopCutoffOverlay targetScreenId="custom-screen-1">
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(mockUseMarginTop).toHaveBeenCalledWith("custom-screen-1");
+    expect(mockUseScreenConfig).toHaveBeenCalledWith("custom-screen-1");
+  });
+
+  it("positions overlay at top with left/right 0", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    const style = findOverlayStyle(tree.toJSON());
+    expect(style?.top).toBe(0);
+    expect(style?.left).toBe(0);
+    expect(style?.right).toBe(0);
+  });
+
+  it("renders children inside the container", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+});

package/Components/TopCutoffOverlay/hooks/__tests__/useMarginTop.test.ts

@@ -0,0 +1,130 @@
+import { renderHook } from "@testing-library/react-native";
+import { useMarginTop } from "../useMarginTop";
+
+// Mocks
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
+  isFirstComponentScreenPicker: jest.fn(),
+}));
+
+// Imports after mocks
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+
+describe("useMarginTop", () => {
+  const mockTheme = {
+    screen_margin_top: 10,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useTheme as jest.Mock).mockReturnValue(mockTheme);
+  });
+
+  it("returns 0 when ScreenPicker is first component", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: [],
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns 0 for player screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "player",
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns theme value when margin is empty string", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: "",
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and general content screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "general_content",
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and supports ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: ["something"],
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns 0 when undefined and not general content and no ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "other",
+      ui_components: null,
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns value from screenData when defined", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: 25,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(25);
+  });
+});

package/Components/TopCutoffOverlay/hooks/index.ts

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

package/Components/TopCutoffOverlay/hooks/useMarginTop.ts

@@ -0,0 +1,59 @@
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+/**
+ * The MarginTop is essentially a feature used for managing the visibility of components on your screen.
+ * A more accurate term for this might be something like a 'component visibility threshold' or 'cut-off point'.
+ * In practical terms, MarginTop determines a specific vertical position (given in the 'y' coordinate)
+ * on your screen above which components aren't shown.
+ * You might visualize this as a horizontal line across your screen, and any component crossing this line becomes invisible.
+ *
+ * Classic use case for this feature is making sure that component aren't displayed underneath the navigation bar.
+ */
+
+export const useMarginTop = (targetScreenId: string): number => {
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const screenData = useCurrentScreenData(targetScreenId);
+  const isGeneralContentScreen = screenData?.plugin_type === "general_content";
+  const supportsUiComponents = screenData?.ui_components;
+
+  /**
+   * ScreenPicker is a component but should really be a screen.
+   * We need to skip margin top for it as it's already applied to the target screen
+   **/
+
+  // ignore margin on screenPicker
+  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
+    return 0;
+  }
+
+  const isPlayer = screenData?.plugin_type === "player";
+
+  // ignore margin on inlinePlayer (remove if better way of identifying cases for plugins that don't have marginTop)
+  if (isPlayer) {
+    return 0;
+  }
+
+  // Empty string means that value is blank in the CMS. Fallback to theme
+  if (String(screenData?.styles?.screen_margin_top) === "") {
+    return toNumberWithDefaultZero(theme.screen_margin_top);
+  }
+
+  /**
+   *  If value is undefined it means one of three things
+   *  1. Screen is not a general content screen and it doesn't handle ui components (return 0)
+   *  2. Screen is a general content screen but it doesn't have a margin top value (return theme value)
+   *  3. Screen isn't general content screen but it handles the ui components (return theme value)
+   */
+  if (screenData?.styles?.screen_margin_top === undefined) {
+    if (isGeneralContentScreen || supportsUiComponents) {
+      return toNumberWithDefaultZero(theme.screen_margin_top);
+    }
+
+    return 0;
+  }
+
+  return toNumberWithDefaultZero(screenData?.styles?.screen_margin_top);
+};

package/Components/TopCutoffOverlay/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
+
+import { useMarginTop } from "./hooks";
+
+interface IProps {
+  targetScreenId?: string;
+  children?: React.ReactNode;
+  applyTopCutoff?: boolean;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export const TopCutoffOverlay: React.FC<IProps> = ({
+  targetScreenId,
+  children,
+  applyTopCutoff = true,
+}: IProps) => {
+  const cutoffHeight = useMarginTop(targetScreenId);
+
+  const { backgroundColor: screenBackgroundColor } =
+    useScreenConfiguration(targetScreenId);
+
+  const theme = useTheme();
+  const themeBackgroundColor = theme?.app_background_color;
+
+  if (!applyTopCutoff) {
+    return children;
+  }
+
+  return (
+    <View style={styles.container}>
+      {children}
+
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: cutoffHeight,
+
+          backgroundColor:
+            screenBackgroundColor || themeBackgroundColor || "transparent",
+        }}
+      />
+    </View>
+  );
+};

package/Components/Transitioner/index.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux";
+
 import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
@@ -16,8 +17,7 @@ export const Transitioner = (props) => {
     deviceInfo: true,
   });
 
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   return (
     <TransitionerComponent

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -4,7 +4,10 @@ import { Animated, Dimensions } from "react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 
 import { useConfiguration } from "../utils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppData,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import { isBottomTabVisible } from "../../Screen/navigationHandler";
 
 import {
@@ -18,7 +21,6 @@ import {
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
 import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useAppSelector } from "@applicaster/zapp-react-native-redux";
 
 export type ModalAnimationContextT = {
   yTranslate: React.MutableRefObject<Animated.AnimatedInterpolation<number>>;
@@ -64,9 +66,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     screenData,
   } = useNavigation();
 
-  const isTabletPortrait = useAppSelector(
-    (state) => state.appData.isTabletPortrait
-  );
+  const { isTabletPortrait } = useAppData();
 
   const plugins = usePlugins();
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { act, renderHook, waitFor } from "@testing-library/react-native";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
@@ -13,16 +13,20 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially, that changes after 1 second", () => {
+  it("should return false initially, that changes after 1 second", async () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
     expect(result.current).toBe(false);
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 
   it("should return false when isPip is true", () => {
@@ -41,7 +45,7 @@ describe("useDelayedPlayerDetails", () => {
     expect(result.current).toBe(false);
   });
 
-  it("should return true for tablet regardless of other flags", () => {
+  it("should return true for tablet regardless of other flags", async () => {
     (useIsTablet as jest.Mock).mockReturnValue(true);
 
     const { result } = renderHook(() =>
@@ -52,8 +56,12 @@ describe("useDelayedPlayerDetails", () => {
       })
     );
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 });