@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-rc.1

package/Components/VideoModal/PlayerWrapper.tsx

@@ -9,16 +9,8 @@ import {
 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 { playerDimensionsHack } from "./utils";
-import { useDelayedPlayerDetails } from "./hooks";
-
-import {
-  AnimatedScrollModal,
-  AnimatedVideoPlayerComponent,
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
 
@@ -44,29 +36,15 @@ type Props = {
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
-  children: (playerDimensions: DimensionsT) => React.ReactNode;
   configuration: Configuration;
+
+  playerContent: (styles: ViewStyle) => React.ReactNode;
 };
 
 const defaultStyles = StyleSheet.create({
   playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
-  playerDetails: { flex: 1, paddingTop: 20 },
-  flex: { flex: 1 },
-});
-
-const orientationStyles = StyleSheet.create({
-  landscape: { flexDirection: "row" },
-  portrait: { flexDirection: "column" },
 });
 
-const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
-  if (isTabletLandscape) {
-    return orientationStyles.landscape;
-  }
-
-  return orientationStyles.portrait;
-};
-
 const getScreenAspectRatio = () => {
   const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
   const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
@@ -86,51 +64,6 @@ 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
-) => {
-  const tablet_landscape_sidebar_width =
-    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 widthValue * (1 - sidebarWidth / 100);
-  }
-
-  if (Number.isNaN(sidebarWidth)) {
-    return widthValue * 0.65;
-  }
-
-  return widthValue - sidebarWidth;
-};
-
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -139,35 +72,26 @@ const PlayerWrapperComponent = (props: Props) => {
     inline,
     docked,
     isModal,
-    children,
     isTabletPortrait,
     configuration,
-    fullscreen,
     pip,
+    playerContent,
   } = props;
 
   const isTablet = useIsTablet();
 
   const isInlineModal = inline && isModal;
 
-  // 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;
 
-  const tabletWidth = getTabletWidth(configuration, style);
+  const tabletWidth = getTabletWidth(
+    configuration.tablet_landscape_sidebar_width,
+    style
+  );
 
   const baseDimensions: DimensionsT = React.useMemo(
     () => ({
-      width:
-        isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
+      width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
       height: undefined,
     }),
     [isInlineModal, tabletWidth, docked]
@@ -176,7 +100,7 @@ const PlayerWrapperComponent = (props: Props) => {
   const playerDimensions: DimensionsT = React.useMemo(
     () => ({
       ...baseDimensions,
-      width: isInlineModal && docked ? undefined : baseDimensions.width,
+      width: baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
     [baseDimensions, isInlineModal, pip]
@@ -185,8 +109,7 @@ const PlayerWrapperComponent = (props: Props) => {
   const containerDimensions: DimensionsT = React.useMemo(
     () => ({
       ...baseDimensions,
-      aspectRatio:
-        isInlineModal && docked ? undefined : playerDimensions.aspectRatio,
+      aspectRatio: playerDimensions.aspectRatio,
     }),
     [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
   );
@@ -194,68 +117,29 @@ const PlayerWrapperComponent = (props: Props) => {
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
   const childrenStyles = React.useMemo(
-    () => ({ ...playerDimensions, ...playerDimensionsHack }),
+    () => ({
+      ...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={[wrapperViewStyle, style, playerDimensionsHack]}
+      style={playerDimensionsHack}
     >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        additionalData={{ saveArea: true }}
-        style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+      <View
+        testID={`${entry?.id}-player-container`}
+        style={[
+          defaultStyles.playerContainer,
+          playerDimensionsHack,
+          containerDimensions,
+          containerStyle,
+        ]}
       >
-        <View
-          testID={`${entry?.id}-player-container`}
-          style={[
-            defaultStyles.playerContainer,
-            containerDimensions,
-            containerStyle,
-            playerDimensionsHack,
-          ]}
-        >
-          <AnimationComponent
-            animationType={ComponentAnimationType.moveUpComponent}
-            style={isTabletLandscape ? defaultStyles.flex : undefined}
-            additionalData={{
-              useLayoutMeasure: isTabletLandscape,
-              disableAnimatedComponent: !isTabletLandscape,
-              resetAnimationValue: isTabletLandscape && docked,
-            }}
-          >
-            <AnimatedVideoPlayerComponent>
-              {children(childrenStyles)}
-            </AnimatedVideoPlayerComponent>
-          </AnimationComponent>
-        </View>
-
-        <AnimatedScrollModal>
-          {isShowPlayerDetails ? (
-            <AnimationComponent
-              animationType={ComponentAnimationType.componentFade}
-              style={defaultStyles.flex}
-            >
-              <PlayerDetails
-                configuration={configuration}
-                style={defaultStyles.playerDetails}
-                entry={entry}
-                isTabletLandscape={isTabletLandscape}
-                isTablet={isTablet}
-              />
-            </AnimationComponent>
-          ) : null}
-        </AnimatedScrollModal>
-      </AnimationComponent>
+        {playerContent(childrenStyles)}
+      </View>
     </WrapperView>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -17,11 +17,7 @@ import {
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
-import {
-  useModalSize,
-  useBackgroundColor,
-  useInitialPlayerState,
-} from "./hooks";
+import { useModalSize, useInitialPlayerState } from "./hooks";
 
 import { APP_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/events";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -33,8 +29,6 @@ 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({
@@ -65,7 +59,6 @@ const VideoModalComponent = () => {
 
   const modalSize = useModalSize();
   const isFirstRender = useIsInitialRender();
-  const backgroundColor = useBackgroundColor();
 
   const {
     closeVideoModal,
@@ -145,20 +138,13 @@ const VideoModalComponent = () => {
           {mode === "FULLSCREEN" && <OpaqueLayer />}
 
           {itemIdHooksFinished === item?.id ? (
-            <AnimatedPlayerModalWrapper
-              style={[
-                styles.container,
-                {
-                  backgroundColor,
-                },
-              ]}
-            >
+            <View pointerEvents="box-none" style={styles.container}>
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
                 mode={mode}
               />
-            </AnimatedPlayerModalWrapper>
+            </View>
           ) : (
             <View style={styles.loaderContainer}>
               <Spinner />

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import renderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const props = {
   entry: {},
@@ -42,16 +42,16 @@ const { PlayerDetails } = require("../PlayerDetails");
 
 describe("PlayerDetails", () => {
   it("renders properly", () => {
-    const element = renderer.create(<PlayerDetails {...props} />);
+    const { toJSON } = render(<PlayerDetails {...props} />);
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("renders properly on tablet in landscape orientation", () => {
-    const element = renderer.create(
+    const { toJSON } = render(
       <PlayerDetails {...props} isTabletLandscape={true} />
     );
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -13,6 +13,7 @@ const props = {
     tablet_landscape_sidebar_width: "35%",
     tablet_landscape_player_container_background_color: "red",
   },
+  playerContent: jest.fn(() => <></>),
 };
 
 const mockUseIsDeviceTablet = jest.fn();
@@ -122,13 +123,6 @@ describe("PlayerWrapper", () => {
       </PlayerWrapper>
     );
 
-    const expectDimensions = {
-      ...dimensions,
-      width: undefined,
-      aspectRatio: 16 / 9,
-    };
-
     expect(element).toMatchSnapshot();
-    expect(children).toHaveBeenCalledWith(expectDimensions);
   });
 });

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -21,87 +21,27 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-      <View
-        animationType="componentFade"
-        style={
-          {
-            "flex": 1,
-          }
-        }
-      >
-        <View
-          configuration={
-            {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            {
-              "id": "test",
-            }
-          }
-          isTablet={false}
-          isTabletLandscape={false}
-          style={
-            {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -127,57 +67,27 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": undefined,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": undefined,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -203,103 +113,27 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "red",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "row",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": 195,
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      >
-        <View
-          additionalData={
-            {
-              "disableAnimatedComponent": false,
-              "resetAnimationValue": undefined,
-              "useLayoutMeasure": true,
-            }
-          }
-          animationType="moveUpComponent"
-          style={
-            {
-              "flex": 1,
-            }
-          }
-        />
-      </View>
-      <View
-        animationType="componentFade"
-        style={
-          {
-            "flex": 1,
-          }
-        }
-      >
-        <View
-          configuration={
-            {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            {
-              "id": "test",
-            }
-          }
-          isTablet={true}
-          isTabletLandscape={true}
-          style={
-            {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -325,57 +159,27 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7786666666666666,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;