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

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

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { DataProvider } from "../../DefaultComponents/DataProvider";
+import { cloneChildrenWithIds } from "..";
+
+const Probe = () => null;
+
+describe("cloneChildrenWithIds", () => {
+  it("injects next focus props into plain children", () => {
+    const children = [
+      <Probe key="one" />,
+      <Probe key="two" />,
+      <Probe key="three" />,
+    ];
+
+    const result = cloneChildrenWithIds(["id-1", "id-2", "id-3"], children);
+
+    expect(result[0].props.nextFocusLeft).toBeUndefined();
+    expect(result[0].props.nextFocusRight).toBe("id-2");
+    expect(result[1].props.nextFocusLeft).toBe("id-1");
+    expect(result[1].props.nextFocusRight).toBe("id-3");
+    expect(result[2].props.nextFocusLeft).toBe("id-2");
+    expect(result[2].props.nextFocusRight).toBeUndefined();
+  });
+
+  it("injects next focus props into DataProvider-wrapped children", () => {
+    const children = [
+      <DataProvider key="one" entry={{ id: "entry-1" }}>
+        <Probe suffixId="button_1" />
+      </DataProvider>,
+      <DataProvider key="two" entry={{ id: "entry-2" }}>
+        <Probe suffixId="button_2" />
+      </DataProvider>,
+    ];
+
+    const result = cloneChildrenWithIds(["id-1", "id-2"], children);
+
+    expect(result[0].props.children.props.nextFocusLeft).toBeUndefined();
+    expect(result[0].props.children.props.nextFocusRight).toBe("id-2");
+    expect(result[1].props.children.props.nextFocusLeft).toBe("id-1");
+    expect(result[1].props.children.props.nextFocusRight).toBeUndefined();
+  });
+});

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

@@ -13,6 +13,7 @@ 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 { DataProvider } from "../DefaultComponents/DataProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -126,10 +127,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 +180,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 +200,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;
@@ -202,17 +248,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) => {
+export const cloneChildrenWithIds = (
+  ids: string[],
+  children: React.ReactElement[]
+) => {
   if (R.isNil(children) || R.isEmpty(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 +323,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) {
@@ -448,13 +454,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 +466,8 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
+      } else {
+        navigator.minimiseVideoModal();
       }
     }
 
@@ -654,7 +655,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {Player ? (
+                      {!Player ? null : (
                         <Player
                           source={{
                             uri,
@@ -669,7 +670,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 +686,7 @@ const PlayerContainerComponent = (props: Props) => {
                         >
                           {renderApplePlayer(applePlayerProps)}
                         </Player>
-                      ) : null}
+                      )}
                     </PlayerFocusableWrapperView>
                   </View>
                   {/* Components container */}