@applicaster/zapp-react-native-ui-components 15.1.0-rc.9 → 16.0.0-alpha.1740103407

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

package/Components/VideoModal/utils.ts

@@ -1,10 +1,15 @@
 import { mergeRight } from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppSelector,
+  useContentTypes,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { create } from "zustand";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { selectPluginConfigurationsByPluginId } from "@applicaster/zapp-react-native-redux";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 
 export const useConfiguration = () => {
@@ -12,19 +17,16 @@ export const useConfiguration = () => {
     videoModalState: { item },
   } = useNavigation();
 
-  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
-    "rivers",
-    "contentTypes",
-    "pluginConfigurations",
-  ]);
-
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
   const player = usePlayer();
 
   const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
   const targetScreenConfiguration = rivers?.[targetScreenId];
 
-  const pluginConfiguration =
-    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;
+  const { configuration_json } = useAppSelector((state) =>
+    selectPluginConfigurationsByPluginId(state, targetScreenConfiguration?.type)
+  );
 
   const playerPluginConfig =
     player?.getPluginConfiguration() ??
@@ -32,7 +34,7 @@ export const useConfiguration = () => {
     {};
 
   const config = mergeRight(playerPluginConfig, {
-    ...pluginConfiguration,
+    ...configuration_json,
     ...targetScreenConfiguration?.general,
     ...targetScreenConfiguration?.styles,
   });

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

@@ -22,8 +22,6 @@ ReactNative.UIManager.measureLayout = jest.fn(
   }
 );
 
-ReactNative.findNodeHandle = () => 1234;
-
 const viewportEventsManager = new ViewportEvents(true);
 
 const TestComponent = (props) => {

package/Components/Viewport/ViewportAware/index.tsx

@@ -32,7 +32,7 @@ function getTestDimensions(testDimensions) {
   return (process.env.NODE_ENV === "test" && testDimensions) || null;
 }
 
-function ViewportAwareComponent(props: Props, ref) {
+function ViewportAwareComponent(props: Props, forwardedRef) {
   const viewportEvents = useViewportEventsContext();
 
   const {
@@ -47,13 +47,22 @@ function ViewportAwareComponent(props: Props, ref) {
     getTestDimensions(testDimensions) || initialDimensions
   );
 
+  const localRef = React.useRef(null);
+
   const [viewportChangeEvent, setViewportChangeEvent] = React.useState(null);
 
-  function assignRef(_ref) {
-    if (_ref && !ref) {
-      ref = _ref;
-    }
-  }
+  const assignRef = React.useCallback(
+    (_ref) => {
+      localRef.current = _ref;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(_ref);
+      } else if (forwardedRef) {
+        forwardedRef.current = _ref;
+      }
+    },
+    [forwardedRef]
+  );
 
   const checkInViewport = (viewportChangeEvent, layoutEvent) => {
     const inVerticalViewport = Utils.isInViewport(
@@ -94,7 +103,7 @@ function ViewportAwareComponent(props: Props, ref) {
   const onViewportChange = (viewportChangeEvent) => {
     setViewportChangeEvent(viewportChangeEvent);
 
-    const nodeHandle = findNodeHandle(ref);
+    const nodeHandle = findNodeHandle(localRef.current);
 
     if (!nodeHandle) {
       return;

package/Components/Viewport/ViewportEvents/__tests__/viewportEvents.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   ViewportEvents,
   useViewportEventsContext,

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { StyleSheet, View } from "react-native";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -45,15 +44,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
-      edges={["top", "left", "right"]}
+    <View
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-safeAreaView"
+      testID="BarView-Container"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Components/default-cell-renderer/viewTrees/mobile/index.ts

@@ -1,7 +1,6 @@
 import { DefaultCell } from "./DefaultCell";
 import { GridCell } from "./GridCell";
 import { HeroCell } from "./HeroCell";
-// import { ScreenSelectorLabel } from "./ScreenSelectorLabel";
 
 /**
  * Return a view tree ready to be injected with styles etc. Mapping is done
@@ -15,8 +14,6 @@ export function viewTreeResolver({ component_type }) {
   switch (component_type) {
     case "hero":
       return HeroCell;
-    // case "screen_picker":
-    //   return ScreenSelectorLabel;
     case "grid":
       return GridCell;
     case "horizontal_list":

package/Contexts/ScreenContext/index.tsx

@@ -16,6 +16,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
+
 import { Animated } from "react-native";
 
 interface NavBarStoreState {
@@ -29,6 +30,8 @@ interface NavBarStoreState {
   scrollState: number;
   contentPosition: string;
   scrollYAnimated: Animated.Value;
+  hideOnScrollAnimated: Animated.Value;
+  hideOnScroll: boolean;
 }
 
 interface NavBarState {
@@ -62,24 +65,28 @@ const createStateStore = () =>
   );
 
 const createStore = () =>
-  create<NavBarStoreState>((set) => ({
-    title: "",
-    summary: "",
-    visible: true,
-    height: 0,
-    scrollState: 0,
-    contentPosition: "",
-    scrollYAnimated: new Animated.Value(0),
-    setTitle(title) {
-      set({ title });
-    },
-    setSummary(summary) {
-      set({ summary });
-    },
-    setVisible(visible) {
-      set({ visible });
-    },
-  }));
+  create(
+    subscribeWithSelector<NavBarStoreState>((set) => ({
+      title: "",
+      summary: "",
+      visible: true,
+      height: 0,
+      scrollState: 0,
+      contentPosition: "",
+      scrollYAnimated: new Animated.Value(0),
+      hideOnScrollAnimated: new Animated.Value(0),
+      hideOnScroll: false,
+      setTitle(title) {
+        set({ title });
+      },
+      setSummary(summary) {
+        set({ summary });
+      },
+      setVisible(visible) {
+        set({ visible });
+      },
+    }))
+  );
 
 const createScreenComponentsStore = () =>
   create(subscribeWithSelector<Record<string, unknown>>((_) => ({})));

package/Contexts/ScreenTrackedViewPositionsContext/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   useScreenTrackedViewPositionsContext,
   ScreenTrackedViewPositionsContext,

package/Decorators/Analytics/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { getAnalyticsFunctions } from "@applicaster/zapp-react-native-utils/analyticsUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 type ComponentProps = {
   component: {
@@ -21,11 +20,13 @@ type ComponentProps = {
 
 function withAnalytics(Component) {
   return function WithAnalytics(props: ComponentProps) {
-    const { appData } = usePickFromState(["appData"]);
-
     const analyticsFunctions = React.useMemo(
-      () => getAnalyticsFunctions({ props, appData }),
-      [props, appData]
+      () =>
+        getAnalyticsFunctions({
+          component: props.component,
+          zappPipesData: props.zappPipesData,
+        } as any),
+      [props.component, props.zappPipesData]
     );
 
     return (

package/Decorators/ConfigurationWrapper/__tests__/__snapshots__/withConfigurationProvider.test.tsx.snap

@@ -88,6 +88,7 @@ exports[`withConfigurationProvider correctly passes all the configuration keys c
   tab_cell_padding_right={10}
   tab_cell_padding_top={14}
   tablet_theme={false}
+  tabs_screen_background_color="transparent"
   target={false}
   target_screen_switch={false}
   text_label_active_font_color="rgba(239, 239, 239, 0.5)"

package/Decorators/ConfigurationWrapper/const.ts

@@ -208,4 +208,5 @@ export const keysMap: Record<string, Function> = {
   tab_bar_item_margin_right: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_bottom: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_left: castOrDefaultValue(Number, 0),
+  tabs_screen_background_color: castOrDefaultValue(R.identity, "transparent"),
 };