@applicaster/zapp-react-native-ui-components 13.0.0-alpha.4585770583 → 13.0.0-alpha.4700935119

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

@@ -11,9 +11,6 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
-import { PathnameContext } from "../../Contexts/PathnameContext";
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
-import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 import {
   AnimatedScrollModal,
@@ -124,19 +121,20 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-const getStyles = (baseStyle, isMobile, isPortrait) => {
-  if (isMobile && isPortrait) {
-    return { width: SCREEN_WIDTH, height: SCREEN_HEIGHT };
+const showDetails = (
+  isMobile: boolean,
+  docked: boolean,
+  isInlineModal,
+  pip
+): boolean => {
+  if (pip) {
+    return false;
   }
 
-  if (isMobile && !isPortrait) {
-    return { width: SCREEN_HEIGHT, height: SCREEN_WIDTH };
+  if (!isInlineModal) {
+    return false;
   }
 
-  return baseStyle;
-};
-
-const showDetails = (isMobile: boolean, docked: boolean): boolean => {
   // for mobile we always show details. Mounting of it very heavy operation.
   if (isMobile) {
     return true;
@@ -154,7 +152,7 @@ const showDetails = (isMobile: boolean, docked: boolean): boolean => {
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
-    style: baseStyle,
+    style,
     containerStyle,
     inline,
     docked,
@@ -169,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;
 
@@ -209,72 +207,62 @@ const PlayerWrapperComponent = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
-  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
-
   return (
-    <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        <WrapperView
-          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+    <WrapperView
+      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+      style={[
+        safeAreaStyles(configuration, isTablet),
+        style,
+        playerDimesionsHack,
+      ]}
+    >
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        additionalData={{ saveArea: true }}
+        style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+      >
+        <View
+          testID={`${entry?.id}-player-container`}
           style={[
-            safeAreaStyles(configuration, isTablet),
-            style,
+            defaultStyles.playerContainer,
+            containerDimensions,
+            containerStyle,
             playerDimesionsHack,
           ]}
         >
           <AnimationComponent
             animationType={ComponentAnimationType.moveUpComponent}
-            additionalData={{ saveArea: true }}
-            style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+            style={isTabletLandscape ? defaultStyles.flex : undefined}
+            additionalData={{
+              useLayoutMeasure: isTabletLandscape,
+              disableAnimatedComponent: !isTabletLandscape,
+              resetAnimationValue: isTabletLandscape && docked,
+            }}
           >
-            <PathnameContext.Provider value={pathname}>
-              <ScreenContextProvider pathname={pathname}>
-                <View
-                  testID={`${entry?.id}-player-container`}
-                  style={[
-                    defaultStyles.playerContainer,
-                    containerDimensions,
-                    containerStyle,
-                    playerDimesionsHack,
-                  ]}
-                >
-                  <AnimationComponent
-                    animationType={ComponentAnimationType.moveUpComponent}
-                    style={isTabletLandscape ? defaultStyles.flex : undefined}
-                    additionalData={{
-                      useLayoutMeasure: isTabletLandscape,
-                      disableAnimatedComponent: !isTabletLandscape,
-                      resetAnimationValue: isTabletLandscape && docked,
-                    }}
-                  >
-                    <AnimatedVideoPlayerComponent>
-                      {children(childrenStyles)}
-                    </AnimatedVideoPlayerComponent>
-                  </AnimationComponent>
-                </View>
-
-                <AnimatedScrollModal>
-                  {showDetails(!isTablet, docked) && (
-                    <AnimationComponent
-                      animationType={ComponentAnimationType.componentFade}
-                      style={defaultStyles.flex}
-                    >
-                      <PlayerDetails
-                        configuration={configuration}
-                        style={defaultStyles.playerDetails}
-                        entry={entry}
-                        isTabletLandscape={isTabletLandscape}
-                        isTablet={isTablet}
-                      />
-                    </AnimationComponent>
-                  )}
-                </AnimatedScrollModal>
-              </ScreenContextProvider>
-            </PathnameContext.Provider>
+            <AnimatedVideoPlayerComponent>
+              {children(childrenStyles)}
+            </AnimatedVideoPlayerComponent>
           </AnimationComponent>
-        </WrapperView>
-      </ScreenContextProvider>
-    </PathnameContext.Provider>
+        </View>
+
+        <AnimatedScrollModal>
+          {showDetails(!isTablet, docked, isInlineModal, pip) && (
+            <AnimationComponent
+              animationType={ComponentAnimationType.componentFade}
+              style={defaultStyles.flex}
+            >
+              <PlayerDetails
+                configuration={configuration}
+                style={defaultStyles.playerDetails}
+                entry={entry}
+                isTabletLandscape={isTabletLandscape}
+                isTablet={isTablet}
+              />
+            </AnimationComponent>
+          )}
+        </AnimatedScrollModal>
+      </AnimationComponent>
+    </WrapperView>
   );
 };
 

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", () => ({