@applicaster/zapp-react-native-ui-components 15.1.0-rc.8 → 16.0.0-alpha.1011304583

package/Components/MasterCell/utils/__tests__/useFilterChildren.test.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { renderHook } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { DataProvider } from "../../DefaultComponents/DataProvider";
+import { useFilterChildren } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(),
+}));
+
+const mockUseActions = useActions as jest.Mock;
+const Probe = () => null;
+
+describe("useFilterChildren", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("filters DataProvider-wrapped button children using the wrapped button props", () => {
+    const available = jest.fn(() => true);
+    const unavailable = jest.fn(() => false);
+
+    mockUseActions.mockReturnValue({
+      actions: {
+        available_action: {
+          module: {
+            context: {
+              _currentValue: {
+                isActionAvailable: available,
+              },
+            },
+          },
+        },
+        unavailable_action: {
+          module: {
+            context: {
+              _currentValue: {
+                isActionAvailable: unavailable,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    const availableItem = { id: "entry-1" };
+    const unavailableItem = { id: "entry-2" };
+
+    const children = [
+      <DataProvider key="available" entry={availableItem}>
+        <Probe
+          entry={availableItem}
+          pluginIdentifier="available_action"
+          suffixId="button_1"
+          cellUUID="cell-1"
+        />
+      </DataProvider>,
+      <DataProvider key="unavailable" entry={unavailableItem}>
+        <Probe
+          entry={unavailableItem}
+          pluginIdentifier="unavailable_action"
+          suffixId="button_2"
+          cellUUID="cell-1"
+        />
+      </DataProvider>,
+    ];
+
+    const { result } = renderHook(() => useFilterChildren(children));
+
+    expect(result.current).toHaveLength(1);
+
+    expect(result.current[0].props.children.props.pluginIdentifier).toBe(
+      "available_action"
+    );
+
+    expect(available).toHaveBeenCalledWith(availableItem);
+    expect(unavailable).toHaveBeenCalledWith(unavailableItem);
+  });
+});

package/Components/MasterCell/utils/index.ts

@@ -1,21 +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;
   }
 
@@ -27,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: {
@@ -43,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;
   }
@@ -61,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;
@@ -85,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,
@@ -126,10 +166,50 @@ export function isVideoPreviewEnabled({
   return enable_video_preview && !R.isEmpty(player_screen_id);
 }
 
+export const unwrapDataProviderChild = (
+  child: React.ReactElement
+): React.ReactElement => {
+  if ((child as any)?.type !== DataProvider) {
+    return child;
+  }
+
+  const [wrappedChild] = React.Children.toArray((child as any).props.children);
+
+  return (
+    React.isValidElement(wrappedChild) ? wrappedChild : child
+  ) as React.ReactElement;
+};
+
+/**
+ * Resolves the entry value passed by DataProvider.
+ * Prefer the direct `entry` prop and fall back to `dataProviderProps[_dataKey]`
+ * for older wrappers that still read from namespaced provider props.
+ */
+const getEntryFromProps = (props: {
+  dataProviderProps?: {
+    _dataKey: string;
+    [key: string]: unknown;
+  };
+  entry?: any;
+}) => {
+  const dataProviderProps = props.dataProviderProps;
+
+  return (
+    props.entry ??
+    (dataProviderProps?._dataKey
+      ? dataProviderProps[dataProviderProps._dataKey]
+      : undefined)
+  );
+};
+
 export const useFilterChildren = <
   T extends {
     props: {
-      item: any;
+      dataProviderProps?: {
+        _dataKey: string;
+        [key: string]: unknown;
+      };
+      entry?: any;
       pluginIdentifier: string;
     };
   },
@@ -139,8 +219,13 @@ export const useFilterChildren = <
   const actions = useActions("");
 
   const filteredChildren = children.filter((child) => {
-    const item = child.props.item;
-    const actionIdentifier = child.props.pluginIdentifier;
+    const wrappedChild = unwrapDataProviderChild(
+      child as unknown as React.ReactElement
+    ) as unknown as T;
+
+    const item = getEntryFromProps(wrappedChild.props);
+
+    const actionIdentifier = wrappedChild.props.pluginIdentifier;
     const action = actions.actions[actionIdentifier];
 
     // context value of specific plugin
@@ -154,7 +239,7 @@ export const useFilterChildren = <
 
     masterCellLogger.error({
       message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
-      data: { item, action: child.props.pluginIdentifier },
+      data: { item, action: wrappedChild.props.pluginIdentifier },
     });
 
     return false;
@@ -192,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;
   }
 
@@ -202,17 +287,42 @@ export const recursiveCloneElementsWithState = (focused: boolean, children) => {
 const next = (currentIndex, items) => items[currentIndex + 1];
 const previous = (currentIndex, items) => items[currentIndex - 1];
 
-export const cloneElementsWithIds = (ids, children) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+export const cloneChildrenWithIds = (
+  ids: string[],
+  children: React.ReactElement[]
+) => {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 
-  return React.Children.map(children, (element, index) =>
-    React.cloneElement(element, {
-      nextFocusLeft: previous(index, ids),
-      nextFocusRight: next(index, ids),
-    })
-  );
+  return React.Children.map(children, (element, index) => {
+    const nextFocusLeft = previous(index, ids);
+    const nextFocusRight = next(index, ids);
+
+    if (element?.type !== DataProvider) {
+      return React.cloneElement(element, {
+        nextFocusLeft,
+        nextFocusRight,
+      });
+    }
+
+    const wrappedChild = unwrapDataProviderChild(element) as React.ReactElement<
+      Record<string, unknown>
+    >;
+
+    if (!React.isValidElement(wrappedChild)) {
+      return element;
+    }
+
+    const injectedWrappedChild = React.cloneElement(wrappedChild, {
+      nextFocusLeft,
+      nextFocusRight,
+    });
+
+    return React.cloneElement(element, {
+      children: injectedWrappedChild,
+    });
+  });
 };
 
 export const getFocusedButtonId = (focusable) => {
@@ -252,10 +362,9 @@ export const useCellState = ({
 export const hasFocusableInsideBuilder = (elementsBuilder) => (item) => {
   const elements = elementsBuilder({ entry: item });
 
-  return R.anyPass([
-    hasElementsSpecificViewType("ButtonContainerView"),
-    hasElementsSpecificViewType("FocusableView"),
-  ])(elements);
+  return R.anyPass([hasElementsSpecificViewType("ButtonContainerView")])(
+    elements
+  );
 };
 
 export function getEntryState(state, selected) {

package/Components/OfflineHandler/NotificationView/NotificationView.tsx

@@ -8,7 +8,7 @@ import {
   TouchableWithoutFeedback,
 } from "react-native";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { useNotificationHeight } from "../utils";
@@ -46,7 +46,7 @@ export const NotificationView = ({
   online = true,
   dismiss,
 }: Props) => {
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
   const { statusHeight, notificationHeight } = useNotificationHeight();
 
   const offlinePlugin = R.find(

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -8,25 +8,24 @@ import {
   offlinePhrase,
 } from "../NotificationView";
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: () => ({
-    plugins: [
-      {
-        name: "offline experience",
-        identifier: "offline-experience",
-        type: "general",
-        module: {
-          useOfflineExperienceConfiguration: () => ({
-            configurationFields: {},
-            localizations: {
-              offline_toast_message: "No internet connection",
-              online_toast_message: "You are back online",
-            },
-          }),
-        },
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  usePlugins: () => [
+    {
+      name: "offline experience",
+      identifier: "offline-experience",
+      type: "general",
+      module: {
+        useOfflineExperienceConfiguration: () => ({
+          configurationFields: {},
+          localizations: {
+            offline_toast_message: "No internet connection",
+            online_toast_message: "You are back online",
+          },
+        }),
       },
-    ],
-  }),
+    },
+  ],
 }));
 
 jest.mock("react-native-safe-area-context", () => ({

package/Components/OfflineHandler/__tests__/index.test.tsx

@@ -8,36 +8,45 @@ const mockPreviousValue = null;
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/connection"
+    ),
     useConnectionInfo: jest.fn(() => mockConnectionStatus),
   };
 });
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
   return {
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/utils"
+    ),
     usePrevious: jest.fn(() => mockPreviousValue),
   };
 });
 
+const mock_storeObj = {
+  plugins: [
+    {
+      name: "offline experience",
+      identifier: "offline-experience",
+      type: "general",
+      module: {
+        useOfflineExperienceConfiguration: () => ({
+          configurationFields: {},
+          localizations: {
+            offline_toast_message: "No internet connection",
+            online_toast_message: "You are back online",
+          },
+        }),
+      },
+    },
+  ],
+};
+
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
-  usePickFromState: () => ({
-    plugins: [
-      {
-        name: "offline experience",
-        identifier: "offline-experience",
-        type: "general",
-        module: {
-          useOfflineExperienceConfiguration: () => ({
-            configurationFields: {},
-            localizations: {
-              offline_toast_message: "No internet connection",
-              online_toast_message: "You are back online",
-            },
-          }),
-        },
-      },
-    ],
-  }),
+  usePlugins: () => mock_storeObj.plugins,
+  usePickFromState: () => ({}),
 }));
 
 jest.mock("react-native-safe-area-context", () => ({

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -17,7 +17,7 @@ import {
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import {
   useBackHandler,
   useNavigation,
@@ -59,6 +59,7 @@ import {
   PlayerNativeCommandTypes,
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
+import { useAppData } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -237,7 +238,7 @@ const PlayerContainerComponent = (props: Props) => {
   const [isLoadingNextVideo, setIsLoadingNextVideo] = React.useState(false);
 
   const navigator = useNavigation();
-  const { appData } = usePickFromState(["appData"]);
+  const { isTabletPortrait } = useAppData();
   const prevItemId = usePrevious(item?.id);
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
@@ -262,9 +263,14 @@ const PlayerContainerComponent = (props: Props) => {
 
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
+  }, [isModal, state.playerId, showNavBar, navigator]);
+
+  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) {
@@ -338,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);
     }
@@ -448,13 +458,6 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, []);
 
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
-
   const disableMiniPlayer = React.useMemo(() => {
     return pluginConfiguration?.disable_mini_player_when_inline;
   }, [pluginConfiguration]);
@@ -467,6 +470,8 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
+      } else {
+        navigator.minimiseVideoModal();
       }
     }
 
@@ -654,7 +659,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {Player ? (
+                      {!Player ? null : (
                         <Player
                           source={{
                             uri,
@@ -669,7 +674,7 @@ const PlayerContainerComponent = (props: Props) => {
                           fullscreen={mode === VideoModalMode.FULLSCREEN}
                           inline={inline}
                           isModal={isModal}
-                          isTabletPortrait={appData.isTabletPortrait}
+                          isTabletPortrait={isTabletPortrait}
                           muted={false}
                           playableItem={item}
                           playerEvent={playerEvent}
@@ -685,7 +690,7 @@ const PlayerContainerComponent = (props: Props) => {
                         >
                           {renderApplePlayer(applePlayerProps)}
                         </Player>
-                      ) : null}
+                      )}
                     </PlayerFocusableWrapperView>
                   </View>
                   {/* Components container */}