@applicaster/zapp-react-native-ui-components 13.0.0-alpha.3334148221 → 13.0.0-alpha.3528549047

package/Components/TextInputTv/index.tsx

@@ -175,10 +175,10 @@ function TextInputTV(props: Props, ref) {
   return isWebPlatform ? (
     <>
       {additional && additional()}
-      <input ref={ref} {...inputProps} />
+      <input testID="TextInput-tv" ref={ref} {...inputProps} />
     </>
   ) : (
-    <TextInput ref={ref} {...inputProps} />
+    <TextInput testID="TextInput-tv" ref={ref} {...inputProps} />
   );
 }
 

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import { Spinner } from "../Spinner";
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export const OpaqueLayer = () => {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // we assume that it's non-transparent and we could show spinner always until it will be covered by player
+          // this spinner hides all content under modal
+          backgroundColor: theme?.app_background_color,
+        },
+      ]}
+    >
+      <Spinner />
+    </View>
+  );
+};

package/Components/VideoModal/PlayerWrapper.tsx

@@ -10,7 +10,8 @@ import { Edge, SafeAreaView } from "react-native-safe-area-context";
 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 { playerDimensionsHack } from "./utils";
+import { useDelayedPlayerDetails } from "./hooks";
 
 import {
   AnimatedScrollModal,
@@ -121,34 +122,6 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-const showDetails = (
-  isMobile: boolean,
-  docked: boolean,
-  isInlineModal,
-  pip
-): boolean => {
-  if (pip) {
-    return false;
-  }
-
-  if (!isInlineModal) {
-    return false;
-  }
-
-  // for mobile we always show details. Mounting of it very heavy operation.
-  if (isMobile) {
-    return true;
-  }
-
-  // workaround for tablets we need to mount/unmount in order to avoid PlayerDetails content dissappearing
-  // FIXME - find out the reason of dissapearing of content
-  if (docked) {
-    return false;
-  }
-
-  return true;
-};
-
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -167,7 +140,15 @@ const PlayerWrapperComponent = (props: Props) => {
 
   const isInlineModal = inline && isModal;
 
-  // const style = getStyles(baseStyle, !isTablet, isInlineModal, pip);
+  // Mounting the PlayerDetails component is a resource-intensive process.
+  // Therefore, for performance reasons, we mount it with a delay to make the rotation process as smooth as possible.
+  // The flow is as follows: the rotation occurs first, and then, after a short delay, we mount the PlayerDetails component.
+  // This helps to avoid blocking the rotation and any animations related to the rotation.
+  const isShowPlayerDetails = useDelayedPlayerDetails({
+    isInline: isInlineModal,
+    isDocked: docked,
+    isPip: pip,
+  });
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
@@ -203,8 +184,8 @@ const PlayerWrapperComponent = (props: Props) => {
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
   const childrenStyles = React.useMemo(
-    () => ({ ...playerDimensions, ...playerDimesionsHack }),
-    [containerDimensions, playerDimesionsHack]
+    () => ({ ...playerDimensions, ...playerDimensionsHack }),
+    [containerDimensions, playerDimensionsHack]
   );
 
   return (
@@ -213,7 +194,7 @@ const PlayerWrapperComponent = (props: Props) => {
       style={[
         safeAreaStyles(configuration, isTablet),
         style,
-        playerDimesionsHack,
+        playerDimensionsHack,
       ]}
     >
       <AnimationComponent
@@ -227,7 +208,7 @@ const PlayerWrapperComponent = (props: Props) => {
             defaultStyles.playerContainer,
             containerDimensions,
             containerStyle,
-            playerDimesionsHack,
+            playerDimensionsHack,
           ]}
         >
           <AnimationComponent
@@ -246,7 +227,7 @@ const PlayerWrapperComponent = (props: Props) => {
         </View>
 
         <AnimatedScrollModal>
-          {showDetails(!isTablet, docked, isInlineModal, pip) && (
+          {isShowPlayerDetails && (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
               style={defaultStyles.flex}