@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.120

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -7,12 +7,11 @@ import * as React from "react";
 import { Text, TextStyle, View, ViewStyle } from "react-native";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
 import * as programStyles from "./styles";
 
 type Props = {
   logo?: string;
-  title: string;
-  subtitle: string;
   isAudioContent: boolean;
   styles: {};
   plugin_configuration: {
@@ -28,13 +27,13 @@ const defaultColor = "#EFEFEF";
 
 function ProgramInfoComponent({
   logo,
-  title = "",
-  subtitle = "",
   isAudioContent,
   styles,
   plugin_configuration = {},
   videoStyle = {},
 }: Props) {
+  const { title = "", summary: subtitle = "" } = usePlayerContent();
+
   const platformKey = styleKeys.style_namespace;
 
   const colorTitle =

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

@@ -0,0 +1,337 @@
+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", () => ({
+  // Defaults to `false` for the hardware-back-handling tests below, which
+  // key off `isTV`. The ProgramInfo/content-context describe block below
+  // overrides this per test (`isTV()` is also what PlayerContainer's
+  // `playerContentValue` uses to pick TV vs mobile data keys, decoupled
+  // from `isTvOSPlatform` below).
+  isTV: jest.fn(() => false),
+  isAndroidTVPlatform: jest.fn(() => false),
+  // `isTvOSPlatform` backs a module-level constant in PlayerContainer.tsx that
+  // is read once at import time, so it must already be `true` here in order
+  // to exercise `renderApplePlayer`'s tvOS-only ProgramInfo branch in this
+  // test file. It does not affect the hardware-back-handling tests below,
+  // which key off `isTV` instead.
+  isTvOSPlatform: jest.fn(() => true),
+  isApplePlatform: jest.fn(() => true),
+  platformSelect: jest.fn(({ native }) => native),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => {
+  // Keep the real data-key resolver (createConfigValueGetter,
+  // resolvePlayerContentText, VIDEO_PLAYER_CONTENT_DATA_KEYS) so the tvOS
+  // ProgramInfo data-key tests exercise actual resolution logic, not a stub.
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/playerUtils"
+  );
+
+  return {
+    ...actual,
+    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(),
+}));
+
+// Stubbed so PlayerContainer can render without ProgramInfo's own
+// redux/style plumbing. It no longer needs to capture Title/Subtitle: those
+// come from the player manager's content channel, and the key-set selection
+// they depend on is covered directly in
+// `playerManager/__tests__/playerContent.test.ts`.
+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");
+
+  const PlayerContainerContext = ReactActual.createContext({
+    isLanguageOverlayVisible: false,
+    bottomFocusableId: "bottom",
+    showComponentsContainer: false,
+    refs: null,
+  });
+
+  return {
+    PlayerContainerContext,
+    // Mirrors just enough of the real provider for these tests: renders an
+    // actual `PlayerContainerContext.Provider` so the real
+    // `PlayerContainerContext.Consumer` inside PlayerContainer.tsx sees the
+    // container fields a real provider would give it, instead of a bare
+    // `({ children }) => children` passthrough.
+    PlayerContainerContextProvider: ({ children }: any) =>
+      ReactActual.createElement(
+        PlayerContainerContext.Provider,
+        {
+          value: {
+            isLanguageOverlayVisible: false,
+            bottomFocusableId: "bottom",
+            showComponentsContainer: false,
+            refs: null,
+          },
+        },
+        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 { isTV: mockIsTV } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/reactUtils"
+);
+
+// Renders children so that `renderApplePlayer`'s returned <ProgramInfo>
+// element (passed as this component's `children` prop) actually mounts —
+// otherwise React never invokes the ProgramInfo function component at all.
+const Player = React.forwardRef((props: any, _ref) => props.children ?? 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();
+    mockIsTV.mockReturnValue(false);
+    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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import * as R from "ramda";
 import { FlatList, StyleSheet, View } from "react-native";
+import { SafeAreaView, EdgeMode, Edge } from "react-native-safe-area-context";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -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";
@@ -40,6 +40,12 @@ type Props = {
   riverId?: string;
   getStaticComponentFeed: any;
   stickyHeaderIndices?: number[];
+  safeArea?:
+    | {
+        edges: Record<Edge, EdgeMode>;
+        mode: "padding" | "margin" | undefined;
+      }
+    | undefined;
 };
 
 const styles = StyleSheet.create({
@@ -52,7 +58,7 @@ const getNearestValue = (value, optionA, optionB) =>
   Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
 const scrollIndicatorInsets = { right: 1 };
-const keyExtractor = R.compose(String, R.prop("id"));
+const keyExtractor = (item) => item.id.toString();
 
 function ComponentsMapComponent(props: Props) {
   const {
@@ -64,6 +70,7 @@ function ComponentsMapComponent(props: Props) {
     riverId,
     getStaticComponentFeed,
     stickyHeaderIndices,
+    safeArea,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -77,7 +84,7 @@ function ComponentsMapComponent(props: Props) {
 
   const riverComponents = React.useMemo(() => {
     if (feed?.entry?.length < components.length) {
-      return R.slice(0, feed?.entry?.length, components);
+      return components.slice(0, feed?.entry?.length);
     }
 
     return components;
@@ -92,7 +99,7 @@ function ComponentsMapComponent(props: Props) {
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
 
-  const theme = useTheme();
+  const theme = useTheme<BaseThemePropertiesMobile>();
 
   const renderRiverItem = React.useCallback(
     ({ item, index }) => {
@@ -111,7 +118,10 @@ function ComponentsMapComponent(props: Props) {
       };
 
       return (
-        <ScreenLoadingMeasurementsListItemWrapper index={index}>
+        <ScreenLoadingMeasurementsListItemWrapper
+          index={index}
+          testID={`component-${item.id}`}
+        >
           <RiverItem {...riverItemProps} />
         </ScreenLoadingMeasurementsListItemWrapper>
       );
@@ -121,21 +131,13 @@ function ComponentsMapComponent(props: Props) {
 
   const screenStyle = React.useMemo(
     () => ({
-      paddingTop: ifEmptyUseFallback(
-        screenConfig.paddingTop,
-        R.prop("screen_padding_top")(theme)
-      ),
-      paddingBottom: ifEmptyUseFallback(
-        screenConfig.paddingBottom,
-        R.prop("screen_padding_bottom")(theme)
-      ),
       paddingLeft: ifEmptyUseFallback(
         screenConfig.paddingLeft,
-        R.prop("screen_padding_left")(theme)
+        theme.screen_padding_left
       ),
       paddingRight: ifEmptyUseFallback(
         screenConfig.paddingRight,
-        R.prop("screen_padding_right")(theme)
+        theme.screen_padding_right
       ),
     }),
     [riverId]
@@ -154,7 +156,7 @@ function ComponentsMapComponent(props: Props) {
     [flatListHeight]
   );
 
-  usePipesCacheReset(riverId, riverComponents);
+  useMarkPipesDataStale(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
     () => (pullToRefreshEnabled ? <RefreshControl /> : null),
@@ -266,51 +268,79 @@ function ComponentsMapComponent(props: Props) {
             numberOfComponents={riverComponents.length}
           >
             <ViewportTracker>
-              <FlatList
-                testID="components-map-flat-list"
-                ref={(ref) => {
-                  flatListRef.current = ref;
-                }}
-                // Fix for WebView rerender crashes on Android API 28+
-                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-                overScrollMode={isAndroid ? "never" : "auto"}
-                scrollIndicatorInsets={scrollIndicatorInsets}
-                extraData={feed}
-                stickyHeaderIndices={stickyHeaderIndices}
-                removeClippedSubviews={isAndroid}
-                onLayout={handleOnLayout}
-                initialNumToRender={3}
-                maxToRenderPerBatch={10}
-                windowSize={12}
-                keyExtractor={keyExtractor}
-                renderItem={renderRiverItem}
-                data={riverComponents}
-                contentContainerStyle={contentContainerStyle}
-                ListFooterComponent={
-                  <RiverFooter
-                    flatListHeight={flatListHeight}
-                    loadingState={loadingState}
-                  />
-                }
-                refreshControl={refreshControl}
-                onScrollBeginDrag={onScrollBeginDrag}
-                onScroll={onScroll}
-                onMomentumScrollEnd={_onMomentumScrollEnd}
-                onScrollEndDrag={_onScrollEndDrag}
-                scrollEventThrottle={16}
-                {...scrollViewExtraProps}
-                onEndReached={
-                  /* When wrapped in a parent ScrollView (e.g. tabs),
+              <>
+                <FlatList
+                  ListHeaderComponent={
+                    <SafeAreaView
+                      mode={safeArea?.mode ?? "margin"}
+                      style={{
+                        paddingTop: ifEmptyUseFallback(
+                          screenConfig.paddingTop,
+                          theme.screen_padding_top
+                        ),
+                        height: StyleSheet.hairlineWidth,
+                      }}
+                      edges={{ top: safeArea?.edges?.top ?? "off" }}
+                    />
+                  }
+                  testID="components-map-flat-list"
+                  ref={(ref) => {
+                    flatListRef.current = ref;
+                  }}
+                  // Fix for WebView rerender crashes on Android API 28+
+                  // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                  overScrollMode={isAndroid ? "never" : "auto"}
+                  scrollIndicatorInsets={scrollIndicatorInsets}
+                  extraData={feed}
+                  stickyHeaderIndices={stickyHeaderIndices}
+                  removeClippedSubviews={isAndroid}
+                  onLayout={handleOnLayout}
+                  initialNumToRender={3}
+                  maxToRenderPerBatch={10}
+                  windowSize={12}
+                  keyExtractor={keyExtractor}
+                  renderItem={renderRiverItem}
+                  data={riverComponents}
+                  contentContainerStyle={contentContainerStyle}
+                  ListFooterComponent={
+                    <>
+                      <RiverFooter
+                        flatListHeight={flatListHeight}
+                        loadingState={loadingState}
+                      />
+                      <SafeAreaView
+                        mode={safeArea?.mode ?? "margin"}
+                        style={{
+                          paddingBottom: ifEmptyUseFallback(
+                            screenConfig.paddingBottom,
+                            theme.screen_padding_bottom
+                          ),
+                          height: StyleSheet.hairlineWidth,
+                        }}
+                        edges={{ bottom: safeArea?.edges?.bottom ?? "off" }}
+                      />
+                    </>
+                  }
+                  refreshControl={refreshControl}
+                  onScrollBeginDrag={onScrollBeginDrag}
+                  onScroll={onScroll}
+                  onMomentumScrollEnd={_onMomentumScrollEnd}
+                  onScrollEndDrag={_onScrollEndDrag}
+                  scrollEventThrottle={16}
+                  {...scrollViewExtraProps}
+                  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
-                    : () => {
-                        if (!hasUserScrolledRef.current) return;
-                        emitScrollEndReached();
-                      }
-                }
-              />
+                    isScreenWrappedInContainer
+                      ? undefined
+                      : () => {
+                          if (!hasUserScrolledRef.current) return;
+                          emitScrollEndReached();
+                        }
+                  }
+                />
+              </>
             </ViewportTracker>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>
@@ -320,6 +350,5 @@ function ComponentsMapComponent(props: Props) {
 }
 
 export const ComponentsMap = React.memo(
-  withComponentsMapProvider(ComponentsMapComponent),
-  R.equals
+  withComponentsMapProvider(ComponentsMapComponent)
 );

package/Components/River/River.tsx

@@ -20,6 +20,8 @@ type Props = ZappScreenProps & {
   setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
   screenContext: ZappRiver;
   river: ZappRiver;
+  /** Result channel for screens presented as a modal; forwarded to the resolved screen. */
+  resultCallback?: hookCallback;
 };
 
 export class RiverComponent extends React.Component<Props> {
@@ -64,6 +66,7 @@ export class RiverComponent extends React.Component<Props> {
       isInsideContainer,
       groupId,
       scrollViewExtraProps,
+      resultCallback,
     } = this.props;
 
     const { id, type } = river;
@@ -77,6 +80,7 @@ export class RiverComponent extends React.Component<Props> {
           })}
           screenId={id}
           screenType={type}
+          resultCallback={resultCallback}
         />
       );
     }