Chore: fixing playback controls

Fixed maybe the vertically stretched in portrait
Fixed the gesture overlay persisting after events done

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

components/video-player/controls/BottomControls.tsx

@@ -114,7 +114,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
       onTouchStart={handleControlsInteraction}
     >
       <View
-        className='shrink flex flex-col justify-center h-full'
+        className='shrink flex flex-col justify-center'
         style={{
           flexDirection: "row",
           justifyContent: "space-between",

components/video-player/controls/CenterControls.tsx

@@ -55,7 +55,7 @@ export const CenterControls: FC<CenterControlsProps> = ({
         justifyContent: "space-between",
         alignItems: "center",
         transform: [{ translateY: -22.5 }],
-        paddingHorizontal: "28%",
+        paddingHorizontal: hasChapters ? "18%" : "28%",
       }}
       pointerEvents={showControls ? "box-none" : "none"}
     >

components/video-player/controls/GestureOverlay.tsx

@@ -41,6 +41,7 @@ export const GestureOverlay = ({
   });
   const [fadeAnim] = useState(new Animated.Value(0));
   const isDraggingRef = useRef(false);
+  const hideScheduledRef = useRef(false);
   const hideTimeoutRef = useRef<number | null>(null);
   const lastUpdateTime = useRef(0);
 
@@ -51,18 +52,11 @@ export const GestureOverlay = ({
       side?: "left" | "right",
       isDuringDrag = false,
     ) => {
-      // Clear any existing timeout
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current);
-        hideTimeoutRef.current = null;
-      }
-
-      // Defer ALL state updates to avoid useInsertionEffect warning
       requestAnimationFrame(() => {
         setFeedback({ visible: true, icon, text, side });
 
         if (!isDuringDrag) {
-          // For discrete actions (like skip), show normal animation
+          hideScheduledRef.current = false;
           Animated.sequence([
             Animated.timing(fadeAnim, {
               toValue: 1,
@@ -80,16 +74,17 @@ export const GestureOverlay = ({
               setFeedback((prev) => ({ ...prev, visible: false }));
             });
           });
-        } else if (!isDraggingRef.current) {
+        } else if (!isDraggingRef.current && !hideScheduledRef.current) {
-          // For drag start, just fade in and stay visible
+          // Cancel any pending hide from a previous drag
+          if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+            hideTimeoutRef.current = null;
+          }
+          hideScheduledRef.current = false;
           isDraggingRef.current = true;
-          Animated.timing(fadeAnim, {
+          fadeAnim.stopAnimation();
-            toValue: 1,
+          fadeAnim.setValue(1);
-            duration: 200,
-            useNativeDriver: true,
-          }).start();
         }
-        // For drag updates, just update the state, don't restart animation
       });
     },
     [fadeAnim],
@@ -97,9 +92,9 @@ export const GestureOverlay = ({
 
   const hideDragFeedback = useCallback(() => {
     isDraggingRef.current = false;
-
+    hideScheduledRef.current = true;
-    // Delay hiding slightly to avoid flicker
     hideTimeoutRef.current = setTimeout(() => {
+      fadeAnim.stopAnimation();
       Animated.timing(fadeAnim, {
         toValue: 0,
         duration: 300,
@@ -107,6 +102,7 @@ export const GestureOverlay = ({
       }).start(() => {
         requestAnimationFrame(() => {
           setFeedback((prev) => ({ ...prev, visible: false }));
+          hideScheduledRef.current = false;
         });
       });
     }, 100) as unknown as number;