@exode-team/react-recorder 1.1.0 → 1.1.2

package/dist/index.cjs

@@ -1,10 +1,35 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var styled = require('styled-components');
 var icons = require('@vkontakte/icons');
 
+/**
+ * Math utilities
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const clampValue = (value, lowerBound = 0, upperBound = 100) => {
+    const safe = Number.isFinite(value) ? value : 0;
+    return Math.min(Math.max(safe, lowerBound), upperBound);
+};
+const roundTo = (value, precision = 2) => {
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+};
+
+/**
+ * Format utilities
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+};
+
 /**
  * Microphone platform adapter
  *
@@ -48,124 +73,6 @@ const stopStream = (stream) => {
     stream.getTracks().forEach((track) => track.stop());
 };
 
-/**
- * useMediaRecorder
- *
- * @author: exode <hello@exode.ru>
- */
-const useMediaRecorder = (callbacks) => {
-    const [isRecording, setIsRecording] = react.useState(false);
-    const [isPaused, setIsPaused] = react.useState(false);
-    const mediaRecorderRef = react.useRef(null);
-    const mediaStreamRef = react.useRef(null);
-    const audioChunksRef = react.useRef([]);
-    const discardRef = react.useRef(false);
-    const needsPreviewRef = react.useRef(false);
-    const cleanupStream = react.useCallback(() => {
-        if (mediaStreamRef.current) {
-            stopStream(mediaStreamRef.current);
-            mediaStreamRef.current = null;
-        }
-    }, []);
-    const startRecording = react.useCallback(async (mimeType) => {
-        try {
-            const stream = await requestMicrophoneAccess();
-            mediaStreamRef.current = stream;
-            callbacks.onStreamAcquired(stream);
-            audioChunksRef.current = [];
-            discardRef.current = false;
-            const { recorder } = createRecorderSession(stream, {
-                onDataAvailable: (event) => {
-                    if (event.data.size > 0) {
-                        audioChunksRef.current.push(event.data);
-                        callbacks.onDataChunk(event.data);
-                    }
-                    if (needsPreviewRef.current) {
-                        callbacks.onNeedsPreview(audioChunksRef.current);
-                        needsPreviewRef.current = false;
-                    }
-                },
-                onStop: () => {
-                    const discarded = discardRef.current;
-                    discardRef.current = false;
-                    mediaRecorderRef.current = null;
-                    cleanupStream();
-                    setIsRecording(false);
-                    setIsPaused(false);
-                    callbacks.onStopped(audioChunksRef.current, discarded);
-                },
-                onPause: () => {
-                    setIsPaused(true);
-                    callbacks.onPaused();
-                },
-                onResume: () => {
-                    setIsPaused(false);
-                    needsPreviewRef.current = false;
-                    callbacks.onResumed();
-                },
-            }, { mimeType });
-            mediaRecorderRef.current = recorder;
-            recorder.start();
-            setIsRecording(true);
-            setIsPaused(false);
-        }
-        catch (error) {
-            console.error('[audio-recorder] Error accessing microphone:', error);
-            const kind = classifyMicError(error);
-            if (kind === 'permission') {
-                callbacks.onPermissionDenied(error);
-            }
-            else {
-                callbacks.onError(error);
-            }
-        }
-    }, [callbacks, cleanupStream]);
-    const stopRecording = react.useCallback(() => {
-        if (!mediaRecorderRef.current || !isRecording) {
-            return;
-        }
-        mediaRecorderRef.current.stop();
-    }, [isRecording]);
-    const cancelRecording = react.useCallback(() => {
-        if (!mediaRecorderRef.current) {
-            return;
-        }
-        discardRef.current = true;
-        needsPreviewRef.current = false;
-        if (mediaRecorderRef.current.state !== 'inactive') {
-            mediaRecorderRef.current.stop();
-        }
-    }, []);
-    const togglePause = react.useCallback(() => {
-        if (!mediaRecorderRef.current || !isRecording) {
-            return;
-        }
-        if (mediaRecorderRef.current.state === 'recording') {
-            needsPreviewRef.current = true;
-            try {
-                mediaRecorderRef.current.requestData();
-            }
-            catch (error) {
-                console.warn('[audio-recorder] requestData failed', error);
-            }
-            mediaRecorderRef.current.pause();
-        }
-        else if (mediaRecorderRef.current.state === 'paused') {
-            needsPreviewRef.current = false;
-            mediaRecorderRef.current.resume();
-        }
-    }, [isRecording]);
-    return {
-        isPaused,
-        isRecording,
-        togglePause,
-        cleanupStream,
-        stopRecording,
-        startRecording,
-        cancelRecording,
-    };
-};
-
 /**
  * Audio playback platform adapter
  *
@@ -205,6 +112,11 @@ const revokeObjectURL = (url) => {
  */
 const AUDIO_LEVEL_BARS = 40;
 const createInitialLevels = () => Array.from({ length: AUDIO_LEVEL_BARS }, () => 0);
+const TIMELINE_SAMPLE_INTERVAL = 150;
+const TIMELINE_BAR_WIDTH = 3;
+const TIMELINE_BAR_GAP = 2;
+const TIMELINE_BAR_MIN_HEIGHT = 3;
+const TIMELINE_BAR_MAX_HEIGHT = 24;
 
 /**
  * Audio analyzer platform adapter
@@ -262,6 +174,16 @@ const decodeAudioLevels = async (blob, barCount = AUDIO_LEVEL_BARS) => {
     }
 };
 
+/**
+ * Audio blob fetcher platform adapter
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const fetchAudioBlob = async (url, signal) => {
+    const response = await fetch(url, { signal });
+    return response.blob();
+};
+
 /**
  * Animation frame platform adapter
  *
@@ -274,18 +196,136 @@ const cancelFrame = (id) => {
     cancelAnimationFrame(id);
 };
 
+/**
+ * useMediaRecorder
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const useMediaRecorder = (callbacks) => {
+    const [isRecording, setIsRecording] = React.useState(false);
+    const [isPaused, setIsPaused] = React.useState(false);
+    const mediaRecorderRef = React.useRef(null);
+    const mediaStreamRef = React.useRef(null);
+    const audioChunksRef = React.useRef([]);
+    const discardRef = React.useRef(false);
+    const needsPreviewRef = React.useRef(false);
+    const cleanupStream = React.useCallback(() => {
+        if (mediaStreamRef.current) {
+            stopStream(mediaStreamRef.current);
+            mediaStreamRef.current = null;
+        }
+    }, []);
+    const startRecording = React.useCallback(async (mimeType) => {
+        try {
+            const stream = await requestMicrophoneAccess();
+            mediaStreamRef.current = stream;
+            callbacks.onStreamAcquired(stream);
+            audioChunksRef.current = [];
+            discardRef.current = false;
+            const { recorder } = createRecorderSession(stream, {
+                onDataAvailable: (event) => {
+                    if (event.data.size > 0) {
+                        audioChunksRef.current.push(event.data);
+                        callbacks.onDataChunk(event.data);
+                    }
+                    if (needsPreviewRef.current) {
+                        callbacks.onNeedsPreview(audioChunksRef.current);
+                        needsPreviewRef.current = false;
+                    }
+                },
+                onStop: () => {
+                    const discarded = discardRef.current;
+                    discardRef.current = false;
+                    mediaRecorderRef.current = null;
+                    cleanupStream();
+                    setIsRecording(false);
+                    setIsPaused(false);
+                    callbacks.onStopped(audioChunksRef.current, discarded);
+                },
+                onPause: () => {
+                    setIsPaused(true);
+                    callbacks.onPaused();
+                },
+                onResume: () => {
+                    setIsPaused(false);
+                    needsPreviewRef.current = false;
+                    callbacks.onResumed();
+                },
+            }, { mimeType });
+            mediaRecorderRef.current = recorder;
+            recorder.start();
+            setIsRecording(true);
+            setIsPaused(false);
+        }
+        catch (error) {
+            console.error('[audio-recorder] Error accessing microphone:', error);
+            const kind = classifyMicError(error);
+            if (kind === 'permission') {
+                callbacks.onPermissionDenied(error);
+            }
+            else {
+                callbacks.onError(error);
+            }
+        }
+    }, [callbacks, cleanupStream]);
+    const stopRecording = React.useCallback(() => {
+        if (!mediaRecorderRef.current || !isRecording) {
+            return;
+        }
+        mediaRecorderRef.current.stop();
+    }, [isRecording]);
+    const cancelRecording = React.useCallback(() => {
+        if (!mediaRecorderRef.current) {
+            return;
+        }
+        discardRef.current = true;
+        needsPreviewRef.current = false;
+        if (mediaRecorderRef.current.state !== 'inactive') {
+            mediaRecorderRef.current.stop();
+        }
+    }, []);
+    const togglePause = React.useCallback(() => {
+        if (!mediaRecorderRef.current || !isRecording) {
+            return;
+        }
+        if (mediaRecorderRef.current.state === 'recording') {
+            needsPreviewRef.current = true;
+            try {
+                mediaRecorderRef.current.requestData();
+            }
+            catch (error) {
+                console.warn('[audio-recorder] requestData failed', error);
+            }
+            mediaRecorderRef.current.pause();
+        }
+        else if (mediaRecorderRef.current.state === 'paused') {
+            needsPreviewRef.current = false;
+            mediaRecorderRef.current.resume();
+        }
+    }, [isRecording]);
+    return {
+        isPaused,
+        isRecording,
+        togglePause,
+        cleanupStream,
+        stopRecording,
+        startRecording,
+        cancelRecording,
+    };
+};
+
 /**
  * useAudioPlayback
  *
  * @author: exode <hello@exode.ru>
  */
 const useAudioPlayback = () => {
-    const [audioURL, setAudioURL] = react.useState(null);
-    const [isPlaying, setIsPlaying] = react.useState(false);
-    const [playbackTime, setPlaybackTime] = react.useState(0);
-    const [playbackDuration, setPlaybackDuration] = react.useState(0);
-    const audioRef = react.useRef(null);
-    const cleanupAudioElement = react.useCallback(() => {
+    const [audioURL, setAudioURL] = React.useState(null);
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [playbackTime, setPlaybackTime] = React.useState(0);
+    const [playbackDuration, setPlaybackDuration] = React.useState(0);
+    const audioRef = React.useRef(null);
+    const cleanupAudioElement = React.useCallback(() => {
         const audio = audioRef.current;
         if (!audio) {
             return;
@@ -293,7 +333,7 @@ const useAudioPlayback = () => {
         cleanupAudio(audio);
         audioRef.current = null;
     }, []);
-    const setAudioUrlSafely = react.useCallback((value) => {
+    const setAudioUrlSafely = React.useCallback((value) => {
         setAudioURL((prev) => {
             if (prev) {
                 revokeObjectURL(prev);
@@ -301,14 +341,14 @@ const useAudioPlayback = () => {
             return value;
         });
     }, []);
-    const resetPlayback = react.useCallback(() => {
+    const resetPlayback = React.useCallback(() => {
         setPlaybackTime(0);
         setPlaybackDuration(0);
         setIsPlaying(false);
         setAudioUrlSafely(null);
         cleanupAudioElement();
     }, [cleanupAudioElement, setAudioUrlSafely]);
-    const mountBlob = react.useCallback((blob) => {
+    const mountBlob = React.useCallback((blob) => {
         const url = createObjectURL(blob);
         setAudioUrlSafely(url);
         cleanupAudioElement();
@@ -326,7 +366,7 @@ const useAudioPlayback = () => {
         setIsPlaying(false);
         return url;
     }, [cleanupAudioElement, setAudioUrlSafely]);
-    const togglePlayback = react.useCallback((onError) => {
+    const togglePlayback = React.useCallback((onError) => {
         if (!audioURL) {
             return;
         }
@@ -361,7 +401,7 @@ const useAudioPlayback = () => {
             setIsPlaying(false);
         }
     }, [audioURL, playbackDuration, playbackTime]);
-    const stopPlayback = react.useCallback(() => {
+    const stopPlayback = React.useCallback(() => {
         const audio = audioRef.current;
         if (!audio) {
             return;
@@ -385,36 +425,22 @@ const useAudioPlayback = () => {
 };
 
 /**
- * Math utilities
- *
- * @author: exode <hello@exode.ru>
- */
-const clampValue = (value, lowerBound = 0, upperBound = 100) => {
-    const safe = Number.isFinite(value) ? value : 0;
-    return Math.min(Math.max(safe, lowerBound), upperBound);
-};
-const roundTo = (value, precision = 2) => {
-    const factor = Math.pow(10, precision);
-    return Math.round(value * factor) / factor;
-};
-
-/**
- * useRecordingTiming
+ * useRecordingTiming
  *
  * @author: exode <hello@exode.ru>
  */
 const useRecordingTiming = () => {
-    const [recordingTime, setRecordingTime] = react.useState(0);
-    const timerRef = react.useRef(null);
-    const recordingStartRef = react.useRef(null);
-    const recordingAccumulatedRef = react.useRef(0);
-    const stopTicker = react.useCallback(() => {
+    const [recordingTime, setRecordingTime] = React.useState(0);
+    const timerRef = React.useRef(null);
+    const recordingStartRef = React.useRef(null);
+    const recordingAccumulatedRef = React.useRef(0);
+    const stopTicker = React.useCallback(() => {
         if (timerRef.current) {
             clearInterval(timerRef.current);
             timerRef.current = null;
         }
     }, []);
-    const startTicker = react.useCallback(() => {
+    const startTicker = React.useCallback(() => {
         if (timerRef.current) {
             clearInterval(timerRef.current);
         }
@@ -428,17 +454,17 @@ const useRecordingTiming = () => {
             setRecordingTime(roundTo(elapsed));
         }, 100);
     }, []);
-    const startNewSession = react.useCallback(() => {
+    const startNewSession = React.useCallback(() => {
         recordingAccumulatedRef.current = 0;
         setRecordingTime(0);
         recordingStartRef.current = performance.now();
         startTicker();
     }, [startTicker]);
-    const resumeSession = react.useCallback(() => {
+    const resumeSession = React.useCallback(() => {
         recordingStartRef.current = performance.now();
         startTicker();
     }, [startTicker]);
-    const pauseSession = react.useCallback(() => {
+    const pauseSession = React.useCallback(() => {
         if (recordingStartRef.current === null) {
             return;
         }
@@ -448,13 +474,13 @@ const useRecordingTiming = () => {
         setRecordingTime(roundTo(recordingAccumulatedRef.current));
         stopTicker();
     }, [stopTicker]);
-    const resetSession = react.useCallback(() => {
+    const resetSession = React.useCallback(() => {
         stopTicker();
         recordingStartRef.current = null;
         recordingAccumulatedRef.current = 0;
         setRecordingTime(0);
     }, [stopTicker]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         return () => {
             stopTicker();
         };
@@ -474,17 +500,17 @@ const useRecordingTiming = () => {
  * @author: exode <hello@exode.ru>
  */
 const useRecorderVisualization = () => {
-    const [audioLevels, setAudioLevels] = react.useState(createInitialLevels);
-    const [previewLevels, setPreviewLevels] = react.useState(createInitialLevels);
-    const analyzerRef = react.useRef(null);
-    const animationFrameRef = react.useRef(null);
-    const resetAudioLevels = react.useCallback(() => {
+    const [audioLevels, setAudioLevels] = React.useState(createInitialLevels);
+    const [previewLevels, setPreviewLevels] = React.useState(createInitialLevels);
+    const analyzerRef = React.useRef(null);
+    const animationFrameRef = React.useRef(null);
+    const resetAudioLevels = React.useCallback(() => {
         setAudioLevels(createInitialLevels);
     }, []);
-    const resetPreviewLevels = react.useCallback(() => {
+    const resetPreviewLevels = React.useCallback(() => {
         setPreviewLevels(createInitialLevels);
     }, []);
-    const stopVisualization = react.useCallback((options) => {
+    const stopVisualization = React.useCallback((options) => {
         var _a, _b;
         if (animationFrameRef.current) {
             cancelFrame(animationFrameRef.current);
@@ -498,7 +524,7 @@ const useRecorderVisualization = () => {
             resetAudioLevels();
         }
     }, [resetAudioLevels]);
-    const visualize = react.useCallback(() => {
+    const visualize = React.useCallback(() => {
         if (!analyzerRef.current) {
             return;
         }
@@ -510,16 +536,16 @@ const useRecorderVisualization = () => {
         };
         draw();
     }, []);
-    const resumeVisualization = react.useCallback(() => {
+    const resumeVisualization = React.useCallback(() => {
         if (analyzerRef.current && !animationFrameRef.current) {
             visualize();
         }
     }, [visualize]);
-    const initializeVisualization = react.useCallback((stream) => {
+    const initializeVisualization = React.useCallback((stream) => {
         analyzerRef.current = createStreamAnalyzer(stream);
         visualize();
     }, [visualize]);
-    const generatePreviewLevels = react.useCallback(async (blob) => {
+    const generatePreviewLevels = React.useCallback(async (blob) => {
         try {
             const levels = await decodeAudioLevels(blob);
             setAudioLevels(levels);
@@ -530,7 +556,7 @@ const useRecorderVisualization = () => {
             setPreviewLevels(createInitialLevels());
         }
     }, []);
-    const cleanupVisualization = react.useCallback(() => {
+    const cleanupVisualization = React.useCallback(() => {
         if (animationFrameRef.current) {
             cancelFrame(animationFrameRef.current);
         }
@@ -556,14 +582,50 @@ const useRecorderVisualization = () => {
 };
 
 /**
- * Format utilities
+ * useRecordingSender — handles sending a recorded voice message via an upload strategy.
  *
  * @author: exode <hello@exode.ru>
  */
-const formatTime = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+const useRecordingSender = (options) => {
+    const { space, uploader, fileName, mimeType, uploadId, audioBlob, onUploaded, onRecordingError, deleteRecording, autoResetAfterUpload, } = options;
+    const sendRecording = React.useCallback(async () => {
+        if (!audioBlob) {
+            const error = new Error('Voice recording is not available');
+            onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
+            return;
+        }
+        if (!uploader) {
+            const error = new Error('Uploader strategy is not defined');
+            onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
+            throw error;
+        }
+        try {
+            const file = new File([audioBlob], fileName, {
+                type: audioBlob.type || mimeType,
+            });
+            const uploaded = await uploader(file, { space, uploadId });
+            await onUploaded(uploaded);
+            if (autoResetAfterUpload) {
+                deleteRecording();
+            }
+        }
+        catch (error) {
+            onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
+            throw error;
+        }
+    }, [
+        space,
+        uploadId,
+        uploader,
+        fileName,
+        audioBlob,
+        mimeType,
+        onUploaded,
+        onRecordingError,
+        deleteRecording,
+        autoResetAfterUpload,
+    ]);
+    return { sendRecording };
 };
 
 /**
@@ -573,29 +635,48 @@ const formatTime = (seconds) => {
  */
 function useVoiceRecorder(props) {
     const { space, uploadId, uploader, onUploaded, onRecordingStop, onRecordingStart, onRecordingError, onRecordingDelete, onPermissionDenied, fileName = 'record.webm', mimeType = 'audio/webm', autoResetAfterUpload = true, } = props;
-    const [audioBlob, setAudioBlob] = react.useState(null);
-    const { audioURL, isPlaying, mountBlob, playbackTime, stopPlayback, resetPlayback, togglePlayback: _togglePlayback, playbackDuration} = useAudioPlayback();
+    const [audioBlob, setAudioBlob] = React.useState(null);
+    const { audioURL, isPlaying, mountBlob, playbackTime, stopPlayback, resetPlayback, togglePlayback: _togglePlayback, playbackDuration, } = useAudioPlayback();
     const { audioLevels, previewLevels, resetAudioLevels, stopVisualization, resetPreviewLevels, resumeVisualization, cleanupVisualization, generatePreviewLevels, initializeVisualization, } = useRecorderVisualization();
     const { recordingTime, pauseSession, resetSession, resumeSession, startNewSession, } = useRecordingTiming();
-    const resetCurrentRecording = react.useCallback((options) => {
+    const resetCurrentRecording = React.useCallback((opts) => {
         var _a;
         setAudioBlob(null);
         resetPlayback();
-        if ((_a = options === null || options === void 0 ? void 0 : options.resetPreview) !== null && _a !== void 0 ? _a : true) {
+        if ((_a = opts === null || opts === void 0 ? void 0 : opts.resetPreview) !== null && _a !== void 0 ? _a : true) {
             resetPreviewLevels();
         }
-        if (options === null || options === void 0 ? void 0 : options.resetLevels) {
+        if (opts === null || opts === void 0 ? void 0 : opts.resetLevels) {
             resetAudioLevels();
         }
-        if (options === null || options === void 0 ? void 0 : options.notifyDelete) {
+        if (opts === null || opts === void 0 ? void 0 : opts.notifyDelete) {
             onRecordingDelete === null || onRecordingDelete === void 0 ? void 0 : onRecordingDelete();
         }
     }, [onRecordingDelete, resetAudioLevels, resetPlayback, resetPreviewLevels]);
-    const mountRecordingBlob = react.useCallback((blob) => {
+    const deleteRecording = React.useCallback(() => {
+        resetCurrentRecording({
+            resetLevels: true,
+            notifyDelete: true,
+        });
+        resetSession();
+    }, [resetCurrentRecording, resetSession]);
+    const { sendRecording } = useRecordingSender({
+        audioBlob,
+        fileName,
+        mimeType,
+        space,
+        uploadId,
+        uploader,
+        autoResetAfterUpload,
+        onUploaded,
+        onRecordingError,
+        deleteRecording,
+    });
+    const mountRecordingBlob = React.useCallback((blob) => {
         setAudioBlob(blob);
         mountBlob(blob);
     }, [mountBlob]);
-    const recorderCallbacks = react.useMemo(() => ({
+    const recorderCallbacks = React.useMemo(() => ({
         onDataChunk: () => { },
         onNeedsPreview: (chunks) => {
             const snapshot = new Blob(chunks, { type: mimeType });
@@ -649,13 +730,13 @@ function useVoiceRecorder(props) {
         stopVisualization,
     ]);
     const { isPaused, isRecording, togglePause, cleanupStream, stopRecording, cancelRecording, startRecording: _startRecording, } = useMediaRecorder(recorderCallbacks);
-    const startRecording = react.useCallback(async () => {
+    const startRecording = React.useCallback(async () => {
         resetCurrentRecording({ resetLevels: true });
         await _startRecording(mimeType);
         onRecordingStart === null || onRecordingStart === void 0 ? void 0 : onRecordingStart();
         startNewSession();
     }, [_startRecording, mimeType, onRecordingStart, resetCurrentRecording, startNewSession]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         return () => {
             cleanupVisualization();
             cleanupStream();
@@ -663,50 +744,9 @@ function useVoiceRecorder(props) {
             resetSession();
         };
     }, [cleanupVisualization, cleanupStream, resetPlayback, resetSession]);
-    const deleteRecording = react.useCallback(() => {
-        resetCurrentRecording({ resetLevels: true, notifyDelete: true });
-        resetSession();
-    }, [resetCurrentRecording, resetSession]);
-    const togglePlayback = react.useCallback(() => {
+    const togglePlayback = React.useCallback(() => {
         _togglePlayback(onRecordingError);
     }, [_togglePlayback, onRecordingError]);
-    const sendRecording = react.useCallback(async () => {
-        if (!audioBlob) {
-            const error = new Error('Voice recording is not available');
-            onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
-            return;
-        }
-        if (!uploader) {
-            const error = new Error('Uploader strategy is not defined');
-            onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
-            throw error;
-        }
-        try {
-            const file = new File([audioBlob], fileName, {
-                type: audioBlob.type || mimeType,
-            });
-            const uploaded = await uploader(file, { space, uploadId });
-            await onUploaded(uploaded);
-            if (autoResetAfterUpload) {
-                deleteRecording();
-            }
-        }
-        catch (error) {
-            onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
-            throw error;
-        }
-    }, [
-        audioBlob,
-        autoResetAfterUpload,
-        deleteRecording,
-        fileName,
-        mimeType,
-        onRecordingError,
-        onUploaded,
-        space,
-        uploadId,
-        uploader,
-    ]);
     return {
         audioURL,
         isPaused,
@@ -731,96 +771,521 @@ function useVoiceRecorder(props) {
 }
 
 /**
- * IdleControl styles
+ * useAudioBlobLoader — loads audio blob from URL or preloaded data,
+ * creates object URL and decodes waveform levels.
  *
  * @author: exode <hello@exode.ru>
  */
-const IdleWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-`;
-const IdleButton = styled.button `
-    position: relative;
-    width: 72px;
-    height: 72px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 36px;
-    border: 0;
-    background: var(--background_content, #ffffff);
-    color: color-mix(in srgb, var(--accent, #3f8ae0) 80%, white 20%);
-    cursor: pointer;
-    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
-
-    &:hover {
-        transform: translateY(-2px);
-    }
-
-    &:active {
-        transform: translateY(0);
-    }
-
-    &:focus-visible {
-        outline: 2px solid color-mix(in srgb, var(--accent, #3f8ae0) 70%, transparent);
-        outline-offset: 4px;
-    }
-`;
-const IdleButtonOutline = styled.span `
-    position: absolute;
-    inset: 0;
-    border-radius: 32px;
-    border: 1px solid color-mix(in srgb, var(--accent, #3f8ae0) 28%, transparent);
-    pointer-events: none;
-`;
-const IdleButtonGlow = styled.span `
-    position: absolute;
-    inset: 8px;
-    border-radius: 28px;
-    background: radial-gradient(
-        120% 120% at 50% 50%,
-        color-mix(in srgb, var(--accent, #3f8ae0) 24%, transparent) 0%,
-        color-mix(in srgb, var(--accent, #3f8ae0) 10%, transparent) 65%,
-        transparent 100%
-    );
-    filter: blur(4px);
-    pointer-events: none;
-`;
-const IdleInstruction = styled.div `
-    font-size: 14px;
-    text-align: center;
-    color: color-mix(in srgb, var(--text_primary, #0a0a0a) 60%, transparent);
-`;
-
-const IdleControl = (props) => {
-    const { onClick, instruction, startAriaLabel, } = props;
-    return (jsxRuntime.jsxs(IdleWrapper, { children: [jsxRuntime.jsxs(IdleButton, { type: "button", onClick: onClick, "aria-label": startAriaLabel, children: [jsxRuntime.jsx(IdleButtonOutline, { "aria-hidden": true }), jsxRuntime.jsx(IdleButtonGlow, { "aria-hidden": true }), jsxRuntime.jsx(icons.Icon32Microphone, { height: 48, width: 48 })] }), jsxRuntime.jsx(IdleInstruction, { children: instruction })] }));
+const useAudioBlobLoader = (options) => {
+    const { src, waveformData, preloadedBlob, playbackCallbacks } = options;
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [waveformLevels, setWaveformLevels] = React.useState(waveformData || createInitialLevels);
+    const audioRef = React.useRef(null);
+    const objectUrlRef = React.useRef(null);
+    const abortControllerRef = React.useRef(null);
+    const callbacksRef = React.useRef(playbackCallbacks);
+    callbacksRef.current = playbackCallbacks;
+    const createAudioFromBlob = React.useCallback((blob) => {
+        if (objectUrlRef.current) {
+            revokeObjectURL(objectUrlRef.current);
+        }
+        const url = createObjectURL(blob);
+        objectUrlRef.current = url;
+        const { audio } = createAudioPlayback(url, {
+            onLoadedMetadata: (dur) => callbacksRef.current.onLoadedMetadata(dur),
+            onTimeUpdate: (time) => callbacksRef.current.onTimeUpdate(time),
+            onEnded: () => callbacksRef.current.onEnded(),
+        });
+        audioRef.current = audio;
+        setIsLoaded(true);
+    }, []);
+    const mountFromBlob = React.useCallback(async (blob) => {
+        if (audioRef.current) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            if (!waveformData) {
+                setWaveformLevels(await decodeAudioLevels(blob));
+            }
+            createAudioFromBlob(blob);
+        }
+        catch (error) {
+            console.warn('[voice-player] Failed to mount blob', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [waveformData, createAudioFromBlob]);
+    const ensureAudioLoaded = React.useCallback(async () => {
+        var _a;
+        if (audioRef.current) {
+            return;
+        }
+        if (preloadedBlob) {
+            return mountFromBlob(preloadedBlob);
+        }
+        if (!src) {
+            return;
+        }
+        (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+        setIsLoading(true);
+        try {
+            const blob = await fetchAudioBlob(src, controller.signal);
+            if (controller.signal.aborted) {
+                return;
+            }
+            if (!waveformData) {
+                const levels = await decodeAudioLevels(blob);
+                if (controller.signal.aborted) {
+                    return;
+                }
+                setWaveformLevels(levels);
+            }
+            createAudioFromBlob(blob);
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                return;
+            }
+            console.warn('[voice-player] Failed to load audio', error);
+        }
+        finally {
+            if (!controller.signal.aborted) {
+                setIsLoading(false);
+            }
+        }
+    }, [src, waveformData, preloadedBlob, mountFromBlob, createAudioFromBlob]);
+    /** Cleanup on src change or unmount */
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+            if (audioRef.current) {
+                cleanupAudio(audioRef.current);
+                audioRef.current = null;
+            }
+            if (objectUrlRef.current) {
+                revokeObjectURL(objectUrlRef.current);
+                objectUrlRef.current = null;
+            }
+            setIsLoaded(false);
+        };
+    }, [src]);
+    React.useEffect(() => {
+        if (preloadedBlob && !audioRef.current) {
+            void mountFromBlob(preloadedBlob);
+        }
+    }, [preloadedBlob, mountFromBlob]);
+    React.useEffect(() => {
+        if (waveformData) {
+            setWaveformLevels(waveformData);
+        }
+    }, [waveformData]);
+    return {
+        audioRef,
+        isLoading,
+        isLoaded,
+        waveformLevels,
+        ensureAudioLoaded,
+    };
 };
 
 /**
- * RecordingShell styles
+ * Global audio playback manager — ensures only one audio plays at a time
  *
  * @author: exode <hello@exode.ru>
  */
-const Wrapper$1 = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 14px;
-    border-radius: 9999px;
-    background: var(--background_content, #ffffff);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text_primary, #0a0a0a) 6%, transparent);
-`;
-const CancelButton$1 = styled.button `
-    width: 36px;
-    height: 36px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 18px;
-    background: transparent;
+const listeners = new Set();
+const audioPlaybackManager = {
+    /** Register a stop callback for a player instance */
+    subscribe: (callback) => {
+        listeners.add(callback);
+        return () => {
+            listeners.delete(callback);
+        };
+    },
+    /** Stop all other players except the caller */
+    stopOthers: (except) => {
+        listeners.forEach((cb) => {
+            if (cb !== except) {
+                cb();
+            }
+        });
+    },
+};
+
+/**
+ * useVoiceMessagePlayer
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const useVoiceMessagePlayer = (options) => {
+    const { src, onEnded, waveformData, preloadedBlob, duration: externalDuration, } = options;
+    const onEndedRef = React.useRef(onEnded);
+    onEndedRef.current = onEnded;
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [currentTime, setCurrentTime] = React.useState(0);
+    const [duration, setDuration] = React.useState(externalDuration || 0);
+    const progress = duration > 0 ? currentTime / duration : 0;
+    /** Stop this player (called by manager when another player starts) */
+    const stopThis = React.useCallback(() => {
+        const audio = audioRef.current;
+        if (audio && !audio.paused) {
+            audio.pause();
+        }
+        setIsPlaying(false);
+    }, []);
+    /** Subscribe to global manager on mount */
+    React.useEffect(() => {
+        return audioPlaybackManager.subscribe(stopThis);
+    }, [stopThis]);
+    const { audioRef, isLoading, isLoaded, waveformLevels, ensureAudioLoaded, } = useAudioBlobLoader({
+        src,
+        waveformData,
+        preloadedBlob,
+        playbackCallbacks: {
+            onLoadedMetadata: (dur) => {
+                if (!externalDuration && dur && isFinite(dur) && dur > 0.5) {
+                    setDuration(dur);
+                }
+            },
+            onTimeUpdate: (time) => setCurrentTime(time),
+            onEnded: () => {
+                var _a;
+                setIsPlaying(false);
+                setCurrentTime(0);
+                (_a = onEndedRef.current) === null || _a === void 0 ? void 0 : _a.call(onEndedRef);
+            },
+        },
+    });
+    /** Pre-fetch audio without playing (for viewport preloading) */
+    const prefetch = React.useCallback(() => {
+        if (isLoading || audioRef.current) {
+            return;
+        }
+        void ensureAudioLoaded();
+    }, [isLoading, ensureAudioLoaded]);
+    /** Load audio and auto-play after loaded */
+    const preload = React.useCallback(() => {
+        if (isLoading || audioRef.current) {
+            return;
+        }
+        audioPlaybackManager.stopOthers(stopThis);
+        void ensureAudioLoaded().then(() => {
+            const audio = audioRef.current;
+            if (audio) {
+                audio.play()
+                    .then(() => setIsPlaying(true))
+                    .catch(() => setIsPlaying(false));
+            }
+        });
+    }, [isLoading, ensureAudioLoaded, stopThis, audioRef]);
+    /** Programmatically start playback (used for chained playback) */
+    const play = React.useCallback(() => {
+        const audio = audioRef.current;
+        if (audio) {
+            audioPlaybackManager.stopOthers(stopThis);
+            audio.play()
+                .then(() => setIsPlaying(true))
+                .catch(() => setIsPlaying(false));
+        }
+        else {
+            preload();
+        }
+    }, [stopThis, preload, audioRef]);
+    /** Toggle play/pause (only works after audio is loaded) */
+    const togglePlayback = React.useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio || isLoading) {
+            return;
+        }
+        if (audio.paused) {
+            audioPlaybackManager.stopOthers(stopThis);
+            audio.play()
+                .then(() => setIsPlaying(true))
+                .catch(() => setIsPlaying(false));
+        }
+        else {
+            audio.pause();
+            setIsPlaying(false);
+        }
+    }, [isLoading, stopThis, audioRef]);
+    const seekTo = React.useCallback((seekProgress) => {
+        const audio = audioRef.current;
+        if (!audio || !isFinite(audio.duration)) {
+            return;
+        }
+        const time = seekProgress * audio.duration;
+        audio.currentTime = time;
+        setCurrentTime(time);
+    }, [audioRef]);
+    /** Sync external duration */
+    React.useEffect(() => {
+        if (externalDuration) {
+            setDuration(externalDuration);
+        }
+    }, [externalDuration]);
+    return {
+        play,
+        progress,
+        duration,
+        isLoaded,
+        isPlaying,
+        isLoading,
+        currentTime,
+        waveformLevels,
+        seekTo,
+        prefetch,
+        preload,
+        formatTime,
+        togglePlayback,
+    };
+};
+
+/**
+ * useAudioRecorderHandlers — recording/send/cancel handlers for AudioRecorder
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const useAudioRecorderHandlers = (options) => {
+    const { vibrate, recorder, messages, onUploadError, } = options;
+    const { audioURL, isPaused, isRecording, hasRecording, stopPlayback, stopRecording, sendRecording, togglePlayback, startRecording, cancelRecording, deleteRecording, toggleRecordingPause, } = recorder;
+    const shouldSendAfterStopRef = React.useRef(false);
+    const [isSending, setIsSending] = React.useState(false);
+    const startNewRecording = React.useCallback(async () => {
+        if (isRecording) {
+            return;
+        }
+        try {
+            await startRecording();
+            vibrate(50);
+        }
+        catch (error) {
+            onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(error);
+        }
+    }, [
+        vibrate,
+        isRecording,
+        onUploadError,
+        startRecording,
+    ]);
+    const handleRecordToggle = React.useCallback(() => {
+        if (!isRecording) {
+            if (audioURL) {
+                stopPlayback();
+                deleteRecording();
+            }
+            void startNewRecording();
+            return;
+        }
+        if (isPaused) {
+            stopPlayback();
+        }
+        toggleRecordingPause();
+    }, [
+        audioURL,
+        isPaused,
+        isRecording,
+        stopPlayback,
+        deleteRecording,
+        startNewRecording,
+        toggleRecordingPause,
+    ]);
+    const handleSend = React.useCallback(async () => {
+        if (isSending) {
+            return;
+        }
+        shouldSendAfterStopRef.current = false;
+        setIsSending(true);
+        try {
+            stopPlayback();
+            await sendRecording();
+        }
+        catch (error) {
+            const uploadError = error instanceof Error
+                ? error
+                : new Error(messages.errors.loadFileFailed);
+            onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(uploadError);
+        }
+        finally {
+            setIsSending(false);
+        }
+    }, [
+        isSending,
+        stopPlayback,
+        onUploadError,
+        sendRecording,
+        messages.errors.loadFileFailed,
+    ]);
+    const handleSendRequest = React.useCallback(() => {
+        if (isSending) {
+            return;
+        }
+        if (isRecording) {
+            shouldSendAfterStopRef.current = true;
+            stopRecording();
+            return;
+        }
+        void handleSend();
+    }, [
+        isSending,
+        handleSend,
+        isRecording,
+        stopRecording,
+    ]);
+    const handleCancel = React.useCallback(() => {
+        shouldSendAfterStopRef.current = false;
+        if (isRecording) {
+            cancelRecording();
+            return;
+        }
+        if (audioURL) {
+            stopPlayback();
+            deleteRecording();
+        }
+    }, [
+        audioURL,
+        isRecording,
+        stopPlayback,
+        deleteRecording,
+        cancelRecording,
+    ]);
+    const handlePlaybackToggle = React.useCallback(() => {
+        if (!hasRecording) {
+            return;
+        }
+        togglePlayback();
+    }, [hasRecording, togglePlayback]);
+    /** Auto-send after stop */
+    React.useEffect(() => {
+        if (!isRecording
+            && hasRecording
+            && shouldSendAfterStopRef.current) {
+            shouldSendAfterStopRef.current = false;
+            void handleSend();
+        }
+    }, [
+        handleSend,
+        isRecording,
+        hasRecording,
+    ]);
+    return {
+        isSending,
+        handleCancel,
+        handleSendRequest,
+        handleRecordToggle,
+        handlePlaybackToggle,
+    };
+};
+
+/**
+ * AudioRecorder styled components
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const Container = styled.div `
+    position: relative;
+    width: 100%;
+    padding: 16px;
+    transition: color 200ms ease, background-color 200ms ease;
+    color: var(--text_primary, #0a0a0a);
+`;
+
+/**
+ * IdleControl styles
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const IdleWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+`;
+const IdleButton = styled.button `
+    position: relative;
+    width: 72px;
+    height: 72px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 36px;
+    border: 0;
+    background: var(--background_content, #ffffff);
+    color: color-mix(in srgb, var(--accent, #3f8ae0) 80%, white 20%);
+    cursor: pointer;
+    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+
+    &:hover {
+        transform: translateY(-2px);
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+
+    &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--accent, #3f8ae0) 70%, transparent);
+        outline-offset: 4px;
+    }
+`;
+const IdleButtonOutline = styled.span `
+    position: absolute;
+    inset: 0;
+    border-radius: 32px;
+    border: 1px solid color-mix(in srgb, var(--accent, #3f8ae0) 28%, transparent);
+    pointer-events: none;
+`;
+const IdleButtonGlow = styled.span `
+    position: absolute;
+    inset: 8px;
+    border-radius: 28px;
+    background: radial-gradient(
+            120% 120% at 50% 50%,
+            color-mix(in srgb, var(--accent, #3f8ae0) 24%, transparent) 0%,
+            color-mix(in srgb, var(--accent, #3f8ae0) 10%, transparent) 65%,
+            transparent 100%
+    );
+    filter: blur(4px);
+    pointer-events: none;
+`;
+const IdleInstruction = styled.div `
+    font-size: 14px;
+    text-align: center;
+    color: color-mix(in srgb, var(--text_primary, #0a0a0a) 60%, transparent);
+`;
+
+const IdleControl = (props) => {
+    const { onClick, instruction, startAriaLabel, } = props;
+    return (jsxRuntime.jsxs(IdleWrapper, { children: [jsxRuntime.jsxs(IdleButton, { type: "button", onClick: onClick, "aria-label": startAriaLabel, children: [jsxRuntime.jsx(IdleButtonOutline, { "aria-hidden": true }), jsxRuntime.jsx(IdleButtonGlow, { "aria-hidden": true }), jsxRuntime.jsx(icons.Icon32Microphone, { height: 48, width: 48 })] }), jsxRuntime.jsx(IdleInstruction, { children: instruction })] }));
+};
+
+/**
+ * RecordingShell styles
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const Wrapper$1 = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    border-radius: 9999px;
+    background: var(--background_content, #ffffff);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text_primary, #0a0a0a) 6%, transparent);
+`;
+const CancelButton$1 = styled.button `
+    width: 36px;
+    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 18px;
+    background: transparent;
     border: 0;
     color: color-mix(in srgb, var(--text_primary, #0a0a0a) 54%, transparent);
     cursor: pointer;
@@ -986,7 +1451,7 @@ const WaveformBars = (props) => {
 const RecordingShell = (props) => {
     const { isPaused, isPlaying, isSending, isRecording, audioLevels, hasRecording, playbackTime, previewLevels, recordingTime, stopAriaLabel, playAriaLabel, sendAriaLabel, startAriaLabel, cancelAriaLabel, playbackDuration, pausePlaybackAriaLabel, pauseRecordingAriaLabel, resumeRecordingAriaLabel, onSend, onCancel, formatTime, onRecordToggle, onTogglePlayback, } = props;
     const waveformValues = isRecording ? audioLevels : (hasRecording ? previewLevels : audioLevels);
-    const displayTime = react.useMemo(() => {
+    const displayTime = React.useMemo(() => {
         if (isRecording) {
             return formatTime(recordingTime);
         }
@@ -1024,16 +1489,10 @@ const RecordingShell = (props) => {
 };
 
 /**
- * Upload types
+ * AudioRecorder messages — i18n-ready message definitions and merge utility
  *
  * @author: exode <hello@exode.ru>
  */
-const StorageSpaceEnum = {
-    User: 'user',
-    Shared: 'shared',
-    System: 'system',
-};
-
 const DEFAULT_MESSAGES = {
     buttons: {
         cancel: 'Cancel',
@@ -1073,35 +1532,35 @@ const mergeMessages = (custom) => {
         },
     };
 };
-const Container = styled.div `
-    position: relative;
-    width: 100%;
-    padding: 16px;
-    transition: color 200ms ease, background-color 200ms ease;
-    color: var(--text_primary, #0a0a0a);
-`;
+
+/**
+ * Upload types
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const StorageSpaceEnum = {
+    User: 'user',
+    Shared: 'shared',
+    System: 'system',
+};
+
 const AudioRecorder = (props) => {
     const { space, fileName, uploadId, mimeType, className, uploader, onUploaded, onUploadError, onRecordingStop, onRecordingError, onRecordingStart, onRecordingDelete, onPermissionDenied, autoResetAfterUpload, messages: customMessages, } = props;
-    const messages = react.useMemo(() => mergeMessages(customMessages), [customMessages]);
-    const [isSending, setIsSending] = react.useState(false);
-    const shouldSendAfterStopRef = react.useRef(false);
-    const [resolvedUploadId] = react.useState(() => uploadId !== null && uploadId !== void 0 ? uploadId : (typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    const messages = React.useMemo(() => mergeMessages(customMessages), [customMessages]);
+    const [resolvedUploadId] = React.useState(() => uploadId !== null && uploadId !== void 0 ? uploadId : (typeof crypto !== 'undefined' && 'randomUUID' in crypto
         ? crypto.randomUUID()
         : `upload-${Date.now()}`));
     const resolvedSpace = space !== null && space !== void 0 ? space : StorageSpaceEnum.User;
-    const handleUploaded = react.useCallback(async (file) => {
-        if (onUploaded) {
-            await onUploaded(file);
-        }
-        else {
-            console.info('[audio-recorder] Voice message uploaded', file);
-        }
-    }, [onUploaded]);
-    const handleRecorderError = react.useCallback((error) => {
+    const handleRecorderError = React.useCallback((error) => {
         onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
         onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(error);
     }, [onRecordingError, onUploadError]);
-    const { audioURL, isPaused, isPlaying, formatTime, audioLevels, isRecording, playbackTime, stopPlayback, previewLevels, recordingTime, stopRecording, sendRecording, togglePlayback, startRecording, cancelRecording, deleteRecording, playbackDuration, toggleRecordingPause, hasRecording, } = useVoiceRecorder({
+    const vibrate = React.useCallback((pattern) => {
+        if (typeof navigator !== 'undefined' && 'vibrate' in navigator) {
+            navigator.vibrate(pattern);
+        }
+    }, []);
+    const recorder = useVoiceRecorder({
         fileName,
         mimeType,
         onRecordingStop,
@@ -1113,58 +1572,141 @@ const AudioRecorder = (props) => {
         uploader,
         uploadId: resolvedUploadId,
         onRecordingError: handleRecorderError,
-        onUploaded: handleUploaded,
+        onUploaded: onUploaded !== null && onUploaded !== void 0 ? onUploaded : (() => { }),
     });
-    const vibrate = react.useCallback((pattern) => {
-        if (typeof navigator !== 'undefined' && 'vibrate' in navigator) {
-            navigator.vibrate(pattern);
+    const { isSending, handleCancel, handleSendRequest, handleRecordToggle, handlePlaybackToggle, } = useAudioRecorderHandlers({
+        vibrate,
+        recorder,
+        messages,
+        onUploadError,
+    });
+    const { isPaused, isPlaying, formatTime, audioLevels, isRecording, playbackTime, hasRecording, previewLevels, recordingTime, playbackDuration, } = recorder;
+    const showRecorderBar = isRecording || hasRecording;
+    return (jsxRuntime.jsx(Container, { className: className, children: showRecorderBar ? (jsxRuntime.jsx(RecordingShell, { isPaused: isPaused, isSending: isSending, isPlaying: isPlaying, formatTime: formatTime, onCancel: handleCancel, isRecording: isRecording, audioLevels: audioLevels, onSend: handleSendRequest, playbackTime: playbackTime, hasRecording: hasRecording, previewLevels: previewLevels, recordingTime: recordingTime, playbackDuration: playbackDuration, onRecordToggle: handleRecordToggle, sendAriaLabel: messages.buttons.send, onTogglePlayback: handlePlaybackToggle, cancelAriaLabel: messages.buttons.cancel, playAriaLabel: messages.aria.playRecording, stopAriaLabel: messages.aria.stopRecording, startAriaLabel: messages.aria.startRecording, pauseRecordingAriaLabel: messages.aria.pauseRecording, resumeRecordingAriaLabel: messages.aria.resumeRecording, pausePlaybackAriaLabel: messages.aria.pausePlayback })) : (jsxRuntime.jsx(IdleControl, { onClick: handleRecordToggle, startAriaLabel: messages.aria.startRecording, instruction: messages.instruction })) }));
+};
+
+/**
+ * useVoiceRecorderInput — orchestrates recording, sending and timeline for VoiceRecorderInput
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const useVoiceRecorderInput = (options) => {
+    const { onSend, onError, onCancel, uploader, onUploaded, onPermissionDenied, autoStart = true, space = StorageSpaceEnum.User, mimeType = 'audio/webm', fileName = 'voice-message.webm', } = options;
+    const [isSending, setIsSending] = React.useState(false);
+    const [timelineLevels, setTimelineLevels] = React.useState([]);
+    const audioBlobRef = React.useRef(null);
+    const audioLevelsRef = React.useRef([]);
+    const lastDurationRef = React.useRef(0);
+    const shouldSendAfterStopRef = React.useRef(false);
+    const doSendRef = React.useRef();
+    const autoStartedRef = React.useRef(false);
+    const [uploadId] = React.useState(() => typeof crypto !== 'undefined' && 'randomUUID' in crypto
+        ? crypto.randomUUID()
+        : `upload-${Date.now()}`);
+    const handleRecordingStop = React.useCallback((blob) => {
+        var _a;
+        audioBlobRef.current = blob;
+        if (shouldSendAfterStopRef.current) {
+            shouldSendAfterStopRef.current = false;
+            void ((_a = doSendRef.current) === null || _a === void 0 ? void 0 : _a.call(doSendRef));
         }
     }, []);
-    const startNewRecording = react.useCallback(async () => {
-        if (isRecording) {
-            return;
-        }
-        try {
-            await startRecording();
-            vibrate(50);
-        }
-        catch (error) {
-            handleRecorderError(error);
+    const recorder = useVoiceRecorder({
+        space,
+        fileName,
+        mimeType,
+        uploadId,
+        onPermissionDenied,
+        onRecordingStop: handleRecordingStop,
+        onRecordingError: onError,
+        uploader: onSend ? undefined : uploader,
+        onUploaded: onSend ? (() => { }) : (onUploaded !== null && onUploaded !== void 0 ? onUploaded : (() => { })),
+    });
+    const { audioLevels, isPaused, isRecording, recordingTime, hasRecording, stopPlayback, sendRecording, stopRecording, startRecording, cancelRecording, deleteRecording, toggleRecordingPause, } = recorder;
+    audioLevelsRef.current = audioLevels;
+    React.useEffect(() => {
+        if (recordingTime > 0) {
+            lastDurationRef.current = recordingTime;
         }
-    }, [handleRecorderError, isRecording, startRecording, vibrate]);
-    const handleRecordToggle = react.useCallback(() => {
-        if (!isRecording) {
-            if (audioURL) {
-                stopPlayback();
-                deleteRecording();
-            }
-            void startNewRecording();
+    }, [recordingTime]);
+    const isPreview = isPaused || (!isRecording && hasRecording);
+    const isActiveRecording = isRecording && !isPaused;
+    React.useEffect(() => {
+        if (!isActiveRecording) {
             return;
         }
-        if (isPaused) {
-            stopPlayback();
+        const interval = setInterval(() => {
+            const levels = audioLevelsRef.current;
+            const peak = levels.length > 0 ? Math.max(...levels) : 0;
+            setTimelineLevels((prev) => [...prev, peak]);
+        }, TIMELINE_SAMPLE_INTERVAL);
+        return () => clearInterval(interval);
+    }, [isActiveRecording]);
+    React.useEffect(() => {
+        if (isRecording && !isPaused) {
+            setTimelineLevels([]);
         }
+    }, [isRecording]);
+    const handleResume = React.useCallback(() => {
+        stopPlayback();
         toggleRecordingPause();
-    }, [audioURL, deleteRecording, isPaused, isRecording, startNewRecording, stopPlayback, toggleRecordingPause]);
-    const handleSend = react.useCallback(async () => {
-        if (isSending) {
-            return;
-        }
+    }, [
+        stopPlayback,
+        toggleRecordingPause,
+    ]);
+    const handlePause = toggleRecordingPause;
+    const handleCancel = React.useCallback(() => {
         shouldSendAfterStopRef.current = false;
+        if (isRecording) {
+            cancelRecording();
+        }
+        else if (hasRecording) {
+            stopPlayback();
+            deleteRecording();
+        }
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }, [
+        onCancel,
+        isRecording,
+        hasRecording,
+        stopPlayback,
+        cancelRecording,
+        deleteRecording,
+    ]);
+    const doSend = React.useCallback(async () => {
         setIsSending(true);
         try {
             stopPlayback();
-            await sendRecording();
+            if (onSend) {
+                if (!audioBlobRef.current) {
+                    return;
+                }
+                const file = new File([audioBlobRef.current], fileName, { type: audioBlobRef.current.type || mimeType });
+                await onSend(file, recordingTime || lastDurationRef.current || 0);
+                deleteRecording();
+            }
+            else {
+                await sendRecording();
+            }
         }
         catch (error) {
-            const uploadError = error instanceof Error ? error : new Error(messages.errors.loadFileFailed);
-            onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(uploadError);
+            onError === null || onError === void 0 ? void 0 : onError(error);
         }
         finally {
             setIsSending(false);
         }
-    }, [isSending, messages.errors.loadFileFailed, onUploadError, sendRecording, stopPlayback]);
-    const handleSendRequest = react.useCallback(() => {
+    }, [
+        onSend,
+        onError,
+        fileName,
+        mimeType,
+        recordingTime,
+        sendRecording,
+        stopPlayback,
+        deleteRecording,
+    ]);
+    doSendRef.current = doSend;
+    const handleSendRequest = React.useCallback(async () => {
         if (isSending) {
             return;
         }
@@ -1173,33 +1715,103 @@ const AudioRecorder = (props) => {
             stopRecording();
             return;
         }
-        void handleSend();
-    }, [handleSend, isRecording, isSending, stopRecording]);
-    const handleCancel = react.useCallback(() => {
-        shouldSendAfterStopRef.current = false;
-        if (isRecording) {
-            cancelRecording();
-            return;
-        }
-        if (audioURL) {
-            stopPlayback();
-            deleteRecording();
-        }
-    }, [audioURL, cancelRecording, deleteRecording, isRecording, stopPlayback]);
-    const handlePlaybackToggle = react.useCallback(() => {
-        if (!hasRecording) {
-            return;
-        }
-        togglePlayback();
-    }, [hasRecording, togglePlayback]);
-    const showRecorderBar = isRecording || hasRecording;
-    react.useEffect(() => {
-        if (!isRecording && hasRecording && shouldSendAfterStopRef.current) {
-            shouldSendAfterStopRef.current = false;
-            void handleSend();
+        await doSend();
+    }, [
+        doSend,
+        isRecording,
+        isSending,
+        stopRecording,
+    ]);
+    React.useEffect(() => {
+        if (autoStart && !autoStartedRef.current) {
+            autoStartedRef.current = true;
+            void startRecording().catch((error) => {
+                onPermissionDenied === null || onPermissionDenied === void 0 ? void 0 : onPermissionDenied(error);
+            });
         }
-    }, [handleSend, hasRecording, isRecording]);
-    return (jsxRuntime.jsx(Container, { className: className, children: showRecorderBar ? (jsxRuntime.jsx(RecordingShell, { isPaused: isPaused, isSending: isSending, isPlaying: isPlaying, formatTime: formatTime, onCancel: handleCancel, isRecording: isRecording, audioLevels: audioLevels, onSend: handleSendRequest, playbackTime: playbackTime, hasRecording: hasRecording, previewLevels: previewLevels, recordingTime: recordingTime, playbackDuration: playbackDuration, onRecordToggle: handleRecordToggle, sendAriaLabel: messages.buttons.send, onTogglePlayback: handlePlaybackToggle, cancelAriaLabel: messages.buttons.cancel, playAriaLabel: messages.aria.playRecording, stopAriaLabel: messages.aria.stopRecording, startAriaLabel: messages.aria.startRecording, pauseRecordingAriaLabel: messages.aria.pauseRecording, resumeRecordingAriaLabel: messages.aria.resumeRecording, pausePlaybackAriaLabel: messages.aria.pausePlayback })) : (jsxRuntime.jsx(IdleControl, { onClick: handleRecordToggle, startAriaLabel: messages.aria.startRecording, instruction: messages.instruction })) }));
+    }, [autoStart]);
+    return {
+        recorder,
+        isSending,
+        isPreview,
+        timelineLevels,
+        lastDurationRef,
+        handleResume,
+        handlePause,
+        handleCancel,
+        handleSendRequest,
+    };
+};
+
+const PreviewBars = (props) => {
+    var _a, _b;
+    const { isPlaying, playbackTime, lastDuration, previewLevels, recordingTime, timelineLevels, getVisibleBarsCount, } = props;
+    const maxBars = getVisibleBarsCount();
+    const sourceLevels = timelineLevels.length > 0
+        ? timelineLevels
+        : previewLevels;
+    if (!sourceLevels.length) {
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: maxBars }, (_, i) => (jsxRuntime.jsx("div", { style: {
+                    width: `${TIMELINE_BAR_WIDTH}px`,
+                    height: `${TIMELINE_BAR_MIN_HEIGHT}px`,
+                    borderRadius: '9999px',
+                    flexShrink: 0,
+                    background: 'color-mix(in srgb, var(--text_primary, #0a0a0a) 15%, transparent)',
+                } }, i))) }));
+    }
+    /** Interpolate source levels to fill container */
+    const bars = [];
+    for (let i = 0; i < maxBars; i++) {
+        const srcIndex = (i / maxBars) * sourceLevels.length;
+        const low = Math.floor(srcIndex);
+        const high = Math.min(low + 1, sourceLevels.length - 1);
+        const frac = srcIndex - low;
+        bars.push(((_a = sourceLevels[low]) !== null && _a !== void 0 ? _a : 0) * (1 - frac) + ((_b = sourceLevels[high]) !== null && _b !== void 0 ? _b : 0) * frac);
+    }
+    const totalDuration = recordingTime || lastDuration || 1;
+    const progress = isPlaying ? Math.min(1, playbackTime / totalDuration) : 0;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: bars.map((level, i) => {
+            const normalized = Math.min(100, level);
+            const height = TIMELINE_BAR_MIN_HEIGHT + (normalized / 100) * (TIMELINE_BAR_MAX_HEIGHT - TIMELINE_BAR_MIN_HEIGHT);
+            const isPlayed = progress > 0 && (i / maxBars) <= progress;
+            return (jsxRuntime.jsx("div", { style: {
+                    flexShrink: 0,
+                    height: `${height}px`,
+                    borderRadius: '9999px',
+                    width: `${TIMELINE_BAR_WIDTH}px`,
+                    background: !isPlaying
+                        ? 'color-mix(in srgb, var(--text_primary, #0a0a0a) 55%, transparent)'
+                        : isPlayed
+                            ? 'color-mix(in srgb, var(--text_primary, #0a0a0a) 80%, transparent)'
+                            : 'color-mix(in srgb, var(--text_primary, #0a0a0a) 22%, transparent)',
+                    transition: 'background 80ms ease',
+                } }, i));
+        }) }));
+};
+
+const TimelineBars = (props) => {
+    const { timelineLevels, getVisibleBarsCount } = props;
+    const maxBars = getVisibleBarsCount();
+    const visible = timelineLevels.slice(-maxBars);
+    const padded = [
+        ...visible,
+        ...Array.from({ length: Math.max(0, maxBars - visible.length) }, () => 0),
+    ];
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: padded.map((level, i) => {
+            const normalized = Math.min(100, level);
+            const height = TIMELINE_BAR_MIN_HEIGHT + (normalized / 100) * (TIMELINE_BAR_MAX_HEIGHT - TIMELINE_BAR_MIN_HEIGHT);
+            const hasValue = i < visible.length;
+            return (jsxRuntime.jsx("div", { style: {
+                    width: `${TIMELINE_BAR_WIDTH}px`,
+                    height: `${height}px`,
+                    borderRadius: '9999px',
+                    flexShrink: 0,
+                    transition: 'height 120ms ease',
+                    background: hasValue
+                        ? 'color-mix(in srgb, var(--text_primary, #0a0a0a) 55%, transparent)'
+                        : 'color-mix(in srgb, var(--text_primary, #0a0a0a) 18%, transparent)',
+                } }, i));
+        }) }));
 };
 
 /**
@@ -1327,477 +1939,111 @@ const MicIndicator = styled.button `
     align-items: center;
     justify-content: center;
     border-radius: 13px;
-    border: 0;
-    flex-shrink: 0;
-    cursor: pointer;
-    background: color-mix(in srgb, var(--exode_red, #ed1c24) 14%, transparent);
-    color: var(--exode_red, #ed1c24);
-    transition: background-color 140ms ease, transform 120ms ease;
-
-    &:hover {
-        background: color-mix(in srgb, var(--exode_red, #ed1c24) 22%, transparent);
-    }
-
-    &:active {
-        transform: scale(0.94);
-    }
-`;
-const PlayPauseButton = styled.button `
-    width: 26px;
-    height: 26px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 13px;
-    border: 0;
-    flex-shrink: 0;
-    cursor: pointer;
-    background: var(--background_content, #ffffff);
-    color: var(--text_primary, #0a0a0a);
-    transition: transform 120ms ease;
-
-    &:hover {
-        transform: scale(1.06);
-    }
-
-    &:active {
-        transform: scale(0.94);
-    }
-`;
-const SpinnerIcon = styled.span `
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    border-radius: 50%;
-    border: 2px solid color-mix(in srgb, var(--accent, #3f8ae0) 25%, transparent);
-    border-top-color: var(--accent, #3f8ae0);
-    border-right-color: var(--accent, #3f8ae0);
-    animation: voiceRecorderSpin 0.75s linear infinite;
-
-    @keyframes voiceRecorderSpin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-`;
-
-const TIMELINE_SAMPLE_INTERVAL = 150;
-const TIMELINE_BAR_WIDTH = 3;
-const TIMELINE_BAR_GAP = 2;
-const TIMELINE_BAR_MIN_HEIGHT = 3;
-const TIMELINE_BAR_MAX_HEIGHT = 24;
-const VoiceRecorderInput = (props) => {
-    const { onSend, onError, onCancel, uploader, onUploaded, className, onPermissionDenied, space = StorageSpaceEnum.User, autoStart = true, mimeType = 'audio/webm', fileName = 'voice-message.webm', } = props;
-    const [isSending, setIsSending] = react.useState(false);
-    const [timelineLevels, setTimelineLevels] = react.useState([]);
-    const audioBlobRef = react.useRef(null);
-    const audioLevelsRef = react.useRef([]);
-    const lastDurationRef = react.useRef(0);
-    const shouldSendAfterStopRef = react.useRef(false);
-    const doSendRef = react.useRef();
-    const autoStartedRef = react.useRef(false);
-    const waveformRef = react.useRef(null);
-    const [uploadId] = react.useState(() => typeof crypto !== 'undefined' && 'randomUUID' in crypto
-        ? crypto.randomUUID()
-        : `upload-${Date.now()}`);
-    const handleUploaded = react.useCallback(async (file) => {
-        await (onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded(file));
-    }, [onUploaded]);
-    const handleRecordingStop = react.useCallback((blob) => {
-        var _a;
-        audioBlobRef.current = blob;
-        if (shouldSendAfterStopRef.current) {
-            shouldSendAfterStopRef.current = false;
-            void ((_a = doSendRef.current) === null || _a === void 0 ? void 0 : _a.call(doSendRef));
-        }
-    }, []);
-    const { audioLevels, isPaused, isPlaying, isRecording, recordingTime, hasRecording, previewLevels, playbackTime, formatTime, stopPlayback, sendRecording, stopRecording, startRecording, togglePlayback, cancelRecording, deleteRecording, toggleRecordingPause, } = useVoiceRecorder({
-        space,
-        fileName,
-        mimeType,
-        uploadId,
-        onPermissionDenied,
-        onRecordingStop: handleRecordingStop,
-        onRecordingError: onError,
-        uploader: onSend ? undefined : uploader,
-        onUploaded: onSend ? (() => { }) : handleUploaded,
-    });
-    /** Keep refs in sync */
-    audioLevelsRef.current = audioLevels;
-    /** Preserve duration before resetSession zeroes it */
-    react.useEffect(() => {
-        if (recordingTime > 0) {
-            lastDurationRef.current = recordingTime;
-        }
-    }, [recordingTime]);
-    /** Preview mode: paused or stopped with recording available */
-    const isPreview = isPaused || (!isRecording && hasRecording);
-    /** Actively recording (not paused) */
-    const isActiveRecording = isRecording && !isPaused;
-    /** Sample audioLevels periodically into timeline (only while actively recording) */
-    react.useEffect(() => {
-        if (!isActiveRecording) {
-            return;
-        }
-        const interval = setInterval(() => {
-            const levels = audioLevelsRef.current;
-            const peak = levels.length > 0 ? Math.max(...levels) : 0;
-            setTimelineLevels((prev) => [...prev, peak]);
-        }, TIMELINE_SAMPLE_INTERVAL);
-        return () => clearInterval(interval);
-    }, [isActiveRecording]);
-    /** Reset timeline only on fresh recording start */
-    react.useEffect(() => {
-        if (isRecording && !isPaused) {
-            setTimelineLevels([]);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isRecording]);
-    /** Calculate visible bars count based on container width */
-    const getVisibleBarsCount = react.useCallback(() => {
-        const el = waveformRef.current;
-        if (!el) {
-            return 60;
-        }
-        return Math.floor(el.clientWidth / (TIMELINE_BAR_WIDTH + TIMELINE_BAR_GAP));
-    }, []);
-    /** Resume recording from paused state */
-    const handleResume = react.useCallback(() => {
-        stopPlayback();
-        toggleRecordingPause();
-    }, [stopPlayback, toggleRecordingPause]);
-    /** Pause recording (show preview) */
-    const handlePause = react.useCallback(() => {
-        toggleRecordingPause();
-    }, [toggleRecordingPause]);
-    const handleCancel = react.useCallback(() => {
-        shouldSendAfterStopRef.current = false;
-        if (isRecording) {
-            cancelRecording();
-        }
-        else if (hasRecording) {
-            stopPlayback();
-            deleteRecording();
-        }
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    }, [cancelRecording, deleteRecording, hasRecording, isRecording, onCancel, stopPlayback]);
-    const doSend = react.useCallback(async () => {
-        setIsSending(true);
-        try {
-            stopPlayback();
-            if (onSend) {
-                if (!audioBlobRef.current) {
-                    return;
-                }
-                const file = new File([audioBlobRef.current], fileName, {
-                    type: audioBlobRef.current.type || mimeType,
-                });
-                const duration = recordingTime || lastDurationRef.current || 0;
-                await onSend(file, duration);
-                deleteRecording();
-            }
-            else {
-                await sendRecording();
-            }
-        }
-        catch (error) {
-            onError === null || onError === void 0 ? void 0 : onError(error);
-        }
-        finally {
-            setIsSending(false);
-        }
-    }, [deleteRecording, fileName, mimeType, onError, onSend, recordingTime, sendRecording, stopPlayback]);
-    /** Keep doSendRef in sync so handleRecordingStop always uses latest */
-    doSendRef.current = doSend;
-    const handleSendRequest = react.useCallback(async () => {
-        if (isSending) {
-            return;
-        }
-        /** Stop recording first (if active or paused), then send via handleRecordingStop */
-        if (isRecording) {
-            shouldSendAfterStopRef.current = true;
-            stopRecording();
-            return;
-        }
-        await doSend();
-    }, [doSend, isRecording, isSending, stopRecording]);
-    react.useEffect(() => {
-        if (autoStart && !autoStartedRef.current) {
-            autoStartedRef.current = true;
-            void startRecording().catch((error) => {
-                onPermissionDenied === null || onPermissionDenied === void 0 ? void 0 : onPermissionDenied(error);
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [autoStart]);
-    /** Render recording timeline bars — last N bars that fit the container */
-    const renderTimelineBars = () => {
-        const maxBars = getVisibleBarsCount();
-        const visible = timelineLevels.slice(-maxBars);
-        const padded = [
-            ...visible,
-            ...Array.from({ length: Math.max(0, maxBars - visible.length) }, () => 0),
-        ];
-        return padded.map((level, i) => {
-            const normalized = Math.min(100, level);
-            const height = TIMELINE_BAR_MIN_HEIGHT + (normalized / 100) * (TIMELINE_BAR_MAX_HEIGHT - TIMELINE_BAR_MIN_HEIGHT);
-            const hasValue = i < visible.length;
-            return (jsxRuntime.jsx("div", { style: {
-                    width: `${TIMELINE_BAR_WIDTH}px`,
-                    height: `${height}px`,
-                    borderRadius: '9999px',
-                    flexShrink: 0,
-                    background: hasValue
-                        ? 'color-mix(in srgb, var(--text_primary, #0a0a0a) 55%, transparent)'
-                        : 'color-mix(in srgb, var(--text_primary, #0a0a0a) 18%, transparent)',
-                    transition: 'height 120ms ease',
-                } }, i));
-        });
-    };
-    /** Render preview waveform bars — from previewLevels or fallback to timelineLevels */
-    const renderPreviewBars = () => {
-        var _a, _b;
-        const maxBars = getVisibleBarsCount();
-        const sourceLevels = timelineLevels.length > 0 ? timelineLevels : previewLevels;
-        if (!sourceLevels.length) {
-            return Array.from({ length: maxBars }, (_, i) => (jsxRuntime.jsx("div", { style: {
-                    width: `${TIMELINE_BAR_WIDTH}px`,
-                    height: `${TIMELINE_BAR_MIN_HEIGHT}px`,
-                    borderRadius: '9999px',
-                    flexShrink: 0,
-                    background: 'color-mix(in srgb, var(--text_primary, #0a0a0a) 15%, transparent)',
-                } }, i)));
-        }
-        /** Interpolate source levels to fill container */
-        const bars = [];
-        for (let i = 0; i < maxBars; i++) {
-            const srcIndex = (i / maxBars) * sourceLevels.length;
-            const low = Math.floor(srcIndex);
-            const high = Math.min(low + 1, sourceLevels.length - 1);
-            const frac = srcIndex - low;
-            bars.push(((_a = sourceLevels[low]) !== null && _a !== void 0 ? _a : 0) * (1 - frac) + ((_b = sourceLevels[high]) !== null && _b !== void 0 ? _b : 0) * frac);
+    border: 0;
+    flex-shrink: 0;
+    cursor: pointer;
+    background: color-mix(in srgb, var(--exode_red, #ed1c24) 14%, transparent);
+    color: var(--exode_red, #ed1c24);
+    transition: background-color 140ms ease, transform 120ms ease;
+
+    &:hover {
+        background: color-mix(in srgb, var(--exode_red, #ed1c24) 22%, transparent);
+    }
+
+    &:active {
+        transform: scale(0.94);
+    }
+`;
+const PlayPauseButton = styled.button `
+    width: 26px;
+    height: 26px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 13px;
+    border: 0;
+    flex-shrink: 0;
+    cursor: pointer;
+    background: var(--background_content, #ffffff);
+    color: var(--text_primary, #0a0a0a);
+    transition: transform 120ms ease;
+
+    &:hover {
+        transform: scale(1.06);
+    }
+
+    &:active {
+        transform: scale(0.94);
+    }
+`;
+const SpinnerIcon = styled.span `
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    border-radius: 50%;
+    border: 2px solid color-mix(in srgb, var(--accent, #3f8ae0) 25%, transparent);
+    border-top-color: var(--accent, #3f8ae0);
+    border-right-color: var(--accent, #3f8ae0);
+    animation: voiceRecorderSpin 0.75s linear infinite;
+
+    @keyframes voiceRecorderSpin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+`;
+
+const VoiceRecorderInput = (props) => {
+    const { className, ...inputOptions } = props;
+    const waveformRef = React.useRef(null);
+    const { recorder, isSending, isPreview, timelineLevels, lastDurationRef, handleResume, handlePause, handleCancel, handleSendRequest, } = useVoiceRecorderInput(inputOptions);
+    const { isPlaying, isRecording, recordingTime, hasRecording, previewLevels, playbackTime, formatTime, togglePlayback, } = recorder;
+    const getVisibleBarsCount = React.useCallback(() => {
+        const el = waveformRef.current;
+        if (!el) {
+            return 60;
         }
-        const totalDuration = recordingTime || lastDurationRef.current || 1;
-        const progress = isPlaying ? Math.min(1, playbackTime / totalDuration) : 0;
-        return bars.map((level, i) => {
-            const normalized = Math.min(100, level);
-            const height = TIMELINE_BAR_MIN_HEIGHT + (normalized / 100) * (TIMELINE_BAR_MAX_HEIGHT - TIMELINE_BAR_MIN_HEIGHT);
-            const isPlayed = progress > 0 && (i / maxBars) <= progress;
-            return (jsxRuntime.jsx("div", { style: {
-                    width: `${TIMELINE_BAR_WIDTH}px`,
-                    height: `${height}px`,
-                    borderRadius: '9999px',
-                    flexShrink: 0,
-                    background: !isPlaying
-                        ? 'color-mix(in srgb, var(--text_primary, #0a0a0a) 55%, transparent)'
-                        : isPlayed
-                            ? 'color-mix(in srgb, var(--text_primary, #0a0a0a) 80%, transparent)'
-                            : 'color-mix(in srgb, var(--text_primary, #0a0a0a) 22%, transparent)',
-                    transition: 'background 80ms ease',
-                } }, i));
-        });
-    };
-    /** Display time based on current mode */
+        return Math.floor(el.clientWidth / (TIMELINE_BAR_WIDTH + TIMELINE_BAR_GAP));
+    }, []);
     const displayTime = (isPreview && isPlaying)
         ? formatTime(playbackTime)
         : formatTime(recordingTime || lastDurationRef.current);
     return (jsxRuntime.jsxs(Wrapper, { className: className, children: [jsxRuntime.jsx(CancelButton, { type: "button", onClick: handleCancel, "aria-label": "Cancel", children: jsxRuntime.jsx(icons.Icon28CancelOutline, { width: 20, height: 20 }) }), jsxRuntime.jsxs(RecordTrack, { children: [jsxRuntime.jsx(ButtonSlot, { children: isPreview ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MicIndicator, { type: "button", onClick: handleResume, "aria-label": "Resume recording", children: jsxRuntime.jsx(icons.Icon20VoiceOutline, { width: 14, height: 14 }) }), jsxRuntime.jsx(PlayPauseButton, { type: "button", onClick: togglePlayback, "aria-label": isPlaying ? 'Pause' : 'Play', children: isPlaying
                                         ? jsxRuntime.jsx(icons.Icon16Pause, { width: 14, height: 14 })
-                                        : jsxRuntime.jsx(icons.Icon16Play, { width: 14, height: 14 }) })] })) : (jsxRuntime.jsx(StopButton, { type: "button", onClick: handlePause, "aria-label": "Pause recording", children: jsxRuntime.jsx(icons.Icon16Square, { width: 12, height: 12 }) })) }), jsxRuntime.jsx(WaveformArea, { ref: waveformRef, children: isPreview ? renderPreviewBars() : renderTimelineBars() }), jsxRuntime.jsx(Timer, { children: displayTime })] }), jsxRuntime.jsx(SendButton, { type: "button", onClick: handleSendRequest, disabled: isSending || (!hasRecording && !isRecording), "aria-label": "Send", children: isSending ? (jsxRuntime.jsx(SpinnerIcon, {})) : (jsxRuntime.jsx(icons.Icon28SendOutline, {})) })] }));
+                                        : jsxRuntime.jsx(icons.Icon16Play, { width: 14, height: 14 }) })] })) : (jsxRuntime.jsx(StopButton, { type: "button", onClick: handlePause, "aria-label": "Pause recording", children: jsxRuntime.jsx(icons.Icon16Square, { width: 12, height: 12 }) })) }), jsxRuntime.jsx(WaveformArea, { ref: waveformRef, children: isPreview ? (jsxRuntime.jsx(PreviewBars, { timelineLevels: timelineLevels, previewLevels: previewLevels, isPlaying: isPlaying, playbackTime: playbackTime, recordingTime: recordingTime, lastDuration: lastDurationRef.current, getVisibleBarsCount: getVisibleBarsCount })) : (jsxRuntime.jsx(TimelineBars, { timelineLevels: timelineLevels, getVisibleBarsCount: getVisibleBarsCount })) }), jsxRuntime.jsx(Timer, { children: displayTime })] }), jsxRuntime.jsx(SendButton, { type: "button", onClick: handleSendRequest, disabled: isSending || (!hasRecording && !isRecording), "aria-label": "Send", children: isSending ? (jsxRuntime.jsx(SpinnerIcon, {})) : (jsxRuntime.jsx(icons.Icon28SendOutline, {})) })] }));
 };
 
 /**
- * Global audio playback manager — ensures only one audio plays at a time
+ * VoicePlaybackChain
  *
- * @author: exode <hello@exode.ru>
- */
-const listeners = new Set();
-const audioPlaybackManager = {
-    /** Register a stop callback for a player instance */
-    subscribe: (callback) => {
-        listeners.add(callback);
-        return () => {
-            listeners.delete(callback);
-        };
-    },
-    /** Stop all other players except the caller */
-    stopOthers: (except) => {
-        listeners.forEach((cb) => {
-            if (cb !== except) {
-                cb();
-            }
-        });
-    },
-};
-
-/**
- * useVoiceMessagePlayer
+ * @description Sequential voice message playback chain (like Telegram).
+ * Registers voice players by media ID and plays the next one when current ends.
  *
  * @author: exode <hello@exode.ru>
  */
-const useVoiceMessagePlayer = (options) => {
-    const { src, duration: externalDuration, waveformData } = options;
-    const [isPlaying, setIsPlaying] = react.useState(false);
-    const [isLoading, setIsLoading] = react.useState(false);
-    const [isLoaded, setIsLoaded] = react.useState(false);
-    const [currentTime, setCurrentTime] = react.useState(0);
-    const [duration, setDuration] = react.useState(externalDuration || 0);
-    const [waveformLevels, setWaveformLevels] = react.useState(waveformData || createInitialLevels);
-    const audioRef = react.useRef(null);
-    const blobRef = react.useRef(null);
-    const objectUrlRef = react.useRef(null);
-    const abortControllerRef = react.useRef(null);
-    const progress = duration > 0 ? currentTime / duration : 0;
-    /** Stop this player (called by manager when another player starts) */
-    const stopThis = react.useCallback(() => {
-        const audio = audioRef.current;
-        if (audio && !audio.paused) {
-            audio.pause();
-        }
-        setIsPlaying(false);
-    }, []);
-    /** Subscribe to global manager on mount */
-    react.useEffect(() => {
-        return audioPlaybackManager.subscribe(stopThis);
-    }, [stopThis]);
-    const ensureAudioLoaded = react.useCallback(async () => {
-        var _a;
-        if (audioRef.current) {
-            return;
-        }
-        if (!src) {
-            return;
-        }
-        (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
-        const controller = new AbortController();
-        abortControllerRef.current = controller;
-        setIsLoading(true);
-        try {
-            const response = await fetch(src, { signal: controller.signal });
-            const blob = await response.blob();
-            if (controller.signal.aborted) {
-                return;
-            }
-            blobRef.current = blob;
-            if (!waveformData) {
-                const levels = await decodeAudioLevels(blob);
-                if (controller.signal.aborted) {
-                    return;
-                }
-                setWaveformLevels(levels);
-            }
-            if (objectUrlRef.current) {
-                URL.revokeObjectURL(objectUrlRef.current);
-            }
-            const url = URL.createObjectURL(blob);
-            objectUrlRef.current = url;
-            const { audio } = createAudioPlayback(url, {
-                onLoadedMetadata: (dur) => {
-                    if (!externalDuration && dur && isFinite(dur) && dur > 0.5) {
-                        setDuration(dur);
-                    }
-                },
-                onTimeUpdate: (time) => setCurrentTime(time),
-                onEnded: () => {
-                    setIsPlaying(false);
-                    setCurrentTime(0);
-                },
-            });
-            audioRef.current = audio;
-            setIsLoaded(true);
-        }
-        catch (error) {
-            if (error instanceof DOMException && error.name === 'AbortError') {
-                return;
-            }
-            console.warn('[voice-player] Failed to load audio', error);
-        }
-        finally {
-            if (!controller.signal.aborted) {
-                setIsLoading(false);
-            }
-        }
-    }, [src, waveformData, externalDuration]);
-    /** Load audio and auto-play after loaded */
-    const preload = react.useCallback(() => {
-        if (isLoading || audioRef.current) {
-            return;
-        }
-        audioPlaybackManager.stopOthers(stopThis);
-        void ensureAudioLoaded().then(() => {
-            const audio = audioRef.current;
-            if (audio) {
-                audio.play()
-                    .then(() => setIsPlaying(true))
-                    .catch(() => setIsPlaying(false));
-            }
-        });
-    }, [isLoading, ensureAudioLoaded, stopThis]);
-    /** Toggle play/pause (only works after audio is loaded) */
-    const togglePlayback = react.useCallback(() => {
-        const audio = audioRef.current;
-        if (!audio || isLoading) {
-            return;
-        }
-        if (audio.paused) {
-            audioPlaybackManager.stopOthers(stopThis);
-            audio.play()
-                .then(() => setIsPlaying(true))
-                .catch(() => setIsPlaying(false));
-        }
-        else {
-            audio.pause();
-            setIsPlaying(false);
-        }
-    }, [isLoading, stopThis]);
-    const seekTo = react.useCallback((seekProgress) => {
-        const audio = audioRef.current;
-        if (!audio || !isFinite(audio.duration)) {
-            return;
-        }
-        const time = seekProgress * audio.duration;
-        audio.currentTime = time;
-        setCurrentTime(time);
-    }, []);
-    /** Cleanup on src change or unmount */
-    react.useEffect(() => {
-        return () => {
-            var _a;
-            (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
-            if (audioRef.current) {
-                cleanupAudio(audioRef.current);
-                audioRef.current = null;
-            }
-            if (objectUrlRef.current) {
-                URL.revokeObjectURL(objectUrlRef.current);
-                objectUrlRef.current = null;
+class VoicePlaybackChainClass {
+    constructor() {
+        this.entries = [];
+        /** Register a voice player. Returns cleanup function for useEffect. */
+        this.register = (id, play) => {
+            this.entries = this.entries.filter((e) => e.id !== id);
+            this.entries.push({ id, play });
+            this.entries.sort((a, b) => a.id - b.id);
+            return () => this.unregister(id);
+        };
+        /** Unregister a voice player by media ID */
+        this.unregister = (id) => {
+            this.entries = this.entries.filter((e) => e.id !== id);
+        };
+        /** Play the next voice message after the given media ID */
+        this.playNext = (currentId) => {
+            const idx = this.entries.findIndex((e) => e.id === currentId);
+            if (idx >= 0 && idx < this.entries.length - 1) {
+                this.entries[idx + 1].play();
             }
-            setIsLoaded(false);
         };
-    }, [src]);
-    react.useEffect(() => {
-        if (waveformData) {
-            setWaveformLevels(waveformData);
-        }
-    }, [waveformData]);
-    react.useEffect(() => {
-        if (externalDuration) {
-            setDuration(externalDuration);
-        }
-    }, [externalDuration]);
-    return {
-        progress,
-        duration,
-        isLoaded,
-        isPlaying,
-        isLoading,
-        currentTime,
-        waveformLevels,
-        seekTo,
-        preload,
-        formatTime,
-        togglePlayback,
-    };
-};
+    }
+}
+const VoicePlaybackChain = new VoicePlaybackChainClass();
 
 /**
  * VoiceMessagePlayer styles
@@ -1891,13 +2137,56 @@ const BAR_WIDTH = 3;
 const BAR_GAP = 2;
 const BAR_MIN_HEIGHT = 2;
 const BAR_MAX_HEIGHT = 24;
-const VoiceMessagePlayer = (props) => {
-    const { src, onClick, duration, className, waveformData, } = props;
-    const trackRef = react.useRef(null);
-    const [trackWidth, setTrackWidth] = react.useState(0);
-    const { progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({ src, duration, waveformData });
+const VoiceMessagePlayer = React.forwardRef((props, ref) => {
+    const { src, onClick, onEnded, chainId, duration, className, waveformData, autoPreload = true, } = props;
+    const trackRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const [trackWidth, setTrackWidth] = React.useState(0);
+    const handleEnded = React.useCallback(() => {
+        onEnded === null || onEnded === void 0 ? void 0 : onEnded();
+        if (chainId != null) {
+            VoicePlaybackChain.playNext(chainId);
+        }
+    }, [onEnded, chainId]);
+    const { play, progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, prefetch, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({
+        src,
+        duration,
+        waveformData,
+        preloadedBlob: props.preloadedBlob,
+        onEnded: handleEnded,
+    });
+    React.useImperativeHandle(ref, () => ({ play, prefetch }), [play, prefetch]);
+    /** Auto-preload audio when player enters viewport */
+    React.useEffect(() => {
+        if (!autoPreload || isLoaded || isLoading) {
+            return;
+        }
+        const el = wrapperRef.current;
+        if (!el) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                prefetch();
+                observer.disconnect();
+            }
+        }, { threshold: 0.1 });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [
+        isLoaded,
+        prefetch,
+        isLoading,
+        autoPreload,
+    ]);
+    /** Register in playback chain for sequential playback */
+    React.useEffect(() => {
+        if (chainId != null) {
+            return VoicePlaybackChain.register(chainId, () => play());
+        }
+    }, [chainId, play]);
     /** Measure track width once after mount */
-    react.useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         if (trackRef.current) {
             setTrackWidth(trackRef.current.clientWidth);
         }
@@ -1905,7 +2194,7 @@ const VoiceMessagePlayer = (props) => {
     const displayTime = isPlaying
         ? formatTime(currentTime)
         : formatTime(resolvedDuration);
-    const handleTrackClick = react.useCallback((e) => {
+    const handleTrackClick = React.useCallback((e) => {
         const track = trackRef.current;
         if (!track) {
             return;
@@ -1915,7 +2204,7 @@ const VoiceMessagePlayer = (props) => {
         seekTo(Math.max(0, Math.min(1, clickProgress)));
     }, [seekTo]);
     /** Interpolate waveform levels to fill container */
-    const interpolatedBars = react.useMemo(() => {
+    const interpolatedBars = React.useMemo(() => {
         var _a, _b;
         const maxBars = trackWidth > 0
             ? Math.floor(trackWidth / (BAR_WIDTH + BAR_GAP))
@@ -1936,7 +2225,7 @@ const VoiceMessagePlayer = (props) => {
         const peak = Math.max(...raw, 1);
         return raw.map((v) => (v / peak) * 100);
     }, [waveformLevels, trackWidth]);
-    return (jsxRuntime.jsxs(PlayerWrapper, { onClick: onClick, className: className, children: [jsxRuntime.jsx(PlayButton, { type: "button", disabled: isLoading || !src, onClick: isLoaded ? togglePlayback : preload, "aria-label": !isLoaded ? 'Download' : isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, {})) : !isLoaded ? (jsxRuntime.jsx(icons.Icon24DownloadOutline, {})) : isPlaying ? (jsxRuntime.jsx(icons.Icon24Pause, {})) : (jsxRuntime.jsx(icons.Icon24Play, {})) }), jsxRuntime.jsxs(ContentColumn, { children: [jsxRuntime.jsx(WaveformTrack, { ref: trackRef, onClick: handleTrackClick, children: interpolatedBars.map((level, i) => {
+    return (jsxRuntime.jsxs(PlayerWrapper, { ref: wrapperRef, onClick: onClick, className: className, children: [jsxRuntime.jsx(PlayButton, { type: "button", disabled: isLoading || (!src && !props.preloadedBlob), onClick: isLoaded ? togglePlayback : preload, "aria-label": isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, {})) : isPlaying ? (jsxRuntime.jsx(icons.Icon24Pause, {})) : (jsxRuntime.jsx(icons.Icon24Play, {})) }), jsxRuntime.jsxs(ContentColumn, { children: [jsxRuntime.jsx(WaveformTrack, { ref: trackRef, onClick: handleTrackClick, children: interpolatedBars.map((level, i) => {
                             const normalized = Math.min(100, level);
                             const height = BAR_MIN_HEIGHT + (normalized / 100) * (BAR_MAX_HEIGHT - BAR_MIN_HEIGHT);
                             const barProgress = interpolatedBars.length > 0
@@ -1950,16 +2239,50 @@ const VoiceMessagePlayer = (props) => {
                                         : 'color-mix(in srgb, var(--text_primary, #0a0a0a) 25%, transparent)',
                                 } }, i));
                         }) }), jsxRuntime.jsx(Duration, { children: displayTime })] })] }));
-};
+});
+
+/**
+ * VoiceBlobCache
+ *
+ * @description In-memory cache for voice message blobs.
+ * Allows instant playback of just-sent voice messages
+ * before the server URL becomes available.
+ *
+ * @author: exode <hello@exode.ru>
+ */
+class VoiceBlobCacheClass {
+    constructor() {
+        this.cache = new Map();
+        this.set = (messageId, blob) => {
+            this.cache.set(messageId, blob);
+        };
+        this.get = (messageId) => {
+            return this.cache.get(messageId);
+        };
+        this.delete = (messageId) => {
+            this.cache.delete(messageId);
+        };
+        /** Transfer blob from optimistic ID to real server ID */
+        this.transfer = (fromId, toId) => {
+            const blob = this.cache.get(fromId);
+            if (blob) {
+                this.cache.delete(fromId);
+                this.cache.set(toId, blob);
+            }
+        };
+    }
+}
+const VoiceBlobCache = new VoiceBlobCacheClass();
 
 exports.AUDIO_LEVEL_BARS = AUDIO_LEVEL_BARS;
 exports.AudioRecorder = AudioRecorder;
 exports.StorageSpaceEnum = StorageSpaceEnum;
+exports.VoiceBlobCache = VoiceBlobCache;
 exports.VoiceMessagePlayer = VoiceMessagePlayer;
+exports.VoicePlaybackChain = VoicePlaybackChain;
 exports.VoiceRecorderInput = VoiceRecorderInput;
 exports.WaveformBars = WaveformBars;
 exports.clampValue = clampValue;
-exports.decodeAudioLevels = decodeAudioLevels;
 exports.formatTime = formatTime;
 exports.useRecorderVisualization = useRecorderVisualization;
 exports.useRecordingTiming = useRecordingTiming;