@wavv/ui 2.4.15-alpha.2 → 2.4.15-alpha.3

package/build/components/Audio.js

@@ -15,7 +15,12 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
     const audioRef = useRef(null);
     const isSeekingRef = useRef(false);
     const seekedTimeoutRef = useRef(null);
+    const lastRequestedSeekSecondsRef = useRef(null);
+    const seekVerifyRetryCountRef = useRef(0);
+    const seekVerifyTimeoutRef = useRef(null);
     const END_EPSILON_SECONDS = 0.75;
+    const SEEK_TOLERANCE_SECONDS = 0.5;
+    const MAX_SEEK_VERIFY_RETRIES = 3;
     const { height = 30, showHoverTime = false, playedColor, unplayedColor } = 'object' == typeof waveform ? waveform : {};
     const play = ()=>{
         const { current: audio } = audioRef;
@@ -40,6 +45,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
         if (isPlaying) pause();
         else {
             if (isNearEnd(progress)) {
+                lastRequestedSeekSecondsRef.current = null;
                 setProgress(0);
                 setDisplayCurrent('0:00');
                 const { current: audio } = audioRef;
@@ -68,6 +74,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
         if (onPause) onPause(event);
     };
     const handleAudioStop = (event)=>{
+        lastRequestedSeekSecondsRef.current = null;
         setIsPlaying(false);
         setIsCleared(true);
         setProgress(0);
@@ -114,6 +121,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
     ]);
     useEffect(()=>()=>{
             if (seekedTimeoutRef.current) clearTimeout(seekedTimeoutRef.current);
+            if (seekVerifyTimeoutRef.current) clearTimeout(seekVerifyTimeoutRef.current);
         }, []);
     const formatTime = (time)=>{
         if (!Number.isFinite(time) || time < 0) return '0:00';
@@ -121,17 +129,41 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
         const secs = Math.floor(time % 60);
         return `${mins}:${secs.toString().padStart(2, '0')}`;
     };
+    const performSeek = (targetSeconds)=>{
+        const { current: audio } = audioRef;
+        if (!audio || !Number.isFinite(targetSeconds)) return false;
+        try {
+            audio.currentTime = targetSeconds;
+            return true;
+        } catch (_e) {
+            return false;
+        }
+    };
     const updateProgress = ()=>{
         if (isSeekingRef.current) return;
         const { current: audio } = audioRef;
-        if (audio) {
-            const { currentTime } = audio;
-            if (Number.isFinite(currentTime) && currentTime >= 0) {
-                const current = formatTime(currentTime);
-                setProgress(currentTime);
-                setDisplayCurrent(current);
+        if (!audio) return;
+        const currentTime = audio.currentTime;
+        if (!Number.isFinite(currentTime) || currentTime < 0) return;
+        const requestedSeek = lastRequestedSeekSecondsRef.current;
+        if ('number' == typeof requestedSeek) {
+            const drift = Math.abs(currentTime - requestedSeek);
+            if (drift > SEEK_TOLERANCE_SECONDS) {
+                if (seekVerifyRetryCountRef.current < MAX_SEEK_VERIFY_RETRIES) {
+                    seekVerifyRetryCountRef.current += 1;
+                    performSeek(requestedSeek);
+                    return;
+                }
+                lastRequestedSeekSecondsRef.current = null;
+                seekVerifyRetryCountRef.current = 0;
+                return;
             }
+            lastRequestedSeekSecondsRef.current = null;
+            seekVerifyRetryCountRef.current = 0;
         }
+        const current = formatTime(currentTime);
+        setProgress(currentTime);
+        setDisplayCurrent(current);
     };
     const handleLoad = ()=>{
         const { current: audio } = audioRef;
@@ -169,6 +201,8 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
         const maxSeekTarget = Math.max(0, totalDuration - END_EPSILON_SECONDS);
         const clamped = Math.min(Math.max(sliderPosition, 0), maxSeekTarget);
         isSeekingRef.current = true;
+        lastRequestedSeekSecondsRef.current = clamped;
+        seekVerifyRetryCountRef.current = 0;
         if (seekedTimeoutRef.current) clearTimeout(seekedTimeoutRef.current);
         seekedTimeoutRef.current = setTimeout(()=>{
             isSeekingRef.current = false;
@@ -176,7 +210,15 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
         }, 300);
         setProgress(clamped);
         setDisplayCurrent(formatTime(clamped));
-        audioRef.current.currentTime = clamped;
+        performSeek(clamped);
+        if (seekVerifyTimeoutRef.current) clearTimeout(seekVerifyTimeoutRef.current);
+        seekVerifyTimeoutRef.current = window.setTimeout(()=>{
+            seekVerifyTimeoutRef.current = null;
+            const { current: audio } = audioRef;
+            if (!audio || null === lastRequestedSeekSecondsRef.current) return;
+            const ct = audio.currentTime ?? 0;
+            if (Math.abs(ct - clamped) > SEEK_TOLERANCE_SECONDS) performSeek(clamped);
+        }, 150);
     };
     const hideSlider = isCleared && hideSliderOnStop;
     const hideTime = isCleared && hideTimeOnStop;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.4.15-alpha.2",
+	"version": "2.4.15-alpha.3",
 	"type": "module",
 	"exports": {
 		".": {