@exode-team/react-recorder 1.1.8 → 1.1.10

package/dist/components/VoiceMessagePlayer/VoiceMessagePlayer.d.ts

@@ -6,6 +6,7 @@
 export interface VoiceMessagePlayerRef {
     play: () => void;
     prefetch: () => void;
+    seekToTime: (seconds: number) => void;
 }
 declare const VoiceMessagePlayer: any;
 export { VoiceMessagePlayer };

package/dist/components/VoiceMessagePlayer/VoiceMessagePlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceMessagePlayer/VoiceMessagePlayer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAeD,QAAA,MAAM,kBAAkB,KA8MtB,CAAC;AAGH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"VoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceMessagePlayer/VoiceMessagePlayer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAeD,QAAA,MAAM,kBAAkB,KAqOtB,CAAC;AAGH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/hooks/useAudioBlobLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioBlobLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioBlobLoader.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYrD,UAAU,yBAAyB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,iBAAiB,CAAC;CACxC;AAED,UAAU,wBAAwB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,kBAAkB,GAAI,SAAS,yBAAyB,KAAG,wBAoIhE,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"useAudioBlobLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioBlobLoader.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYrD,UAAU,yBAAyB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,iBAAiB,CAAC;CACxC;AAED,UAAU,wBAAwB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,kBAAkB,GAAI,SAAS,yBAAyB,KAAG,wBA2IhE,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/hooks/useAudioPlayback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioPlayback.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioPlayback.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,sBAAsB;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAClC,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,QAAA,MAAM,gBAAgB,QAAO,sBA2H5B,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"useAudioPlayback.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioPlayback.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,sBAAsB;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAClC,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,QAAA,MAAM,gBAAgB,QAAO,sBA+H5B,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/hooks/useVoiceMessagePlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceMessagePlayer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,OAAO,KAAK,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAG1F,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B,KAAG,2BA6JtE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"useVoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceMessagePlayer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,OAAO,KAAK,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAG1F,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B,KAAG,2BAmNtE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/index.cjs

@@ -78,6 +78,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 = () => {
@@ -89,6 +144,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) => {
@@ -97,6 +167,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);
@@ -366,6 +439,8 @@ const useAudioPlayback = () => {
                 setIsPlaying(false);
                 setPlaybackTime(0);
             },
+            onPlay: () => setIsPlaying(true),
+            onPause: () => setIsPlaying(false),
         });
         audioRef.current = audio;
         setPlaybackTime(0);
@@ -385,6 +460,8 @@ const useAudioPlayback = () => {
                     setIsPlaying(false);
                     setPlaybackTime(0);
                 },
+                onPlay: () => setIsPlaying(true),
+                onPause: () => setIsPlaying(false),
             });
             audioRef.current = audio;
         }
@@ -825,6 +902,13 @@ 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);
@@ -955,9 +1039,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 = React.useRef(onEnded);
+    const onPreviousTrackRef = React.useRef(onPreviousTrack);
+    const onNextTrackRef = React.useRef(onNextTrack);
     onEndedRef.current = onEnded;
+    onPreviousTrackRef.current = onPreviousTrack;
+    onNextTrackRef.current = onNextTrack;
     const [isPlaying, setIsPlaying] = React.useState(false);
     const [currentTime, setCurrentTime] = React.useState(0);
     const [duration, setDuration] = React.useState(externalDuration || 0);
@@ -991,6 +1079,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) */
@@ -1045,15 +1141,44 @@ const useVoiceMessagePlayer = (options) => {
             setIsPlaying(false);
         }
     }, [isLoading, stopThis, audioRef]);
-    const seekTo = React.useCallback((seekProgress) => {
+    const seekTo = React.useCallback((seekPercent) => {
         const audio = audioRef.current;
         if (!audio || !isFinite(audio.duration)) {
             return;
         }
-        const time = seekProgress * audio.duration;
+        const time = seekPercent * audio.duration;
         audio.currentTime = time;
         setCurrentTime(time);
     }, [audioRef]);
+    /** Seek to a specific time in seconds and start playback */
+    const seekToTime = React.useCallback((seconds) => {
+        const audio = audioRef.current;
+        if (audio && isFinite(audio.duration)) {
+            audioPlaybackManager.stopOthers(stopThis);
+            audio.currentTime = Math.max(0, Math.min(seconds, audio.duration));
+            setCurrentTime(audio.currentTime);
+            audio.play()
+                .then(() => setIsPlaying(true))
+                .catch(() => setIsPlaying(false));
+        }
+        else {
+            void ensureAudioLoaded().then(() => {
+                const loadedAudio = audioRef.current;
+                if (loadedAudio) {
+                    audioPlaybackManager.stopOthers(stopThis);
+                    loadedAudio.currentTime = Math.max(0, Math.min(seconds, loadedAudio.duration || seconds));
+                    setCurrentTime(loadedAudio.currentTime);
+                    loadedAudio.play()
+                        .then(() => setIsPlaying(true))
+                        .catch(() => setIsPlaying(false));
+                }
+            });
+        }
+    }, [
+        audioRef,
+        stopThis,
+        ensureAudioLoaded,
+    ]);
     /** Sync external duration */
     React.useEffect(() => {
         if (externalDuration) {
@@ -1070,6 +1195,7 @@ const useVoiceMessagePlayer = (options) => {
         currentTime,
         waveformLevels,
         seekTo,
+        seekToTime,
         prefetch,
         preload,
         formatTime,
@@ -2108,6 +2234,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();
@@ -2215,14 +2348,30 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
             VoicePlaybackChain.playNext(chainId);
         }
     }, [onEnded, chainId]);
-    const { play, progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, prefetch, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({
+    const handleNextTrack = React.useCallback(() => {
+        if (chainId != null) {
+            VoicePlaybackChain.playNext(chainId);
+        }
+    }, [chainId]);
+    const handlePreviousTrack = React.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,
     });
-    React.useImperativeHandle(ref, () => ({ play, prefetch }), [play, prefetch]);
+    React.useImperativeHandle(ref, () => ({ play, prefetch, seekToTime }), [
+        play,
+        prefetch,
+        seekToTime,
+    ]);
     /** Auto-preload audio when player enters viewport */
     React.useEffect(() => {
         if (!autoPreload || isLoaded || isLoading) {