@applicaster/zapp-react-native-ui-components 16.0.0-rc.2 → 16.0.0-rc.20

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -0,0 +1,284 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager",
+  () => ({
+    playerManager: {
+      invokeHandler: jest.fn(),
+      getPluginConfiguration: jest.fn(() => ({})),
+      isRegistered: jest.fn(() => true),
+      on: jest.fn().mockReturnThis(),
+      removeHandler: jest.fn().mockReturnThis(),
+      getActivePlayer: jest.fn(() => null),
+      closeNativePlayer: jest.fn(),
+    },
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isTV: jest.fn(() => false),
+  isAndroidTVPlatform: jest.fn(() => false),
+  isTvOSPlatform: jest.fn(() => false),
+  platformSelect: jest.fn(({ native }) => native),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => ({
+  isAudioItem: jest.fn(() => false),
+  isInlineTV: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent",
+  () => ({
+    TVEventHandlerComponent: ({ children }) => children,
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => ({
+  usePrevious: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => {
+  const navigator = {
+    closeVideoModal: jest.fn(),
+    minimiseVideoModal: jest.fn(),
+    maximiseVideoModal: jest.fn(),
+    fullscreenVideoModal: jest.fn(),
+    isVideoModalDocked: jest.fn(() => false),
+    goBack: jest.fn(),
+    replaceTop: jest.fn(),
+    push: jest.fn(),
+    setPlayNextOverlay: jest.fn(),
+    currentRoute: "/playable/entry-1",
+  };
+
+  const backHandlerRef: { current: (() => boolean) | null } = {
+    current: null,
+  };
+
+  return {
+    useBackHandler: jest.fn((cb) => {
+      backHandlerRef.current = cb;
+    }),
+    useNavigation: jest.fn(() => navigator),
+    __navigator: navigator,
+    __backHandlerRef: backHandlerRef,
+  };
+});
+
+jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
+  QUICK_BRICK_EVENTS: {
+    IDLE_TIMER_DISABLED: "IDLE_TIMER_DISABLED",
+    MOVE_APP_TO_BACKGROUND: "MOVE_APP_TO_BACKGROUND",
+  },
+  sendQuickBrickEvent: jest.fn(),
+}));
+
+jest.mock("../ProgramInfo", () => ({
+  ProgramInfo: () => null,
+}));
+
+jest.mock("../../AudioPlayer", () => ({
+  AudioPlayer: () => null,
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_info: jest.fn(),
+  log_warning: jest.fn(),
+  playerContainerLogger: { error: jest.fn() },
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => {
+    const player = {
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      isPaused: jest.fn(() => false),
+      isAd: jest.fn(() => false),
+      seekTo: jest.fn(),
+      getPluginConfiguration: jest.fn(() => ({})),
+      getOverlayObservable: jest.fn(() => ({ getPlayNextEntry: () => null })),
+    };
+
+    return {
+      usePlayer: jest.fn(() => player),
+      __player: player,
+    };
+  }
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay",
+  () => ({
+    usePlayNextOverlay: jest.fn(() => null),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand",
+  () => ({
+    PlayerNativeCommandTypes: { clearPlayerData: "clearPlayerData" },
+    PlayerNativeSendCommand: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useSetNavbarState: jest.fn(() => ({ setVisible: jest.fn() })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData",
+  () => ({
+    useTargetScreenData: jest.fn(() => ({ id: "screen-id", styles: {} })),
+  })
+);
+
+jest.mock("../PlayerContainerContext", () => {
+  const ReactActual = require("react");
+
+  return {
+    PlayerContainerContext: ReactActual.createContext({
+      isLanguageOverlayVisible: false,
+      bottomFocusableId: "bottom",
+      showComponentsContainer: false,
+      refs: null,
+    }),
+    PlayerContainerContextProvider: ({ children }) => children,
+  };
+});
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup",
+  () => ({
+    FocusableGroup: ({ children }) => children,
+  })
+);
+
+jest.mock("../WappersView/PlayerFocusableWrapperView", () => ({
+  PlayerFocusableWrapperView: ({ children }) => children,
+}));
+
+jest.mock("../WappersView/ComponentFocusableWrapperView", () => ({
+  ComponentFocusableWrapperView: () => null,
+}));
+
+jest.mock("../index", () => ({
+  FocusableGroupMainContainerId: "player-container-general",
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/navigationUtils/itemTypeMatchers",
+  () => ({
+    isPlayable: jest.fn(() => true),
+  })
+);
+
+jest.mock("../../GeneralContentScreen", () => ({
+  GeneralContentScreen: () => null,
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  useAppData: jest.fn(() => ({ isTabletPortrait: false })),
+}));
+
+import { PlayerContainer, VideoModalMode } from "../PlayerContainer";
+
+const { __navigator: mockNavigator, __backHandlerRef: mockBackHandlerRef } =
+  jest.requireMock("@applicaster/zapp-react-native-utils/reactHooks");
+
+const { playerManager: mockPlayerManager } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager"
+);
+
+const { __player: mockPlayer } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer"
+);
+
+const Player = React.forwardRef(() => null);
+
+const item = {
+  id: "entry-1",
+  title: "Test entry",
+  summary: "",
+  content: { src: "https://example.com/video.m3u8" },
+  extensions: {},
+} as any;
+
+const renderPlayerContainer = (props = {}) =>
+  render(
+    <PlayerContainer
+      Player={Player}
+      item={item}
+      style={{}}
+      loadPipesData={jest.fn()}
+      isModal={true}
+      mode={VideoModalMode.MAXIMIZED}
+      {...props}
+    />
+  );
+
+const pressHardwareBack = () => {
+  if (!mockBackHandlerRef.current) {
+    throw new Error("back handler was not registered via useBackHandler");
+  }
+
+  return mockBackHandlerRef.current();
+};
+
+describe("PlayerContainer hardware back handling", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockBackHandlerRef.current = null;
+    mockPlayer.getPluginConfiguration.mockReturnValue({});
+    mockPlayer.isPaused.mockReturnValue(false);
+    mockPlayer.isAd.mockReturnValue(false);
+
+    mockPlayer.getOverlayObservable.mockReturnValue({
+      getPlayNextEntry: () => null,
+    });
+
+    mockPlayerManager.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.on.mockReturnThis();
+    mockPlayerManager.removeHandler.mockReturnThis();
+  });
+
+  it("minimises the video modal on back press when mini player is enabled", () => {
+    renderPlayerContainer();
+
+    const handled = pressHardwareBack();
+
+    expect(mockNavigator.minimiseVideoModal).toHaveBeenCalled();
+    expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
+    expect(handled).toBe(true);
+  });
+
+  it("closes the video modal on back press when mini player is disabled", () => {
+    mockPlayer.getPluginConfiguration.mockReturnValue({
+      disable_mini_player_when_inline: true,
+    });
+
+    renderPlayerContainer();
+
+    const handled = pressHardwareBack();
+
+    expect(mockNavigator.closeVideoModal).toHaveBeenCalled();
+    expect(mockNavigator.minimiseVideoModal).not.toHaveBeenCalled();
+    expect(handled).toBe(true);
+  });
+
+  it("does not handle back press when the player is already minimised", () => {
+    renderPlayerContainer({ mode: VideoModalMode.MINIMIZED });
+
+    const handled = pressHardwareBack();
+
+    expect(handled).toBe(false);
+    expect(mockNavigator.minimiseVideoModal).not.toHaveBeenCalled();
+    expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
+  });
+});

package/Components/Screen/TV/hooks/__tests__/useAfterPaint.test.ts

@@ -0,0 +1,60 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+import { useAfterPaint } from "../useAfterPaint";
+
+describe("useAfterPaint", () => {
+  let frameCallbacks: FrameRequestCallback[];
+  let originalRaf: typeof requestAnimationFrame;
+  let originalCancelRaf: typeof cancelAnimationFrame;
+
+  const flushFrame = () => {
+    const callbacks = frameCallbacks;
+    frameCallbacks = [];
+
+    act(() => {
+      callbacks.forEach((cb) => cb(0));
+    });
+  };
+
+  beforeEach(() => {
+    frameCallbacks = [];
+    originalRaf = global.requestAnimationFrame;
+    originalCancelRaf = global.cancelAnimationFrame;
+
+    global.requestAnimationFrame = jest.fn((cb: FrameRequestCallback) => {
+      frameCallbacks.push(cb);
+
+      return frameCallbacks.length;
+    }) as unknown as typeof requestAnimationFrame;
+
+    global.cancelAnimationFrame = jest.fn();
+  });
+
+  afterEach(() => {
+    global.requestAnimationFrame = originalRaf;
+    global.cancelAnimationFrame = originalCancelRaf;
+  });
+
+  it("returns false on the initial render", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    expect(result.current).toBe(false);
+  });
+
+  it("stays false after only one animation frame (before paint completes)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+
+    expect(result.current).toBe(false);
+  });
+
+  it("returns true after two animation frames (a real post-paint boundary)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+    flushFrame();
+
+    expect(result.current).toBe(true);
+  });
+});

package/Components/Screen/TV/hooks/index.ts

@@ -1 +1,3 @@
 export { useInitialFocus } from "./useInitialFocus";
+
+export { useAfterPaint } from "./useAfterPaint";

package/Components/Screen/TV/hooks/useAfterPaint.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const useAfterPaint = (): boolean => {
+  const [painted, setPainted] = React.useState(false);
+
+  React.useEffect(() => {
+    let secondFrame: number | undefined;
+
+    const firstFrame = requestAnimationFrame(() => {
+      secondFrame = requestAnimationFrame(() => setPainted(true));
+    });
+
+    return () => {
+      cancelAnimationFrame(firstFrame);
+
+      if (secondFrame !== undefined) {
+        cancelAnimationFrame(secondFrame);
+      }
+    };
+  }, []);
+
+  return painted;
+};

package/Components/Screen/TV/index.web.tsx

@@ -21,7 +21,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus } from "./hooks";
+import { useInitialFocus, useAfterPaint } from "./hooks";
 import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { FreezeWithCallback } from "../../FreezeWithCallback";
@@ -157,6 +157,13 @@ export const Screen = ({ route, Components }: Props) => {
 
   const isScreenActive = useIsScreenActive();
 
+  // We need to render menu first and then proceed with screen content,
+  // otherwise screen will stay black until everything is loaded and screen
+  // rendering put huge load the CPU pushing rendering even further.
+  // With this approach, menu will be rendered immediately and screen content
+  // will be rendered after paint, which makes it more responsive and prevents black screen.
+  const isContentReady = useAfterPaint();
+
   return (
     <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
@@ -167,12 +174,14 @@ export const Screen = ({ route, Components }: Props) => {
             navigationProps={navigationProps}
           />
         </NavBarContainer>
-        <ScreenResolver
-          screenType={screenType}
-          screenId={screenId}
-          screenData={screenData}
-          groupId={route}
-        />
+        {isContentReady ? (
+          <ScreenResolver
+            screenType={screenType}
+            screenId={screenId}
+            screenData={screenData}
+            groupId={route}
+          />
+        ) : null}
       </View>
     </FreezeWithCallback>
   );

package/Components/ScreenRevealManager/Overlay.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Animated, StyleSheet } from "react-native";
+
+import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+  },
+});
+
+export const Overlay = ({
+  opacity,
+  backgroundColor,
+}: {
+  opacity: Animated.Value;
+  backgroundColor: string;
+}) => {
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity,
+          backgroundColor,
+        },
+      ]}
+      testID="animated-component"
+    >
+      <BackgroundImage />
+    </Animated.View>
+  );
+};

package/Components/ScreenRevealManager/__tests__/Overlay.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Animated } from "react-native";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage",
+  () => {
+    const { Text } = require("react-native");
+
+    return {
+      BackgroundImage: () => (
+        <Text testID="background-image">BackgroundImage</Text>
+      ),
+    };
+  }
+);
+
+import { Overlay } from "../Overlay";
+
+const flattenStyle = (style: unknown): Record<string, unknown> => {
+  if (!style) {
+    return {};
+  }
+
+  if (Array.isArray(style)) {
+    return style.reduce<Record<string, unknown>>(
+      (acc, item) => ({ ...acc, ...flattenStyle(item) }),
+      {}
+    );
+  }
+
+  if (typeof style === "object") {
+    return style as Record<string, unknown>;
+  }
+
+  return {};
+};
+
+describe("Overlay", () => {
+  it("renders the animated overlay container", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    expect(getByTestId("animated-component")).toBeTruthy();
+  });
+
+  it("applies opacity and backgroundColor to the overlay", () => {
+    const opacity = new Animated.Value(0.5);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#ff0000" />
+    );
+
+    const style = flattenStyle(getByTestId("animated-component").props.style);
+
+    expect(style.backgroundColor).toBe("#ff0000");
+    expect(style.opacity).toBe(0.5);
+  });
+
+  it("positions the overlay with absolute fill layout", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    const style = flattenStyle(getByTestId("animated-component").props.style);
+
+    expect(style.position).toBe("absolute");
+    expect(style.top).toBe(0);
+    expect(style.left).toBe(0);
+    expect(style.right).toBe(0);
+    expect(style.bottom).toBe(0);
+  });
+
+  it("renders BackgroundImage inside the overlay", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    expect(getByTestId("background-image")).toBeTruthy();
+  });
+});

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { Animated, StyleSheet } from "react-native";
+import { Animated } from "react-native";
+
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { Overlay } from "./Overlay";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
 import {
@@ -10,13 +12,6 @@ import {
   emitScreenRevealManagerIsNotReadyToShow,
 } from "./utils";
 
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    position: "absolute",
-  },
-});
-
 export const TIMEOUT = 300; // 300 ms
 
 const HIDDEN = 0; // opacity = 0
@@ -93,17 +88,11 @@ export const withScreenRevealManager = (Component) => {
           onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
         />
         {isShowOverlay ? (
-          <Animated.View
-            style={[
-              styles.container,
-              {
-                opacity: opacityRef.current,
-                // TODO: we should support background image as well, but for now we will use background color from theme
-                backgroundColor:
-                  props.backgroundColor ?? theme.app_background_color,
-              },
-            ]}
-            testID="animated-component"
+          <Overlay
+            opacity={opacityRef.current}
+            backgroundColor={
+              props.backgroundColor ?? theme.app_background_color
+            }
           />
         ) : null}
       </>