@applicaster/zapp-react-native-ui-components 16.0.0-rc.5 → 16.0.0-rc.50

package/Components/OfflineHandler/index.tsx

@@ -1,105 +1,83 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, StyleSheet } from "react-native";
-import { NotificationView as NotificationViewNative } from "./NotificationView/NotificationView";
-import { NotificationView as NotificationViewSamsung } from "./NotificationView/NotificationView.samsung";
-import { NotificationView as NotificationViewLG } from "./NotificationView/NotificationView.lg";
-
+import React, { useCallback, useEffect } from "react";
 import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
+import { useOfflineHandlerProps } from "./hooks";
 import { componentsLogger } from "../../Helpers/logger";
 import { parseConnectionInfo } from "./utils";
 
 const logger = componentsLogger.addSubsystem("OfflineHandler");
 
+// mirrors NOTIFICATION_TOAST_EVENTS.SHOW_TOAST in
+// @applicaster/quick-brick-core/App/NotificationToastRenderer/NotificationToastManager
+// (kept as a literal here since this package must not depend on quick-brick-core)
+const SHOW_TOAST_EVENT = "showToast";
+const OFFLINE_STATUS_TOAST_ID = "offline-status";
+
 type Props = {
   children?: React.ReactElement<any>;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    position: "relative",
-  },
-});
-
 const timers = {
   goingOffline: 5000,
   goingOnline: 2000,
 };
 
-export const NotificationView = platformSelect({
-  samsung_tv: NotificationViewSamsung,
-  lg_tv: NotificationViewLG,
-  default: NotificationViewNative,
-});
-
 export const OfflineHandler = ({ children }: Props) => {
   const connectionInfo = useConnectionInfo(false);
-  const { online, deviceOnline } = parseConnectionInfo(connectionInfo);
+  const { online } = parseConnectionInfo(connectionInfo);
+  const prevOnline = usePrevious(online);
 
-  const [hidden, setHidden] = useState<boolean>(true);
-  const previousOnline: boolean = usePrevious(online);
-  const timer = useRef<NodeJS.Timeout | null>(null);
-  const initialRender = useRef(false);
+  const emitShowToast = useSubscriberFor(SHOW_TOAST_EVENT);
 
-  const dismiss = useCallback(() => {
-    setHidden(true);
+  const { message, extraMessage, style } = useOfflineHandlerProps(online);
 
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
-    }
-  }, []);
+  const showOnlineToast = useCallback(() => {
+    logger.log("Device is back online, emit toast");
 
-  const setTimer = useCallback((cb, duration) => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
+    emitShowToast({
+      id: OFFLINE_STATUS_TOAST_ID,
+      message,
+      extraMessage,
+      style,
+      timeout: timers.goingOnline,
+    });
+  }, [emitShowToast, message, extraMessage, style]);
+
+  const showOfflineToast = useCallback(() => {
+    logger.log("Device went offline, emit toast");
 
-    timer.current = setTimeout(cb, duration);
-  }, []);
+    emitShowToast({
+      id: OFFLINE_STATUS_TOAST_ID,
+      message,
+      extraMessage,
+      style,
+      timeout: timers.goingOffline,
+    });
+  }, [emitShowToast, message, extraMessage, style]);
 
   useEffect(() => {
-    if (initialRender.current) {
-      const wentOffline = previousOnline && online === false;
-      const wentOnline = !previousOnline && online;
-      const renderedOffline = !online && previousOnline === null;
-
-      if (!deviceOnline || wentOffline || renderedOffline) {
-        logger.log("Device went offline");
-        setTimer(() => setHidden(true), timers.goingOffline);
-        setHidden(false);
+    // On mount there is no previous state yet: only surface the offline toast
+    // for a device that starts offline. Don't announce "back online" for a
+    // device that was online to begin with.
+    if (prevOnline === undefined) {
+      if (!online) {
+        showOfflineToast();
       }
 
-      if (wentOnline) {
-        logger.log("Device is back online");
-        setHidden(false);
-        setTimer(() => setHidden(true), timers.goingOnline);
-      }
-    } else {
-      initialRender.current = true;
+      return;
     }
 
-    return () => {
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = null;
+    // On subsequent renders, only emit a toast when the online/offline state changes.
+    if (prevOnline !== online) {
+      if (!online) {
+        showOfflineToast();
+      } else {
+        showOnlineToast();
       }
-    };
-  }, [connectionInfo]);
-
-  return (
-    <View style={styles.container}>
-      <NotificationView
-        hidden={hidden}
-        online={online}
-        previousOnline={previousOnline}
-        dismiss={dismiss}
-      >
-        {children}
-      </NotificationView>
-    </View>
-  );
+    }
+  }, [online, prevOnline, showOfflineToast, showOnlineToast]);
+
+  return children;
 };

package/Components/OfflineHandler/utils/index.ts

@@ -1,9 +1,8 @@
 import * as R from "ramda";
-
 import { NetInfoState } from "@react-native-community/netinfo";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isOnline as isOnlineUtils } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 import { Platform } from "react-native";
 
 type ConnectionInfo = NetInfoState & { deviceStatus: NetStatus };
@@ -51,14 +50,3 @@ export const parseConnectionInfo: typeof parseConnectionInfoForDefault =
     samsung_tv: parseConnectionInfoForSamsung,
     default: parseConnectionInfoForDefault,
   });
-
-export const useNotificationHeight = () => {
-  const insets = useSafeAreaInsets();
-
-  const navBarHeight = platformSelect({ ios: 44, android: 56 });
-
-  const statusHeight = insets.top;
-  const notificationHeight = statusHeight + navBarHeight;
-
-  return { statusHeight, notificationHeight };
-};

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -9,6 +9,7 @@ import {
   platformSelect,
   isAndroidTVPlatform,
   isTvOSPlatform,
+  isApplePlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   isAudioItem,
@@ -60,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { PLAYER_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -265,14 +267,12 @@ const PlayerContainerComponent = (props: Props) => {
     navigator.goBack();
   }, [isModal, state.playerId, showNavBar, navigator]);
 
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
+  const pluginConfiguration = React.useMemo(
+    () => player?.getPluginConfiguration(),
+    [player]
+  );
 
-  const playEntry = (entry) => navigator.replaceTop(entry, { mode });
+  const playEntry = (entry: ZappEntry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
     if (!playNextOverlayState.entry) {
@@ -284,12 +284,16 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
     );
 
+    playNextOverlayState.hidePlayNext();
+
+    playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
+
     setIsLoadingNextVideo(true);
     playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState]);
+  }, [playNextOverlayState, item?.id]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {
@@ -346,11 +350,15 @@ const PlayerContainerComponent = (props: Props) => {
     setIsLoadingNextVideo(false);
 
     const resumeTime = Number(item?.extensions?.resumeTime);
+    const activePlayer = playerManager.getActivePlayer();
 
-    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast
+    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast.
+    // Live streams and a missing/zero resume position are skipped: seeking to 0 on
+    // a live stream pulls playback off the live edge into a buffer-starvation seek loop.
     if (
-      !playerManager.getActivePlayer()?.hasResumePosition() &&
-      !isNaN(resumeTime)
+      !activePlayer?.hasResumePosition() &&
+      resumeTime > 0 &&
+      !activePlayer?.isLive()
     ) {
       player?.seekTo(resumeTime);
     }
@@ -468,6 +476,8 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
+      } else {
+        navigator.minimiseVideoModal();
       }
     }
 
@@ -491,7 +501,7 @@ const PlayerContainerComponent = (props: Props) => {
   const isAudioContent = isAudioItem(item);
 
   useEffect(() => {
-    if (!isAudioContent) {
+    if (!isAudioContent && isApplePlatform()) {
       sendQuickBrickEvent(
         QUICK_BRICK_EVENTS.IDLE_TIMER_DISABLED as QuickBrickEvent,
         {

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

@@ -0,0 +1,285 @@
+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),
+  isApplePlatform: jest.fn(() => true),
+  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/PreloaderWrapper/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type PreloaderWrapperProps = {
   showPreloader?: boolean;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
 };
 
 export const PreloaderWrapper: React.FC<PreloaderWrapperProps> = ({

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -9,7 +9,7 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  usePipesCacheReset,
+  useMarkPipesDataStale,
   useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
@@ -154,7 +154,7 @@ function ComponentsMapComponent(props: Props) {
     [flatListHeight]
   );
 
-  usePipesCacheReset(riverId, riverComponents);
+  useMarkPipesDataStale(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
     () => (pullToRefreshEnabled ? <RefreshControl /> : null),

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -10,11 +10,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
+    style={{}}
   >
     <RCTScrollView
       ListFooterComponent={
@@ -167,11 +163,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           >
             <View />
           </View>
@@ -183,11 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           />
         </View>
         <View

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