@applicaster/quick-brick-player 14.0.0-alpha.9567513212 → 14.0.0-alpha.9848043301

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.9567513212",
+  "version": "14.0.0-alpha.9848043301",
   "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": "14.0.0-alpha.9567513212",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-alpha.9848043301",
     "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.7",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.9567513212",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.9567513212",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.9567513212",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.9848043301",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.9848043301",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.9848043301",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -7,6 +7,7 @@ import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/C
 import { useVideoModalState } from "./hooks";
 import {
   DEFAULT_IMAGE_RATIO_VIDEO,
+  MODAL_COLLAPSE_START,
   MODAL_RADIUS,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
@@ -89,9 +90,11 @@ export function VideoPlayerModal({
 
   const VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
 
+  const insets = useSafeAreaInsets();
+
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = translateY.interpolate({
-    inputRange: [height * 0.8, height - collapsedHeight],
+    inputRange: [MODAL_COLLAPSE_START, height - collapsedHeight],
     outputRange: [0, 1],
     extrapolate: "clamp",
   });
@@ -110,8 +113,6 @@ export function VideoPlayerModal({
 
   const vidHeight = width / aspectRatio;
 
-  const insets = useSafeAreaInsets();
-
   const yPosition = translateY.interpolate({
     inputRange: [height * VIDEO_TRANSITION_THRESHOLD, height - collapsedHeight],
     outputRange: [

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

@@ -5,11 +5,11 @@ export const DOCKED_PROGRESSBAR_HEIGHT = 3; // Height of the docked progress bar
 export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
   Dimensions.get("window");
 
-export const MODAL_COLLAPSE_START = SCREEN_HEIGHT * 0.8; // 80% of screen height
+export const MODAL_COLLAPSE_START = SCREEN_HEIGHT * 0.7; // 70% of screen height
 
-export const DRAG_TO_COLLAPSE = 0.4; // 40% to collapse
+export const DRAG_TO_COLLAPSE = 0.05; // 5% to collapse
 
-export const DRAG_TO_EXPAND = 0.6; // 60% to expand
+export const DRAG_TO_EXPAND = 0.02; // 2% to expand
 
 export const DEFAULT_IMAGE_RATIO_VIDEO = 16 / 9; // Default aspect ratio for video
 

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

@@ -82,8 +82,11 @@ export const useVideoModalState = (
         newY = SCREEN_HEIGHT - collapsedHeight;
       }
 
-      const shouldCollapse = translationY > SCREEN_HEIGHT * DRAG_TO_COLLAPSE;
-      const shouldExpand = translationY < -SCREEN_HEIGHT * DRAG_TO_EXPAND;
+      const shouldCollapse =
+        translationY > (SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_COLLAPSE;
+
+      const shouldExpand =
+        translationY < -(SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_EXPAND;
 
       if (!collapsed && shouldCollapse) {
         // Collapse