@applicaster/quick-brick-player 15.0.0-rc.5 → 15.0.0-rc.50

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,34 +1,36 @@
-import React, { ReactElement, useRef } from "react";
+import React, { ReactElement, useMemo, useRef } from "react";
 
-import { Animated, Pressable, StyleSheet, ViewStyle } from "react-native";
+import { Animated, Pressable } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { useVideoModalState } from "./hooks";
 import {
   DEFAULT_IMAGE_RATIO_VIDEO,
-  MODAL_COLLAPSE_START,
+  MODAL_COLLAPSE_RATIO,
   MODAL_RADIUS,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
   VIDEO_TRANSITION_THRESHOLD,
 } from "./consts";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  SafeAreaView,
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { GestureAnimatedScrollView } from "./GestureAnimatedScrollView";
 import { PlayerDetailsWrapperHeightContext } from "./context";
+import {
+  getInsetsOffset,
+  getWindowHeight,
+  getWindowWidth,
+  directionStyles,
+  getScaledPos,
+  getExtraContentPadding,
+} from "./utils";
+import { addOrientationChangeListener } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
-const orientationStyles = StyleSheet.create({
-  landscape: { flexDirection: "row" },
-  portrait: { flexDirection: "column" },
-});
-
-const directionStyles = (isLandscape: boolean): ViewStyle => {
-  return isLandscape ? orientationStyles.landscape : orientationStyles.portrait;
-};
+const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 
 type AnimatedModalProps = {
   pip?: boolean;
@@ -46,8 +48,6 @@ type AnimatedModalProps = {
   };
 };
 
-const height = SCREEN_HEIGHT;
-
 export function VideoPlayerModal({
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
   content,
@@ -62,28 +62,33 @@ export function VideoPlayerModal({
   const enabled = !!modal && !fullscreen;
   const isTablet = useIsTablet();
 
-  let width = SCREEN_WIDTH;
+  // remember initial width, ignore rotation changes
+  const width = useMemo(
+    () =>
+      isTablet && !isTabletPortrait
+        ? style.tabletLandscapeWidth
+        : getWindowWidth(isTablet, !isTabletPortrait),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const height = useMemo(
+    () => getWindowHeight(isTablet, !isTabletPortrait),
+    []
+  ); // remember initial height, ignore rotation changes
 
-  if (isTablet && !isTabletPortrait) {
-    width = style?.tabletLandscapeWidth || width;
-  }
+  const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   const { minimised_height: minimisedHeight } = useConfiguration();
   const scrollViewRef = useRef<typeof Animated.ScrollView | null>(null);
 
-  const translateYRef = useModalAnimationContext().yTranslate;
-  // used when modal is false, should not be used in animation
-  const dummyRef = useRef(new Animated.Value(0));
+  const { translateY, collapsed, gestureHandlerProps, expand, offset } =
+    useVideoModalState();
 
-  const {
-    translateY,
-    collapsed,
-    collapsedHeight,
-    gestureHandlerProps,
-    expand,
-  } = useVideoModalState(modal ? translateYRef : dummyRef);
+  const frame = useSafeAreaFrame();
+  const collapsedHeight = frame.height - offset.current;
 
-  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+  const heightAboveMinimised = height - collapsedHeight;
 
   const styles = useStyles({ height: collapsedHeight });
 
@@ -91,66 +96,73 @@ export function VideoPlayerModal({
 
   const insets = useSafeAreaInsets();
 
-  const isFullScreenOrPIP = fullscreen || pip;
+  const [isFullScreenMode, setFullScreenMode] = React.useState(
+    fullscreen || pip
+  );
+
+  React.useEffect(() => {
+    const listener = addOrientationChangeListener(({ toOrientation }) => {
+      /* ignored in collapsed mode non-PiP player */
+      if (collapsed && !pip) return;
+      setFullScreenMode(!(toOrientation === 1));
+    });
+
+    return () => {
+      listener.remove();
+    };
+  }, [collapsed, pip]);
 
-  // Interpolated opacities for smooth cross-fade
+  const isFullScreenOrPIP = isFullScreenMode;
+
+  const vidHeight = width / aspectRatio;
+
+  // animated opacity for smooth cross-fade of collapsed content
   const collapsedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [MODAL_COLLAPSE_START, height - collapsedHeight],
+        inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
         outputRange: [0, 1],
         extrapolate: "clamp",
       })
     : new Animated.Value(0);
 
+  // animated opacity for extra content
   const expandedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [1, 0],
         extrapolate: "clamp",
       })
     : new Animated.Value(1);
 
+  // animated x position for video content
   const xPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [
-          height * VIDEO_TRANSITION_THRESHOLD,
-          height - collapsedHeight,
-        ],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
         outputRange: [0, -(width - width * SCALE_FACTOR) / 2],
         extrapolate: "clamp",
       })
     : new Animated.Value(0);
 
-  const vidHeight = width / aspectRatio;
-
+  // animated y position for video content
   const yPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [
-          height * VIDEO_TRANSITION_THRESHOLD,
-          height - collapsedHeight,
-        ],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
         outputRange: [
           0,
-          isTablet && isTabletLandscape
-            ? -((-PROGRESS_BAR_HEIGHT + height - vidHeight * SCALE_FACTOR) / 2)
-            : -(
-                PROGRESS_BAR_HEIGHT +
-                insets.top / 2 +
-                (SCREEN_WIDTH / aspectRatio -
-                  (SCREEN_WIDTH / aspectRatio) * SCALE_FACTOR) /
-                  2
-              ),
+          -(
+            PROGRESS_BAR_HEIGHT +
+            getInsetsOffset(insets, isTabletPortrait) +
+            getScaledPos(height, vidHeight, minimisedHeight, isTabletPortrait)
+          ),
         ],
         extrapolate: "clamp",
       })
     : new Animated.Value(0);
 
+  // animated position for video content
   const scalePosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [
-          height * VIDEO_TRANSITION_THRESHOLD,
-          height - collapsedHeight,
-        ],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
         outputRange: [1, SCALE_FACTOR],
         extrapolate: "clamp",
       })
@@ -158,7 +170,7 @@ export function VideoPlayerModal({
 
   const borderTopRadiusAnimated = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [MODAL_RADIUS, 0],
         extrapolate: "clamp",
       })
@@ -182,90 +194,96 @@ export function VideoPlayerModal({
     <PanGestureHandler
       enabled={enabled}
       waitFor={scrollViewRef}
+      activeOffsetY={[-25, 25]}
+      activeOffsetX={[-25, 25]}
       {...gestureHandlerProps}
     >
-      <Animated.View
-        pointerEvents={"auto"}
-        style={[
-          styles.modalWrapper,
-          {
-            borderTopLeftRadius: borderTopRadiusAnimated,
-            borderTopRightRadius: borderTopRadiusAnimated,
-            transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
-            height: height,
-          },
-        ]}
-      >
+      <AnimatedSafeAreaView pointerEvents="box-none" edges={["bottom"]}>
         <Animated.View
           pointerEvents={"auto"}
           style={[
-            styles.modal,
-            collapsed ? styles.collapsedModalBg : null,
+            styles.modalWrapper,
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: height,
+              transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
+              height: frame.height,
             },
           ]}
         >
           <Animated.View
-            pointerEvents={!collapsed ? "auto" : "none"}
-            style={[styles.modalContent, directionStyles(isTabletLandscape)]}
+            pointerEvents={"auto"}
+            style={[
+              styles.modal,
+              collapsed ? styles.collapsedModalBg : null,
+              {
+                borderTopLeftRadius: borderTopRadiusAnimated,
+                borderTopRightRadius: borderTopRadiusAnimated,
+              },
+            ]}
           >
             <Animated.View
+              pointerEvents={!collapsed ? "auto" : "none"}
               style={[
-                styles.expandedContentContainer,
-                {
-                  transform: [
-                    { translateX: xPosition },
-                    { translateY: yPosition },
-                    { scale: scalePosition },
-                  ],
-                },
+                pip ? styles.modalContentPiP : styles.modalContent,
+                directionStyles(isTabletPortrait),
               ]}
             >
-              {content}
+              <Animated.View
+                style={[
+                  styles.expandedContentContainer,
+                  {
+                    transform: [
+                      { translateX: xPosition },
+                      { translateY: yPosition },
+                      { scale: scalePosition },
+                    ],
+                  },
+                ]}
+              >
+                {content}
+              </Animated.View>
+              {extraContent ? (
+                <GestureAnimatedScrollView
+                  ref={scrollViewRef}
+                  contentContainerStyle={getExtraContentPadding(insets)}
+                  bounces={false}
+                  overScrollMode="never"
+                  onLayout={onScrollViewLayout}
+                  style={[
+                    styles.extraContentScrollView,
+                    { opacity: expandedOpacity },
+                  ]}
+                >
+                  <PlayerDetailsWrapperHeightContext.Provider
+                    value={playerDetailsWrapperHeight}
+                  >
+                    {extraContent}
+                  </PlayerDetailsWrapperHeightContext.Provider>
+                </GestureAnimatedScrollView>
+              ) : null}
             </Animated.View>
-            {extraContent ? (
-              <GestureAnimatedScrollView
-                ref={scrollViewRef}
-                contentContainerStyle={{
-                  paddingBottom: insets.bottom,
-                }}
-                onLayout={onScrollViewLayout}
+
+            {!isFullScreenOrPIP ? (
+              <Animated.View
+                pointerEvents={collapsed ? "box-none" : "none"}
                 style={[
-                  styles.extraContentScrollView,
-                  { opacity: expandedOpacity },
+                  styles.collapsedBarContainer,
+                  { opacity: collapsedOpacity },
                 ]}
               >
-                <PlayerDetailsWrapperHeightContext.Provider
-                  value={playerDetailsWrapperHeight}
+                <Pressable
+                  testID="collapsedBarWrapper"
+                  onPress={expand}
+                  style={styles.collapsedBarWrapper}
                 >
-                  {extraContent}
-                </PlayerDetailsWrapperHeightContext.Provider>
-              </GestureAnimatedScrollView>
+                  {collapsedContent}
+                </Pressable>
+              </Animated.View>
             ) : null}
           </Animated.View>
-
-          {!isFullScreenOrPIP ? (
-            <Animated.View
-              pointerEvents={collapsed ? "box-none" : "none"}
-              style={[
-                styles.collapsedBarContainer,
-                { opacity: collapsedOpacity },
-              ]}
-            >
-              <Pressable
-                testID="collapsedBarWrapper"
-                onPress={expand}
-                style={styles.collapsedBarWrapper}
-              >
-                {collapsedContent}
-              </Pressable>
-            </Animated.View>
-          ) : null}
         </Animated.View>
-      </Animated.View>
+      </AnimatedSafeAreaView>
     </PanGestureHandler>
   );
 }

package/src/Player/PlayerModal/consts/index.ts

@@ -1,26 +1,7 @@
-import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
-import {
-  isAndroidPlatform,
-  isAndroidVersionAtLeast,
-} from "@applicaster/zapp-react-native-utils/reactUtils";
-import { Dimensions, StatusBar } from "react-native";
-
 export const DOCKED_PROGRESSBAR_HEIGHT = 3; // Height of the docked progress bar plugins/mobile-transport-controls/src/ProgressBar/layouts/DockedLayout.tsx
 
 export const VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
 
-const windowDimensions = Dimensions.get("window");
-
-const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(34) && !isAndroidTablet();
-
-export const SCREEN_WIDTH = windowDimensions.width;
-
-export const SCREEN_HEIGHT =
-  windowDimensions.height + (isOldAndroidDevice ? StatusBar.currentHeight : 0);
-
-export const MODAL_COLLAPSE_START = SCREEN_HEIGHT * 0.7; // 70% of screen height
-
 export const DRAG_TO_COLLAPSE = 0.02; // 2% to collapse
 
 export const DRAG_TO_EXPAND = 0.02; // 2% to expand
@@ -32,3 +13,5 @@ export const DEFAULT_IMAGE_RATIO_AUDIO = 1; // Default aspect ratio for audio
 export const ANIMATION_DURATION = 250; // Default animation duration in milliseconds
 
 export const MODAL_RADIUS = 16; // Default border radius for modal
+
+export const MODAL_COLLAPSE_RATIO = 0.7; // 70% of the screen height