Merge pull request #347 from saifshaikh1805/feature/improved10secSkipAndRewind

src/components/player/android/hooks/useDebounceCallback.ts

@@ -0,0 +1,33 @@
+import { useCallback, useRef, useEffect } from 'react';
+
+export function useDebounceCallback<T extends (...args: any[]) => void>(
+  callback: T,
+  delay: number
+) {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const callbackRef = useRef(callback);
+
+  // Sync latest callback to avoid stale closures
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const debouncedFunction = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay]
+  );
+
+  // Cleanup on unmount to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return debouncedFunction;
+}

src/components/player/controls/PlayerControls.tsx

@@ -7,6 +7,7 @@ import Slider from '@react-native-community/slider';
 import { styles } from '../utils/playerStyles'; // Updated styles
 import { getTrackDisplayName } from '../utils/playerUtils';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { useDebounceCallback } from '../android/hooks/useDebounceCallback';
 
 interface PlayerControlsProps {
   showControls: boolean;
@@ -134,6 +135,15 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
   const playIconOpacity = React.useRef(new Animated.Value(1)).current;
 
   /* Handle Seek with Animation */
+  const [skipRewindSeconds, setSkipRewindSeconds] = React.useState(0);
+  const finalSkipRewind = (finalValue: number) => {
+    console.log(`Final value processed: ${finalValue}`);
+    skip(finalValue);
+    setSkipRewindSeconds(0);
+  }
+  const debouncedSkip = useDebounceCallback((val: number) => {
+    finalSkipRewind(val);
+  }, 800);
   const handleSeekWithAnimation = (seconds: number) => {
     const isForward = seconds > 0;
 
@@ -212,7 +222,11 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
       arcRotation.setValue(0);
     });
 
-    skip(seconds);
+    setSkipRewindSeconds(prev => {
+      const nextVal = prev + seconds;
+      debouncedSkip(nextVal);
+      return nextVal;
+    });
   };
 
   /* Handle Play/Pause with Animation */