@applicaster/zapp-react-native-ui-components 16.0.0-rc.11 → 16.0.0-rc.111

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

@@ -1,8 +1,15 @@
 import React from "react";
-import { Text, View } from "react-native";
+import { Animated, Text, View } from "react-native";
+import { v4 as uuidV4 } from "uuid";
 
-import { TransitionerComponent } from "../Transitioner";
-import { render } from "@testing-library/react-native";
+import { AnimationManager } from "../AnimationManager";
+import {
+  NAV_ACTION_BACK,
+  NAV_ACTION_PUSH,
+  NAV_ACTION_REPLACE,
+  TransitionerComponent,
+} from "../Transitioner";
+import { act, render } from "@testing-library/react-native";
 
 jest.mock("../Scene", () => {
   const View = jest.requireActual("react-native").View;
@@ -40,6 +47,47 @@ 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>
+);
+
+const root = "/river/root";
+const child = `${root}/river/child`;
+const grandchild = `${child}/river/grandchild`;
+
+const propsFor = (route, previousAction, children = sceneFor(route)) => ({
+  navigator: {
+    previousAction,
+    currentRoute: route,
+    screenData: {},
+  },
+  transitionConfig: sceneTransitionConfig,
+  layoutData: {
+    isTablet: false,
+    isTabletPortrait: false,
+  },
+  children,
+});
+
+const sceneKeys = (ref) => ref.current.state.scenes.map((scene) => scene.key);
+
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
     const wrapper = render(
@@ -50,4 +98,325 @@ 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 { rerender } = render(
+      <TransitionerComponent
+        ref={ref}
+        {...propsFor(root, NAV_ACTION_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(sceneKeys(ref)).toEqual([root]);
+  });
+
+  describe("with interruptible animations", () => {
+    // End callback of the animation that is currently "running"
+    let runningAnimationEnd = null;
+
+    const finishAnimation = () => {
+      act(() => {
+        const done = runningAnimationEnd;
+        runningAnimationEnd = null;
+        done?.();
+      });
+    };
+
+    const mountTransitioner = ({
+      initialRoute = root,
+      renderScene = sceneFor,
+    } = {}) => {
+      const ref = React.createRef();
+
+      const transitioner = (route, action) => (
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(route, action, renderScene(route))}
+        />
+      );
+
+      const { rerender } = render(
+        transitioner(initialRoute, NAV_ACTION_REPLACE)
+      );
+
+      const navigate = (route, action) => {
+        act(() => {
+          rerender(transitioner(route, action));
+        });
+      };
+
+      return { ref, navigate };
+    };
+
+    beforeEach(() => {
+      let sceneCount = 0;
+      uuidV4.mockImplementation(() => `scene-${++sceneCount}`);
+
+      jest
+        .spyOn(AnimationManager.prototype, "animate")
+        .mockImplementation((_, done) => {
+          runningAnimationEnd = done;
+        });
+
+      const setValue = Animated.Value.prototype.setValue;
+
+      // RN 0.77: setValue() stops the running animation, which calls
+      // its end callback synchronously with { finished: false }
+      jest
+        .spyOn(Animated.Value.prototype, "setValue")
+        .mockImplementation(function (value) {
+          const interrupted = runningAnimationEnd;
+          runningAnimationEnd = null;
+          interrupted?.();
+
+          return setValue.call(this, value);
+        });
+    });
+
+    afterEach(() => {
+      runningAnimationEnd = null;
+      jest.restoreAllMocks();
+      uuidV4.mockReset();
+    });
+
+    it("drops interrupted scenes when going back twice during a back animation", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(child, NAV_ACTION_BACK);
+      navigate(root, NAV_ACTION_BACK);
+
+      expect(ref.current.state.animating).toBe(true);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("remounts the screen when revisiting it after a quick double back", () => {
+      const mounts = {};
+
+      const MountProbe = ({ pathname }) => {
+        React.useEffect(() => {
+          mounts[pathname] = (mounts[pathname] || 0) + 1;
+        }, [pathname]);
+
+        return <Text>{pathname}</Text>;
+      };
+
+      const { ref, navigate } = mountTransitioner({
+        renderScene: (route) => <MountProbe pathname={route} />,
+      });
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const originalChildId = ref.current.state.scenes[1].screenUniqueId;
+
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+      navigate(child, NAV_ACTION_BACK);
+      navigate(root, NAV_ACTION_BACK);
+      finishAnimation();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const { scenes, to } = ref.current.state;
+
+      expect(scenes).toHaveLength(2);
+      expect(to.index).toBe(1);
+      expect(scenes[1].screenUniqueId).not.toBe(originalChildId);
+      expect(mounts[child]).toBe(2);
+    });
+
+    it("keeps a single scene when going back from the first scene", () => {
+      const { ref, navigate } = mountTransitioner({ initialRoute: child });
+
+      navigate(root, NAV_ACTION_BACK);
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.to.index).toBe(0);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("pushes a fresh scene after a completed single back", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const originalChildId = ref.current.state.scenes[1].screenUniqueId;
+
+      navigate(root, NAV_ACTION_BACK);
+      finishAnimation();
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const { scenes, to } = ref.current.state;
+
+      expect(sceneKeys(ref)).toEqual([root, child]);
+      expect(to.index).toBe(1);
+      expect(scenes[1].screenUniqueId).not.toBe(originalChildId);
+    });
+
+    it("ignores the end of a back animation that a newer back superseded", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(child, NAV_ACTION_BACK);
+
+      const supersededEnd = runningAnimationEnd;
+
+      // Deliver the interrupted animation's end late, after the newer one started
+      Animated.Value.prototype.setValue.mockImplementation(() => {});
+
+      navigate(root, NAV_ACTION_BACK);
+
+      act(() => {
+        supersededEnd();
+      });
+
+      expect(ref.current.state.animating).toBe(true);
+      expect(sceneKeys(ref)).toEqual([root, child, grandchild]);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("drops the pushed scene when going back before its push animation ends", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      navigate(root, NAV_ACTION_BACK);
+
+      expect(ref.current.state.animating).toBe(true);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("pushes right after the visible scene even when stale scenes are left behind", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      // Leftover past to.index, as some other path could leave behind
+      act(() => {
+        ref.current.setState(({ scenes }) => ({
+          scenes: [
+            ...scenes,
+            {
+              ...scenes[1],
+              key: `${root}/river/stale`,
+              screenUniqueId: "stale",
+            },
+          ],
+        }));
+      });
+
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const { scenes, to } = ref.current.state;
+
+      expect(sceneKeys(ref)).toEqual([root, child, grandchild]);
+      expect(scenes[to.index].key).toBe(grandchild);
+    });
+
+    it("shows the replaced screen when going home during a back animation", () => {
+      const home = "/river/home";
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(root, NAV_ACTION_BACK);
+      navigate(home, NAV_ACTION_REPLACE);
+
+      const { scenes, to } = ref.current.state;
+
+      expect(scenes[to.index].key).toBe(home);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([home]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("shows the pushed screen when pushing during a back animation", () => {
+      const sibling = `${root}/river/sibling`;
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(root, NAV_ACTION_BACK);
+      navigate(sibling, NAV_ACTION_PUSH);
+
+      const { scenes, to } = ref.current.state;
+
+      expect(scenes[to.index].key).toBe(sibling);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).not.toContain(child);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("keeps both scenes when pushing during a push animation", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      navigate(grandchild, NAV_ACTION_PUSH);
+
+      expect(sceneKeys(ref)).toEqual([child, grandchild]);
+      expect(ref.current.state.to.index).toBe(1);
+    });
+  });
 });

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