@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1692821627 → 15.0.0-alpha.2004137882

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,
@@ -56,15 +56,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 +239,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);
   };
@@ -482,8 +475,6 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
-      } else {
-        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -680,16 +671,12 @@ const PlayerContainerComponent = (props: Props) => {
                         autoplay={true}
                         controls={false}
                         disableCastAction={disableCastAction}
-                        docked={
-                          navigator.isVideoModalDocked() &&
-                          !startComponentsAnimation &&
-                          !isActiveGesture
-                        }
+                        docked={navigator.isVideoModalDocked()}
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}
                         isModal={isModal}
-                        isTabletPortrait={appData.isTabletPortrait}
+                        isTabletPortrait={isTabletPortrait}
                         muted={false}
                         playableItem={item}
                         playerEvent={playerEvent}
@@ -702,7 +689,6 @@ const PlayerContainerComponent = (props: Props) => {
                         setNextVideoPreloadThresholdPercentage={
                           setNextVideoPreloadThresholdPercentage
                         }
-                        startComponentsAnimation={startComponentsAnimation}
                       >
                         {renderApplePlayer(applePlayerProps)}
                       </Player>

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/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);

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,18 +1,15 @@
 import * as React from "react";
 import { View } from "react-native";
-import { render } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
 
-const mock_navBarVisibleFlag = true;
-
-const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
-
 const mockIsOrientationCompatible = jest.fn(() => true);
 
 jest.mock("react-native-safe-area-context", () => ({
+  ...jest.requireActual("react-native-safe-area-context"),
   useSafeAreaInsets: () => ({ top: 44 }),
 }));
 
@@ -35,12 +32,14 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/analyticsUtils"),
   useAnalytics: jest.fn(() => ({
     sendScreenEvent: jest.fn(),
   })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/theme"),
   useTheme: jest.fn(() => ({
     app_background_color: "blue",
   })),
@@ -77,21 +76,44 @@ jest.mock(
   })
 );
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  isNavBarVisible: mockIsNavBarVisible,
-  useIsScreenActive: jest.fn().mockReturnValue(true),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+    ),
+    useNavigation: jest.fn(() => ({
+      canGoBack: () => false,
+      currentRoute: "/river/testId",
+      activeRiver: { id: "testId" },
+      screenData: { id: "testId" },
+      data: { screen: { id: "testId" } },
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive"
+    ),
+    useIsScreenActive: jest.fn().mockReturnValue(true),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute"
+    ),
+    useRoute: jest.fn(() => ({
+      pathname: "/river/testId",
+      screenData: { id: "testId" },
+    })),
+  })
+);
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
@@ -112,26 +134,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
-  const View = jest.requireActual("react-native").View;
-
-  return {
-    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
-    usePickFromState: () => ({
-      plugins: [
-        {
-          name: "Offline Plugin",
-          identifier: "offline-experience",
-          type: "general",
-          module: {
-            OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
-          },
-        },
-      ],
-    }),
-  };
-});
-
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -151,6 +153,19 @@ const screenProps = {
 
 const { Screen } = require("..");
 
+const store = {
+  plugins: [
+    {
+      name: "Offline Plugin",
+      identifier: "offline-experience",
+      type: "general",
+      module: {
+        OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
+      },
+    },
+  ],
+};
+
 describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
@@ -160,14 +175,22 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -1,67 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
-<View
-  importantForAccessibility="yes"
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "backgroundColor": "blue",
-      "flex": 1,
-      "paddingTop": 0,
-    }
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
   }
 >
   <View
-    hasMenu={false}
-    id="/river/testId"
-    pathname="/river/testId"
-    selected="testId"
-    testID="navBar"
-    title="Test Title"
-  />
-  <View>
+    importantForAccessibility="yes"
+    style={
+      {
+        "backgroundColor": "blue",
+        "flex": 1,
+        "paddingTop": 0,
+      }
+    }
+  >
     <View
+      hasMenu={false}
+      id="/river/testId"
       pathname="/river/testId"
-      screenData={
-        {
-          "id": "testId",
-        }
-      }
-      testID="routeManager"
+      selected="testId"
+      testID="navBar"
+      title="Test Title"
     />
+    <View>
+      <View
+        pathname="/river/testId"
+        screenData={
+          {
+            "id": "testId",
+          }
+        }
+        testID="routeManager"
+      />
+    </View>
   </View>
-</View>
+</RNCSafeAreaProvider>
 `;
 
 exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
-<View
-  importantForAccessibility="yes"
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "backgroundColor": "blue",
-      "flex": 1,
-      "paddingTop": 0,
-    }
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
   }
 >
   <View
-    hasMenu={false}
-    id="/river/testId"
-    pathname="/river/testId"
-    selected="testId"
-    testID="navBar"
-    title="Test Title"
-  />
-  <View>
+    importantForAccessibility="yes"
+    style={
+      {
+        "backgroundColor": "blue",
+        "flex": 1,
+        "paddingTop": 0,
+      }
+    }
+  >
     <View
+      hasMenu={false}
+      id="/river/testId"
       pathname="/river/testId"
-      screenData={
-        {
-          "id": "testId",
-        }
-      }
-      testID="routeManager"
+      selected="testId"
+      testID="navBar"
+      title="Test Title"
     />
+    <View>
+      <View
+        pathname="/river/testId"
+        screenData={
+          {
+            "id": "testId",
+          }
+        }
+        testID="routeManager"
+      />
+    </View>
   </View>
-</View>
+</RNCSafeAreaProvider>
 `;

package/Components/Screen/hooks.ts

@@ -1,4 +1,4 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useGetScreenOrientation,
   isOrientationCompatible,
@@ -25,8 +25,7 @@ export const useWaitForValidOrientation = () => {
 
   const isTablet = useIsTablet();
 
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   const layoutData = useMemo(
     () => ({ isTablet, isTabletPortrait, width: screenWidth, height }),

package/Components/Screen/index.tsx

@@ -1,8 +1,7 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
 import { AccessibilityInfo, findNodeHandle, View } from "react-native";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
@@ -41,7 +40,7 @@ type Props = {
 export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
 
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();