@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3081324238 → 16.0.0-alpha.3202041045

package/Components/VideoLive/__tests__/PlayerLiveImageComponent.test.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
-import { render } from "@testing-library/react-native";
+import { act, render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
 import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { LiveImageManager, LiveImageType } from "../LiveImageManager";
 
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
@@ -153,4 +154,65 @@ describe("PlayerLiveImageComponent", () => {
     const isPlayerRegistered = playerManager.isPlayerRegistered(props.playerId);
     expect(isPlayerRegistered).toBe(false);
   });
+
+  it("renders domain mute state after a pre-playback toggle and later player events", async () => {
+    jest.useFakeTimers();
+    const nativeView = jest.fn((_props: { muted: boolean }) => null);
+
+    const Player = jest.requireActual(
+      "@applicaster/zapp-react-native-utils/appUtils/playerManager/player"
+    ).Player;
+
+    const factory = jest
+      .spyOn(PlayerFactory, "playerFactory")
+      .mockImplementation(async (props) => ({
+        controller: new Player(props),
+        Component: nativeView,
+      }));
+
+    const register = jest.spyOn(LiveImageManager.instance, "register");
+
+    const view = render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} audioMutedByDefault />
+      </Wrapper>
+    );
+
+    const image = register.mock.calls[register.mock.calls.length - 1][0];
+
+    act(() => image.unmute());
+
+    view.rerender(
+      <Wrapper>
+        <PlayerLiveImage
+          {...defaultProps}
+          audioMutedByDefault
+          style={{ opacity: 1 }}
+        />
+      </Wrapper>
+    );
+
+    expect(image.getMuted()).toBe(false);
+
+    await act(async () => {
+      await image.prepareForPlayback();
+      image.setMode?.(LiveImageType.Video);
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(
+      nativeView.mock.calls[nativeView.mock.calls.length - 1][0].muted
+    ).toBe(false);
+
+    act(() => image.getPlayer()?.mute());
+
+    expect(
+      nativeView.mock.calls[nativeView.mock.calls.length - 1][0].muted
+    ).toBe(true);
+
+    view.unmount();
+    register.mockRestore();
+    factory.mockRestore();
+    jest.useRealTimers();
+  });
 });

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"];
   }

package/Decorators/ZappPipesDataConnector/__tests__/screenToolbox.test.ts

@@ -0,0 +1,347 @@
+import { renderHook } from "@testing-library/react-native";
+
+const mockRegister = jest.fn().mockResolvedValue(undefined);
+
+// The X-Ray mock (__mocks__/@applicaster/quick-brick-xray) has no toolbox API: give it one.
+require("@applicaster/quick-brick-xray").registerReactToolbox = mockRegister;
+
+// Required after the toolbox API is in place: loading them can register the player toolbox.
+const {
+  modalStore,
+} = require("@applicaster/zapp-react-native-utils/modalState");
+
+const {
+  setXrayNavigator,
+} = require("@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator");
+
+const {
+  zappHookModalStore,
+} = require("@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext");
+
+const mockStore = {
+  rivers: { home: { name: "Home", type: "general_content" } },
+  plugins: [
+    { identifier: "quick-brick-epg-screen", name: "EPG" },
+    { identifier: "login-plugin", name: "Login" },
+  ],
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: (key) => mockStore[key] },
+}));
+
+const { useScreenToolboxRecord, getTopPathname } = require("../screenToolbox");
+
+const home = { id: "home", name: "Home", type: "general_content" };
+
+const stack = {
+  "/river/home": { screen: home },
+  "/river/epg": {
+    screen: { id: "epg", name: "Guide", type: "quick-brick-epg-screen" },
+  },
+  "/river/tabs": {
+    screen: { id: "tabs", name: "Tabs", type: "quick-brick-tabs" },
+    nested: { screen: { id: "t1", name: "Tab 1", type: "general_content" } },
+  },
+  "/river/home/hooks/login": {
+    screen: { identifier: "login-plugin", name: "Login" },
+    entry: { payload: { id: "e1", title: "One" } },
+  },
+};
+
+const navigate = (pathname: string, videoModalState = { visible: false }) =>
+  setXrayNavigator({
+    getPathname: () => pathname,
+    getStackForPathname: (route) =>
+      stack[route] ? { route, state: stack[route] } : undefined,
+    videoModalState,
+  } as unknown as QuickBrickAppNavigator);
+
+const mount = (
+  component,
+  index,
+  feed?,
+  parentId?,
+  pathname = "/river/home"
+) => {
+  const hook = renderHook(() =>
+    useScreenToolboxRecord(component, "home", index, parentId, pathname)
+  );
+
+  hook.result.current.feed = feed;
+
+  return hook;
+};
+
+const current = (args = {}) => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "screen"
+  )[0];
+
+  return tools.find((tool) => tool.name === "current").handler(args);
+};
+
+const presentHook = (overrides = {}) =>
+  zappHookModalStore.setState({
+    state: {
+      path: "/hooks/login",
+      screenData: {
+        hookPlugin: { identifier: "login-plugin", name: "Login" },
+        payload: { id: "e1", title: "One" },
+      },
+    } as any,
+    isHooksExecutionInProgress: true,
+    isRunningInBackground: false,
+    ...overrides,
+  });
+
+describe("screenToolbox", () => {
+  // Registers the toolbox; the registration is kept for the whole module, as in the app.
+  beforeAll(() => mount({ id: "init" }, 0).unmount());
+
+  beforeEach(() => navigate("/river/home"));
+
+  afterEach(() => {
+    modalStore.getState().setModalState({ visible: false, screen: null });
+    zappHookModalStore.getState().resetState();
+    zappHookModalStore.getState().setIsHooksExecutionInProgress(false);
+  });
+
+  it("returns the top screen's mounted components in order, with feed and entries", () => {
+    const second = mount({ id: "c2", component_type: "grid" }, 1, {
+      url: "https://feed/2",
+      loading: true,
+    });
+
+    const first = mount({ id: "c1", component_type: "horizontal_list" }, 0, {
+      url: "https://feed/1",
+      loading: false,
+      data: {
+        entry: [
+          { id: "e1", title: "One" },
+          { id: "e2", title: "Two" },
+        ],
+      },
+    });
+
+    const third = mount({ id: "c3", component_type: "grid" }, 2, {
+      url: "https://feed/3",
+      error: new Error("404"),
+    });
+
+    expect(current({ limit: 1 })).toEqual({
+      pathname: "/river/home",
+      screen: {
+        kind: "river",
+        id: "home",
+        name: "Home",
+        type: "general_content",
+      },
+      entry: null,
+      rivers: [
+        {
+          id: "home",
+          name: "Home",
+          type: "general_content",
+          components: [
+            {
+              index: 0,
+              id: "c1",
+              type: "horizontal_list",
+              feed: { url: "https://feed/1", state: "loaded", count: 2 },
+              entries: [{ index: 0, id: "e1", title: "One" }],
+            },
+            {
+              index: 1,
+              id: "c2",
+              type: "grid",
+              feed: { url: "https://feed/2", state: "loading", count: 0 },
+              entries: [],
+            },
+            {
+              index: 2,
+              id: "c3",
+              type: "grid",
+              feed: {
+                url: "https://feed/3",
+                state: "error",
+                error: "404",
+                count: 0,
+              },
+              entries: [],
+            },
+          ],
+        },
+      ],
+      mounted: ["/river/home"],
+    });
+
+    [first, second, third].forEach((hook) => hook.unmount());
+
+    expect(current().rivers).toEqual([]);
+  });
+
+  it("nests a group's children under it", () => {
+    const group = mount({ id: "g", component_type: "group" }, 1);
+
+    const child = mount(
+      { id: "g0", component_type: "hero" },
+      0,
+      undefined,
+      "g"
+    );
+
+    const row = mount({ id: "r", component_type: "grid" }, 0);
+
+    expect(
+      current().rivers[0].components.map(({ id, children }) => ({
+        id,
+        children: children?.map((item) => item.id),
+      }))
+    ).toEqual([
+      { id: "r", children: undefined },
+      { id: "g", children: ["g0"] },
+    ]);
+
+    [group, child, row].forEach((hook) => hook.unmount());
+  });
+
+  it("reads another mounted screen by pathname", () => {
+    const other = mount({ id: "c" }, 0, undefined, undefined, "/river/epg");
+
+    expect(current({ pathname: "/river/epg" }).rivers[0].components).toEqual([
+      expect.objectContaining({ id: "c" }),
+    ]);
+
+    expect(current().mounted).toEqual(["/river/epg"]);
+
+    other.unmount();
+  });
+
+  it("names the plugin that renders a screen plugin", () => {
+    navigate("/river/epg");
+
+    expect(current().screen).toEqual({
+      kind: "plugin",
+      id: "epg",
+      name: "Guide",
+      type: "quick-brick-epg-screen",
+      plugin: { identifier: "quick-brick-epg-screen", name: "EPG" },
+    });
+  });
+
+  it("reports the nested tab screen", () => {
+    navigate("/river/tabs");
+
+    expect(current().nested).toEqual({
+      id: "t1",
+      name: "Tab 1",
+      type: "general_content",
+    });
+  });
+
+  it("unwraps the entry of a hook screen on the stack", () => {
+    navigate("/river/home/hooks/login");
+
+    expect(current()).toMatchObject({
+      screen: { kind: "hook", plugin: { identifier: "login-plugin" } },
+      entry: { id: "e1", title: "One" },
+    });
+  });
+
+  it("says when there is no screen yet", () => {
+    navigate("/");
+
+    expect(current().screen).toEqual({ kind: "none" });
+  });
+
+  it("reads a modal's screen from the modal store, its pathname as ModalProvider builds it", () => {
+    modalStore.getState().openModal({ item: home, props: { screenId: "m1" } });
+
+    expect(current()).toMatchObject({
+      pathname: "modal/m1",
+      screen: { kind: "river", id: "home" },
+    });
+  });
+
+  it("describes a modal hook by its plugin", () => {
+    modalStore.getState().openModal({
+      item: {
+        hookPlugin: { identifier: "login-plugin", name: "Login" },
+        payload: { id: "e1", title: "One" },
+      },
+      props: { screenType: "hooks" },
+    } as any);
+
+    expect(current()).toMatchObject({
+      screen: {
+        kind: "hook",
+        plugin: { identifier: "login-plugin", name: "Login" },
+      },
+      entry: { id: "e1", title: "One" },
+    });
+  });
+
+  it("describes a bottom sheet", () => {
+    modalStore.getState().openModal({
+      item: { modalBottomSheetContentProps: {} },
+    } as any);
+
+    expect(current().screen).toEqual({ kind: "bottomSheet" });
+  });
+
+  it("puts a modal over the video modal, and the video modal over the stack unless docked", () => {
+    const item = { id: "v1", title: "Video" };
+
+    navigate("/river/home", {
+      visible: true,
+      mode: "MAXIMIZED",
+      item,
+    } as any);
+
+    expect(current()).toMatchObject({
+      pathname: "video-modal/v1",
+      screen: { kind: "player" },
+      entry: { id: "v1", title: "Video" },
+    });
+
+    modalStore.getState().openModal({ item: home });
+
+    expect(getTopPathname()).toBe("modal/home");
+
+    modalStore.getState().setModalState({ visible: false, screen: null });
+
+    navigate("/river/home", {
+      visible: true,
+      mode: "MINIMIZED",
+      item,
+    } as any);
+
+    expect(getTopPathname()).toBe("/river/home");
+  });
+
+  it("puts a presented hook screen on top, not one running in the background", () => {
+    presentHook();
+
+    expect(current()).toMatchObject({
+      pathname: "hooks-modal/Login",
+      screen: {
+        kind: "hook",
+        name: "Login",
+        plugin: { identifier: "login-plugin" },
+      },
+      entry: { id: "e1", title: "One" },
+    });
+
+    presentHook({ isRunningInBackground: true });
+
+    expect(getTopPathname()).toBe("/river/home");
+  });
+
+  it("describes nothing for a modal pathname that is no longer presented", () => {
+    expect(current({ pathname: "modal/gone" }).screen).toEqual({
+      kind: "none",
+    });
+  });
+});

package/Decorators/ZappPipesDataConnector/__tests__/screenToolboxUnavailable.test.ts

@@ -0,0 +1,53 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+// Fails the screen toolbox as a build without the X-Ray bridge does. Others (player, loaded with
+// the toolbox's imports) register, or the helper would never let the screen toolbox try.
+const mockRegister = jest.fn((toolbox) =>
+  toolbox.name === "screen"
+    ? Promise.reject(new Error("no bridge"))
+    : Promise.resolve()
+);
+
+// The X-Ray mock (__mocks__/@applicaster/quick-brick-xray) has no toolbox API: give it one.
+require("@applicaster/quick-brick-xray").registerReactToolbox = mockRegister;
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: () => undefined },
+}));
+
+const { useScreenToolboxRecord } = require("../screenToolbox");
+
+const mount = (id: string) =>
+  renderHook(() =>
+    useScreenToolboxRecord({ id }, "home", 0, undefined, "/river/home")
+  );
+
+const mounted = () => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "screen"
+  )[0];
+
+  return tools
+    .find((tool) => tool.name === "current")
+    .handler({ pathname: "/river/home" }).mounted;
+};
+
+describe("screenToolbox without the X-Ray bridge", () => {
+  it("drops its records and stops recording", async () => {
+    mount("c1");
+
+    // Let the failed registration settle.
+    await act(async () => {});
+
+    expect(mounted()).toEqual([]);
+
+    mount("c2");
+
+    expect(mounted()).toEqual([]);
+
+    expect(
+      mockRegister.mock.calls.filter(([toolbox]) => toolbox.name === "screen")
+    ).toHaveLength(1);
+  });
+});