@applicaster/zapp-react-native-ui-components 15.0.0-alpha.9361645236 → 15.0.0-alpha.9423906047

package/Components/MeasurmentsPortal/__tests__/MeasurementsPortal.test.tsx

@@ -0,0 +1,355 @@
+import React, { useContext } from "react";
+import { View, Text } from "react-native";
+import { render, fireEvent, waitFor, act } from "@testing-library/react-native";
+
+import {
+  MeasurementsPortal,
+  MeasurementsPortalContextProvider,
+  MeasurementPortalContext,
+} from "../MeasurementsPortal";
+
+// Mock uuid
+jest.mock("uuid", () => ({
+  v4: jest.fn(() => "mock-uuid-key"),
+}));
+
+describe("MeasurementsPortal", () => {
+  const mockOnLayout = jest.fn();
+  const MockComponent = jest.fn(() => <View testID="mock-component" />);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders with correct testID", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    expect(getByTestId("MeasurementsPortal")).toBeTruthy();
+  });
+
+  it("renders the passed Component", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    expect(getByTestId("mock-component")).toBeTruthy();
+    expect(MockComponent).toHaveBeenCalled();
+  });
+
+  it("passes componentProps to the Component", () => {
+    const componentProps = {
+      testProp: "test-value",
+      anotherProp: 123,
+    };
+
+    render(
+      <MeasurementsPortal
+        Component={MockComponent}
+        onLayout={mockOnLayout}
+        componentProps={componentProps}
+      />
+    );
+
+    expect(MockComponent).toHaveBeenCalledWith(componentProps, {});
+  });
+
+  it("calls onLayout when layout changes", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    const container = getByTestId("MeasurementsPortal");
+    const wrapper = container.children[0] as any;
+
+    const layoutEvent = {
+      nativeEvent: {
+        layout: { width: 100, height: 200 },
+      },
+    };
+
+    fireEvent(wrapper, "layout", layoutEvent);
+
+    expect(mockOnLayout).toHaveBeenCalledWith(layoutEvent);
+  });
+
+  it("applies correct container styles", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    const container = getByTestId("MeasurementsPortal");
+
+    expect(container.props.style).toEqual({
+      position: "absolute",
+      opacity: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    });
+  });
+
+  it("renders wrapper with onLayout", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    const container = getByTestId("MeasurementsPortal");
+    const wrapper = container.children[0] as any;
+
+    expect(wrapper.props.onLayout).toBe(mockOnLayout);
+  });
+
+  it("works with different Component types", () => {
+    const CustomComponent = ({ title }: { title: string }) => (
+      <Text testID="custom-text">{title}</Text>
+    );
+
+    const props = { title: "Test Title" };
+
+    const { getByTestId, getByText } = render(
+      <MeasurementsPortal
+        Component={CustomComponent}
+        onLayout={mockOnLayout}
+        componentProps={props}
+      />
+    );
+
+    expect(getByTestId("custom-text")).toBeTruthy();
+    expect(getByText("Test Title")).toBeTruthy();
+  });
+
+  it("handles component without componentProps", () => {
+    render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    expect(MockComponent).toHaveBeenCalledWith({}, {});
+  });
+});
+
+describe("MeasurementsPortalContextProvider", () => {
+  const TestConsumer = () => {
+    const context = useContext(MeasurementPortalContext);
+
+    return (
+      <View testID="test-consumer">
+        <Text testID="measuring-status">
+          {context?.measuringInProgress ? "measuring" : "idle"}
+        </Text>
+      </View>
+    );
+  };
+
+  it("provides context to children", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortalContextProvider>
+        <TestConsumer />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByTestId("test-consumer")).toBeTruthy();
+    expect(getByTestId("measuring-status")).toBeTruthy();
+  });
+
+  it("initially sets measuringInProgress to false", () => {
+    const { getByText } = render(
+      <MeasurementsPortalContextProvider>
+        <TestConsumer />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByText("idle")).toBeTruthy();
+  });
+
+  it("renders MeasurementsPortal with default View component", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortalContextProvider>
+        <View />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByTestId("MeasurementsPortal")).toBeTruthy();
+  });
+
+  describe("measureComponent function", () => {
+    const TestMeasureComponent = () => {
+      const context = useContext(MeasurementPortalContext);
+      const [result, setResult] = React.useState<any>(null);
+
+      const handleMeasure = async () => {
+        if (context?.measureComponent) {
+          const measurement = await context.measureComponent(View, {
+            index: 0,
+            onLoadFinished: () => {},
+          });
+
+          setResult(measurement);
+        }
+      };
+
+      return (
+        <View testID="measure-component">
+          <Text testID="measuring-status">
+            {context?.measuringInProgress ? "measuring" : "idle"}
+          </Text>
+          <Text testID="measure-button" onPress={handleMeasure}>
+            Measure
+          </Text>
+          {result ? (
+            <Text testID="result">
+              {result.width}x{result.height}
+            </Text>
+          ) : null}
+        </View>
+      );
+    };
+
+    it("sets measuringInProgress to true when measureComponent is called", async () => {
+      const { getByTestId, getByText } = render(
+        <MeasurementsPortalContextProvider>
+          <TestMeasureComponent />
+        </MeasurementsPortalContextProvider>
+      );
+
+      expect(getByText("idle")).toBeTruthy();
+
+      await act(async () => {
+        fireEvent.press(getByTestId("measure-button"));
+      });
+
+      expect(getByText("measuring")).toBeTruthy();
+    });
+
+    it("can measure a component through the context", async () => {
+      const TestMeasureComponent = () => {
+        const context = useContext(MeasurementPortalContext);
+        const [measured, setMeasured] = React.useState(false);
+
+        React.useEffect(() => {
+          if (context?.measureComponent) {
+            context
+              .measureComponent(View, {
+                index: 5,
+                onLoadFinished: () => {},
+              })
+              .then(() => {
+                setMeasured(true);
+              });
+          }
+        }, [context]);
+
+        return (
+          <View testID="measure-component">
+            <Text testID="measure-status">
+              {measured ? "measured" : "not-measured"}
+            </Text>
+          </View>
+        );
+      };
+
+      const { getByText } = render(
+        <MeasurementsPortalContextProvider>
+          <TestMeasureComponent />
+        </MeasurementsPortalContextProvider>
+      );
+
+      // Initially should be not measured
+      expect(getByText("not-measured")).toBeTruthy();
+    });
+
+    it("handles error in onLoadFinished", async () => {
+      const ErrorComponent = ({ onLoadFinished }: any) => {
+        React.useEffect(() => {
+          // Simulate error
+          setTimeout(
+            () => onLoadFinished({ error: new Error("Test error") }),
+            10
+          );
+        }, [onLoadFinished]);
+
+        return <View testID="error-component" />;
+      };
+
+      const TestErrorFlow = () => {
+        const context = useContext(MeasurementPortalContext);
+        const [result, setResult] = React.useState<any>(null);
+
+        const handleMeasure = React.useCallback(async () => {
+          if (context?.measureComponent) {
+            const measurement = await context.measureComponent(ErrorComponent, {
+              index: 1,
+              onLoadFinished: () => {},
+            });
+
+            setResult(measurement);
+          }
+        }, [context]);
+
+        React.useEffect(() => {
+          handleMeasure();
+        }, [handleMeasure]);
+
+        return (
+          <View testID="error-flow">
+            {result ? (
+              <Text testID="error-result">
+                {result.width}x{result.height}
+              </Text>
+            ) : null}
+          </View>
+        );
+      };
+
+      const { queryByText } = render(
+        <MeasurementsPortalContextProvider>
+          <TestErrorFlow />
+        </MeasurementsPortalContextProvider>
+      );
+
+      // Wait for error handling
+      await waitFor(() => {
+        expect(queryByText("0x0")).toBeTruthy();
+      });
+    });
+  });
+});
+
+describe("MeasurementPortalContext", () => {
+  it("returns null when used outside of provider", () => {
+    const TestComponent = () => {
+      const context = useContext(MeasurementPortalContext);
+
+      return (
+        <Text testID="context-value">
+          {context ? "has-context" : "no-context"}
+        </Text>
+      );
+    };
+
+    const { getByText } = render(<TestComponent />);
+    expect(getByText("no-context")).toBeTruthy();
+  });
+
+  it("returns context value when used inside provider", () => {
+    const TestComponent = () => {
+      const context = useContext(MeasurementPortalContext);
+
+      return (
+        <Text testID="context-value">
+          {context ? "has-context" : "no-context"}
+        </Text>
+      );
+    };
+
+    const { getByText } = render(
+      <MeasurementsPortalContextProvider>
+        <TestComponent />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByText("has-context")).toBeTruthy();
+  });
+});

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,
@@ -60,6 +60,8 @@ import {
   PlayerNativeCommandTypes,
   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>;
@@ -238,7 +240,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();
@@ -263,7 +265,21 @@ const PlayerContainerComponent = (props: Props) => {
 
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
+  }, [isModal, state.playerId, showNavBar, navigator]);
+
+  const pluginConfiguration = React.useMemo(() => {
+    return (
+      playerManager.getPluginConfiguration() ||
+      R.prop("__plugin_configuration", Player)
+    );
+  }, [playerManager.isRegistered()]);
+
+  useRestrictMobilePlayback({
+    player,
+    entry: item,
+    pluginConfiguration,
+    close,
+  });
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -455,13 +471,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]);
@@ -675,7 +684,7 @@ const PlayerContainerComponent = (props: Props) => {
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}
                         isModal={isModal}
-                        isTabletPortrait={appData.isTabletPortrait}
+                        isTabletPortrait={isTabletPortrait}
                         muted={false}
                         playableItem={item}
                         playerEvent={playerEvent}

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -0,0 +1,62 @@
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import NetInfo from "@react-native-community/netinfo";
+
+import { useEffect } from "react";
+import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+export const useRestrictMobilePlayback = ({
+  player,
+  entry,
+  pluginConfiguration,
+  close,
+}: {
+  player?: Player;
+  entry?: ZappEntry;
+  pluginConfiguration?: Record<string, string>;
+  close: () => void;
+}) => {
+  const theme = useTheme();
+
+  const localizations = useLocalizedStrings({
+    localizations: pluginConfiguration?.localizations || {},
+  });
+
+  useEffect(() => {
+    if (isTV()) {
+      return;
+    }
+
+    if (!player || !entry?.extensions?.connection_restricted) {
+      return;
+    }
+
+    const stopPlayer = () => {
+      player.pause();
+
+      showAlertDialog({
+        title: localizations?.mobile_connection_restricted_alert_title || "N/A",
+        message:
+          localizations?.mobile_connection_restricted_alert_message || "N/A",
+        okButtonText: theme.ok_button || "OK",
+        completion: () => {
+          close();
+        },
+      });
+    };
+
+    return NetInfo.addEventListener((state) => {
+      if (state.type === "cellular") {
+        stopPlayer();
+      }
+    });
+  }, [
+    close,
+    entry?.extensions?.connection_restricted,
+    localizations,
+    player,
+    theme?.ok_button,
+  ]);
+};

package/Components/Screen/TV/index.web.tsx

@@ -9,9 +9,10 @@ import {
 import {
   useIsScreenActive,
   useNavigation,
+  useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useNavbarState,
   useScreenBackgroundColor,
@@ -102,7 +103,8 @@ export const Screen = ({ route, Components }: Props) => {
   }
 
   const navigator = useNavigation();
-  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
+  const plugins = usePlugins();
+  const rivers = useRivers();
 
   const pathAttributes = getPathAttributes({ pathname: route });
   const routeState = navigator.getStackForPathname(route);