@exode-team/react-recorder 1.1.9 → 1.1.11

package/dist/index.js

@@ -76,6 +76,61 @@ const stopStream = (stream) => {
  *
  * @author: exode <hello@exode.ru>
  */
+const SEEK_OFFSET = 5;
+const setupMediaSession = (audio, callbacks) => {
+    if (!('mediaSession' in navigator)) {
+        return;
+    }
+    navigator.mediaSession.setActionHandler('play', () => {
+        audio.play().catch(() => { });
+    });
+    navigator.mediaSession.setActionHandler('pause', () => {
+        audio.pause();
+    });
+    navigator.mediaSession.setActionHandler('stop', () => {
+        var _a;
+        audio.pause();
+        audio.currentTime = 0;
+        (_a = callbacks.onStop) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+    });
+    navigator.mediaSession.setActionHandler('seekbackward', () => {
+        var _a;
+        audio.currentTime = Math.max(0, audio.currentTime - SEEK_OFFSET);
+        (_a = callbacks.onSeekBackward) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+    });
+    navigator.mediaSession.setActionHandler('seekforward', () => {
+        var _a;
+        audio.currentTime = Math.min(audio.duration, audio.currentTime + SEEK_OFFSET);
+        (_a = callbacks.onSeekForward) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+    });
+    navigator.mediaSession.setActionHandler('seekto', (details) => {
+        if (details.seekTime != null && isFinite(audio.duration)) {
+            audio.currentTime = details.seekTime;
+        }
+    });
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+        var _a;
+        (_a = callbacks.onPreviousTrack) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+    });
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+        var _a;
+        (_a = callbacks.onNextTrack) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+    });
+};
+const clearMediaSession = () => {
+    if (!('mediaSession' in navigator)) {
+        return;
+    }
+    const actions = [
+        'play', 'pause', 'stop',
+        'seekbackward', 'seekforward', 'seekto',
+        'previoustrack', 'nexttrack',
+    ];
+    actions.forEach((action) => {
+        navigator.mediaSession.setActionHandler(action, null);
+    });
+    navigator.mediaSession.playbackState = 'none';
+};
 const createAudioPlayback = (url, callbacks) => {
     const audio = new Audio(url);
     audio.onloadedmetadata = () => {
@@ -87,6 +142,21 @@ const createAudioPlayback = (url, callbacks) => {
     audio.onended = () => {
         callbacks.onEnded();
     };
+    audio.onplay = () => {
+        var _a;
+        setupMediaSession(audio, callbacks);
+        if ('mediaSession' in navigator) {
+            navigator.mediaSession.playbackState = 'playing';
+        }
+        (_a = callbacks.onPlay) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+    };
+    audio.onpause = () => {
+        var _a;
+        if ('mediaSession' in navigator) {
+            navigator.mediaSession.playbackState = 'paused';
+        }
+        (_a = callbacks.onPause) === null || _a === void 0 ? void 0 : _a.call(callbacks);
+    };
     return { audio, url };
 };
 const cleanupAudio = (audio) => {
@@ -95,6 +165,9 @@ const cleanupAudio = (audio) => {
     audio.onended = null;
     audio.ontimeupdate = null;
     audio.onloadedmetadata = null;
+    audio.onplay = null;
+    audio.onpause = null;
+    clearMediaSession();
 };
 const createObjectURL = (blob) => {
     return URL.createObjectURL(blob);
@@ -116,6 +189,64 @@ const TIMELINE_BAR_GAP = 2;
 const TIMELINE_BAR_MIN_HEIGHT = 3;
 const TIMELINE_BAR_MAX_HEIGHT = 24;
 
+/**
+ * MPEG frame scanner
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const MPEG_LAYER_III = 1;
+const MPEG_SAMPLE_RATES = [44100, 48000, 32000];
+const MPEG_BITRATES_V1 = [0, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320, 0];
+const MPEG_BITRATES_V2 = [0, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 144, 160, 0];
+/** Length of the Layer III frame at the given offset, or 0 when it is not one */
+const readFrameLength = (bytes, offset) => {
+    if (offset + 3 >= bytes.length || bytes[offset] !== 0xff || (bytes[offset + 1] & 0xe0) !== 0xe0) {
+        return 0;
+    }
+    /** Version ids: 0 = MPEG 2.5, 1 = reserved, 2 = MPEG 2, 3 = MPEG 1 */
+    const version = (bytes[offset + 1] >> 3) & 0x03;
+    const layer = (bytes[offset + 1] >> 1) & 0x03;
+    const bitrateIndex = (bytes[offset + 2] >> 4) & 0x0f;
+    const sampleRateIndex = (bytes[offset + 2] >> 2) & 0x03;
+    const isReserved = version === 1
+        || layer !== MPEG_LAYER_III
+        || sampleRateIndex === 3
+        || bitrateIndex === 0
+        || bitrateIndex === 0x0f;
+    if (isReserved) {
+        return 0;
+    }
+    const isVersion1 = version === 3;
+    const padding = (bytes[offset + 2] >> 1) & 0x01;
+    const bitrate = (isVersion1 ? MPEG_BITRATES_V1 : MPEG_BITRATES_V2)[bitrateIndex] * 1000;
+    const sampleRate = MPEG_SAMPLE_RATES[sampleRateIndex] / (isVersion1 ? 1 : version === 2 ? 2 : 4);
+    return Math.floor((isVersion1 ? 144 : 72) * bitrate / sampleRate) + padding;
+};
+/**
+ * Some mp3 (e.g. converted from wma) keep junk between the ID3 tag and the
+ * first MPEG frame: media elements skip it, the WebAudio decoder does not.
+ * Returns the offset of the first real frame, or 0 when there is none.
+ */
+const findFirstFrameOffset = (bytes) => {
+    let start = 0;
+    /** ID3v2 header: "ID3" + version + flags + 4 syncsafe size bytes */
+    if (bytes.length >= 10 && bytes[0] === 0x49 && bytes[1] === 0x44 && bytes[2] === 0x33) {
+        start = 10 + ((bytes[6] << 21) | (bytes[7] << 14) | (bytes[8] << 7) | bytes[9]);
+        /** ID3v2.4 may append a 10 byte footer copy of the header */
+        if (bytes[5] & 0x10) {
+            start += 10;
+        }
+    }
+    for (let i = start; i < bytes.length - 3; i += 1) {
+        const length = readFrameLength(bytes, i);
+        /** Junk can open with a valid looking header, so require the next frame to follow */
+        if (length && readFrameLength(bytes, i + length)) {
+            return i;
+        }
+    }
+    return 0;
+};
+
 /**
  * Audio analyzer platform adapter
  *
@@ -142,11 +273,24 @@ const readFrequencyLevels = (analyser, barCount = AUDIO_LEVEL_BARS) => {
     }
     return levels;
 };
+/** decodeAudioData detaches the buffer, so the retry re-reads the blob */
+const decodeSkippingJunk = async (context, blob) => {
+    try {
+        return await context.decodeAudioData(await blob.arrayBuffer());
+    }
+    catch (error) {
+        const bytes = new Uint8Array(await blob.arrayBuffer());
+        const offset = findFirstFrameOffset(bytes);
+        if (!offset) {
+            throw error;
+        }
+        return context.decodeAudioData(bytes.buffer.slice(offset));
+    }
+};
 const decodeAudioLevels = async (blob, barCount = AUDIO_LEVEL_BARS) => {
     const context = new AudioContext();
     try {
-        const arrayBuffer = await blob.arrayBuffer();
-        const audioBuffer = await context.decodeAudioData(arrayBuffer);
+        const audioBuffer = await decodeSkippingJunk(context, blob);
         const channelData = audioBuffer.getChannelData(0);
         if (!channelData.length) {
             return Array.from({ length: barCount }, () => 0);
@@ -183,6 +327,9 @@ const fetchAudioBlob = async (url, signal) => {
         mode: 'cors',
         credentials: 'omit',
     });
+    if (!response.ok) {
+        throw new Error(`Failed to fetch audio: ${response.status}`);
+    }
     return response.blob();
 };
 
@@ -364,6 +511,8 @@ const useAudioPlayback = () => {
                 setIsPlaying(false);
                 setPlaybackTime(0);
             },
+            onPlay: () => setIsPlaying(true),
+            onPause: () => setIsPlaying(false),
         });
         audioRef.current = audio;
         setPlaybackTime(0);
@@ -383,6 +532,8 @@ const useAudioPlayback = () => {
                     setIsPlaying(false);
                     setPlaybackTime(0);
                 },
+                onPlay: () => setIsPlaying(true),
+                onPause: () => setIsPlaying(false),
             });
             audioRef.current = audio;
         }
@@ -811,7 +962,10 @@ const useAudioBlobLoader = (options) => {
     const objectUrlRef = useRef(null);
     const abortControllerRef = useRef(null);
     const failedSrcRef = useRef(null);
+    const waveformTokenRef = useRef(0);
+    const waveformDataRef = useRef(waveformData);
     const callbacksRef = useRef(playbackCallbacks);
+    waveformDataRef.current = waveformData;
     callbacksRef.current = playbackCallbacks;
     const createAudioFromBlob = useCallback((blob) => {
         if (objectUrlRef.current) {
@@ -823,19 +977,44 @@ const useAudioBlobLoader = (options) => {
             onLoadedMetadata: (dur) => callbacksRef.current.onLoadedMetadata(dur),
             onTimeUpdate: (time) => callbacksRef.current.onTimeUpdate(time),
             onEnded: () => callbacksRef.current.onEnded(),
+            onPlay: () => { var _a, _b; return (_b = (_a = callbacksRef.current).onPlay) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            onPause: () => { var _a, _b; return (_b = (_a = callbacksRef.current).onPause) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            onStop: () => { var _a, _b; return (_b = (_a = callbacksRef.current).onStop) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            onSeekBackward: () => { var _a, _b; return (_b = (_a = callbacksRef.current).onSeekBackward) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            onSeekForward: () => { var _a, _b; return (_b = (_a = callbacksRef.current).onSeekForward) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            onPreviousTrack: () => { var _a, _b; return (_b = (_a = callbacksRef.current).onPreviousTrack) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            onNextTrack: () => { var _a, _b; return (_b = (_a = callbacksRef.current).onNextTrack) === null || _b === void 0 ? void 0 : _b.call(_a); },
         });
         audioRef.current = audio;
         setIsLoaded(true);
     }, []);
+    /**
+     * Waveform is cosmetic: some files (e.g. mp3 with junk before the first
+     * frame) fail to decode in Safari while playing fine, so a decode error
+     * must never block playback. Token keeps only the latest decode.
+     */
+    const applyWaveformLevels = useCallback(async (blob) => {
+        if (waveformData) {
+            return;
+        }
+        waveformTokenRef.current += 1;
+        const token = waveformTokenRef.current;
+        try {
+            const levels = await decodeAudioLevels(blob);
+            if (token === waveformTokenRef.current) {
+                setWaveformLevels(levels);
+            }
+        }
+        catch (error) {
+            console.warn('[voice-player] Failed to decode waveform', error);
+        }
+    }, [waveformData]);
     const mountFromBlob = useCallback(async (blob) => {
         if (audioRef.current) {
             return;
         }
         setIsLoading(true);
         try {
-            if (!waveformData) {
-                setWaveformLevels(await decodeAudioLevels(blob));
-            }
             createAudioFromBlob(blob);
         }
         catch (error) {
@@ -844,12 +1023,19 @@ const useAudioBlobLoader = (options) => {
         finally {
             setIsLoading(false);
         }
-    }, [waveformData, createAudioFromBlob]);
-    const ensureAudioLoaded = useCallback(async () => {
+        void applyWaveformLevels(blob);
+    }, [applyWaveformLevels, createAudioFromBlob]);
+    const ensureAudioLoaded = useCallback(async (options) => {
         var _a;
-        if (audioRef.current || failedSrcRef.current === src) {
+        if (audioRef.current) {
             return;
         }
+        if (failedSrcRef.current === src) {
+            if (!(options === null || options === void 0 ? void 0 : options.retryFailed)) {
+                return;
+            }
+            failedSrcRef.current = null;
+        }
         if (preloadedBlob) {
             return mountFromBlob(preloadedBlob);
         }
@@ -865,14 +1051,8 @@ const useAudioBlobLoader = (options) => {
             if (controller.signal.aborted) {
                 return;
             }
-            if (!waveformData) {
-                const levels = await decodeAudioLevels(blob);
-                if (controller.signal.aborted) {
-                    return;
-                }
-                setWaveformLevels(levels);
-            }
             createAudioFromBlob(blob);
+            void applyWaveformLevels(blob);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === 'AbortError') {
@@ -886,13 +1066,16 @@ const useAudioBlobLoader = (options) => {
                 setIsLoading(false);
             }
         }
-    }, [src, waveformData, preloadedBlob, mountFromBlob, createAudioFromBlob]);
+    }, [src, preloadedBlob, mountFromBlob, applyWaveformLevels, createAudioFromBlob]);
     /** Cleanup on src change or unmount */
     useEffect(() => {
         failedSrcRef.current = null;
+        /** Drop the previous waveform so a failed decode cannot leave a foreign one */
+        setWaveformLevels(waveformDataRef.current || createInitialLevels());
         return () => {
             var _a;
             (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+            waveformTokenRef.current += 1;
             if (audioRef.current) {
                 cleanupAudio(audioRef.current);
                 audioRef.current = null;
@@ -911,6 +1094,7 @@ const useAudioBlobLoader = (options) => {
     }, [preloadedBlob, mountFromBlob]);
     useEffect(() => {
         if (waveformData) {
+            waveformTokenRef.current += 1;
             setWaveformLevels(waveformData);
         }
     }, [waveformData]);
@@ -953,9 +1137,13 @@ const audioPlaybackManager = {
  * @author: exode <hello@exode.ru>
  */
 const useVoiceMessagePlayer = (options) => {
-    const { src, onEnded, waveformData, preloadedBlob, duration: externalDuration, } = options;
+    const { src, onEnded, onPreviousTrack, onNextTrack, waveformData, preloadedBlob, duration: externalDuration, } = options;
     const onEndedRef = useRef(onEnded);
+    const onPreviousTrackRef = useRef(onPreviousTrack);
+    const onNextTrackRef = useRef(onNextTrack);
     onEndedRef.current = onEnded;
+    onPreviousTrackRef.current = onPreviousTrack;
+    onNextTrackRef.current = onNextTrack;
     const [isPlaying, setIsPlaying] = useState(false);
     const [currentTime, setCurrentTime] = useState(0);
     const [duration, setDuration] = useState(externalDuration || 0);
@@ -989,6 +1177,14 @@ const useVoiceMessagePlayer = (options) => {
                 setCurrentTime(0);
                 (_a = onEndedRef.current) === null || _a === void 0 ? void 0 : _a.call(onEndedRef);
             },
+            onPlay: () => setIsPlaying(true),
+            onPause: () => setIsPlaying(false),
+            onStop: () => {
+                setIsPlaying(false);
+                setCurrentTime(0);
+            },
+            onPreviousTrack: () => { var _a; return (_a = onPreviousTrackRef.current) === null || _a === void 0 ? void 0 : _a.call(onPreviousTrackRef); },
+            onNextTrack: () => { var _a; return (_a = onNextTrackRef.current) === null || _a === void 0 ? void 0 : _a.call(onNextTrackRef); },
         },
     });
     /** Pre-fetch audio without playing (for viewport preloading) */
@@ -1004,7 +1200,7 @@ const useVoiceMessagePlayer = (options) => {
             return;
         }
         audioPlaybackManager.stopOthers(stopThis);
-        void ensureAudioLoaded().then(() => {
+        void ensureAudioLoaded({ retryFailed: true }).then(() => {
             const audio = audioRef.current;
             if (audio) {
                 audio.play()
@@ -1064,7 +1260,7 @@ const useVoiceMessagePlayer = (options) => {
                 .catch(() => setIsPlaying(false));
         }
         else {
-            void ensureAudioLoaded().then(() => {
+            void ensureAudioLoaded({ retryFailed: true }).then(() => {
                 const loadedAudio = audioRef.current;
                 if (loadedAudio) {
                     audioPlaybackManager.stopOthers(stopThis);
@@ -2136,6 +2332,13 @@ class VoicePlaybackChainClass {
                 this.entries[idx + 1].play();
             }
         };
+        /** Play the previous voice message before the given media ID */
+        this.playPrevious = (currentId) => {
+            const idx = this.entries.findIndex((e) => e.id === currentId);
+            if (idx > 0) {
+                this.entries[idx - 1].play();
+            }
+        };
     }
 }
 const VoicePlaybackChain = new VoicePlaybackChainClass();
@@ -2243,12 +2446,24 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
             VoicePlaybackChain.playNext(chainId);
         }
     }, [onEnded, chainId]);
+    const handleNextTrack = useCallback(() => {
+        if (chainId != null) {
+            VoicePlaybackChain.playNext(chainId);
+        }
+    }, [chainId]);
+    const handlePreviousTrack = useCallback(() => {
+        if (chainId != null) {
+            VoicePlaybackChain.playPrevious(chainId);
+        }
+    }, [chainId]);
     const { play, progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, seekToTime, prefetch, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({
         src,
         duration,
         waveformData,
         preloadedBlob: props.preloadedBlob,
         onEnded: handleEnded,
+        onNextTrack: handleNextTrack,
+        onPreviousTrack: handlePreviousTrack,
     });
     useImperativeHandle(ref, () => ({ play, prefetch, seekToTime }), [
         play,