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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-alpha.3514407021",
+  "version": "15.0.0-alpha.4069571733",
   "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-rc.8",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-alpha.4069571733",
     "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.15",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.3514407021",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.3514407021",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.3514407021",
+    "@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",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -61,6 +61,7 @@ type Props = {
     inline: boolean;
     docked: boolean;
     isModal: boolean;
+    pip: boolean;
   };
   playNextData: PlayNextData;
   isTabletPortrait?: boolean;
@@ -99,11 +100,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   );
 
   useEffect(() => {
-    if (player) {
-      setSpeedManager(new SpeedController(player));
-    } else {
-      setSpeedManager(null);
-    }
+    setSpeedManager(player ? new SpeedController(player) : null);
   }, [player]);
 
   useEffect(() => {
@@ -217,7 +214,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         items: speedOptions,
         current_selection: playbackSpeed,
         onPress: onSpeedSelect,
-        title: configuration["playback_speed_title"],
+        title: configuration.playback_speed_title,
         itemProps: getBottomSheetModalItemProps,
         iconProps: getBottomSheetModalIconProps,
         labelProps: getBottomSheetModalLabelProps,
@@ -233,7 +230,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         ],
       },
     });
-  }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
+  }, [playbackSpeed, onSpeedSelect, configuration.playback_speed_title]);
 
   const onPlayerSeek = React.useCallback(
     (targetTime: number) => {
@@ -250,13 +247,28 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
+  const layoutStateMemo = React.useMemo(
+    () => ({
+      inline: layoutState.inline,
+      docked: layoutState.docked,
+      isModal: layoutState.isModal,
+      pip: layoutState.pip,
+    }),
+    [
+      layoutState.inline,
+      layoutState.docked,
+      layoutState.isModal,
+      layoutState.pip,
+    ]
+  );
+
   return (
     <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
       <View style={Styles.playerContainer} onLayout={onLayout}>
         <Layout
           entry={entry}
           playerState={playerState}
-          layoutState={layoutState}
+          layoutState={layoutStateMemo}
           value={value}
           onPlaybackButtonPress={onPlaybackButtonPress}
           onRewindButtonPress={onRewindButtonPress}

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
-import * as R from "ramda";
+import { StyleSheet, View } from "react-native";
 import {
   useIsTablet,
   useZStore,
@@ -16,7 +15,6 @@ import {
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 
-import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
@@ -27,22 +25,17 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { partial } from "@applicaster/zapp-react-native-utils/utils";
 
 const bottomTabBarHeight = getTabBarHeight();
 
 type Props = {
   entry: ZappEntry;
   layoutState: QuickBrickPlayer.LayoutState;
-  playerState: QuickBrickPlayer.PlayerState;
-  value: GetValue;
-  onCloseVideoModal: () => void;
-  onPlayerSeek: (targetTime: number) => void;
+  onPlayerSeek?: (targetTime: number) => void;
   playNextData: PlayNextData;
-  title: string | number;
-  summary: string | number;
   ImageComponent?: React.ReactNode;
   isActiveGesture?: boolean;
-  minimisedHeight: number;
   aspectRatio?: number;
 };
 
@@ -51,7 +44,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "stretch",
-    marginTop: PROGRESS_BAR_HEIGHT,
   },
   content: {
     flex: 1,
@@ -94,14 +86,11 @@ const styles = StyleSheet.create({
   buttons: {
     marginVertical: 10,
   },
+  liveMarginTop: { marginTop: 0 },
+  marginTop: { marginTop: PROGRESS_BAR_HEIGHT },
 });
 
-const playerDimensionsStyle = (
-  minimisedHeight: number,
-  addPadding: boolean
-): ViewStyle => ({
-  width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
-});
+const getValue = (key: string, stylesObj: {}) => stylesObj?.[key] ?? null;
 
 const controlButtons = (
   live: boolean,
@@ -167,7 +156,6 @@ export const DockedControls = (props: Props) => {
     onPlayerSeek = noop,
     playNextData,
     ImageComponent,
-    isActiveGesture = true,
     aspectRatio,
   } = props;
 
@@ -185,11 +173,6 @@ export const DockedControls = (props: Props) => {
   const configuration = useZStore("playerConfiguration")();
   const playerState = usePlayerState("shared-player-wrapper-docked");
 
-  const getValue = React.useCallback(
-    (key: string, stylesObj: {}) => R.propOr(null, key, stylesObj),
-    []
-  );
-
   const value = React.useCallback(
     (key: string) => {
       const retVal = getValue(key, configuration);
@@ -208,7 +191,7 @@ export const DockedControls = (props: Props) => {
 
       return retVal;
     },
-    [...Object.values(configuration), playerState.seekableDuration, getValue]
+    [...Object.values(configuration), playerState.seekableDuration]
   );
 
   const { title, summary } = useTitleSummaryOverlay(
@@ -225,15 +208,65 @@ export const DockedControls = (props: Props) => {
 
   const insets = useSafeAreaInsets();
 
+  const progresBarLayoutState = React.useMemo(
+    () => ({
+      inline: layoutState.inline,
+      docked: true,
+      isModal: layoutState.isModal,
+      pip: layoutState.pip,
+    }),
+    [layoutState.inline, layoutState.isModal, layoutState.pip]
+  );
+
+  const _controlButtons = React.useMemo(
+    () => partial(controlButtons, playerState.isLive && liveButton),
+    [playerState.isLive, liveButton]
+  );
+
+  const containerStyles = React.useMemo(
+    () => ({
+      height: minimisedHeight,
+      maxHeight: minimisedHeight,
+    }),
+    [minimisedHeight]
+  );
+
+  const imageComponentWrapperStyles = React.useMemo(
+    () => ({
+      aspectRatio: aspectRatio,
+      height: minimisedHeight,
+    }),
+    [aspectRatio, minimisedHeight]
+  );
+
+  const backgroundColorStyle = React.useMemo(
+    () => ({
+      backgroundColor: dockedBackgroundColor,
+    }),
+    [dockedBackgroundColor]
+  );
+
+  const bottomSpacerStyle = React.useMemo(() => {
+    const tabBarHeight = menuVisible ? bottomTabBarHeight : 0;
+    const safeAreaBottomInset = insets.bottom || 0;
+
+    return {
+      height: safeAreaBottomInset + tabBarHeight,
+    };
+  }, [menuVisible, insets.bottom]);
+
+  const contentInfoContent = React.useMemo(
+    () => ({ ...entry, title, summary }),
+    [title, summary, entry]
+  );
+
   return (
     <>
       <View
         style={[
           styles.container,
-          {
-            height: minimisedHeight,
-            maxHeight: minimisedHeight,
-          },
+          containerStyles,
+          playerState.isLive ? styles.liveMarginTop : styles.marginTop,
         ]}
       >
         {!playerState.isLive ? (
@@ -242,42 +275,23 @@ export const DockedControls = (props: Props) => {
             content={entry}
             value={value}
             visible
-            layoutState={layoutState}
+            layoutState={progresBarLayoutState}
             onPlayerSeek={onPlayerSeek}
             playerState={playerState}
-            startComponentsAnimation={noop}
             docked
           />
         ) : null}
 
         <View style={styles.content}>
           <View style={styles.touchableArea}>
-            {isActiveGesture || layoutState.docked ? (
-              <View
-                style={{ aspectRatio: aspectRatio, height: minimisedHeight }}
-              >
-                {ImageComponent || null}
-              </View>
-            ) : (
-              <View
-                style={playerDimensionsStyle(
-                  minimisedHeight,
-                  isActiveGesture || layoutState.docked
-                )}
-              />
-            )}
+            <View style={imageComponentWrapperStyles}>
+              {ImageComponent || null}
+            </View>
             <View
               testID="content-info"
-              style={[
-                styles.contentInfo,
-                { backgroundColor: dockedBackgroundColor },
-              ]}
+              style={[styles.contentInfo, backgroundColorStyle]}
             >
-              <ContentInfo
-                content={{ ...entry, title, summary }}
-                value={value}
-                docked
-              />
+              <ContentInfo content={contentInfoContent} value={value} docked />
             </View>
           </View>
           <View
@@ -285,15 +299,13 @@ export const DockedControls = (props: Props) => {
               isTablet
                 ? styles.controlsContainerForTablet
                 : styles.controlsContainerForMobile,
-              { backgroundColor: dockedBackgroundColor },
+              backgroundColorStyle,
             ]}
           >
             <Controls
               value={value}
               visible
-              buttons={R.partial(controlButtons, [
-                playerState.isLive && liveButton,
-              ])}
+              buttons={_controlButtons}
               style={styles.playPauseButton}
               playNextData={playNextData}
               playerState={playerState}
@@ -308,12 +320,7 @@ export const DockedControls = (props: Props) => {
           </View>
         </View>
       </View>
-      <View
-        style={{
-          height: insets.bottom + (menuVisible ? bottomTabBarHeight : 0),
-          backgroundColor: dockedBackgroundColor,
-        }}
-      />
+      <View style={[bottomSpacerStyle, backgroundColorStyle]} />
     </>
   );
 };

package/src/Player/AudioLayer/Layout/MobileLayout.tsx

@@ -151,12 +151,7 @@ export function MobileLayout({
             },
           ]}
         >
-          <PlayerImage
-            entry={entry}
-            docked={false}
-            imageWidth={imageSize}
-            configuration={configuration}
-          />
+          <PlayerImage entry={entry} configuration={configuration} />
         </View>
         {/* PlayerImage */}
 

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

@@ -4,7 +4,6 @@ import { LayoutChangeEvent, View } from "react-native";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-import { AnimatedImage } from "./AnimatedImage";
 import { FlexImage } from "./FlexImage";
 
 import { styles } from "./styles";
@@ -13,19 +12,12 @@ import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/nu
 type Props = {
   entry: ZappEntry;
   configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
-  docked: boolean;
-  imageWidth?: Option<number>;
+  docked?: boolean;
   onLayoutImage?: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
-  const {
-    entry,
-    docked,
-    imageWidth,
-    configuration,
-    onLayoutImage = noop,
-  } = props;
+  const { entry, docked = false, configuration, onLayoutImage = noop } = props;
 
   const isShadowEnabled = toBooleanWithDefaultTrue(
     configuration?.audio_player_artwork_shadow_enabled
@@ -43,19 +35,9 @@ export const PlayerImage = (props: Props) => {
         onLayout={onLayoutImage}
         style={[shouldShowShadow ? styles.shadow : undefined, { borderRadius }]}
       >
-        {!imageWidth ? (
-          <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
-            <FlexImage entry={entry} style={styles.backgroundImageContainer} />
-          </View>
-        ) : (
-          // we have imageSize here and now we could animate resizing of this image
-          <AnimatedImage
-            entry={entry}
-            style={[styles.backgroundImageContainer, { borderRadius }]}
-            imageWidth={imageWidth}
-            docked={docked}
-          />
-        )}
+        <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
+          <FlexImage entry={entry} style={styles.backgroundImageContainer} />
+        </View>
       </View>
     </View>
   );

package/src/Player/AudioLayer/Layout/TabletLandscapeLayout.tsx

@@ -117,14 +117,11 @@ export function TabletLandscapeLayout({
         <View style={[styles.flex, styles.audioPlayerContainerHeightLimit]}>
           {/* PlayerImage non-docked */}
           <View style={[styles.flex, withDebug(styles.debugYellow)]}>
-            {!docked ? (
-              <PlayerImage
-                docked={false}
-                entry={entry}
-                configuration={configuration}
-                onLayoutImage={onLayoutImage}
-              />
-            ) : null}
+            <PlayerImage
+              entry={entry}
+              configuration={configuration}
+              onLayoutImage={onLayoutImage}
+            />
           </View>
           {/* PlayerImage */}
 

package/src/Player/AudioLayer/Layout/TabletPortraitLayout.tsx

@@ -144,12 +144,7 @@ export function TabletPortraitLayout({
             ]}
             onLayout={onLayout}
           >
-            <PlayerImage
-              entry={entry}
-              configuration={configuration}
-              docked={docked}
-              imageWidth={imageSize}
-            />
+            <PlayerImage entry={entry} configuration={configuration} />
           </View>
 
           <View

package/src/Player/AudioLayer/utils.ts

@@ -1,10 +1,6 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import {
-  PlayerAnimationStateEnum,
-  PlayerAnimationStateT,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export const NAMESPACE = "audio-player";
 
@@ -36,25 +32,3 @@ export const formatSpeed = (value: number) => {
   // Return the formatted string with "speed_" prefix
   return `speed_${formattedValue}`;
 };
-
-export const calculateBorderRadius = (
-  docked: boolean,
-  startComponentsAnimation: boolean,
-  isActiveGesture: boolean,
-  playerAnimationState: PlayerAnimationStateT,
-  configuration: Record<string, any>
-): number => {
-  const shouldRemoveBorderRadius =
-    (startComponentsAnimation &&
-      isActiveGesture &&
-      playerAnimationState !== PlayerAnimationStateEnum.maximize) ||
-    docked;
-
-  if (shouldRemoveBorderRadius) {
-    return 0;
-  }
-
-  return toNumberWithDefaultZero(
-    configuration.audio_player_artwork_border_radius
-  );
-};

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -4,8 +4,9 @@ import { Animated, Pressable } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useVideoModalState } from "./hooks";
-import { MODAL_COLLAPSE_START, MODAL_RADIUS, SCREEN_HEIGHT } from "./consts";
+import { MODAL_COLLAPSE_RATIO, MODAL_RADIUS } from "./consts";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { getWindowHeight } from "./utils";
 
 type AnimatedModalProps = {
   content?: ReactElement;
@@ -28,21 +29,26 @@ export function AnimatedModal({
 
   const styles = useStyles({ height: collapsedHeight, type: "audio" });
 
+  const WINDOW_HEIGHT = getWindowHeight();
+  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+
+  const MODAL_COLLAPSE_START = WINDOW_HEIGHT * MODAL_COLLAPSE_RATIO;
+
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = translateY.interpolate({
-    inputRange: [MODAL_COLLAPSE_START, SCREEN_HEIGHT - collapsedHeight],
+    inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
     outputRange: [0, 1],
     extrapolate: "clamp",
   });
 
   const expandedOpacity = translateY.interpolate({
-    inputRange: [0, SCREEN_HEIGHT - collapsedHeight],
+    inputRange: [0, heightAboveMinimised],
     outputRange: [1, 0],
     extrapolate: "clamp",
   });
 
   const borderTopRadiusAnimated = translateY.interpolate({
-    inputRange: [0, SCREEN_HEIGHT - collapsedHeight],
+    inputRange: [0, heightAboveMinimised],
     outputRange: [MODAL_RADIUS, 0],
     extrapolate: "clamp",
   });
@@ -57,7 +63,7 @@ export function AnimatedModal({
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
             transform: [{ translateY }],
-            height: SCREEN_HEIGHT,
+            height: WINDOW_HEIGHT,
           },
         ]}
       >
@@ -67,7 +73,7 @@ export function AnimatedModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: SCREEN_HEIGHT,
+              height: WINDOW_HEIGHT,
             },
           ]}
         >

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useRef } from "react";
+import React, { ReactElement, useMemo, useRef } from "react";
 
 import { Animated, Pressable, StyleSheet, ViewStyle } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
@@ -7,10 +7,8 @@ import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/C
 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";
@@ -20,6 +18,7 @@ import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-component
 import { 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" },
@@ -46,8 +45,6 @@ type AnimatedModalProps = {
   };
 };
 
-const height = SCREEN_HEIGHT;
-
 export function VideoPlayerModal({
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
   content,
@@ -62,7 +59,11 @@ export function VideoPlayerModal({
   const enabled = !!modal && !fullscreen;
   const isTablet = useIsTablet();
 
-  let width = SCREEN_WIDTH;
+  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;
+
+  let width = WINDOW_WIDTH;
 
   if (isTablet && !isTabletPortrait) {
     width = style?.tabletLandscapeWidth || width;
@@ -83,6 +84,8 @@ export function VideoPlayerModal({
     expand,
   } = useVideoModalState(modal ? translateYRef : dummyRef);
 
+  const heightAboveMinimised = height - collapsedHeight;
+
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
   const styles = useStyles({ height: collapsedHeight });
@@ -96,7 +99,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,7 +107,7 @@ export function VideoPlayerModal({
 
   const expandedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [1, 0],
         extrapolate: "clamp",
       })
@@ -112,10 +115,7 @@ export function VideoPlayerModal({
 
   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",
       })
@@ -125,10 +125,7 @@ export function VideoPlayerModal({
 
   const yPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [
-          height * VIDEO_TRANSITION_THRESHOLD,
-          height - collapsedHeight,
-        ],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
         outputRange: [
           0,
           isTablet && isTabletLandscape
@@ -136,8 +133,8 @@ export function VideoPlayerModal({
             : -(
                 PROGRESS_BAR_HEIGHT +
                 insets.top / 2 +
-                (SCREEN_WIDTH / aspectRatio -
-                  (SCREEN_WIDTH / aspectRatio) * SCALE_FACTOR) /
+                (WINDOW_WIDTH / aspectRatio -
+                  (WINDOW_WIDTH / aspectRatio) * SCALE_FACTOR) /
                   2
               ),
         ],
@@ -147,10 +144,7 @@ export function VideoPlayerModal({
 
   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",
       })
@@ -210,7 +204,10 @@ export function VideoPlayerModal({
         >
           <Animated.View
             pointerEvents={!collapsed ? "auto" : "none"}
-            style={[styles.modalContent, directionStyles(isTabletLandscape)]}
+            style={[
+              pip ? styles.modalContentPiP : styles.modalContent,
+              directionStyles(isTabletLandscape),
+            ]}
           >
             <Animated.View
               style={[