@applicaster/zapp-react-native-ui-components 15.0.0-alpha.8680244503 → 15.0.0-alpha.9102699023

package/Components/MasterCell/hoc/__tests__/withAsyncRender.test.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Text, View } from "react-native";
+import { withAsyncRenderHOC } from "../withAsyncRender";
+
+describe("withAsyncRenderHOC", () => {
+  // Test component that requires onAsyncRender
+  const TestComponent = ({
+    onAsyncRender,
+    text,
+  }: {
+    onAsyncRender: () => void;
+    text?: string;
+  }) => {
+    React.useEffect(() => {
+      onAsyncRender();
+    }, [onAsyncRender]);
+
+    return (
+      <View>
+        <Text>{text || "Test"}</Text>
+      </View>
+    );
+  };
+
+  it("should wrap component and provide onAsyncRender callback", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="Hello" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("Hello")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementRegistrate on mount", () => {
+    const mockRegistrate = jest.fn();
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    render(<WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />);
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call emitAsyncElementLayout when onAsyncRender is called", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithAsyncCall = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Async Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithAsyncCall);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger onLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    view.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalled();
+  });
+
+  it("should return unsubscribe function from emitAsyncElementRegistrate", () => {
+    const mockUnsubscribe = jest.fn();
+    const mockRegistrate = jest.fn(() => mockUnsubscribe);
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const { unmount } = render(
+      <WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />
+    );
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+
+    // Unmount should trigger cleanup
+    unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+  });
+
+  it("should work without emitAsyncElementRegistrate prop", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="No Registration" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("No Registration")).toBeDefined();
+  });
+
+  it("should work without emitAsyncElementLayout prop", () => {
+    const ComponentWithLayout = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Test Layout</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithLayout);
+
+    const wrapper = render(<WrappedComponent />);
+
+    // Should not throw when calling onLayout without emitAsyncElementLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    expect(() => view.props.onLayout()).not.toThrow();
+  });
+
+  it("should pass through all other props to wrapped component", () => {
+    const ComponentWithProps = ({
+      customProp,
+      anotherProp,
+    }: {
+      onAsyncRender: () => void;
+      customProp: string;
+      anotherProp: number;
+    }) => {
+      return (
+        <View>
+          <Text>{customProp}</Text>
+          <Text>{anotherProp}</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithProps);
+
+    const wrapper = render(
+      <WrappedComponent customProp="custom value" anotherProp={42} />
+    );
+
+    expect(wrapper.getByText("custom value")).toBeDefined();
+    expect(wrapper.getByText("42")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementLayout multiple times if onAsyncRender is called multiple times", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithMultipleCalls = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View>
+          <View onLayout={onAsyncRender} testID="view1">
+            <Text>First</Text>
+          </View>
+          <View onLayout={onAsyncRender} testID="view2">
+            <Text>Second</Text>
+          </View>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithMultipleCalls);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger both onLayout callbacks
+    const view1 = wrapper.getByTestId("view1");
+    const view2 = wrapper.getByTestId("view2");
+
+    view1.props.onLayout();
+    view2.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalledTimes(2);
+  });
+
+  it("should handle components that use onAsyncRender in effects", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithEffect = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      React.useEffect(() => {
+        // Simulate async operation completing
+        const timer = setTimeout(() => {
+          onAsyncRender();
+        }, 0);
+
+        return () => clearTimeout(timer);
+      }, [onAsyncRender]);
+
+      return (
+        <View>
+          <Text>Effect Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithEffect);
+
+    render(<WrappedComponent emitAsyncElementLayout={mockLayout} />);
+
+    // The effect should have been triggered
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        expect(mockLayout).toHaveBeenCalled();
+        resolve(true);
+      }, 10);
+    });
+  });
+});

package/Components/MasterCell/hoc/withAsyncRender.tsx

@@ -6,12 +6,12 @@ type withAsyncRenderHOCProps = {
   emitAsyncElementLayout?: () => void;
 };
 
-type withAsyncRenderHOCT = (
-  Component: React.ComponentType<{ onAsyncRender: () => void }>
-) => React.FC<withAsyncRenderHOCProps>;
-
-export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
-  const WithAsyncRender = (props: withAsyncRenderHOCProps) => {
+export const withAsyncRenderHOC = <P extends { onAsyncRender: () => void }>(
+  Component: React.ComponentType<P>
+): React.FC<Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps> => {
+  const WithAsyncRender = (
+    props: Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps
+  ) => {
     const { emitAsyncElementRegistrate = noop, emitAsyncElementLayout = noop } =
       props;
 
@@ -27,7 +27,9 @@ export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
       }
     }, [emitAsyncElementLayout]);
 
-    return <Component {...props} onAsyncRender={onAsyncRender} />;
+    return (
+      <Component {...(props as unknown as P)} onAsyncRender={onAsyncRender} />
+    );
   };
 
   return WithAsyncRender;

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -10,13 +12,6 @@ type Props = {
 
 const NOTIF_DURATION = 4500;
 
-export const ONLINE_MSG = "You are back online";
-
-export const OFFLINE_MSG = "No internet connection";
-
-const EXTRA_OFFLINE_MSG = "Please check your connection";
-const EXTRA_ONLINE_MSG = "Feel free to continue where you left off";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +42,9 @@ const styles: Record<any, React.CSSProperties> = {
 export const NotificationView = (props: Props) => {
   const { children, hidden, dismiss, previousOnline, online } = props;
 
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+
   const [open, setOpen] = React.useState<boolean | null>(null);
 
   const timeout = React.useRef<NodeJS.Timeout>();
@@ -84,8 +82,18 @@ export const NotificationView = (props: Props) => {
   }, [hidden, online]);
 
   const showOnlineMsg = wentOnline || online;
-  const MSG = showOnlineMsg ? ONLINE_MSG : OFFLINE_MSG;
-  const EXTRA_MSG = showOnlineMsg ? EXTRA_ONLINE_MSG : EXTRA_OFFLINE_MSG;
+
+  const MSG = showOnlineMsg
+    ? (theme?.online_notification_title ??
+      storedLocalizations?.online_notification_title)
+    : (theme?.offline_notification_title ??
+      storedLocalizations?.offline_notification_title);
+
+  const EXTRA_MSG = showOnlineMsg
+    ? (theme?.online_notification_subtitle ??
+      storedLocalizations?.online_notification_subtitle)
+    : (theme?.offline_notification_subtitle ??
+      storedLocalizations?.offline_notification_subtitle);
 
   return (
     <div onClick={onClose}>

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -9,12 +11,6 @@ type Props = {
 
 const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
 
-const ONLINE_TITLE = "You are back online";
-const ONLINE_SUBTITLE = "Feel free to continue where you left off";
-
-const OFFLINE_TITLE = "No internet connection";
-const OFFLINE_SUBTITLE = "Please check your connection";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +43,9 @@ let timer: NodeJS.Timeout;
 export const NotificationView = (props: Props) => {
   const { children, dismiss, previousOnline = true, online } = props;
 
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+
   const [shown, setShown] = React.useState<boolean>(false);
 
   const onClose = () => {
@@ -79,8 +78,17 @@ export const NotificationView = (props: Props) => {
     }
   }, [online, previousOnline]);
 
-  const title = online ? ONLINE_TITLE : OFFLINE_TITLE;
-  const subtitle = online ? ONLINE_SUBTITLE : OFFLINE_SUBTITLE;
+  const title = online
+    ? (theme?.online_notification_title ??
+      storedLocalizations?.online_notification_title)
+    : (theme?.offline_notification_title ??
+      storedLocalizations?.offline_notification_title);
+
+  const subtitle = online
+    ? (theme?.online_notification_subtitle ??
+      storedLocalizations?.online_notification_subtitle)
+    : (theme?.offline_notification_subtitle ??
+      storedLocalizations?.offline_notification_subtitle);
 
   return (
     <div onClick={onClose}>

package/Components/OfflineHandler/NotificationView/utils.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+
+export const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
+
+export const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
+
+export function useNetworkStatusLocalizations() {
+  const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
+    string,
+    string
+  > | null>(null);
+
+  React.useEffect(() => {
+    async function loadStoredLocalizations() {
+      try {
+        const stored = await sessionStorage.getItem(
+          NETWORK_STATUS_LOCALIZATIONS_KEY,
+          THEME_STORAGE_NAMESPACE
+        );
+
+        if (stored) {
+          setStoredLocalizations(stored);
+        }
+      } catch (error) {
+        console.error("Error loading network status localizations", error);
+      }
+    }
+
+    loadStoredLocalizations();
+  }, []);
+
+  return storedLocalizations;
+}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -61,6 +61,7 @@ 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>;
@@ -264,7 +265,20 @@ 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()]);
+
+  const { isRestricted } = useRestrictMobilePlayback({
+    player,
+    entry: item,
+    close,
+  });
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -456,13 +470,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]);
@@ -662,36 +669,38 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      <Player
-                        source={{
-                          uri,
-                          entry: item,
-                        }}
-                        focused={isInlineTV ? true : undefined}
-                        autoplay={true}
-                        controls={false}
-                        disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
-                        entry={item}
-                        fullscreen={mode === VideoModalMode.FULLSCREEN}
-                        inline={inline}
-                        isModal={isModal}
-                        isTabletPortrait={isTabletPortrait}
-                        muted={false}
-                        playableItem={item}
-                        playerEvent={playerEvent}
-                        playerId={state.playerId}
-                        pluginConfiguration={pluginConfiguration}
-                        ref={playerRef}
-                        toggleFullscreen={toggleFullscreen}
-                        style={videoStyle}
-                        playNextData={playNextData}
-                        setNextVideoPreloadThresholdPercentage={
-                          setNextVideoPreloadThresholdPercentage
-                        }
-                      >
-                        {renderApplePlayer(applePlayerProps)}
-                      </Player>
+                      {!Player || isRestricted ? null : (
+                        <Player
+                          source={{
+                            uri,
+                            entry: item,
+                          }}
+                          focused={isInlineTV ? true : undefined}
+                          autoplay={true}
+                          controls={false}
+                          disableCastAction={disableCastAction}
+                          docked={navigator.isVideoModalDocked()}
+                          entry={item}
+                          fullscreen={mode === VideoModalMode.FULLSCREEN}
+                          inline={inline}
+                          isModal={isModal}
+                          isTabletPortrait={isTabletPortrait}
+                          muted={false}
+                          playableItem={item}
+                          playerEvent={playerEvent}
+                          playerId={state.playerId}
+                          pluginConfiguration={pluginConfiguration}
+                          ref={playerRef}
+                          toggleFullscreen={toggleFullscreen}
+                          style={videoStyle}
+                          playNextData={playNextData}
+                          setNextVideoPreloadThresholdPercentage={
+                            setNextVideoPreloadThresholdPercentage
+                          }
+                        >
+                          {renderApplePlayer(applePlayerProps)}
+                        </Player>
+                      )}
                     </PlayerFocusableWrapperView>
 
                     {state.error ? <ErrorDisplay error={state.error} /> : null}

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -0,0 +1,131 @@
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import NetInfo from "@react-native-community/netinfo";
+
+import { useCallback, useEffect, useMemo, useRef, useState } 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 { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { log_info } from "./logger";
+import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+type RestrictMobilePlaybackProps = {
+  player?: Player;
+  entry?: ZappEntry;
+  close: () => void;
+};
+
+export const useRestrictMobilePlayback = ({
+  player,
+  entry,
+  close,
+}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
+  const dialogVisibleRef = useRef<boolean>(false);
+  const theme = useTheme();
+  const plugins = usePlugins();
+
+  const restrictMobilePlugin = useMemo(
+    () =>
+      plugins.find((p) => p.identifier === "quick-brick-hook-restrict-mobile"),
+    [plugins]
+  );
+
+  const localizations = useMemo(
+    () => restrictMobilePlugin?.configuration?.localizations,
+    [restrictMobilePlugin]
+  );
+
+  const localize = useCallback(
+    (key: string) => {
+      const l = localizations && getLocalizations({ localizations });
+
+      return (l && l[key]) || "";
+    },
+    [localizations]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (isTV()) {
+        return;
+      }
+
+      dialogVisibleRef.current = false;
+    };
+  }, []);
+
+  const isConnectionRestricted = useMemo(() => {
+    if (isTV()) {
+      return false;
+    }
+
+    // Only restrict if the plugin exists
+    if (!restrictMobilePlugin) {
+      return false;
+    }
+
+    return player && isTrue(entry?.extensions?.connection_restricted);
+  }, [player, entry, restrictMobilePlugin]);
+
+  const [isRestricted, setIsRestricted] = useState<boolean>(
+    isConnectionRestricted
+  );
+
+  useEffect(() => {
+    if (!isConnectionRestricted) {
+      return;
+    }
+
+    const stopPlayer = () => {
+      log_info(
+        "Stopping player due to mobile restriction, connection_restricted: true"
+      );
+
+      player?.closeNativePlayer();
+      playerManager?.invokeHandler("close");
+
+      dialogVisibleRef.current = true;
+
+      showAlertDialog({
+        title:
+          localize("restrict_mobile_playback_error_title") ||
+          "Restricted Connection Type",
+        message:
+          localize("restrict_mobile_playback_error_message") ||
+          "This content can only be viewed over a Wi-Fi or LAN network.",
+        okButtonText: theme.ok_button || "OK",
+        completion: () => {
+          dialogVisibleRef.current = false;
+
+          close();
+        },
+      });
+    };
+
+    return NetInfo.addEventListener((state) => {
+      if (state.type === "cellular") {
+        setIsRestricted(true);
+
+        if (dialogVisibleRef.current) {
+          return;
+        }
+
+        stopPlayer();
+      } else {
+        setIsRestricted(false);
+      }
+    });
+  }, [
+    close,
+    entry?.extensions?.connection_restricted,
+    localizations,
+    localize,
+    player,
+    theme.ok_button,
+    isConnectionRestricted,
+  ]);
+
+  return { isRestricted };
+};

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -23,6 +23,7 @@ import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useShallow } from "zustand/react/shallow";
+import { emitScrollEndReached } from "@applicaster/zapp-react-native-ui-components/events";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
@@ -73,6 +74,7 @@ function ComponentsMapComponent(props: Props) {
 
   const flatListRef = React.useRef<FlatList | null>(null);
   const flatListWrapperRef = React.useRef<View | null>(null);
+  const hasUserScrolledRef = React.useRef(false);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -236,6 +238,8 @@ function ComponentsMapComponent(props: Props) {
   }, []);
 
   const onScroll = React.useCallback((event) => {
+    hasUserScrolledRef.current = true;
+
     const {
       nativeEvent: {
         contentOffset: { y },
@@ -277,6 +281,7 @@ function ComponentsMapComponent(props: Props) {
           >
             <ViewportTracker>
               <FlatList
+                testID="components-map-flat-list"
                 ref={(ref) => {
                   flatListRef.current = ref;
                 }}
@@ -308,6 +313,17 @@ function ComponentsMapComponent(props: Props) {
                 onScrollEndDrag={_onScrollEndDrag}
                 scrollEventThrottle={16}
                 {...scrollViewExtraProps}
+                onEndReached={
+                  /* When wrapped in a parent ScrollView (e.g. tabs),
+                  this FlatList doesn't scroll so onEndReached can fire repeatedly;
+                  skip it here and let the parent ScrollView emit scroll-end instead. */
+                  isScreenWrappedInContainer
+                    ? undefined
+                    : () => {
+                        if (!hasUserScrolledRef.current) return;
+                        emitScrollEndReached();
+                      }
+                }
               />
             </ViewportTracker>
           </ScreenLoadingMeasurements>

package/Components/River/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react-native";
 import { BehaviorSubject } from "rxjs";
 import { useLoadingState } from "../useLoadingState";