@applicaster/zapp-react-native-ui-components 16.0.0-rc.10 → 16.0.0-rc.101

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -21,11 +21,23 @@ export const SHOWN = 1; // opacity = 1
 type Props = {
   componentsToRender: ZappUIComponent[];
   backgroundColor?: string;
+  /**
+   * Renders every component at once instead of revealing them a few at a time.
+   *
+   * For a screen that builds its own components and holds all of them already -
+   * a form, say - staggering buys nothing and costs: each rebuild of the list
+   * tears it back down to the first few and lets the rest crawl in again.
+   *
+   * This is a flag rather than a count on purpose. A count would have to be
+   * re-read whenever the number of components changes, while "do not stagger"
+   * stays true whatever the screen ends up holding.
+   */
+  disableIncrementalLoading?: boolean;
 };
 
 export const withScreenRevealManager = (Component) => {
   return function WithScreenRevealManager(props: Props) {
-    const { componentsToRender } = props;
+    const { componentsToRender, disableIncrementalLoading } = props;
 
     const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
       React.useState(false);
@@ -42,7 +54,8 @@ export const withScreenRevealManager = (Component) => {
       () =>
         new ScreenRevealManager(
           componentsToRender,
-          handleSetIsContentReadyToBeShown
+          handleSetIsContentReadyToBeShown,
+          disableIncrementalLoading ? componentsToRender.length : undefined
         )
     );
 
@@ -72,7 +85,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} />;
+      return <Component {...props} initialNumberToLoad={1} />;
     }
 
     return (
@@ -80,7 +93,11 @@ export const withScreenRevealManager = (Component) => {
         <Component
           {...props}
           initialNumberToLoad={
-            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+            // Recomputed on every render, so the count follows the components
+            // even though the manager settled its own expectation at mount.
+            disableIncrementalLoading
+              ? componentsToRender.length
+              : managerRef.current.numberOfComponentsWaitToLoadBeforePresent
           }
           onLoadFinishedFromScreenRevealManager={
             managerRef.current.onLoadFinished

package/Components/TopCutoffOverlay/index.tsx

@@ -7,7 +7,7 @@ import { useMarginTop } from "./hooks";
 
 interface IProps {
   targetScreenId?: string;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
   applyTopCutoff?: boolean;
 }
 
@@ -21,7 +21,7 @@ export const TopCutoffOverlay: React.FC<IProps> = ({
   targetScreenId,
   children,
   applyTopCutoff = true,
-}: IProps) => {
+}) => {
   const cutoffHeight = useMarginTop(targetScreenId);
 
   const { backgroundColor: screenBackgroundColor } =

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { append, compose, identity, isNil, tail, take, update } from "ramda";
+import { append, compose, identity, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -10,6 +10,7 @@ import {
   shouldSkipAnimationForPreviousWebViewScene,
 } from "./utils";
 import { v4 as uuid_v4 } from "uuid";
+import { isScreenActiveForRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
 export const NAV_ACTION_PUSH = "PUSH";
 
@@ -50,16 +51,16 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
-const isModalClosed = (navigator) => {
-  return !!isNil(navigator?.modalData);
-};
-
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
   navigator: {
     previousAction: string;
     currentRoute: string;
+    videoModalState?: {
+      visible?: boolean;
+      mode?: string;
+    };
     screenData: {
       [key: string]: any;
     };
@@ -128,8 +129,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
    * The last scene in the array is removed in the "backTransitionEnd" callback,
    * only after the animation is complete.
    */
-  backTransitionStart() {
-    const previousRoute = this.props.navigator?.currentRoute;
+  backTransitionStart(previousRoute: string) {
     const currentRoute = this.props.navigator?.currentRoute;
 
     const diffLengthRoutes =
@@ -241,7 +241,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           break;
 
         case NAV_ACTION_BACK: {
-          this.backTransitionStart();
+          this.backTransitionStart(previousRoute);
           break;
         }
 
@@ -283,8 +283,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle } = this.props;
-    const screenData = this.props.children.props.screenData;
+    const { contentStyle, navigator, children } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
+    const screenData = children.props.screenData;
     const pathname = scenes[to.index].key;
 
     return (
@@ -293,7 +295,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
-            isActive={pathname === this.props.navigator.currentRoute}
+            isActive={isScreenActiveForRoute(
+              pathname,
+              currentRoute,
+              videoModalState
+            )}
             contentStyle={contentStyle}
             key={scenes[to.index].key}
             screenUniqueId={scenes[to.index].screenUniqueId}
@@ -311,16 +317,19 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // Looks redundant, but when written like this
   // we do not need to pass or generate keys.
   renderScenes({ scenes, from, to }) {
-    const { contentStyle } = this.props;
+    const { contentStyle, navigator } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
 
     const fromScene = scenes[from.index] && (
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={
-          scenes[from.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[from.index].key,
+          currentRoute,
+          videoModalState
+        )}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -336,10 +345,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={
-          scenes[to.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[to.index].key,
+          currentRoute,
+          videoModalState
+        )}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

package/Components/Transitioner/__tests__/transitioner.test.js

@@ -1,8 +1,13 @@
 import React from "react";
 import { Text, View } from "react-native";
 
-import { TransitionerComponent } from "../Transitioner";
-import { render } from "@testing-library/react-native";
+import { AnimationManager } from "../AnimationManager";
+import {
+  NAV_ACTION_BACK,
+  NAV_ACTION_PUSH,
+  TransitionerComponent,
+} from "../Transitioner";
+import { act, render } from "@testing-library/react-native";
 
 jest.mock("../Scene", () => {
   const View = jest.requireActual("react-native").View;
@@ -40,6 +45,27 @@ const transitionerComponentProps = {
 
 jest.mock("uuid");
 
+const sceneTransitionConfig = () => ({
+  push: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+  back: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+});
+
+const sceneFor = (route) => (
+  <View pathname={route}>
+    <Text>{route}</Text>
+  </View>
+);
+
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
     const wrapper = render(
@@ -50,4 +76,59 @@ describe("<TransitionerComponent />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it("removes both intermediate scenes when backing out to the tab root", () => {
+    jest
+      .spyOn(AnimationManager.prototype, "animate")
+      .mockImplementation((_, done) => done());
+
+    const ref = React.createRef();
+    const root = "/river/root";
+    const child = `${root}/river/child`;
+    const grandchild = `${child}/river/grandchild`;
+
+    const propsFor = (route, previousAction) => ({
+      navigator: {
+        previousAction,
+        currentRoute: route,
+        screenData: {},
+      },
+      transitionConfig: sceneTransitionConfig,
+      layoutData: {
+        isTablet: false,
+        isTabletPortrait: false,
+      },
+      children: sceneFor(route),
+    });
+
+    const { rerender } = render(
+      <TransitionerComponent ref={ref} {...propsFor(root, "REPLACE")} />
+    );
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(child, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(grandchild, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent ref={ref} {...propsFor(root, NAV_ACTION_BACK)} />
+      );
+    });
+
+    expect(ref.current.state.scenes.map((scene) => scene.key)).toEqual([root]);
+  });
 });

package/Components/VideoLive/LiveImageManager.ts

@@ -5,7 +5,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { setUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
 import { playerFactory } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
-import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
+import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 import { loggerLiveImageManager } from "./loggerHelper";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
@@ -213,10 +213,16 @@ export class LiveImageManager implements PlayerLifecycleListener {
       log_debug(
         `pauseItem: live-image not ready, ${item.playerId} - ${item.tag}`
       );
-    } else {
-      item.player.pause();
     }
 
+    // Pause even when the player is not ready yet: the underlying player may
+    // still be loading and would otherwise start playing on its own once it
+    // has buffered, leaving the live-image audible underneath the primary
+    // player. Note this is best effort - the web controller's pause() only
+    // logs while the player component is unmounted - so the player itself also
+    // refuses buffer-driven starts when it was never asked to play.
+    item.player.pause();
+
     // Fake close event, because we unmount native view
     item.player.onPlayerClose();
     item.setMode?.(LiveImageType.Image);

package/Components/VideoLive/__tests__/LiveImageManager.test.ts

@@ -1,6 +1,8 @@
 const { LiveImageManager } = require("../LiveImageManager");
 
 describe("LiveImageManager", () => {
+  const flushPromises = () => new Promise(setImmediate);
+
   it("should subscribe to LiveImageManager events", () => {
     const sampleListener = {
       id: "1",
@@ -78,4 +80,61 @@ describe("LiveImageManager", () => {
     expect(mockOnEnd1).toHaveBeenCalledWith(eventBody);
     expect(mockOnEnd2).toHaveBeenCalledWith(eventBody);
   });
+
+  it("should start a prepared live image when the mounted player loads", async () => {
+    const manager = new LiveImageManager();
+
+    const item = {
+      playerId: "live-image",
+      tag: "Live image",
+      player: {
+        playerId: "live-image",
+        playerState: { isReadyToPlay: false },
+        getEntry: jest.fn(),
+        play: jest.fn(),
+      },
+      getPlayer: jest.fn(),
+      prepareForPlayback: jest.fn().mockResolvedValue(true),
+      setMode: jest.fn(),
+    };
+
+    manager.playLiveImage(item);
+    await flushPromises();
+
+    expect(item.setMode).toHaveBeenCalledWith("video");
+    expect(item.player.play).not.toHaveBeenCalled();
+
+    manager.onLiveImageVideoLoaded(item);
+
+    expect(item.player.play).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not start a live image that was paused before the player loaded", async () => {
+    const manager = new LiveImageManager();
+
+    const item = {
+      playerId: "live-image",
+      tag: "Live image",
+      player: {
+        playerId: "live-image",
+        playerState: { isReadyToPlay: false },
+        getEntry: jest.fn(),
+        play: jest.fn(),
+        pause: jest.fn(),
+        onPlayerClose: jest.fn(),
+      },
+      getPlayer: jest.fn(),
+      prepareForPlayback: jest.fn().mockResolvedValue(true),
+      setMode: jest.fn(),
+    };
+
+    manager.playLiveImage(item);
+    await flushPromises();
+    manager.pauseLiveImage(item);
+    manager.onLiveImageVideoLoaded(item);
+
+    expect(item.player.pause).toHaveBeenCalledTimes(1);
+    expect(item.player.play).not.toHaveBeenCalled();
+    expect(item.setMode).toHaveBeenLastCalledWith("image");
+  });
 });

package/Components/VideoModal/utils.ts

@@ -10,6 +10,7 @@ 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 = () => {
   const {
@@ -18,6 +19,7 @@ export const useConfiguration = () => {
 
   const rivers = useRivers();
   const contentTypes = useContentTypes();
+  const player = usePlayer();
 
   const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
   const targetScreenConfiguration = rivers?.[targetScreenId];
@@ -26,7 +28,10 @@ export const useConfiguration = () => {
     selectPluginConfigurationsByPluginId(state, targetScreenConfiguration?.type)
   );
 
-  const playerPluginConfig = playerManager.getPluginConfiguration();
+  const playerPluginConfig =
+    player?.getPluginConfiguration() ??
+    playerManager.getInstanceController()?.getPluginConfiguration() ??
+    {};
 
   const config = mergeRight(playerPluginConfig, {
     ...configuration_json,

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
-
+import { StyleSheet, SafeAreaView as RNSafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
 import BackButton from "./Buttons/BackButton";
 import BarTitle from "./BarTitle";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   screenStyles: {
@@ -23,6 +24,11 @@ const defaultState: NavBarState = {
   title: "",
 };
 
+const SafeAreaViewPlatform = platformSelect({
+  ios: RNSafeAreaView,
+  android: SafeAreaView,
+});
+
 const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   const isRTL = useIsRTL();
 
@@ -44,14 +50,15 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View
+    <SafeAreaViewPlatform
+      edges={["top", "left", "right"]}
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-Container"
+      testID="BarView-safeAreaView"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaViewPlatform>
   );
 };
 

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

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

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