@applicaster/zapp-react-native-ui-components 13.0.0-alpha.3592223128 → 13.0.0-alpha.3592913150

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`<Touchable /> when not running in automated tests environment renders c
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
+    {
       "opacity": 1,
     }
   }
@@ -40,7 +40,7 @@ exports[`<Touchable /> when running in automated tests environment has accessibl
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
+    {
       "opacity": 1,
     }
   }

package/Components/Transitioner/__tests__/__snapshots__/AnimationManager.test.js.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AnimationManager initialState() returns a state composed from the initial configuration 1`] = `
-Object {
+{
   "animating": false,
   "duration": 123,
   "easing": [MockFunction],
-  "from": Object {
+  "from": {
     "index": 0,
   },
-  "to": Object {
+  "to": {
     "index": 0,
-    "style": Object {},
+    "style": {},
   },
 }
 `;
@@ -18,25 +18,25 @@ Object {
 exports[`AnimationManager returns the animation manager with the injected transition configuration 1`] = `
 AnimationManager {
   "animatedValue": 0,
-  "config": Object {
-    "back": Object {
+  "config": {
+    "back": {
       "duration": 123,
       "easing": [MockFunction],
-      "from": Object {
-        "style": Object {},
+      "from": {
+        "style": {},
       },
-      "to": Object {
-        "style": Object {},
+      "to": {
+        "style": {},
       },
     },
-    "push": Object {
+    "push": {
       "duration": 123,
       "easing": [MockFunction],
-      "from": Object {
-        "style": Object {},
+      "from": {
+        "style": {},
       },
-      "to": Object {
-        "style": Object {},
+      "to": {
+        "style": {},
       },
     },
   },
@@ -44,25 +44,25 @@ AnimationManager {
 `;
 
 exports[`AnimationManager returns the animation manager with the injected transition configuration 2`] = `
-Object {
-  "back": Object {
+{
+  "back": {
     "duration": 123,
     "easing": [MockFunction],
-    "from": Object {
-      "style": Object {},
+    "from": {
+      "style": {},
     },
-    "to": Object {
-      "style": Object {},
+    "to": {
+      "style": {},
     },
   },
-  "push": Object {
+  "push": {
     "duration": 123,
     "easing": [MockFunction],
-    "from": Object {
-      "style": Object {},
+    "from": {
+      "style": {},
     },
-    "to": Object {
-      "style": Object {},
+    "to": {
+      "style": {},
     },
   },
 }

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -4,14 +4,14 @@ exports[`<Scene /> renders correctly 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
   pointerEvents="auto"
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
-      Object {
+      {
         "paddingBottom": 49,
       },
-      Object {
+      {
         "fontScale": 2,
         "height": 1334,
         "scale": 2,
@@ -33,14 +33,14 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
   pointerEvents="auto"
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
-      Object {
+      {
         "paddingBottom": 49,
       },
-      Object {
+      {
         "height": "100%",
         "width": "100%",
       },
@@ -54,7 +54,7 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
   </ContextProvider>
   <ForwardRef(AnimatedComponentWrapper)
     style={
-      Object {
+      {
         "opacity": 1,
       }
     }

package/Components/Transitioner/__tests__/__snapshots__/config.test.js.snap

@@ -5,34 +5,34 @@ exports[`transitionConfig accepts an Animated.Value as a parameter 1`] = `"Canno
 exports[`transitionConfig accepts an Animated.Value as a parameter 2`] = `[Function]`;
 
 exports[`transitionConfig returns a back object is valid 1`] = `
-Object {
+{
   "duration": 350,
   "easing": [Function],
-  "from": Object {
-    "style": Object {
+  "from": {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 0,
         },
       ],
       "width": 750,
     },
   },
-  "to": Object {
-    "overlayStyle": Object {
+  "to": {
+    "overlayStyle": {
       "backgroundColor": "black",
       "height": 1334,
       "opacity": 0.35,
       "position": "absolute",
       "width": 750,
     },
-    "style": Object {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": -1,
         },
       ],
@@ -43,34 +43,34 @@ Object {
 `;
 
 exports[`transitionConfig returns a push object is valid 1`] = `
-Object {
+{
   "duration": 350,
   "easing": [Function],
-  "from": Object {
-    "overlayStyle": Object {
+  "from": {
+    "overlayStyle": {
       "backgroundColor": "black",
       "height": 1334,
       "opacity": 0,
       "position": "absolute",
       "width": 750,
     },
-    "style": Object {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 0,
         },
       ],
       "width": 750,
     },
   },
-  "to": Object {
-    "style": Object {
+  "to": {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 750,
         },
       ],

package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<TransitionerComponent /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
       "overflow": "hidden",
     }
@@ -12,7 +12,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
   <Scene
     isActive={true}
     screenUniqueId="mocked-uuid"
-    style={Object {}}
+    style={{}}
   >
     <View
       foo="bar"

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

@@ -2,7 +2,6 @@
 import * as React from "react";
 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";
 
@@ -12,13 +11,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,
     },
   })
 );
@@ -60,10 +59,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);
   });

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,13 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
         onError={[Function]}
         playerId="player1"
         resizeMode="cover"
-        screenConfig={Object {}}
+        screenConfig={{}}
         source={
-          Object {
+          {
             "uri": "",
           }
         }
-        style={Object {}}
+        style={{}}
       />
     </View>
   </View>

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -62,7 +62,10 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   } = useModalAnimationContext();
 
   const [enableGesture, setIEnableGesture] = React.useState<boolean>(true);
-  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
+  const { isLanguageOverlayVisible, isSeekBarTouch } = React.useContext(
+    PlayerContainerContext
+  );
 
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
@@ -80,6 +83,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     enableGesture &&
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
+    !isSeekBarTouch &&
     (isMaximazedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -41,7 +41,10 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     videoModalState: { mode: videoModalMode },
   } = useNavigation();
 
-  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+  const { isLanguageOverlayVisible, isSeekBarTouch } = React.useContext(
+    PlayerContainerContext
+  );
+
   const isMaximazedModal = videoModalMode === "MAXIMIZED";
   const isMinimizedModal = videoModalMode === "MINIMIZED";
 
@@ -52,6 +55,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   const isEnablePanGesture =
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
+    !isSeekBarTouch &&
     (isMaximazedModal || isMinimizedModal);
 
   const onGestureEvent = Animated.event(

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/PlayerWrapper.tsx

@@ -121,23 +121,16 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-const getStyles = (baseStyle, isMobile, isPortrait) => {
-  if (isMobile && isPortrait) {
-    return { width: SCREEN_WIDTH, height: SCREEN_HEIGHT };
-  }
-
-  if (isMobile && !isPortrait) {
-    return { width: SCREEN_HEIGHT, height: SCREEN_WIDTH };
-  }
-
-  return baseStyle;
-};
-
 const showDetails = (
   isMobile: boolean,
   docked: boolean,
-  isInlineModal
+  isInlineModal,
+  pip
 ): boolean => {
+  if (pip) {
+    return false;
+  }
+
   if (!isInlineModal) {
     return false;
   }
@@ -159,7 +152,7 @@ const showDetails = (
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
-    style: baseStyle,
+    style,
     containerStyle,
     inline,
     docked,
@@ -174,7 +167,7 @@ const PlayerWrapperComponent = (props: Props) => {
 
   const isInlineModal = inline && isModal;
 
-  const style = getStyles(baseStyle, !isTablet, isInlineModal);
+  // const style = getStyles(baseStyle, !isTablet, isInlineModal, pip);
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
@@ -253,7 +246,7 @@ const PlayerWrapperComponent = (props: Props) => {
         </View>
 
         <AnimatedScrollModal>
-          {showDetails(!isTablet, docked, isInlineModal) && (
+          {showDetails(!isTablet, docked, isInlineModal, pip) && (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
               style={defaultStyles.flex}

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>