@applicaster/zapp-react-native-ui-components 12.0.5 → 13.0.0-alpha.1035032144

package/Components/Transitioner/index.js

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useWindowDimensions } from "react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
@@ -7,10 +6,15 @@ import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
   const navigator = useNavigation();
-  const { height, width } = useWindowDimensions();
 
-  const dimensions = useDimensions("window", { deviceInfo: true });
-  const isTablet = dimensions?.deviceInfo?.isTablet;
+  const {
+    width,
+    height,
+    deviceInfo: { isTablet },
+  } = useDimensions("window", {
+    updateForInactiveScreens: false,
+    deviceInfo: true,
+  });
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -44,7 +44,10 @@ type Props = {
 };
 
 const PlayerLiveImageComponent = (props: Props) => {
-  const dimensions = useDimensions("screen", { fullDimensions: true });
+  const dimensions = useDimensions("screen", {
+    fullDimensions: true,
+    updateForInactiveScreens: false,
+  });
 
   const { item, style, playerId } = props;
 
@@ -307,7 +310,7 @@ const PlayerLiveImageComponent = (props: Props) => {
         LiveImageManager.instance.checkPlayerPosition(liveImageItem);
       }
     },
-    [liveImageItem, dimensions]
+    [liveImageItem, dimensions.height, dimensions.width]
   );
 
   const platformSpecificProps = isApplePlatform()

package/Components/VideoLive/__tests__/PlayerLiveImageComponent.test.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
-import { render, act } from "@testing-library/react-native";
+import { render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
-import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
 import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
 import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
@@ -13,13 +12,13 @@ import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactH
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
-const seekTo = jest.fn();
+const mock_seekTo = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/playerManager/player",
   () => ({
     Player: {
-      seekTo,
+      seekTo: mock_seekTo,
     },
   })
 );
@@ -61,10 +60,16 @@ describe("PlayerLiveImageComponent", () => {
   };
 
   beforeAll(() => {
-    jest.spyOn(PlayerFactory, "playerFactory").mockImplementation(() => ({
-      controller: new Player({}),
-      Component: () => null,
-    }));
+    jest.spyOn(PlayerFactory, "playerFactory").mockImplementation(() => {
+      const Player = jest.requireActual(
+        "@applicaster/zapp-react-native-utils/appUtils/playerManager/player"
+      ).Player;
+
+      return {
+        controller: new Player({}),
+        Component: () => null,
+      };
+    });
 
     jest.spyOn(navigationHooks, "useIsScreenActive").mockReturnValue(true);
   });
@@ -136,7 +141,7 @@ describe("PlayerLiveImageComponent", () => {
       </Wrapper>
     );
 
-    act(() => component.unmount());
+    component.unmount();
 
     const isPlayerRegistered = playerManager.isPlayerRegistered(
       defaultProps.playerId

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
     <View
       collapsable={false}
       style={
-        Object {
+        {
           "opacity": 1,
         }
       }
@@ -19,10 +19,10 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
         audioMutedByDefault={false}
         imageKey="image1"
         item={
-          Object {
+          {
             "id": "1",
             "title": "Test",
-            "type": Object {
+            "type": {
               "value": "",
             },
           }
@@ -30,13 +30,8 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
         onError={[Function]}
         playerId="player1"
         resizeMode="cover"
-        screenConfig={Object {}}
-        source={
-          Object {
-            "uri": "",
-          }
-        }
-        style={Object {}}
+        screenConfig={{}}
+        style={{}}
       />
     </View>
   </View>

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -77,7 +77,7 @@ export const AnimationView = ({
   const measureView = React.useCallback(() => {
     if (isTabletLandscape && tabletLandscapePlayerTopPosition === 0) {
       animationComponentRef.current.measure(
-        (x, y, width, height, pageX, pageY) => {
+        (_x, _y, _width, _height, _pageX, pageY) => {
           setTabletLandscapePlayerTopPosition(pageY - 20);
         }
       );

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,14 +1,12 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Animated } from "react-native";
 
 import {
   useSafeAreaInsets,
   useSafeAreaFrame,
 } from "react-native-safe-area-context";
-import {
-  useGetBottomTabBarHeight,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useGetBottomTabBarHeight";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { PROGRESS_BAR_HEIGHT } from "./utils";
@@ -48,7 +46,7 @@ export type ModalAnimationContextT = {
   progressBarHeight: number;
 };
 
-const ReactContext = React.createContext<ModalAnimationContextT>({
+export const ReactContext = React.createContext<ModalAnimationContextT>({
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -73,10 +71,6 @@ const ReactContext = React.createContext<ModalAnimationContextT>({
   progressBarHeight: 0,
 });
 
-export function useModalAnimationContext() {
-  return useContext<ModalAnimationContextT>(ReactContext);
-}
-
 const Provider = ({ children }: { children: React.ReactNode }) => {
   const [playerAnimationState, setPlayerAnimationState] =
     React.useState<PlayerAnimationStateT>(null);

package/Components/VideoModal/ModalAnimation/index.ts

@@ -6,10 +6,11 @@ export { AnimatedVideoPlayerComponent } from "./AnimatedVideoPlayerComponent";
 
 export {
   withModalAnimationProvider,
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
 } from "./ModalAnimationContext";
 
+export { useModalAnimationContext } from "./useModalAnimationContext";
+
 export { AnimationComponent } from "./AnimationComponent";
 
 export { ComponentAnimationType, defaultAspectRatioWidth } from "./utils";

package/Components/VideoModal/ModalAnimation/useModalAnimationContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ModalAnimationContextT, ReactContext } from "./ModalAnimationContext";
+
+export function useModalAnimationContext() {
+  return useContext<ModalAnimationContextT>(ReactContext);
+}

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import { View } from "react-native";
 
 const props = {
   entry: {},
@@ -24,7 +23,11 @@ jest.mock("react-native-safe-area-context", () => ({
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap",
-  () => ({ ComponentsMap: View })
+  () => {
+    const View = jest.requireActual("react-native").View;
+
+    return { ComponentsMap: View };
+  }
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { View } from "react-native";
-
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const props = {
@@ -17,13 +15,17 @@ const props = {
   },
 };
 
-const useIsTablet = jest.fn();
+const mockUseIsDeviceTablet = jest.fn();
 
 jest.mock("react-native");
 
 jest.mock("react-native-gesture-handler");
 
-jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
+jest.mock("../PlayerDetails", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return { PlayerDetails: View };
+});
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
@@ -33,10 +35,11 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
-  useIsTablet,
+  useIsTablet: mockUseIsDeviceTablet,
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/theme"),
   useTheme: jest.fn(() => ({})),
 }));
 
@@ -68,7 +71,7 @@ const children = jest.fn(() => {});
 
 describe("PlayerWrapper", () => {
   it("renders properly", () => {
-    useIsTablet.mockReturnValue(false);
+    mockUseIsDeviceTablet.mockReturnValue(false);
 
     const element = renderWithProviders(
       <PlayerWrapper {...props}>{children}</PlayerWrapper>
@@ -78,7 +81,7 @@ describe("PlayerWrapper", () => {
   });
 
   it("renders inline", () => {
-    useIsTablet.mockReturnValue(false);
+    mockUseIsDeviceTablet.mockReturnValue(false);
 
     const element = renderWithProviders(
       <PlayerWrapper {...props} inline={true} isModal={true}>
@@ -90,7 +93,7 @@ describe("PlayerWrapper", () => {
   });
 
   it("renders inline on tablet in landscape orientation", () => {
-    useIsTablet.mockReturnValue(true);
+    mockUseIsDeviceTablet.mockReturnValue(true);
 
     const element = renderWithProviders(
       <PlayerWrapper {...props} inline={true} isModal={true}>
@@ -102,7 +105,7 @@ describe("PlayerWrapper", () => {
   });
 
   it("renders inline and docked", () => {
-    useIsTablet.mockReturnValue(false);
+    mockUseIsDeviceTablet.mockReturnValue(false);
 
     const children = jest.fn(() => {});
     const dimensions = { height: undefined, width: props.style.width };

package/Components/VideoModal/__tests__/__snapshots__/PlayerDetails.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`PlayerDetails renders properly 1`] = `
 <View
   collapsable={false}
   style={
-    Object {
+    {
       "backgroundColor": "transparent",
       "flex": 1,
       "marginTop": -8,
@@ -15,7 +15,7 @@ exports[`PlayerDetails renders properly 1`] = `
 >
   <View
     feed="test-source"
-    riverComponents={Array []}
+    riverComponents={[]}
     riverId="test-id"
   />
 </View>
@@ -25,7 +25,7 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
 <View
   collapsable={false}
   style={
-    Object {
+    {
       "backgroundColor": "transparent",
       "flex": 1,
       "marginTop": -20,
@@ -36,7 +36,7 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
 >
   <View
     feed="test-source"
-    riverComponents={Array []}
+    riverComponents={[]}
     riverId="test-id"
   />
 </View>

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`PlayerWrapper renders inline 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -14,7 +14,7 @@ exports[`PlayerWrapper renders inline 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -22,31 +22,31 @@ exports[`PlayerWrapper renders inline 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
         },
-        Object {
+        {
           "height": 800,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "column",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -54,19 +54,19 @@ exports[`PlayerWrapper renders inline 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
               "position": "relative",
               "zIndex": 200,
             },
-            Object {
+            {
               "aspectRatio": 1.7777777777777777,
               "height": undefined,
               "width": "100%",
             },
-            Object {},
-            Object {},
+            {},
+            {},
           ]
         }
         testID="test-player-container"
@@ -80,8 +80,8 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -90,7 +90,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -98,31 +98,31 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
         },
-        Object {
+        {
           "height": undefined,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "column",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -130,19 +130,19 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
               "position": "relative",
               "zIndex": 200,
             },
-            Object {
+            {
               "aspectRatio": undefined,
               "height": undefined,
               "width": "100%",
             },
-            Object {},
-            Object {},
+            {},
+            {},
           ]
         }
         testID="test-player-container"
@@ -156,8 +156,8 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -166,7 +166,7 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -174,31 +174,31 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "red",
         },
-        Object {
+        {
           "height": 800,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "row",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -206,26 +206,26 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
               "position": "relative",
               "zIndex": 200,
             },
-            Object {
+            {
               "aspectRatio": 1.7777777777777777,
               "height": undefined,
               "width": 195,
             },
-            Object {},
-            Object {},
+            {},
+            {},
           ]
         }
         testID="test-player-container"
       >
         <View
           additionalData={
-            Object {
+            {
               "disableAnimatedComponent": false,
               "resetAnimationValue": undefined,
               "useLayoutMeasure": true,
@@ -233,7 +233,7 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
           }
           animationType="moveUpComponent"
           style={
-            Object {
+            {
               "flex": 1,
             }
           }
@@ -248,8 +248,8 @@ exports[`PlayerWrapper renders properly 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -258,7 +258,7 @@ exports[`PlayerWrapper renders properly 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -266,31 +266,31 @@ exports[`PlayerWrapper renders properly 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
         },
-        Object {
+        {
           "height": 800,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "column",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -298,19 +298,19 @@ exports[`PlayerWrapper renders properly 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
               "position": "relative",
               "zIndex": 200,
             },
-            Object {
+            {
               "aspectRatio": 1.7786666666666666,
               "height": undefined,
               "width": "100%",
             },
-            Object {},
-            Object {},
+            {},
+            {},
           ]
         }
         testID="test-player-container"