@applicaster/zapp-react-native-ui-components 15.1.0-rc.9 → 16.0.0-alpha.1833861900

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/River/ComponentsMap/ComponentsMap.tsx

@@ -39,8 +39,6 @@ type Props = {
   scrollViewExtraProps?: {};
   riverId?: string;
   getStaticComponentFeed: any;
-  pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
-  refreshingPipesV1?: boolean;
   stickyHeaderIndices?: number[];
 };
 
@@ -65,10 +63,6 @@ function ComponentsMapComponent(props: Props) {
     groupId,
     riverId,
     getStaticComponentFeed,
-    // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
-    // TODO: Remove when pipes v1 is deprecated.
-    pullToRefreshPipesV1RefreshingStateUpdater,
-    refreshingPipesV1,
     stickyHeaderIndices,
   } = props;
 
@@ -163,16 +157,8 @@ function ComponentsMapComponent(props: Props) {
   usePipesCacheReset(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
-    () =>
-      pullToRefreshEnabled ? (
-        <RefreshControl
-          pullToRefreshPipesV1RefreshingStateUpdater={
-            pullToRefreshPipesV1RefreshingStateUpdater
-          }
-          refreshingPipesV1={refreshingPipesV1}
-        />
-      ) : null,
-    []
+    () => (pullToRefreshEnabled ? <RefreshControl /> : null),
+    [pullToRefreshEnabled]
   );
 
   const navBarStore = useScreenContextV2()._navBarStore;
@@ -281,6 +267,7 @@ function ComponentsMapComponent(props: Props) {
           >
             <ViewportTracker>
               <FlatList
+                testID="components-map-flat-list"
                 ref={(ref) => {
                   flatListRef.current = ref;
                 }}
@@ -312,10 +299,10 @@ function ComponentsMapComponent(props: Props) {
                 onScrollEndDrag={_onScrollEndDrag}
                 scrollEventThrottle={16}
                 {...scrollViewExtraProps}
-                /* When wrapped in a parent ScrollView (e.g. tabs),
-                this FlatList doesn't scroll so onEndReached can fire repeatedly;
-                skip it here and let the parent ScrollView emit scroll-end instead. */
                 onEndReached={
+                  /* When wrapped in a parent ScrollView (e.g. tabs),
+                  this FlatList doesn't scroll so onEndReached can fire repeatedly;
+                  skip it here and let the parent ScrollView emit scroll-end instead. */
                   isScreenWrappedInContainer
                     ? undefined
                     : () => {

package/Components/River/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react-native";
 import { BehaviorSubject } from "rxjs";
 import { useLoadingState } from "../useLoadingState";
 

package/Components/River/RefreshControl.tsx

@@ -4,9 +4,7 @@ import {
   RefreshControl as RNRefreshControl,
   StyleSheet,
 } from "react-native";
-import * as R from "ramda";
-import { path } from "@applicaster/zapp-react-native-utils/utils";
-import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { get } from "@applicaster/zapp-react-native-utils/utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
@@ -15,7 +13,7 @@ import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/react
 import { useShallow } from "zustand/react/shallow";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { usePullToRefresh } from "./hooks";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -55,66 +53,6 @@ const getBrightness = (RGBcolor) => {
   );
 };
 
-export const usePullToRefresh = (
-  riverComponents,
-  pullToRefreshPipesV1RefreshingStateUpdater,
-  refreshingPipesV1
-) => {
-  const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
-
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const feeds: string[] = React.useMemo(
-    () =>
-      (riverComponents || [])
-        .map((riverComponent) => path(["data", "source"], riverComponent))
-        .filter((feed) => !isNilOrEmpty(feed)),
-    [riverComponents]
-  );
-
-  const feedsLength = feeds.length;
-
-  const [requestsCompletedCounter, setRequestsCompletedCounter] =
-    React.useState(0);
-
-  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
-
-  React.useEffect(() => {
-    // will not work for pipes v1 on 1st level screens
-    if (refreshing && !isPipesV1) {
-      feeds.forEach((feed) => {
-        loadPipesDataDispatcher(feed, {
-          silentRefresh: true,
-          clearCache: true,
-          callback: () => {
-            setRequestsCompletedCounter(R.inc);
-          },
-        });
-      });
-    }
-  }, [refreshing, isPipesV1, feeds, loadPipesDataDispatcher]);
-
-  React.useEffect(() => {
-    if (requestsCompletedCounter === feedsLength) {
-      setRefreshing(false);
-    }
-  }, [requestsCompletedCounter, feedsLength]);
-
-  const onRefresh = React.useCallback(() => {
-    if (isPipesV1) {
-      pullToRefreshPipesV1RefreshingStateUpdater(true);
-    } else {
-      setRefreshing(true);
-      setRequestsCompletedCounter(0);
-    }
-  }, [isPipesV1]);
-
-  return {
-    refreshing: isPipesV1 ? refreshingPipesV1 : refreshing,
-    onRefresh,
-  };
-};
-
 /** Returns the offset for the progress view of the RefreshControl component
  *  based on navbar content position */
 export const useGetProgressViewOffset = () => {
@@ -143,16 +81,12 @@ export const useGetProgressViewOffset = () => {
   }
 };
 
-export function RefreshControl(props: {
-  pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
-  refreshingPipesV1?: boolean;
-}) {
+export function RefreshControl(props) {
   const screenData = useCurrentScreenData();
 
   const { refreshing, onRefresh } = usePullToRefresh(
-    screenData.ui_components,
-    props.pullToRefreshPipesV1RefreshingStateUpdater,
-    props.refreshingPipesV1
+    screenData.id,
+    screenData.ui_components
   );
 
   const { app_background_color: themeBackgroundColor } = useTheme();
@@ -170,29 +104,26 @@ export function RefreshControl(props: {
     displayTitleIOS,
   } = React.useMemo(
     () => ({
-      indicatorColor: R.prop(
-        "pull_to_refresh_indicator_color",
-        screenData.styles
-      ),
-      titleUnderIndicatorColor: R.prop(
-        "pull_to_refresh_title_color_under_indicator",
-        screenData.styles
+      indicatorColor: get(screenData.styles, "pull_to_refresh_indicator_color"),
+      titleUnderIndicatorColor: get(
+        screenData.styles,
+        "pull_to_refresh_title_color_under_indicator"
       ),
-      indicatorBackgroundColor: R.prop(
-        "pull_to_refresh_indicator_bg_color",
-        screenData.styles
+      indicatorBackgroundColor: get(
+        screenData.styles,
+        "pull_to_refresh_indicator_bg_color"
       ),
       indicatorSize:
-        R.prop("pull_to_refresh_indicator_size", screenData.styles) === "large"
+        get(screenData.styles, "pull_to_refresh_indicator_size") === "large"
           ? "large"
           : "default",
-      generalContentBackgroungColor: R.prop(
-        "screen_background_color",
-        screenData.styles
+      generalContentBackgroungColor: get(
+        screenData.styles,
+        "screen_background_color"
       ),
-      displayTitleIOS: R.prop(
-        "pull_to_refresh_display_title_ios",
-        screenData.styles
+      displayTitleIOS: get(
+        screenData.styles,
+        "pull_to_refresh_display_title_ios"
       ),
     }),
     [screenData]

package/Components/River/River.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as R from "ramda";
 import { GeneralContentScreen } from "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen";
 
-import { FeedLoader } from "../FeedLoader";
 import { ScreenResolver } from "../ScreenResolver";
 
 type Props = ZappScreenProps & {
@@ -23,24 +22,13 @@ type Props = ZappScreenProps & {
   river: ZappRiver;
 };
 
-type State = {
-  refreshing: boolean;
-};
-
-export class RiverComponent extends React.Component<Props, State> {
+export class RiverComponent extends React.Component<Props> {
   private currentScreenTitle: string;
   private currentScreenSummary: string;
   constructor(props: Props) {
     super(props);
 
-    this.state = {
-      refreshing: false,
-    };
-
     this.applyContexts();
-
-    this.pullToRefreshPipesV1RefreshingStateUpdater =
-      this.pullToRefreshPipesV1RefreshingStateUpdater.bind(this);
   }
 
   applyContexts() {
@@ -69,20 +57,9 @@ export class RiverComponent extends React.Component<Props, State> {
     }
   }
 
-  usesPipesV1Layout() {
-    return this.props?.appData?.layoutVersion === "v1";
-  }
-
-  // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
-  // TODO: Remove when pipes v1 is deprecated.
-  pullToRefreshPipesV1RefreshingStateUpdater(refreshing) {
-    this.setState({ refreshing });
-  }
-
   render() {
     const {
       river,
-      feedUrl,
       screenData,
       isInsideContainer,
       groupId,
@@ -91,22 +68,10 @@ export class RiverComponent extends React.Component<Props, State> {
 
     const { id, type } = river;
 
-    const connectedFeedURL = R.path(["content", "src"], screenData);
-    const _feedUrl = feedUrl || connectedFeedURL;
-
     if (type !== "general_content") {
-      let riverWithConnectedDatasource;
-
-      if (_feedUrl && this.usesPipesV1Layout()) {
-        riverWithConnectedDatasource = {
-          ...river,
-          data: R.merge(river.data || {}, { source: _feedUrl }),
-        };
-      }
-
       return (
         <ScreenResolver
-          screenData={R.mergeLeft(riverWithConnectedDatasource || river, {
+          screenData={R.mergeLeft(river, {
             groupId,
             ...screenData,
           })}
@@ -116,53 +81,15 @@ export class RiverComponent extends React.Component<Props, State> {
       );
     }
 
-    if (!_feedUrl || !this.usesPipesV1Layout()) {
-      this.currentScreenTitle = (screenData && screenData.title) || null;
-
-      return (
-        <GeneralContentScreen
-          screenId={id}
-          isScreenWrappedInContainer={isInsideContainer}
-          groupId={groupId}
-          scrollViewExtraProps={scrollViewExtraProps}
-        />
-      );
-    }
+    this.currentScreenTitle = (screenData && screenData.title) || null;
 
     return (
-      <FeedLoader
-        feedUrl={_feedUrl}
-        refreshing={this.state.refreshing}
-        refreshCallback={() =>
-          this.pullToRefreshPipesV1RefreshingStateUpdater(false)
-        }
-      >
-        {(feed) => {
-          if (!feed) {
-            return null;
-          }
-
-          this.currentScreenSummary = (feed && feed.summary) || null;
-
-          this.currentScreenTitle =
-            (feed && feed.title) || (screenData && screenData.title) || null;
-
-          return (
-            <GeneralContentScreen
-              screenId={id}
-              groupId={groupId}
-              feed={feed}
-              isScreenWrappedInContainer={isInsideContainer}
-              scrollViewExtraProps={scrollViewExtraProps}
-              componentsMapExtraProps={{
-                pullToRefreshPipesV1RefreshingStateUpdater:
-                  this.pullToRefreshPipesV1RefreshingStateUpdater,
-                refreshingPipesV1: this.state.refreshing,
-              }}
-            />
-          );
-        }}
-      </FeedLoader>
+      <GeneralContentScreen
+        screenId={id}
+        isScreenWrappedInContainer={isInsideContainer}
+        groupId={groupId}
+        scrollViewExtraProps={scrollViewExtraProps}
+      />
     );
   }
 }