@wavv/ui 2.4.15-alpha.3 → 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,7 +12,9 @@ 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);
@@ -21,7 +23,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
     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 { height = 30, showHoverTime = false, playedColor, unplayedColor, forceBlobForSeeking = false } = 'object' == typeof waveform ? waveform : {};
     const play = ()=>{
         const { current: audio } = audioRef;
         if (audio) audio.play().catch(()=>{
@@ -100,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) {
@@ -116,7 +163,7 @@ const Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tin
             return ()=>clearTimeout(checkDuration);
         }
     }, [
-        src,
+        playbackUrl,
         fallbackDuration
     ]);
     useEffect(()=>()=>{
@@ -249,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,
@@ -281,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.3",
+	"version": "2.4.15-alpha.4",
 	"type": "module",
 	"exports": {
 		".": {