@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6714678893 → 13.0.0-alpha.7100577251

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);
         }
       );
@@ -100,10 +100,11 @@ export const AnimationView = ({
   const moveUpValue = additionalData.saveArea
     ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
     : isTablet
-    ? isTabletLandscape && (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-      ? -tabletLandscapePlayerTopPosition + progressBarHeight
-      : -130
-    : -50 + progressBarHeight;
+      ? isTabletLandscape &&
+        (!isAudioItem || (isAudioItem && inlineAudioPlayer))
+        ? -tabletLandscapePlayerTopPosition + progressBarHeight
+        : -130
+      : -50 + progressBarHeight;
 
   const moveComponentHorizontalValue = additionalData.moveValue
     ? isRTL
@@ -434,8 +435,8 @@ export const AnimationComponent = (props: Props) => {
   const Component = useAnimation
     ? AnimationView
     : style
-    ? View
-    : React.Fragment;
+      ? View
+      : React.Fragment;
 
   if (
     additionalData.extraAnimation &&

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/ModalAnimation/utils.ts

@@ -108,8 +108,8 @@ export const calculateAnimationValue = (animationType, dragPosition, data) => {
               : { forWidth: 3, forHeight: 3 }
             : { forWidth: 2, forHeight: 2 }
           : isTabletLandscape
-          ? { forWidth: 8, forHeight: 6.5 }
-          : { forWidth: 3.5, forHeight: 2 };
+            ? { forWidth: 8, forHeight: 6.5 }
+            : { forWidth: 3.5, forHeight: 2 };
 
       const minWidth =
         isAudioItem && !inlineAudioPlayer ? minimisedHeight : minimisedWidth;

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

@@ -4,6 +4,7 @@ import {
   ViewStyle,
   Animated,
   Easing,
+  StyleSheet,
   Dimensions,
 } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
@@ -90,7 +91,9 @@ export const PlayerDetails = ({
         {
           // workaround for avoid wrong text-height after going back to portrait rotation
           // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
-          width: isTablet ? undefined : SCREEN_WIDTH,
+          width: isTablet
+            ? undefined
+            : (StyleSheet.flatten(style)?.width ?? SCREEN_WIDTH),
         },
       ]}
     >

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}

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import * as R from "ramda";
-import { StyleSheet, View, StatusBar } from "react-native";
+import { equals } from "ramda";
+import { StyleSheet, StatusBar } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -17,17 +17,20 @@ import {
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
-import { useModalSize } from "./hooks/useModalSize";
-import { useBackgroundColor } from "./hooks/useBackgroundColor";
-import { useInitialPlayerState } from "./hooks/useInitialPlayerState";
+import {
+  useModalSize,
+  useBackgroundColor,
+  useInitialPlayerState,
+} from "./hooks";
+
 import { APP_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/events";
-import { Spinner } from "../Spinner";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 import { requiresAuthentication } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { OpaqueLayer } from "./OpaqueLayer";
 
 import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
@@ -39,17 +42,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     position: "absolute",
   },
-  // eslint-disable-next-line react-native/no-color-literals
-  loaderContainer: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "rgba(64,64,64,.5)",
-  },
 });
 
 const VideoModalComponent = () => {
@@ -100,7 +92,7 @@ const VideoModalComponent = () => {
 
   const onHooksSuccess = ({ payload }) => {
     // set new modified entry
-    if (!R.equals(payload, item)) {
+    if (!equals(payload, item)) {
       onVideoModalHookSuccessAnalyticsEvent();
       setVideoModalItem(payload);
     }
@@ -136,7 +128,10 @@ const VideoModalComponent = () => {
 
       <PathnameContext.Provider value={pathname}>
         <ScreenContextProvider pathname={pathname}>
-          {itemIdHooksFinished === item?.id ? (
+          {/* Hide content underneath when we switch to next video in fullscreen mode */}
+          {mode === "FULLSCREEN" && <OpaqueLayer />}
+
+          {itemIdHooksFinished === item?.id && (
             <AnimatedPlayerModalWrapper
               style={[
                 styles.container,
@@ -153,10 +148,6 @@ const VideoModalComponent = () => {
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
           )}
         </ScreenContextProvider>
       </PathnameContext.Provider>

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(() => ({})),
 }));
 
@@ -59,7 +62,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   })),
 }));
 
-jest.mock("../utils", () => ({ playerDimesionsHack: {} }));
+jest.mock("../utils", () => ({ playerDimensionsHack: {} }));
 
 const { PlayerWrapper } = require("../PlayerWrapper");
 
@@ -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>