@applicaster/zapp-react-native-ui-components 16.0.0-rc.3 → 16.0.0-rc.30

package/Components/MasterCell/utils/index.ts

@@ -1,22 +1,23 @@
 import React, { useMemo } from "react";
 import * as R from "ramda";
-import validateColor from "validate-color";
+import memoizee from "memoizee";
+
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-
-import { masterCellLogger } from "../logger";
-import { getCellState } from "../../Cell/utils";
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { get } from "@applicaster/zapp-react-native-utils/utils";
-import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { pathOr, get, isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
-import memoizee from "memoizee";
-import stringify from "fast-json-stable-stringify";
+import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
+import { masterCellLogger } from "../logger";
+import { getCellState } from "../../Cell/utils";
+import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 import { DataProvider } from "../DefaultComponents/DataProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
-  if (R.isNil(element)) {
+  if (isNil(element)) {
     return false;
   }
 
@@ -28,12 +29,20 @@ const hasElementSpecificViewType = (viewType) => (element) => {
   return hasElementsSpecificViewType(viewType)(element.elements);
 };
 
+export const hasElementsSpecificViewType = (viewType) => (elements) => {
+  if (isNilOrEmpty(elements)) {
+    return false;
+  }
+
+  return R.any(hasElementSpecificViewType(viewType))(elements);
+};
+
 const logWarning = (
   colorValueFromCellStyle,
   colorFromProp,
   colorValueFromEntry
 ) => {
-  if (R.isNil(colorValueFromEntry)) {
+  if (isNil(colorValueFromEntry)) {
     masterCellLogger.warn({
       message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
       data: {
@@ -44,15 +53,10 @@ const logWarning = (
   }
 };
 
-export const hasElementsSpecificViewType = (viewType) => (elements) => {
-  if (R.isNil(elements) || R.isEmpty(elements)) {
-    return false;
-  }
-
-  return R.any(hasElementSpecificViewType(viewType))(elements);
-};
-
-function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
+export function resolveColorForProp(
+  entry: any,
+  colorFromProp: string | undefined
+) {
   if (!colorFromProp) {
     return undefined;
   }
@@ -62,9 +66,7 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
     colorFromProp.split(".")
   );
 
-  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
-
-  if (nestedEntryValue === undefined && !validateColor(color)) {
+  if (nestedEntryValue === undefined && !isValidColor(colorFromProp)) {
     logWarning(colorFromProp, colorFromProp, nestedEntryValue);
 
     return undefined;
@@ -86,36 +88,73 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
 
 const getColorKeys = memoizee((style) => {
   const styleKeys = Object.keys(style);
-  const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
-  return colorKeys;
+  return styleKeys.filter((key) => /color/i.test(key));
 });
 
-export const resolveColor = memoizee(
-  (entry, style) => {
-    if (style === null || style === undefined) {
-      return style;
-    }
+/**
+ * A color style value is either a literal color (e.g. "#FFFFFF") or a
+ * data-mapping path into the entry. Data mappings always point at the entry
+ * `extensions` object (e.g. "extensions.brandColor"), so we only need to do a
+ * path lookup when the value starts with "extensions" — everything else is a
+ * literal color and can be returned as-is.
+ *
+ * This avoids the previous, very expensive approach that ran `validateColor`
+ * on every value and memoized on a full `fast-json-stable-stringify` of the
+ * entire entry.
+ */
+const EXTENSIONS_PREFIX = "extensions";
+
+const isDataMappingPath = (value: string): boolean =>
+  typeof value === "string" && value.startsWith(EXTENSIONS_PREFIX);
+
+export const resolveColor = (
+  entry,
+  style,
+  allowDynamicColorsOutsideExtensions
+) => {
+  if (style === null || style === undefined) {
+    return style;
+  }
+
+  const colorKeys = getColorKeys(style);
+
+  if (colorKeys.length === 0) {
+    return style;
+  }
+
+  return colorKeys.reduce(
+    (acc, key) => {
+      const value = acc[key];
 
-    return getColorKeys(style).reduce(
-      (acc, value) => {
-        if (acc[value] && typeof acc[value] === "string") {
-          const colorStyle = resolveColorForProp(entry, acc[value]);
+      // 1. The Expensive Edge-Case (Only for the app with root mappings)
+      if (allowDynamicColorsOutsideExtensions && isNotEmptyString(value)) {
+        const possibleColor = resolveColorForProp(entry, value);
 
-          acc[value] = colorStyle;
-        }
+        acc[key] = isValidColor(possibleColor) ? possibleColor : null;
 
         return acc;
-      },
-      { ...style }
-    );
-  },
-  {
-    normalizer: (args) => {
-      return [stringify(args[0]), stringify(args[1])].join("|");
+      }
+
+      // 2. The Fast Path (For 99% of apps)
+      if (isDataMappingPath(value)) {
+        // resolve the mapped color from the entry; fall back to null
+        // (RN ignores null style values) when the path is missing
+        const possibleColor = pathOr(null, value.split("."), entry);
+
+        acc[key] = possibleColor;
+
+        return acc;
+      }
+
+      // 3. Default Case: Treat as a raw color string
+      acc[key] = value;
+
+      return acc;
     },
-  }
-);
+    { ...style }
+  );
+};
 
 export function isVideoPreviewEnabled({
   enable_video_preview = false,
@@ -238,7 +277,7 @@ const recursiveCloneElement = (focused: boolean) => (element) => {
 };
 
 export const recursiveCloneElementsWithState = (focused: boolean, children) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 
@@ -252,7 +291,7 @@ export const cloneChildrenWithIds = (
   ids: string[],
   children: React.ReactElement[]
 ) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -265,14 +265,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) {
@@ -346,11 +344,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 +470,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,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

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

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;
+};