@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

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.ReactElement | null;
+  applyTopCutoff?: boolean;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export const TopCutoffOverlay: React.FC<IProps> = ({
+  targetScreenId,
+  children,
+  applyTopCutoff = true,
+}) => {
+  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/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/CachedDimensionsContext/__tests__/index.test.ts

@@ -0,0 +1,154 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+type DimensionsStore = {
+  setState: (
+    partial: { dimensions: Record<string, unknown>; ids: string[] },
+    replace?: boolean
+  ) => void;
+};
+
+const createdStores: DimensionsStore[] = [];
+
+jest.mock("zustand", () => {
+  const actual = jest.requireActual<typeof import("zustand")>("zustand");
+
+  return {
+    ...actual,
+    create: ((initializer: Parameters<typeof actual.create>[0]) => {
+      const store = actual.create(initializer);
+      createdStores.push(store);
+
+      return store;
+    }) as typeof actual.create,
+  };
+});
+
+import { useCachedDimensions } from "../index";
+
+const resetStore = () => {
+  const store = createdStores[createdStores.length - 1];
+
+  act(() => {
+    store?.setState({ dimensions: {}, ids: [] });
+  });
+};
+
+describe("useCachedDimensions", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  describe("getCachedDimensions", () => {
+    it("returns default dimensions when id has no cached value", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: undefined,
+        height: undefined,
+      });
+    });
+
+    it("returns cached dimensions after setCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+      const dimensions = { width: 100, height: 200 };
+
+      act(() => {
+        result.current.setCachedDimensions(dimensions);
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual(dimensions);
+    });
+  });
+
+  describe("setCachedDimensions", () => {
+    it("updates dimensions for the hook id", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 50, height: 75 });
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: 50,
+        height: 75,
+      });
+    });
+
+    it("shares cached dimensions between hook instances with the same id", () => {
+      const { result: first } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 10, height: 20 });
+      });
+
+      expect(second.current.getCachedDimensions()).toEqual({
+        width: 10,
+        height: 20,
+      });
+    });
+  });
+
+  describe("getLastCachedDimensions", () => {
+    it("returns undefined when no dimensions have been cached", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getLastCachedDimensions()).toBeUndefined();
+    });
+
+    it("returns the most recently cached dimensions across ids", () => {
+      const { result: first } = renderHook(() => useCachedDimensions("first"));
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("second")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        second.current.setCachedDimensions({ width: 200, height: 200 });
+      });
+
+      expect(first.current.getLastCachedDimensions()).toEqual({
+        width: 200,
+        height: 200,
+      });
+    });
+
+    it("returns the latest dimensions when the same id is updated multiple times", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 300, height: 400 });
+      });
+
+      expect(result.current.getLastCachedDimensions()).toEqual({
+        width: 300,
+        height: 400,
+      });
+    });
+  });
+
+  describe("return value", () => {
+    it("exposes getCachedDimensions, setCachedDimensions, and getLastCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current).toEqual({
+        getCachedDimensions: expect.any(Function),
+        setCachedDimensions: expect.any(Function),
+        getLastCachedDimensions: expect.any(Function),
+      });
+    });
+  });
+});

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"),
 };