@applicaster/zapp-react-native-ui-components 16.0.0-alpha.9235607812 → 16.0.0-alpha.9338540010

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

@@ -1,10 +1,12 @@
 import React from "react";
-import { Text, View } from "react-native";
+import { Animated, Text, View } from "react-native";
+import { v4 as uuidV4 } from "uuid";
 
 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";
@@ -66,6 +68,26 @@ const sceneFor = (route) => (
   </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(
@@ -83,26 +105,12 @@ describe("<TransitionerComponent />", () => {
       .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")} />
+      <TransitionerComponent
+        ref={ref}
+        {...propsFor(root, NAV_ACTION_REPLACE)}
+      />
     );
 
     act(() => {
@@ -129,6 +137,286 @@ describe("<TransitionerComponent />", () => {
       );
     });
 
-    expect(ref.current.state.scenes.map((scene) => scene.key)).toEqual([root]);
+    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/VideoModal/PlayerWrapper.tsx

@@ -14,6 +14,7 @@ type Props = {
   inline?: boolean;
   docked?: boolean;
   pip?: boolean;
+  vertical?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
@@ -32,6 +33,7 @@ const PlayerWrapperComponent = (props: Props) => {
     isTabletPortrait,
     configuration,
     pip,
+    vertical,
     playerContent,
   } = props;
 
@@ -42,6 +44,7 @@ const PlayerWrapperComponent = (props: Props) => {
     isTabletPortrait,
     configuration,
     pip,
+    vertical,
   });
 
   const isTablet = useIsTablet();
@@ -52,7 +55,7 @@ const PlayerWrapperComponent = (props: Props) => {
 
   return (
     <WrapperView
-      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+      edges={getEdges(isTablet, isInlineModal, vertical) as readonly Edge[]}
       style={playerDimensionsHack}
     >
       <View

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -37,6 +37,7 @@ jest.mock(
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet: mockUseIsDeviceTablet,
+  useOrientation: () => "portrait",
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({

package/Components/VideoModal/__tests__/playerWrapperStyle.test.ts

@@ -0,0 +1,58 @@
+import { renderHook } from "@testing-library/react-native";
+
+import { useStyle } from "../playerWrapperStyle";
+import { getScreenAspectRatio } from "../playerWrapperUtils";
+
+let mockOrientation = "portrait";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsTablet: () => false,
+  useOrientation: () => mockOrientation,
+}));
+
+const getAspectRatio = (props: {
+  vertical: boolean;
+  inline?: boolean;
+  isModal?: boolean;
+}) => {
+  const { result } = renderHook(() =>
+    useStyle({
+      style: {},
+      inline: false,
+      isModal: true,
+      isTabletPortrait: false,
+      configuration: {},
+      pip: false,
+      ...props,
+    })
+  );
+
+  return result.current.containerDimensions.aspectRatio;
+};
+
+describe("useStyle aspectRatio", () => {
+  const screenRatio = getScreenAspectRatio();
+
+  it("uses the screen ratio when not vertical", () => {
+    mockOrientation = "portrait";
+    expect(getAspectRatio({ vertical: false })).toBeCloseTo(screenRatio);
+  });
+
+  it("inverts the screen ratio for vertical fullscreen in portrait", () => {
+    mockOrientation = "portrait";
+    expect(getAspectRatio({ vertical: true })).toBeCloseTo(1 / screenRatio);
+  });
+
+  it("keeps the screen ratio for vertical fullscreen in landscape", () => {
+    mockOrientation = "landscape";
+    expect(getAspectRatio({ vertical: true })).toBeCloseTo(screenRatio);
+  });
+
+  it("inverts 16:9 for the vertical inline modal in landscape", () => {
+    mockOrientation = "landscape";
+
+    expect(getAspectRatio({ vertical: true, inline: true })).toBeCloseTo(
+      9 / 16
+    );
+  });
+});

package/Components/VideoModal/__tests__/playerWrapperUtils.test.ts

@@ -0,0 +1,16 @@
+import { getEdges } from "../playerWrapperUtils";
+
+describe("getEdges", () => {
+  it("keeps the top edge in fullscreen when not vertical", () => {
+    expect(getEdges(false, false)).toEqual(["top"]);
+  });
+
+  it("has no edges in vertical fullscreen", () => {
+    expect(getEdges(false, false, true)).toEqual([]);
+    expect(getEdges(true, false, true)).toEqual([]);
+  });
+
+  it("keeps the top edge for the vertical inline modal", () => {
+    expect(getEdges(false, true, true)).toEqual(["top"]);
+  });
+});

package/Components/VideoModal/playerWrapperStyle.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { StyleSheet, ViewStyle } from "react-native";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsTablet,
+  useOrientation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { playerDimensionsHack } from "./utils";
 import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
 import {
@@ -22,8 +25,10 @@ export const useStyle = ({
   isTabletPortrait,
   configuration,
   pip,
+  vertical,
 }) => {
   const isTablet = useIsTablet();
+  const isLandscape = useOrientation() === "landscape";
 
   const isInlineModal = inline && isModal;
 
@@ -40,10 +45,23 @@ export const useStyle = ({
   );
 
   const aspectRatio = React.useMemo(
-    () => calculateAspectRatio(isInlineModal, pip),
+    () => {
+      const value = calculateAspectRatio(isInlineModal, pip);
+
+      if (!vertical) {
+        return value;
+      }
+
+      // vertical fullscreen in landscape: the width is the long side, keep the screen ratio so the container matches the screen
+      if (isLandscape && !isInlineModal && !pip) {
+        return value;
+      }
+
+      return 1 / value;
+    },
     // ignoring insets - only initial needed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isInlineModal, pip]
+    [isInlineModal, pip, vertical, isLandscape]
   );
 
   return React.useMemo(() => {

package/Components/VideoModal/playerWrapperUtils.ts

@@ -44,8 +44,14 @@ export const getScreenAspectRatio = () => {
 
 export const getEdges = (
   isTablet: boolean,
-  isInlineModal: boolean
+  isInlineModal: boolean,
+  vertical: boolean = false
 ): readonly Edge[] => {
+  // vertical fullscreen: the player takes the full screen height, a top inset would push it below the screen
+  if (vertical && !isInlineModal) {
+    return [];
+  }
+
   if (isTablet) {
     return ["top"];
   }