@applicaster/quick-brick-player 15.0.0-rc.3 → 15.0.0-rc.30

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,34 +1,34 @@
-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";
-
-const orientationStyles = StyleSheet.create({
-  landscape: { flexDirection: "row" },
-  portrait: { flexDirection: "column" },
-});
-
-const directionStyles = (isLandscape: boolean): ViewStyle => {
-  return isLandscape ? orientationStyles.landscape : orientationStyles.portrait;
-};
+import {
+  getInsetsOffset,
+  getWindowHeight,
+  getWindowWidth,
+  directionStyles,
+  getScaledPos,
+  getExtraContentPadding,
+} from "./utils";
 
 type AnimatedModalProps = {
   pip?: boolean;
@@ -46,8 +46,6 @@ type AnimatedModalProps = {
   };
 };
 
-const height = SCREEN_HEIGHT;
-
 export function VideoPlayerModal({
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
   content,
@@ -62,11 +60,18 @@ 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(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
-  if (isTablet && !isTabletPortrait) {
-    width = style?.tabletLandscapeWidth || width;
-  }
+  const height = useMemo(() => getWindowHeight(), []); // remember initial height, ignore rotation changes
+  const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   const { minimised_height: minimisedHeight } = useConfiguration();
   const scrollViewRef = useRef<typeof Animated.ScrollView | null>(null);
@@ -83,7 +88,9 @@ export function VideoPlayerModal({
     expand,
   } = useVideoModalState(modal ? translateYRef : dummyRef);
 
-  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+  const frame = useSafeAreaFrame();
+
+  const heightAboveMinimised = height - collapsedHeight;
 
   const styles = useStyles({ height: collapsedHeight });
 
@@ -96,7 +103,7 @@ export function VideoPlayerModal({
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [MODAL_COLLAPSE_START, height - collapsedHeight],
+        inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
         outputRange: [0, 1],
         extrapolate: "clamp",
       })
@@ -104,18 +111,16 @@ export function VideoPlayerModal({
 
   const expandedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [1, 0],
         extrapolate: "clamp",
       })
     : new Animated.Value(1);
 
+  // animated position for video content during modal transition
   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",
       })
@@ -123,34 +128,26 @@ export function VideoPlayerModal({
 
   const vidHeight = width / aspectRatio;
 
+  // animated position for video content during modal transition
   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 during modal transition
   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 +155,7 @@ export function VideoPlayerModal({
 
   const borderTopRadiusAnimated = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [MODAL_RADIUS, 0],
         extrapolate: "clamp",
       })
@@ -184,88 +181,92 @@ export function VideoPlayerModal({
       waitFor={scrollViewRef}
       {...gestureHandlerProps}
     >
-      <Animated.View
-        pointerEvents={"auto"}
-        style={[
-          styles.modalWrapper,
-          {
-            borderTopLeftRadius: borderTopRadiusAnimated,
-            borderTopRightRadius: borderTopRadiusAnimated,
-            transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
-            height: height,
-          },
-        ]}
-      >
+      <SafeAreaView 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>
+      </SafeAreaView>
     </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

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

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { State } from "react-native-gesture-handler";
 import { Animated } from "react-native";
 
@@ -12,10 +15,10 @@ import {
   ANIMATION_DURATION,
   DRAG_TO_COLLAPSE,
   DRAG_TO_EXPAND,
-  SCREEN_HEIGHT,
 } from "../consts";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { isOldAndroidDevice } from "../utils";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -36,18 +39,21 @@ export const useVideoModalState = (
 
   const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
 
-  const collapsed = videoModalState.mode === VideoModalMode.MINIMIZED;
-
-  const { bottom } = useSafeAreaInsets();
+  const collapsed =
+    videoModalState.visible &&
+    videoModalState.mode === VideoModalMode.MINIMIZED;
 
-  const initialBottomOffset = useRef(bottom).current;
+  const frame = useSafeAreaFrame();
+  const insets = useSafeAreaInsets();
 
   const collapsedHeight =
     minimisedHeight +
-    initialBottomOffset +
     (menuVisible ? bottomTabBarHeight : 0) +
+    (isOldAndroidDevice ? 0 : insets.bottom) + // insets.bottom is added to properly display docked modal
     PROGRESS_BAR_HEIGHT;
 
+  const heightAboveMinimised = frame.height - collapsedHeight;
+
   const translateY = translateYRef.current;
 
   const handleExpand = useCallback(
@@ -72,7 +78,7 @@ export const useVideoModalState = (
     [translateYRef]
   );
 
-  const offset = useRef(SCREEN_HEIGHT - collapsedHeight);
+  const offset = useRef(heightAboveMinimised);
 
   // Gesture handler for modal
   const onGestureEvent = useCallback(
@@ -82,8 +88,8 @@ export const useVideoModalState = (
         let newY = offset.current + y;
         if (newY < 0) newY = 0;
 
-        if (newY > SCREEN_HEIGHT - collapsedHeight) {
-          newY = SCREEN_HEIGHT - collapsedHeight;
+        if (newY > heightAboveMinimised) {
+          newY = heightAboveMinimised;
         }
 
         translateY.setValue(newY);
@@ -99,25 +105,25 @@ export const useVideoModalState = (
         let newY = offset.current + translationY;
         if (newY < 0) newY = 0;
 
-        if (newY > SCREEN_HEIGHT - collapsedHeight) {
-          newY = SCREEN_HEIGHT - collapsedHeight;
+        if (newY > heightAboveMinimised) {
+          newY = heightAboveMinimised;
         }
 
         const shouldCollapse =
-          translationY > (SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_COLLAPSE;
+          translationY > heightAboveMinimised * DRAG_TO_COLLAPSE;
 
         const shouldExpand =
-          translationY < -(SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_EXPAND;
+          translationY < -heightAboveMinimised * DRAG_TO_EXPAND;
 
         if (!collapsed && shouldCollapse) {
           // Collapse
           Animated.timing(translateY, {
-            toValue: SCREEN_HEIGHT - collapsedHeight,
+            toValue: heightAboveMinimised,
             duration: ANIMATION_DURATION,
             useNativeDriver: true,
           }).start(() => {
             minimiseVideoModal();
-            offset.current = SCREEN_HEIGHT - collapsedHeight;
+            offset.current = heightAboveMinimised;
           });
         } else if (collapsed && shouldExpand) {
           // Expand
@@ -133,10 +139,10 @@ export const useVideoModalState = (
         } else {
           // Snap back to current state
           Animated.spring(translateY, {
-            toValue: collapsed ? SCREEN_HEIGHT - collapsedHeight : 0,
+            toValue: collapsed ? heightAboveMinimised : 0,
             useNativeDriver: true,
           }).start(() => {
-            offset.current = collapsed ? SCREEN_HEIGHT - collapsedHeight : 0;
+            offset.current = collapsed ? heightAboveMinimised : 0;
             translateY.setValue(offset.current);
           });
         }
@@ -158,20 +164,27 @@ export const useVideoModalState = (
   }, [onGestureEvent, onHandlerStateChange]);
 
   useEffect(() => {
-    if (videoModalState.mode === VideoModalMode.MAXIMIZED) {
-      handleExpand(0).start(() => {
-        maximiseVideoModal();
-        offset.current = 0;
-        translateY.setValue(0);
-      });
-    } else if (videoModalState.mode === VideoModalMode.MINIMIZED) {
-      handleCollapse(SCREEN_HEIGHT - collapsedHeight).start(() => {
-        minimiseVideoModal();
-        offset.current = SCREEN_HEIGHT - collapsedHeight;
-        translateY.setValue(SCREEN_HEIGHT - collapsedHeight);
-      });
+    if (videoModalState.visible) {
+      if (videoModalState.mode === VideoModalMode.MAXIMIZED) {
+        handleExpand(0).start(() => {
+          maximiseVideoModal();
+          offset.current = 0;
+          translateY.setValue(0);
+        });
+      } else if (videoModalState.mode === VideoModalMode.MINIMIZED) {
+        handleCollapse(heightAboveMinimised).start(() => {
+          minimiseVideoModal();
+          offset.current = heightAboveMinimised;
+          translateY.setValue(heightAboveMinimised);
+        });
+      }
     }
-  }, [videoModalState.visible, videoModalState.mode, collapsedHeight]);
+  }, [
+    videoModalState.visible,
+    videoModalState.mode,
+    collapsedHeight,
+    heightAboveMinimised,
+  ]);
 
   return useMemo(
     () => ({

package/src/Player/PlayerModal/styles.ts

@@ -63,6 +63,7 @@ export const useStyles = ({ height }: { height: number }) => {
           backgroundColor,
           elevation: 10,
           zIndex: 100,
+          height: "100%",
           overflow: "hidden",
         },
         modalWrapper: {
@@ -75,6 +76,10 @@ export const useStyles = ({ height }: { height: number }) => {
           flex: 1,
           alignItems: "center",
         },
+        modalContentPiP: {
+          flex: 1,
+          alignItems: "flex-start",
+        },
         expandedContentContainer: {
           justifyContent: "flex-start",
           backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,

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

@@ -0,0 +1,92 @@
+import { StyleSheet, Dimensions, ViewStyle } from "react-native";
+
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+  isTV,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  isTablet,
+  useIsTablet as getIsTablet,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
+export const isOldAndroidDevice =
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
+
+export const getWindowHeight = (): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  return windowDimensions.height;
+};
+
+export const getScreenHeight = (): number => {
+  const screenDimensions = Dimensions.get("screen");
+
+  return screenDimensions.height;
+};
+
+export const getWindowWidth = (): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  return windowDimensions.width;
+};
+
+const getIsTabletLandscape = (isTabletPortrait: boolean): boolean => {
+  return !isTV() && isTablet() && !isTabletPortrait;
+};
+
+export const getInsetsOffset = (
+  insets: { top: number; bottom: number },
+  isTabletPortrait: boolean
+): number => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return isTablet() && isTabletLandscape
+    ? isOldAndroidDevice
+      ? insets.top / 2
+      : 0
+    : insets.top / 2;
+};
+
+const orientationStyles = StyleSheet.create({
+  landscape: { flexDirection: "row" },
+  portrait: { flexDirection: "column" },
+});
+
+export const directionStyles = (isTabletPortrait: boolean): ViewStyle => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return isTabletLandscape
+    ? orientationStyles.landscape
+    : orientationStyles.portrait;
+};
+
+export const getScaledPos = (
+  height,
+  vidHeight,
+  minimisedHeight,
+  isTabletPortrait
+) => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  const SCALE_FACTOR = minimisedHeight / vidHeight; // Scale factor for expanded content
+
+  return (
+    ((isTabletLandscape ? height : vidHeight) - vidHeight * SCALE_FACTOR) / 2
+  );
+};
+
+export const getExtraContentPadding = (insets: {
+  top: number;
+  bottom: number;
+}): ViewStyle => {
+  const isTablet = getIsTablet(); // not a hook, just a utility function
+
+  return {
+    paddingTop: isTablet ? insets.top : 0,
+    paddingBottom: insets.bottom,
+  };
+};

package/src/Player/PlayerView/types.ts

@@ -10,9 +10,8 @@ export interface PlayNextOverlayProps {
 }
 
 export interface PlayerComponentProps {
-  ref: React.RefObject<any>;
+  ref: React.Ref<any>;
   listener: Record<string, any>;
-  configuration: Record<string, any>;
   style: ViewStyle;
 }