@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 16.0.0-rc.1

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/Navigator/StackNavigator.tsx

@@ -6,11 +6,16 @@ import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigati
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { StyleSheet } from "react-native";
 
 import { Screen } from "../Screen/TV/index.web";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
+
 type Components = {
   NavBar: React.ComponentType<any>;
   Background: React.ComponentType<any>;
@@ -41,6 +46,7 @@ export const StackNavigator = ({ Components }: Props) => {
         preferredFocus={isLast(index, mainStack.length)}
         excludeFromFocusSearching
         key={routeId}
+        style={styles.container}
       >
         <ScreenDataContext.Provider value={state}>
           <PathnameContext.Provider value={route}>

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -46,7 +46,6 @@ import {
   PlayerContainerContextProvider,
 } from "./PlayerContainerContext";
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
-import { ErrorDisplay } from "./ErrorDisplay";
 import { PlayerFocusableWrapperView } from "./WappersView/PlayerFocusableWrapperView";
 import { FocusableGroupMainContainerId } from "./index";
 import { isPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypeMatchers";
@@ -61,7 +60,6 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
-import { useRestrictMobilePlayback } from "./useRestrictMobilePlayback";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -111,7 +109,7 @@ const withBorderHack = () => {
     /* @HACK: see GH#7269 */
     return {
       borderWidth: 1,
-      borderColor: "transparent",
+      borderColor: "black",
     };
   }
 
@@ -274,13 +272,6 @@ const PlayerContainerComponent = (props: Props) => {
     );
   }, [playerManager.isRegistered()]);
 
-  const { isRestricted } = useRestrictMobilePlayback({
-    player,
-    entry: item,
-    pluginConfiguration,
-    close,
-  });
-
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
@@ -347,12 +338,6 @@ const PlayerContainerComponent = (props: Props) => {
       playerContainerLogger.error(errorObj);
 
       setState({ error: errorObj });
-
-      if (!isTvOS) {
-        setTimeout(() => {
-          close();
-        }, 800);
-      }
     },
     [close]
   );
@@ -670,7 +655,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {isRestricted ? null : (
+                      {!Player ? null : (
                         <Player
                           source={{
                             uri,
@@ -703,8 +688,6 @@ const PlayerContainerComponent = (props: Props) => {
                         </Player>
                       )}
                     </PlayerFocusableWrapperView>
-
-                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
                   {isInlineTV && context.showComponentsContainer ? (

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { PreloaderWrapper } from "..";
+
+describe("PreloaderWrapper", () => {
+  it("renders children when preloader is hidden", () => {
+    const { getByText } = render(
+      <PreloaderWrapper showPreloader={false}>
+        <Text>content</Text>
+      </PreloaderWrapper>
+    );
+
+    expect(getByText("content")).toBeDefined();
+  });
+
+  it("renders null when preloader is shown", () => {
+    const { queryByText } = render(
+      <PreloaderWrapper showPreloader>
+        <Text>content</Text>
+      </PreloaderWrapper>
+    );
+
+    expect(queryByText("content")).toBeNull();
+  });
+});

package/Components/PreloaderWrapper/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+type PreloaderWrapperProps = {
+  showPreloader?: boolean;
+  children?: React.ReactNode;
+};
+
+export const PreloaderWrapper: React.FC<PreloaderWrapperProps> = ({
+  showPreloader = false,
+  children,
+}) => {
+  return !showPreloader ? children : null;
+};
+
+export default PreloaderWrapper;

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;

package/Components/River/RefreshControl.tsx

@@ -4,7 +4,7 @@ import {
   RefreshControl as RNRefreshControl,
   StyleSheet,
 } from "react-native";
-import * as R from "ramda";
+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";
@@ -13,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";
@@ -53,62 +53,6 @@ const getBrightness = (RGBcolor) => {
   );
 };
 
-export const usePullToRefresh = (
-  riverComponents,
-  pullToRefreshPipesV1RefreshingStateUpdater,
-  refreshingPipesV1
-) => {
-  const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
-
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const feeds: string[] =
-    riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
-    [];
-
-  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 = () => {
@@ -137,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();
@@ -164,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]