@applicaster/zapp-react-native-ui-components 13.0.0-rc.13 → 13.0.0-rc.130

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,
@@ -73,20 +74,6 @@ const getScreenAspectRatio = () => {
   return longEdge / shortEdge;
 };
 
-const safeAreaStyles = (
-  configuration: Configuration,
-  isTablet: boolean
-): ViewStyle => {
-  const tablet_landscape_player_container_background_color =
-    configuration?.tablet_landscape_player_container_background_color;
-
-  return {
-    backgroundColor: isTablet
-      ? tablet_landscape_player_container_background_color
-      : "transparent",
-  };
-};
-
 const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   if (isTablet) {
     return ["top"];
@@ -99,6 +86,24 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   return ["top"];
 };
 
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
 const getTabletWidth = (
   configuration: Configuration,
   dimensions: DimensionsT
@@ -107,46 +112,23 @@ const getTabletWidth = (
     configuration?.tablet_landscape_sidebar_width;
 
   const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
 
   const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
 
   if (tablet_landscape_sidebar_width?.includes("%")) {
-    return Number(width) * (1 - sidebarWidth / 100);
+    return widthValue * (1 - sidebarWidth / 100);
   }
 
   if (Number.isNaN(sidebarWidth)) {
-    return Number(width) * 0.65;
+    return widthValue * 0.65;
   }
 
-  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;
+  return widthValue - sidebarWidth;
 };
 
 const PlayerWrapperComponent = (props: Props) => {
@@ -160,6 +142,7 @@ const PlayerWrapperComponent = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    fullscreen,
     pip,
   } = props;
 
@@ -167,7 +150,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,18 +194,21 @@ const PlayerWrapperComponent = (props: Props) => {
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
   const childrenStyles = React.useMemo(
-    () => ({ ...playerDimensions, ...playerDimesionsHack }),
-    [containerDimensions, playerDimesionsHack]
+    () => ({ ...playerDimensions, ...playerDimensionsHack }),
+    [containerDimensions, playerDimensionsHack]
   );
 
+  const wrapperViewStyle: ViewStyle = {
+    backgroundColor:
+      isTablet && !fullscreen
+        ? configuration?.tablet_landscape_player_container_background_color
+        : "transparent",
+  };
+
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimesionsHack,
-      ]}
+      style={[wrapperViewStyle, style, playerDimensionsHack]}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
@@ -227,7 +221,7 @@ const PlayerWrapperComponent = (props: Props) => {
             defaultStyles.playerContainer,
             containerDimensions,
             containerStyle,
-            playerDimesionsHack,
+            playerDimensionsHack,
           ]}
         >
           <AnimationComponent
@@ -246,7 +240,7 @@ const PlayerWrapperComponent = (props: Props) => {
         </View>
 
         <AnimatedScrollModal>
-          {showDetails(!isTablet, docked, isInlineModal, pip) && (
+          {isShowPlayerDetails ? (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
               style={defaultStyles.flex}
@@ -259,7 +253,7 @@ const PlayerWrapperComponent = (props: Props) => {
                 isTablet={isTablet}
               />
             </AnimationComponent>
-          )}
+          ) : null}
         </AnimatedScrollModal>
       </AnimationComponent>
     </WrapperView>

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, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -17,20 +17,26 @@ 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 { Spinner } from "../Spinner";
+import { OpaqueLayer } from "./OpaqueLayer";
 
 import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+const LOADER_BACKGROUND_COLOR = "rgba(64,64,64,0.5)";
+
 const styles = StyleSheet.create({
   container: {
     top: 0,
@@ -39,7 +45,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     position: "absolute",
   },
-  // eslint-disable-next-line react-native/no-color-literals
   loaderContainer: {
     top: 0,
     left: 0,
@@ -48,7 +53,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "rgba(64,64,64,.5)",
+    backgroundColor: LOADER_BACKGROUND_COLOR,
   },
 });
 
@@ -100,7 +105,7 @@ const VideoModalComponent = () => {
 
   const onHooksSuccess = ({ payload }) => {
     // set new modified entry
-    if (!R.equals(payload, item)) {
+    if (!equals(payload, item)) {
       onVideoModalHookSuccessAnalyticsEvent();
       setVideoModalItem(payload);
     }
@@ -136,6 +141,9 @@ const VideoModalComponent = () => {
 
       <PathnameContext.Provider value={pathname}>
         <ScreenContextProvider pathname={pathname}>
+          {/* Hide content underneath when we switch to next video in fullscreen mode */}
+          {mode === "FULLSCREEN" && <OpaqueLayer />}
+
           {itemIdHooksFinished === item?.id ? (
             <AnimatedPlayerModalWrapper
               style={[
@@ -148,8 +156,6 @@ const VideoModalComponent = () => {
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
-                modalHeight={modalSize.height}
-                modalWidth={modalSize.width}
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>

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

@@ -1,43 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PlayerDetails renders properly 1`] = `
-<View
-  collapsable={false}
-  style={
-    Object {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -8,
-      "paddingTop": -8,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={Array []}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly 1`] = `null`;
 
-exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `
-<View
-  collapsable={false}
-  style={
-    Object {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -20,
-      "paddingTop": 40,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={Array []}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `null`;