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

package/build/components/Audio.d.ts

@@ -46,6 +46,8 @@ type AudioProps = {
         playedColor?: string;
         /** Color for unplayed portion of waveform */
         unplayedColor?: string;
+        /** Force prefetch into blob for remote URLs to fix seeking (use when server range support is unreliable) */
+        forceBlobForSeeking?: boolean;
     };
     ref?: React.Ref<AudioRef>;
     onPlay?: (event: ChangeEvent<HTMLAudioElement>) => void;

package/build/components/Audio.js

@@ -12,11 +12,18 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
     const [totalDuration, setTotalDuration] = useState(0);
     const [displayCurrent, setDisplayCurrent] = useState('');
     const [displayDuration, setDisplayDuration] = useState('0:00');
+    const [playbackUrl, setPlaybackUrl] = useState(src);
     const audioRef = useRef(null);
+    const objectUrlRef = 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 { height = 30, showHoverTime = false, playedColor, unplayedColor } = 'object' == typeof waveform ? waveform : {};
+    const SEEK_TOLERANCE_SECONDS = 0.5;
+    const MAX_SEEK_VERIFY_RETRIES = 3;
+    const { height = 30, showHoverTime = false, playedColor, unplayedColor, forceBlobForSeeking = false } = 'object' == typeof waveform ? waveform : {};
     const play = ()=>{
         const { current: audio } = audioRef;
         if (audio) audio.play().catch(()=>{
@@ -40,6 +47,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 +76,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);
@@ -93,9 +102,54 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
     }, [
         isPlaying
     ]);
+    useEffect(()=>{
+        setPlaybackUrl(src);
+        if (objectUrlRef.current) {
+            try {
+                URL.revokeObjectURL(objectUrlRef.current);
+            } catch (_e) {}
+            objectUrlRef.current = null;
+        }
+        if (!waveform || !src || !src.startsWith('http')) return;
+        let cancelled = false;
+        const buildBlobUrl = async ()=>{
+            try {
+                const resp = await fetch(src, {
+                    cache: 'force-cache'
+                });
+                const buf = await resp.arrayBuffer();
+                if (cancelled) return;
+                const useBlob = forceBlobForSeeking || 'bytes' !== resp.headers.get('accept-ranges');
+                if (useBlob) {
+                    try {
+                        if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+                    } catch (_e) {}
+                    const blob = new Blob([
+                        buf
+                    ], {
+                        type: resp.headers.get('content-type') || 'audio/mpeg'
+                    });
+                    const objectUrl = URL.createObjectURL(blob);
+                    objectUrlRef.current = objectUrl;
+                    if (!cancelled) setPlaybackUrl(objectUrl);
+                }
+            } catch (_e) {}
+        };
+        buildBlobUrl();
+        return ()=>{
+            cancelled = true;
+            try {
+                if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+            } catch (_e) {}
+        };
+    }, [
+        src,
+        waveform,
+        forceBlobForSeeking
+    ]);
     useEffect(()=>{
         const { current: audio } = audioRef;
-        if (audio && src) {
+        if (audio && playbackUrl) {
             audio.load();
             const checkDuration = setTimeout(()=>{
                 if (audio.duration && Number.isFinite(audio.duration) && audio.duration > 0 && audio.duration !== 1 / 0) {
@@ -109,11 +163,12 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
             return ()=>clearTimeout(checkDuration);
         }
     }, [
-        src,
+        playbackUrl,
         fallbackDuration
     ]);
     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 +176,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 +248,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 +257,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;
@@ -207,7 +296,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
                 alignData: infoPosition,
                 children: [
                     !hideSlider && (waveform ? /*#__PURE__*/ jsx(Waveform, {
-                        src: src,
+                        src: playbackUrl,
                         value: progress,
                         maxValue: totalDuration,
                         onChange: handleControlGrab,
@@ -239,7 +328,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
             'center' === infoPosition && timeData,
             /*#__PURE__*/ jsx("audio", {
                 ref: audioRef,
-                src: src,
+                src: playbackUrl,
                 onPlay: handleAudioPlay,
                 onPause: handleAudioPause,
                 onEmptied: handleAudioStop,

package/package.json

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