@applicaster/zapp-react-native-ui-components 15.1.0-rc.12 → 15.1.0-rc.13

package/Components/BackgroundImage/BackgroundImage.tv.android.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import {
+  View,
+  StyleSheet,
+  ImageURISource,
+  ImageBackground,
+} from "react-native";
+
+import { ASSETS } from "@applicaster/zapp-react-native-ui-components/Helpers";
+
+const imageSource: ImageURISource = {
+  uri: ASSETS.APP_BACKGROUND_IMAGE,
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  backgroundImage: { width: "100%", height: "100%" },
+});
+
+export function BackgroundImage({ children }: React.PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <ImageBackground style={styles.backgroundImage} source={imageSource}>
+        {children}
+      </ImageBackground>
+    </View>
+  );
+}

package/Components/BackgroundImage/BackgroundImage.tv.ios.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { View, StyleSheet, ImageURISource } from "react-native";
+
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+import { ASSETS } from "@applicaster/zapp-react-native-ui-components/Helpers";
+
+const imageSource: ImageURISource = {
+  uri: ASSETS.APP_BACKGROUND_IMAGE,
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  backgroundImage: { width: "100%", height: "100%" },
+});
+
+export function BackgroundImage({ children }: React.PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <Image style={styles.backgroundImage} source={imageSource}>
+        {children}
+      </Image>
+    </View>
+  );
+}

package/Components/BackgroundImage/BackgroundImage.tv.web.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { View, ViewStyle } from "react-native";
+
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import {
+  selectRemoteConfigurations,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+
+import { getBackgroundImageUrl } from "../Layout/utils";
+
+const baseBackgroundStyles = (imageUrl, backgroundColor) =>
+  ({
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    backgroundSize: "cover",
+    background: imageUrl
+      ? `url(${imageUrl}) no-repeat top center ${backgroundColor}`
+      : backgroundColor,
+  }) as ViewStyle;
+
+export const BackgroundImage = ({ children }: React.PropsWithChildren) => {
+  const theme = useTheme();
+
+  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
+
+  const backgroundColor = theme.app_background_color;
+  const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);
+
+  return (
+    <View
+      id="background"
+      style={baseBackgroundStyles(backgroundImageUrl, backgroundColor)}
+    >
+      {children}
+    </View>
+  );
+};

package/Components/BackgroundImage/index.ts

@@ -0,0 +1,8 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+export const BackgroundImage = platformSelect({
+  tvos: require("./BackgroundImage.tv.ios").BackgroundImage,
+  android_tv: require("./BackgroundImage.tv.android").BackgroundImage,
+  amazon: require("./BackgroundImage.tv.android").BackgroundImage,
+  web: require("./BackgroundImage.tv.web").BackgroundImage,
+});

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  backgroundColor="#000000"
   testID="background-component"
 >
   <View

package/Components/Layout/TV/index.tsx

@@ -9,7 +9,6 @@ import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
-import { LayoutBackground } from "./LayoutBackground";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -40,7 +39,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   return (
     <LayoutContainer>
       <ScreenLayoutContextProvider>
-        <LayoutBackground Background={Components.Background}>
+        <Components.Background>
           <ScreenDataContext.Provider value={navigator.data}>
             <PathnameContext.Provider value={navigator.currentRoute}>
               <ScreenContextProvider pathname={navigator.currentRoute}>
@@ -53,7 +52,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
               </ScreenContextProvider>
             </PathnameContext.Provider>
           </ScreenDataContext.Provider>
-        </LayoutBackground>
+        </Components.Background>
       </ScreenLayoutContextProvider>
     </LayoutContainer>
   );

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

@@ -5,7 +5,6 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
-import { LayoutBackground } from "./LayoutBackground";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -26,9 +25,9 @@ const Layout = ({ Components }: Props) => {
 
   return (
     <ScreenLayoutContextProvider>
-      <LayoutBackground Background={Components.Background}>
+      <Components.Background>
         <StackNavigator Components={Components} />
-      </LayoutBackground>
+      </Components.Background>
     </ScreenLayoutContextProvider>
   );
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -465,6 +465,8 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
+      } else {
+        navigator.minimiseVideoModal();
       }
     }
 

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

@@ -0,0 +1,286 @@
+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/hooks", () => ({
+  usePickFromState: jest.fn(() => ({
+    appData: { 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/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}
       </>

package/Helpers/index.js

@@ -1,5 +1,11 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 export const ASSETS = {
-  APP_BACKGROUND_IMAGE: "app_background_image",
+  APP_BACKGROUND_IMAGE: platformSelect({
+    tvos: "app_background_image",
+    android_tv: "tv_app_background",
+    amazon: "tv_app_background",
+  }),
 };
 
 export const ANALYTICS_CORE_EVENTS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.1.0-rc.12",
+  "version": "15.1.0-rc.13",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.0-rc.12",
-    "@applicaster/zapp-react-native-bridge": "15.1.0-rc.12",
-    "@applicaster/zapp-react-native-redux": "15.1.0-rc.12",
-    "@applicaster/zapp-react-native-utils": "15.1.0-rc.12",
+    "@applicaster/applicaster-types": "15.1.0-rc.13",
+    "@applicaster/zapp-react-native-bridge": "15.1.0-rc.13",
+    "@applicaster/zapp-react-native-redux": "15.1.0-rc.13",
+    "@applicaster/zapp-react-native-utils": "15.1.0-rc.13",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { getBackgroundImageUrl } from "../utils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
-export const LayoutBackground = ({
-  Background,
-  children,
-}: {
-  Background: React.ComponentType<any>;
-  children: React.ReactNode;
-}) => {
-  const theme = useTheme();
-
-  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
-
-  const backgroundColor = theme.app_background_color;
-  const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);
-
-  return (
-    <Background
-      backgroundColor={backgroundColor}
-      backgroundImageUrl={backgroundImageUrl}
-    >
-      {children}
-    </Background>
-  );
-};