@applicaster/quick-brick-player 15.0.0-alpha.4069571733 → 15.0.0-alpha.4153840309

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-alpha.4069571733",
+  "version": "15.0.0-alpha.4153840309",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-alpha.4069571733",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-rc.36",
     "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.15",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4069571733",
+    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.4153840309",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.4153840309",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4153840309",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -90,7 +90,8 @@ const styles = StyleSheet.create({
   marginTop: { marginTop: PROGRESS_BAR_HEIGHT },
 });
 
-const getValue = (key: string, stylesObj: {}) => stylesObj?.[key] ?? null;
+const getValue = (key: string, stylesObj: Record<string, any>) =>
+  stylesObj?.[key] ?? null;
 
 const controlButtons = (
   live: boolean,
@@ -208,7 +209,7 @@ export const DockedControls = (props: Props) => {
 
   const insets = useSafeAreaInsets();
 
-  const progresBarLayoutState = React.useMemo(
+  const progressBarLayoutState = React.useMemo(
     () => ({
       inline: layoutState.inline,
       docked: true,
@@ -275,7 +276,7 @@ export const DockedControls = (props: Props) => {
             content={entry}
             value={value}
             visible
-            layoutState={progresBarLayoutState}
+            layoutState={progressBarLayoutState}
             onPlayerSeek={onPlayerSeek}
             playerState={playerState}
             docked

package/src/Player/AudioLayer/Layout/PlayerImage/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LayoutChangeEvent, View } from "react-native";
+import { Animated, LayoutChangeEvent, View } from "react-native";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
@@ -8,6 +8,7 @@ import { FlexImage } from "./FlexImage";
 
 import { styles } from "./styles";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
   entry: ZappEntry;
@@ -29,15 +30,34 @@ export const PlayerImage = (props: Props) => {
     configuration.audio_player_artwork_border_radius
   );
 
+  const { yTranslate } = useModalAnimationContext();
+
+  const isModalExpanded = yTranslate.current.interpolate({
+    inputRange: [0, 1], // this should be end with `1` only when it's in initial state ( 0pos), otherwise `0`
+    outputRange: [1, 0],
+  });
+
+  // do not use styles.shadow when isModalExpanded is 0
+
+  const animatedStyle = {
+    opacity: isModalExpanded,
+  };
+
   return (
     <View style={styles.alignItemsCenter}>
+      {/* Using an Animated.View to apply shadow to the image */}
+      <Animated.View
+        style={[
+          animatedStyle,
+          shouldShowShadow ? styles.shadow : undefined,
+          { borderRadius },
+        ]}
+      />
       <View
         onLayout={onLayoutImage}
-        style={[shouldShowShadow ? styles.shadow : undefined, { borderRadius }]}
+        style={[styles.defaultImageWrapperView, { borderRadius }]}
       >
-        <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
-          <FlexImage entry={entry} style={styles.backgroundImageContainer} />
-        </View>
+        <FlexImage entry={entry} style={styles.backgroundImageContainer} />
       </View>
     </View>
   );

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -23,7 +23,12 @@ export const styles = StyleSheet.create({
     overflow: "hidden",
   },
   shadow: {
-    borderColor: "transparent",
+    zIndex: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },
     shadowOpacity: platformSelect({

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -5,8 +5,8 @@ import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useVideoModalState } from "./hooks";
 import { MODAL_COLLAPSE_RATIO, MODAL_RADIUS } from "./consts";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { getWindowHeight } from "./utils";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 type AnimatedModalProps = {
   content?: ReactElement;
@@ -17,22 +17,18 @@ export function AnimatedModal({
   content,
   collapsedContent,
 }: AnimatedModalProps) {
-  const translateYRef = useModalAnimationContext().yTranslate;
+  const { translateY, collapsed, gestureHandlerProps, expand, offset } =
+    useVideoModalState();
 
-  const {
-    translateY,
-    collapsed,
-    collapsedHeight,
-    gestureHandlerProps,
-    expand,
-  } = useVideoModalState(translateYRef);
+  const frame = useSafeAreaFrame();
+  const collapsedHeight = frame.height - offset.current;
 
-  const styles = useStyles({ height: collapsedHeight, type: "audio" });
+  const height = getWindowHeight();
+  const heightAboveMinimised = height - collapsedHeight;
 
-  const WINDOW_HEIGHT = getWindowHeight();
-  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+  const styles = useStyles({ height: collapsedHeight, type: "audio" });
 
-  const MODAL_COLLAPSE_START = WINDOW_HEIGHT * MODAL_COLLAPSE_RATIO;
+  const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = translateY.interpolate({
@@ -63,7 +59,7 @@ export function AnimatedModal({
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
             transform: [{ translateY }],
-            height: WINDOW_HEIGHT,
+            height: height,
           },
         ]}
       >
@@ -73,7 +69,6 @@ export function AnimatedModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: WINDOW_HEIGHT,
             },
           ]}
         >

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,6 +1,6 @@
 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";
@@ -12,22 +12,25 @@ import {
   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 { getWindowHeight, getWindowWidth } from "./utils";
-
-const orientationStyles = StyleSheet.create({
-  landscape: { flexDirection: "row" },
-  portrait: { flexDirection: "column" },
-});
+import {
+  getInsetsOffset,
+  getWindowHeight,
+  getWindowWidth,
+  directionStyles,
+  getScaledPos,
+  getExtraContentPadding,
+} from "./utils";
+import { addOrientationChangeListener } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
-const directionStyles = (isLandscape: boolean): ViewStyle => {
-  return isLandscape ? orientationStyles.landscape : orientationStyles.portrait;
-};
+const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 
 type AnimatedModalProps = {
   pip?: boolean;
@@ -59,44 +62,61 @@ export function VideoPlayerModal({
   const enabled = !!modal && !fullscreen;
   const isTablet = useIsTablet();
 
-  const WINDOW_WIDTH = useMemo(() => getWindowWidth(), []); // remember initial width, ignore rotation changes
-  const height = useMemo(() => getWindowHeight(), []); // remember initial height, ignore rotation changes
-  const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
+  // remember initial width, ignore rotation changes
+  const width = useMemo(
+    () =>
+      isTablet && !isTabletPortrait
+        ? style.tabletLandscapeWidth
+        : getWindowWidth(isTablet, !isTabletPortrait),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
-  let width = WINDOW_WIDTH;
+  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 heightAboveMinimised = height - collapsedHeight;
 
-  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
-
   const styles = useStyles({ height: collapsedHeight });
 
   const SCALE_FACTOR = 1 / (width / aspectRatio / minimisedHeight); // Scale factor for expanded content
 
   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]);
+
+  const isFullScreenOrPIP = isFullScreenMode;
+
+  const vidHeight = width / aspectRatio;
 
-  // Interpolated opacities for smooth cross-fade
+  // animated opacity for smooth cross-fade of collapsed content
   const collapsedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
@@ -105,6 +125,7 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(0);
 
+  // animated opacity for extra content
   const expandedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [0, heightAboveMinimised],
@@ -113,6 +134,7 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(1);
 
+  // animated x position for video content
   const xPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
@@ -121,27 +143,23 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(0);
 
-  const vidHeight = width / aspectRatio;
-
+  // animated y position for video content
   const yPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
         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 +
-                (WINDOW_WIDTH / aspectRatio -
-                  (WINDOW_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, MODAL_COLLAPSE_START],
@@ -152,7 +170,7 @@ export function VideoPlayerModal({
 
   const borderTopRadiusAnimated = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [MODAL_RADIUS, 0],
         extrapolate: "clamp",
       })
@@ -176,93 +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"}
+            pointerEvents={"auto"}
             style={[
-              pip ? styles.modalContentPiP : styles.modalContent,
-              directionStyles(isTabletLandscape),
+              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/hooks/index.ts

@@ -1,159 +1,132 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 import { State } from "react-native-gesture-handler";
-import { Animated } from "react-native";
 
 import { VideoModalMode } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
-import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
-import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+import { useAnimationStateStore } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
-import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import {
   ANIMATION_DURATION,
   DRAG_TO_COLLAPSE,
   DRAG_TO_EXPAND,
 } 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 { getWindowHeight } from "../utils";
-
-const bottomTabBarHeight = getTabBarHeight();
-
-export const useVideoModalState = (
-  translateYRef: React.MutableRefObject<Animated.Value>
-) => {
-  const { minimised_height: minimisedHeight } = useConfiguration();
+import { Animated } from "react-native";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
-  const WINDOW_HEIGHT = getWindowHeight();
+const getAnimatedValue = (animatedValue: Animated.Value): number => {
+  return (animatedValue as any).__getValue() as number;
+};
 
+export const useVideoModalState = () => {
   const {
-    maximiseVideoModal,
-    minimiseVideoModal,
-    videoModalState,
-    currentRoute,
-    screenData,
-  } = useNavigation();
-
-  const plugins = usePlugins();
-
-  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
-
-  const collapsed =
-    videoModalState.visible &&
-    videoModalState.mode === VideoModalMode.MINIMIZED;
-
-  const { bottom } = useSafeAreaInsets();
-
-  const initialBottomOffset = useRef(bottom).current;
-
-  const collapsedHeight =
-    minimisedHeight +
-    initialBottomOffset +
-    (menuVisible ? bottomTabBarHeight : 0) +
-    PROGRESS_BAR_HEIGHT;
-
-  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
-
-  const translateY = translateYRef.current;
-
-  const handleExpand = useCallback(
-    (toValue: number) => {
-      return Animated.timing(translateYRef.current, {
+    yTranslate,
+    offset,
+    heightAboveMinimised,
+    gestureTranslationRef,
+    offsetAnimatedValueRef,
+  } = useModalAnimationContext();
+
+  const modalAnimatedValue = offsetAnimatedValueRef.current;
+  const gestureTranslation = gestureTranslationRef.current;
+
+  const updateModalTranslation = useCallback(
+    (toValue: number, duration: number = ANIMATION_DURATION) =>
+      Animated.timing(modalAnimatedValue, {
         toValue,
-        duration: ANIMATION_DURATION,
+        duration,
         useNativeDriver: true,
-      });
-    },
-    [translateYRef]
+      }),
+    [modalAnimatedValue]
   );
 
-  const handleCollapse = useCallback(
-    (toValue: number) => {
-      return Animated.timing(translateYRef.current, {
-        toValue,
-        duration: ANIMATION_DURATION,
-        useNativeDriver: true,
-      });
-    },
-    [translateYRef]
-  );
+  const translateY = yTranslate.current;
 
-  const offset = useRef(heightAboveMinimised);
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
 
-  // Gesture handler for modal
-  const onGestureEvent = useCallback(
-    (event: any) => {
-      if (event.nativeEvent.state === State.ACTIVE) {
-        const y = event.nativeEvent.translationY;
-        let newY = offset.current + y;
-        if (newY < 0) newY = 0;
+  const videoModalMode = videoModalState.mode;
 
-        if (newY > heightAboveMinimised) {
-          newY = heightAboveMinimised;
-        }
+  const prevModeStateRef = useRef(videoModalMode); // keep track of last non-PIP mode
+  const gestureStateRef = useRef<any>(State.UNDETERMINED); // keep track of gesture state
 
-        translateY.setValue(newY);
-      }
-    },
-    [collapsedHeight, translateY]
+  // Track last non-PIP mode
+  if (videoModalMode !== prevModeStateRef.current) {
+    if (["MAXIMIZED", "MINIMIZED"].includes(videoModalMode)) {
+      prevModeStateRef.current = videoModalMode;
+    }
+  }
+
+  const collapsed =
+    videoModalState.visible &&
+    ((prevModeStateRef.current === "MINIMIZED" &&
+      videoModalState.mode === "PIP") || // If STILL in PIP mode, check if last non-PIP mode was MINIMIZED
+      videoModalState.mode === VideoModalMode.MINIMIZED); // Or if currently in MINIMIZED mode
+
+  // Gesture handler for modal
+  const onGestureEvent = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { translationY: gestureTranslation } }], {
+        useNativeDriver: true,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
   const onHandlerStateChange = useCallback(
     (event: any) => {
-      if (event.nativeEvent.oldState === State.ACTIVE) {
-        const { translationY } = event.nativeEvent;
-        let newY = offset.current + translationY;
-        if (newY < 0) newY = 0;
+      const { state: newState, oldState, translationY } = event.nativeEvent;
 
-        if (newY > heightAboveMinimised) {
-          newY = heightAboveMinimised;
-        }
+      if (newState === State.ACTIVE || oldState === State.ACTIVE) {
+        useAnimationStateStore.setState({
+          isAnimationInProgress: newState === State.ACTIVE,
+        });
+      }
 
-        const shouldCollapse =
-          translationY > heightAboveMinimised * DRAG_TO_COLLAPSE;
-
-        const shouldExpand =
-          translationY < -heightAboveMinimised * DRAG_TO_EXPAND;
-
-        if (!collapsed && shouldCollapse) {
-          // Collapse
-          Animated.timing(translateY, {
-            toValue: heightAboveMinimised,
-            duration: ANIMATION_DURATION,
-            useNativeDriver: true,
-          }).start(() => {
-            minimiseVideoModal();
-            offset.current = heightAboveMinimised;
-          });
-        } else if (collapsed && shouldExpand) {
-          // Expand
-          Animated.timing(translateY, {
-            toValue: 0,
-            duration: ANIMATION_DURATION,
-            useNativeDriver: true,
-          }).start(() => {
-            maximiseVideoModal();
-            offset.current = 0;
-            translateY.setValue(0);
-          });
-        } else {
-          // Snap back to current state
-          Animated.spring(translateY, {
-            toValue: collapsed ? heightAboveMinimised : 0,
-            useNativeDriver: true,
-          }).start(() => {
-            offset.current = collapsed ? heightAboveMinimised : 0;
-            translateY.setValue(offset.current);
-          });
+      // Update gesture state tracking
+      gestureStateRef.current = newState;
+
+      if (translationY !== 0) {
+        if (newState === State.BEGAN) {
+          // clean up gesture translation
+          gestureTranslation.setValue(0);
+        } else if (
+          newState === State.END ||
+          newState === State.FAILED ||
+          newState === State.CANCELLED
+        ) {
+          const newY = getAnimatedValue(gestureTranslation);
+
+          // clean up gesture translation
+          gestureTranslation.setValue(0);
+
+          const v = getAnimatedValue(modalAnimatedValue);
+
+          // store current offset
+          modalAnimatedValue.setValue(v + newY);
+
+          const shouldCollapse = newY > offset.current * DRAG_TO_COLLAPSE;
+
+          const shouldExpand = newY < offset.current * DRAG_TO_EXPAND;
+
+          if (!collapsed && shouldCollapse) {
+            // Collapse
+            updateModalTranslation(offset.current).start(() => {
+              minimiseVideoModal();
+            });
+          } else if (collapsed && shouldExpand) {
+            // Expand
+            updateModalTranslation(0).start(() => {
+              maximiseVideoModal();
+            });
+          } else {
+            // Snap back to current state
+            updateModalTranslation(collapsed ? offset.current : 0).start();
+          }
         }
-      } else if (event.nativeEvent.state === State.BEGAN) {
-        // Gesture started, set offset
-        translateY.stopAnimation((value: number) => {
-          offset.current = value;
-        });
       }
     },
-    [collapsedHeight, translateY, collapsed, videoModalState]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collapsed]
   );
 
   const gestureHandlerProps = useMemo(() => {
@@ -163,39 +136,34 @@ export const useVideoModalState = (
     };
   }, [onGestureEvent, onHandlerStateChange]);
 
+  // Track video modal state changes & calling updateAnimatedPosition
   useEffect(() => {
     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);
-        });
+      const mode =
+        videoModalMode === "PIP" ? prevModeStateRef.current : videoModalMode;
+
+      // Prevent changes during active gesture states to avoid interference
+      if ([State.ACTIVE].includes(gestureStateRef.current)) {
+        return;
+      }
+
+      if (mode === VideoModalMode.MAXIMIZED) {
+        updateModalTranslation(0).start();
+      } else if (mode === VideoModalMode.MINIMIZED) {
+        updateModalTranslation(heightAboveMinimised).start();
       }
     }
-  }, [videoModalState.visible, videoModalState.mode, collapsedHeight]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoModalState.visible, videoModalState.mode, heightAboveMinimised]);
 
   return useMemo(
     () => ({
       collapsed,
-      collapsedHeight,
       offset,
       gestureHandlerProps,
       translateY,
       expand: maximiseVideoModal,
     }),
-    [
-      collapsed,
-      collapsedHeight,
-      gestureHandlerProps,
-      translateY,
-      maximiseVideoModal,
-    ]
+    [collapsed, offset, gestureHandlerProps, translateY, maximiseVideoModal]
   );
 };

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: {

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

@@ -1,29 +1,111 @@
-import { StatusBar, Dimensions } from "react-native";
+import { StyleSheet, Dimensions, ViewStyle } from "react-native";
 
 import {
   isAndroidPlatform,
   isAndroidVersionAtLeast,
+  isTV,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
+import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-const MIN_SUPPORTED_ANDROID_API = 34;
+const SAFE_AREA_BREAKING_API_VERSION = 35;
 
-const isOldAndroidDevice =
+export const isOldAndroidDevice =
   isAndroidPlatform() &&
-  !isAndroidVersionAtLeast(MIN_SUPPORTED_ANDROID_API) &&
-  !isAndroidTablet();
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
 
-export const getWindowHeight = (): number => {
+export const getWindowHeight = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
   const windowDimensions = Dimensions.get("window");
 
-  return (
-    windowDimensions.height +
-    (isOldAndroidDevice ? (StatusBar.currentHeight ?? 0) : 0)
-  );
+  if (isTablet && landscape) {
+    return windowDimensions.height;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.width;
+  }
+
+  return windowDimensions.height;
+};
+
+export const getScreenHeight = (): number => {
+  const screenDimensions = Dimensions.get("screen");
+
+  return screenDimensions.height;
 };
 
-export const getWindowWidth = (): number => {
+export const getWindowWidth = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
   const windowDimensions = Dimensions.get("window");
 
+  if (isTablet && landscape) {
+    return windowDimensions.width;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.height;
+  }
+
   return windowDimensions.width;
 };
+
+const getIsTabletLandscape = (isTabletPortrait: boolean): boolean => {
+  return !isTV() && getIsTablet() && !isTabletPortrait;
+};
+
+export const getInsetsOffset = (
+  insets: { top: number; bottom: number },
+  isTabletPortrait: boolean
+): number => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return getIsTablet() && 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/index.tsx

@@ -835,25 +835,25 @@ export default class VideoPlayer extends React.Component<
         : styles.playerContainerBlack;
 
   private getBackgroundImageStyle = (
-    dimensions: any,
+    dimensions: ViewStyle,
     isAudioItem: boolean
-  ): ViewStyle => ({
-    ...(isAudioItem ? styles.audio : { position: "absolute" }),
-    ...dimensions,
-  });
+  ): ViewStyle[] => [
+    isAudioItem ? styles.audio : { position: "absolute" },
+    dimensions,
+  ];
 
   /* Returns player view style based on platform and content type (audio/video) */
   private getPlayerViewStyle = (
     dimensions: ViewStyle,
     isAudioItem: boolean
-  ): ViewStyle => {
-    const generalStyles = isAudioItem ? styles.audio : {};
+  ): ViewStyle | ViewStyle[] => {
+    const generalStyles = isAudioItem ? styles.audio : undefined;
 
     if (isAndroidPlatform() && isAudioItem) {
       return generalStyles;
     }
 
-    return { ...generalStyles, ...dimensions };
+    return [generalStyles, dimensions];
   };
 
   private renderAudioPlayer = (
@@ -876,7 +876,7 @@ export default class VideoPlayer extends React.Component<
     shouldRender: boolean,
     imageKey: string,
     entry: ZappEntry,
-    style: ViewStyle
+    style: ViewStyle | ViewStyle[]
   ) => {
     if (!shouldRender) return null;
 
@@ -887,7 +887,7 @@ export default class VideoPlayer extends React.Component<
 
   private renderNativePlayer = (
     shouldRender: boolean,
-    style: ViewStyle,
+    style: ViewStyle | ViewStyle[],
     nativeEvents: ReturnType<typeof this.getNativeEvents>,
     nativeProps: ReturnType<typeof this.getNativeProps>,
     pluginConfiguration: Record<string, any>
@@ -1128,10 +1128,10 @@ export default class VideoPlayer extends React.Component<
       isTV() && this.getPlayNextData() && !docked;
 
     const needsToRender =
-      (!hideTransportControls &&
-        !needToShowPlayNextOverlay &&
-        this.props.mode !== "PIP") ||
-      docked;
+      !hideTransportControls &&
+      !needToShowPlayNextOverlay &&
+      this.props.mode !== "PIP" &&
+      !docked;
 
     const supportsNativeControls =
       !!this.props.controller?.supportsNativeControls?.();
@@ -1265,13 +1265,13 @@ export default class VideoPlayer extends React.Component<
           </View>
         }
       />
-    ) : (
+    ) : isModal ? (
       <VideoPlayerModal
         isTabletPortrait={isTabletPortrait}
         aspectRatio={aspectRatio}
         pip={piped}
         fullscreen={fullscreen}
-        modal={isModal}
+        modal
         style={{
           tabletLandscapeWidth: getTabletWidth(
             this.getPluginConfiguration().tablet_landscape_sidebar_width,
@@ -1309,6 +1309,13 @@ export default class VideoPlayer extends React.Component<
           </View>
         }
       />
+    ) : (
+      <View style={style} testID={"player-view"}>
+        <PlayerWrapper
+          {...sharedWrapperViewProps}
+          playerContent={this.renderPlayerContent}
+        />
+      </View>
     );
   };