@applicaster/zapp-react-native-ui-components 15.0.0-rc.13 → 15.0.0-rc.132

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/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/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,
@@ -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";
@@ -56,15 +55,11 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
-import {
-  PlayerAnimationStateEnum,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
 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>;
@@ -243,14 +238,11 @@ 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();
 
-  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
-    useModalAnimationContext();
-
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -271,7 +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(() => {
+    return (
+      playerManager.getPluginConfiguration() ||
+      R.prop("__plugin_configuration", Player)
+    );
+  }, [playerManager.isRegistered()]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -339,12 +338,6 @@ const PlayerContainerComponent = (props: Props) => {
       playerContainerLogger.error(errorObj);
 
       setState({ error: errorObj });
-
-      if (!isTvOS) {
-        setTimeout(() => {
-          close();
-        }, 800);
-      }
     },
     [close]
   );
@@ -463,13 +456,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]);
@@ -482,8 +468,6 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
-      } else {
-        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -671,44 +655,39 @@ 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() &&
-                          !startComponentsAnimation &&
-                          !isActiveGesture
-                        }
-                        entry={item}
-                        fullscreen={mode === VideoModalMode.FULLSCREEN}
-                        inline={inline}
-                        isModal={isModal}
-                        isTabletPortrait={appData.isTabletPortrait}
-                        muted={false}
-                        playableItem={item}
-                        playerEvent={playerEvent}
-                        playerId={state.playerId}
-                        pluginConfiguration={pluginConfiguration}
-                        ref={playerRef}
-                        toggleFullscreen={toggleFullscreen}
-                        style={videoStyle}
-                        playNextData={playNextData}
-                        setNextVideoPreloadThresholdPercentage={
-                          setNextVideoPreloadThresholdPercentage
-                        }
-                        startComponentsAnimation={startComponentsAnimation}
-                      >
-                        {renderApplePlayer(applePlayerProps)}
-                      </Player>
+                      {!Player ? 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}
                   </View>
                   {/* Components container */}
                   {isInlineTV && context.showComponentsContainer ? (

package/Components/PlayerImageBackground/index.tsx

@@ -2,12 +2,6 @@ import React, { PropsWithChildren } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
@@ -25,30 +19,17 @@ const PlayerImageBackgroundComponent = ({
   style,
   imageStyle,
   imageKey,
-  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
     [imageKey, entry]
   );
 
-  const { playerAnimationState } = useModalAnimationContext();
-
   if (!source) return <>{children}</>;
 
   return (
-    <View
-      style={
-        playerAnimationState === PlayerAnimationStateEnum.maximize
-          ? defaultImageDimensions
-          : style
-      }
-    >
-      <AnimationComponent
-        style={style}
-        animationType={ComponentAnimationType.player}
-        additionalData={defaultImageDimensions}
-      >
+    <View style={style}>
+      <View style={style}>
         <ImageBackground
           resizeMode="cover"
           style={imageSize}
@@ -57,7 +38,7 @@ const PlayerImageBackgroundComponent = ({
         >
           {children}
         </ImageBackground>
-      </AnimationComponent>
+      </View>
     </View>
   );
 };

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

@@ -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";
 

package/Components/River/RefreshControl.tsx

@@ -5,6 +5,8 @@ import {
   StyleSheet,
 } from "react-native";
 import * as R from "ramda";
+import { path } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 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";
@@ -14,6 +16,7 @@ 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 { useGetUrlInflater } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -62,31 +65,51 @@ export const usePullToRefresh = (
 
   const [refreshing, setRefreshing] = React.useState(false);
 
-  const feeds: string[] =
-    riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
-    [];
+  const feedSources = React.useMemo(
+    () =>
+      (riverComponents || [])
+        .map((riverComponent) => ({
+          source: path(["data", "source"], riverComponent),
+          mapping: path(["data", "mapping"], riverComponent),
+        }))
+        .filter(({ source }) => !isNilOrEmpty(source)),
+    [riverComponents]
+  );
 
-  const feedsLength = feeds.length;
+  const feedsLength = feedSources.length;
 
   const [requestsCompletedCounter, setRequestsCompletedCounter] =
     React.useState(0);
 
   const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+  const urlInflater = useGetUrlInflater();
 
   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);
-          },
-        });
+      feedSources.forEach(({ source, mapping }) => {
+        const inflatedUrl = urlInflater(source, mapping);
+
+        if (inflatedUrl) {
+          loadPipesDataDispatcher(inflatedUrl, {
+            silentRefresh: true,
+            clearCache: true,
+            callback: () => {
+              setRequestsCompletedCounter(R.inc);
+            },
+          });
+        } else {
+          setRequestsCompletedCounter(R.inc);
+        }
       });
     }
-  }, [refreshing, isPipesV1, feeds, loadPipesDataDispatcher]);
+  }, [
+    refreshing,
+    isPipesV1,
+    feedSources,
+    loadPipesDataDispatcher,
+    urlInflater,
+  ]);
 
   React.useEffect(() => {
     if (requestsCompletedCounter === feedsLength) {

package/Components/River/RiverItem.tsx

@@ -14,6 +14,7 @@ import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import type { BehaviorSubject } from "rxjs";
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -112,33 +113,38 @@ function RiverItemComponent(props: RiverItemType) {
     CellRenderer = undefined;
   }
 
-  React.useEffect(() => {
-    riverLogger.log({
-      message: "mounting component",
-      data: { item, feedUrl, Component, CellRenderer },
-      jsOnly: true,
-    });
+  const isComponentMissing = isNilOrEmpty(Component);
 
-    if (!CellRenderer && !isGroup(item)) {
+  /**
+   * TODO: Move this plugin existence check further up the stack (before ComponentsMap).
+   * Filtering items at the list-rendering or data-processing level would prevent
+   * mounting RiverItem entirely for missing components.
+   */
+  React.useEffect(() => {
+    if (isComponentMissing) {
       riverLogger.warning({
-        message: "Cell Renderer is null - will fallback to default cell",
-        data: { item, CellRenderer },
+        message: `Component ${item.component_type} is null - skipping rendering`,
+      });
+
+      onLoadFinished(index);
+    } else {
+      riverLogger.log({
+        message: "mounting component",
+        data: { item, feedUrl, Component, CellRenderer },
         jsOnly: true,
       });
+
+      if (!CellRenderer && !isGroup(item)) {
+        riverLogger.warning({
+          message: "Cell Renderer is null - will fallback to default cell",
+          data: { item, CellRenderer },
+          jsOnly: true,
+        });
+      }
     }
   }, []);
 
-  if (!readyToBeDisplayed) {
-    return null;
-  }
-
-  if (Component === null || typeof Component === "undefined") {
-    riverLogger.warning({
-      message: `Component ${item.component_type} is null - skipping rendering`,
-    });
-
-    onLoadFinished(index);
-
+  if (!readyToBeDisplayed || isComponentMissing) {
     return null;
   }