@exode-team/react-recorder 1.1.0 → 1.1.2

package/dist/index.js

@@ -1,7 +1,32 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo, useImperativeHandle, useLayoutEffect } from 'react';
 import styled from 'styled-components';
-import { Icon32Microphone, Icon16Microphone, Icon16Square, Icon16Pause, Icon16Play, Icon28CancelOutline, Icon28SendOutline, Icon20VoiceOutline, Icon24DownloadOutline, Icon24Pause, Icon24Play } from '@vkontakte/icons';
+import { Icon32Microphone, Icon16Microphone, Icon16Square, Icon16Pause, Icon16Play, Icon28CancelOutline, Icon28SendOutline, Icon20VoiceOutline, Icon24Pause, Icon24Play } from '@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
@@ -46,6 +71,129 @@ const stopStream = (stream) => {
     stream.getTracks().forEach((track) => track.stop());
 };
 
+/**
+ * Audio playback platform adapter
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const createAudioPlayback = (url, callbacks) => {
+    const audio = new Audio(url);
+    audio.onloadedmetadata = () => {
+        callbacks.onLoadedMetadata(audio.duration);
+    };
+    audio.ontimeupdate = () => {
+        callbacks.onTimeUpdate(audio.currentTime);
+    };
+    audio.onended = () => {
+        callbacks.onEnded();
+    };
+    return { audio, url };
+};
+const cleanupAudio = (audio) => {
+    audio.pause();
+    audio.src = '';
+    audio.onended = null;
+    audio.ontimeupdate = null;
+    audio.onloadedmetadata = null;
+};
+const createObjectURL = (blob) => {
+    return URL.createObjectURL(blob);
+};
+const revokeObjectURL = (url) => {
+    URL.revokeObjectURL(url);
+};
+
+/**
+ * AudioRecorder constants
+ *
+ * @author: exode <hello@exode.ru>
+ */
+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
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const createStreamAnalyzer = (stream) => {
+    const context = new AudioContext();
+    const analyser = context.createAnalyser();
+    const source = context.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.fftSize = 256;
+    return { context, analyser };
+};
+const readFrequencyLevels = (analyser, barCount = AUDIO_LEVEL_BARS) => {
+    var _a;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    analyser.getByteFrequencyData(dataArray);
+    const step = Math.max(1, Math.floor(bufferLength / barCount));
+    const levels = [];
+    for (let i = 0; i < barCount; i += 1) {
+        const value = (_a = dataArray[i * step]) !== null && _a !== void 0 ? _a : 0;
+        levels.push((value / 255) * 100);
+    }
+    return levels;
+};
+const decodeAudioLevels = async (blob, barCount = AUDIO_LEVEL_BARS) => {
+    const context = new AudioContext();
+    try {
+        const arrayBuffer = await blob.arrayBuffer();
+        const audioBuffer = await context.decodeAudioData(arrayBuffer);
+        const channelData = audioBuffer.getChannelData(0);
+        if (!channelData.length) {
+            return Array.from({ length: barCount }, () => 0);
+        }
+        const levels = [];
+        const segmentLength = Math.max(1, Math.floor(channelData.length / barCount));
+        for (let i = 0; i < barCount; i += 1) {
+            const segmentStart = i * segmentLength;
+            let sum = 0;
+            for (let j = 0; j < segmentLength; j += 1) {
+                const sample = channelData[segmentStart + j];
+                if (sample !== undefined) {
+                    sum += Math.abs(sample);
+                }
+            }
+            const average = sum / segmentLength;
+            levels.push(Math.min(100, average * 200));
+        }
+        return levels;
+    }
+    finally {
+        await context.close();
+    }
+};
+
+/**
+ * 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
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const scheduleFrame = (callback) => {
+    return requestAnimationFrame(callback);
+};
+const cancelFrame = (id) => {
+    cancelAnimationFrame(id);
+};
+
 /**
  * useMediaRecorder
  *
@@ -164,114 +312,6 @@ const useMediaRecorder = (callbacks) => {
     };
 };
 
-/**
- * Audio playback platform adapter
- *
- * @author: exode <hello@exode.ru>
- */
-const createAudioPlayback = (url, callbacks) => {
-    const audio = new Audio(url);
-    audio.onloadedmetadata = () => {
-        callbacks.onLoadedMetadata(audio.duration);
-    };
-    audio.ontimeupdate = () => {
-        callbacks.onTimeUpdate(audio.currentTime);
-    };
-    audio.onended = () => {
-        callbacks.onEnded();
-    };
-    return { audio, url };
-};
-const cleanupAudio = (audio) => {
-    audio.pause();
-    audio.src = '';
-    audio.onended = null;
-    audio.ontimeupdate = null;
-    audio.onloadedmetadata = null;
-};
-const createObjectURL = (blob) => {
-    return URL.createObjectURL(blob);
-};
-const revokeObjectURL = (url) => {
-    URL.revokeObjectURL(url);
-};
-
-/**
- * AudioRecorder constants
- *
- * @author: exode <hello@exode.ru>
- */
-const AUDIO_LEVEL_BARS = 40;
-const createInitialLevels = () => Array.from({ length: AUDIO_LEVEL_BARS }, () => 0);
-
-/**
- * Audio analyzer platform adapter
- *
- * @author: exode <hello@exode.ru>
- */
-const createStreamAnalyzer = (stream) => {
-    const context = new AudioContext();
-    const analyser = context.createAnalyser();
-    const source = context.createMediaStreamSource(stream);
-    source.connect(analyser);
-    analyser.fftSize = 256;
-    return { context, analyser };
-};
-const readFrequencyLevels = (analyser, barCount = AUDIO_LEVEL_BARS) => {
-    var _a;
-    const bufferLength = analyser.frequencyBinCount;
-    const dataArray = new Uint8Array(bufferLength);
-    analyser.getByteFrequencyData(dataArray);
-    const step = Math.max(1, Math.floor(bufferLength / barCount));
-    const levels = [];
-    for (let i = 0; i < barCount; i += 1) {
-        const value = (_a = dataArray[i * step]) !== null && _a !== void 0 ? _a : 0;
-        levels.push((value / 255) * 100);
-    }
-    return levels;
-};
-const decodeAudioLevels = async (blob, barCount = AUDIO_LEVEL_BARS) => {
-    const context = new AudioContext();
-    try {
-        const arrayBuffer = await blob.arrayBuffer();
-        const audioBuffer = await context.decodeAudioData(arrayBuffer);
-        const channelData = audioBuffer.getChannelData(0);
-        if (!channelData.length) {
-            return Array.from({ length: barCount }, () => 0);
-        }
-        const levels = [];
-        const segmentLength = Math.max(1, Math.floor(channelData.length / barCount));
-        for (let i = 0; i < barCount; i += 1) {
-            const segmentStart = i * segmentLength;
-            let sum = 0;
-            for (let j = 0; j < segmentLength; j += 1) {
-                const sample = channelData[segmentStart + j];
-                if (sample !== undefined) {
-                    sum += Math.abs(sample);
-                }
-            }
-            const average = sum / segmentLength;
-            levels.push(Math.min(100, average * 200));
-        }
-        return levels;
-    }
-    finally {
-        await context.close();
-    }
-};
-
-/**
- * Animation frame platform adapter
- *
- * @author: exode <hello@exode.ru>
- */
-const scheduleFrame = (callback) => {
-    return requestAnimationFrame(callback);
-};
-const cancelFrame = (id) => {
-    cancelAnimationFrame(id);
-};
-
 /**
  * useAudioPlayback
  *
@@ -383,21 +423,7 @@ 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>
  */
@@ -554,14 +580,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 = 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 };
 };
 
 /**
@@ -572,23 +634,42 @@ 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] = useState(null);
-    const { audioURL, isPlaying, mountBlob, playbackTime, stopPlayback, resetPlayback, togglePlayback: _togglePlayback, playbackDuration} = useAudioPlayback();
+    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 = useCallback((options) => {
+    const resetCurrentRecording = 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 deleteRecording = useCallback(() => {
+        resetCurrentRecording({
+            resetLevels: true,
+            notifyDelete: true,
+        });
+        resetSession();
+    }, [resetCurrentRecording, resetSession]);
+    const { sendRecording } = useRecordingSender({
+        audioBlob,
+        fileName,
+        mimeType,
+        space,
+        uploadId,
+        uploader,
+        autoResetAfterUpload,
+        onUploaded,
+        onRecordingError,
+        deleteRecording,
+    });
     const mountRecordingBlob = useCallback((blob) => {
         setAudioBlob(blob);
         mountBlob(blob);
@@ -661,50 +742,9 @@ function useVoiceRecorder(props) {
             resetSession();
         };
     }, [cleanupVisualization, cleanupStream, resetPlayback, resetSession]);
-    const deleteRecording = useCallback(() => {
-        resetCurrentRecording({ resetLevels: true, notifyDelete: true });
-        resetSession();
-    }, [resetCurrentRecording, resetSession]);
     const togglePlayback = useCallback(() => {
         _togglePlayback(onRecordingError);
     }, [_togglePlayback, onRecordingError]);
-    const sendRecording = 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,
@@ -729,76 +769,501 @@ 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 (jsxs(IdleWrapper, { children: [jsxs(IdleButton, { type: "button", onClick: onClick, "aria-label": startAriaLabel, children: [jsx(IdleButtonOutline, { "aria-hidden": true }), jsx(IdleButtonGlow, { "aria-hidden": true }), jsx(Icon32Microphone, { height: 48, width: 48 })] }), jsx(IdleInstruction, { children: instruction })] }));
+const useAudioBlobLoader = (options) => {
+    const { src, waveformData, preloadedBlob, playbackCallbacks } = options;
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [waveformLevels, setWaveformLevels] = useState(waveformData || createInitialLevels);
+    const audioRef = useRef(null);
+    const objectUrlRef = useRef(null);
+    const abortControllerRef = useRef(null);
+    const callbacksRef = useRef(playbackCallbacks);
+    callbacksRef.current = playbackCallbacks;
+    const createAudioFromBlob = 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 = 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 = 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 */
+    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]);
+    useEffect(() => {
+        if (preloadedBlob && !audioRef.current) {
+            void mountFromBlob(preloadedBlob);
+        }
+    }, [preloadedBlob, mountFromBlob]);
+    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 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 = useRef(onEnded);
+    onEndedRef.current = onEnded;
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(externalDuration || 0);
+    const progress = duration > 0 ? currentTime / duration : 0;
+    /** Stop this player (called by manager when another player starts) */
+    const stopThis = useCallback(() => {
+        const audio = audioRef.current;
+        if (audio && !audio.paused) {
+            audio.pause();
+        }
+        setIsPlaying(false);
+    }, []);
+    /** Subscribe to global manager on mount */
+    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 = useCallback(() => {
+        if (isLoading || audioRef.current) {
+            return;
+        }
+        void ensureAudioLoaded();
+    }, [isLoading, ensureAudioLoaded]);
+    /** Load audio and auto-play after loaded */
+    const preload = 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 = 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 = 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 = 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 */
+    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 = useRef(false);
+    const [isSending, setIsSending] = useState(false);
+    const startNewRecording = 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 = useCallback(() => {
+        if (!isRecording) {
+            if (audioURL) {
+                stopPlayback();
+                deleteRecording();
+            }
+            void startNewRecording();
+            return;
+        }
+        if (isPaused) {
+            stopPlayback();
+        }
+        toggleRecordingPause();
+    }, [
+        audioURL,
+        isPaused,
+        isRecording,
+        stopPlayback,
+        deleteRecording,
+        startNewRecording,
+        toggleRecordingPause,
+    ]);
+    const handleSend = 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 = useCallback(() => {
+        if (isSending) {
+            return;
+        }
+        if (isRecording) {
+            shouldSendAfterStopRef.current = true;
+            stopRecording();
+            return;
+        }
+        void handleSend();
+    }, [
+        isSending,
+        handleSend,
+        isRecording,
+        stopRecording,
+    ]);
+    const handleCancel = useCallback(() => {
+        shouldSendAfterStopRef.current = false;
+        if (isRecording) {
+            cancelRecording();
+            return;
+        }
+        if (audioURL) {
+            stopPlayback();
+            deleteRecording();
+        }
+    }, [
+        audioURL,
+        isRecording,
+        stopPlayback,
+        deleteRecording,
+        cancelRecording,
+    ]);
+    const handlePlaybackToggle = useCallback(() => {
+        if (!hasRecording) {
+            return;
+        }
+        togglePlayback();
+    }, [hasRecording, togglePlayback]);
+    /** Auto-send after stop */
+    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 (jsxs(IdleWrapper, { children: [jsxs(IdleButton, { type: "button", onClick: onClick, "aria-label": startAriaLabel, children: [jsx(IdleButtonOutline, { "aria-hidden": true }), jsx(IdleButtonGlow, { "aria-hidden": true }), jsx(Icon32Microphone, { height: 48, width: 48 })] }), jsx(IdleInstruction, { children: instruction })] }));
+};
+
+/**
+ * RecordingShell styles
  *
  * @author: exode <hello@exode.ru>
  */
@@ -1022,16 +1487,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',
@@ -1071,35 +1530,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 = useMemo(() => mergeMessages(customMessages), [customMessages]);
-    const [isSending, setIsSending] = useState(false);
-    const shouldSendAfterStopRef = useRef(false);
     const [resolvedUploadId] = 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 = useCallback(async (file) => {
-        if (onUploaded) {
-            await onUploaded(file);
-        }
-        else {
-            console.info('[audio-recorder] Voice message uploaded', file);
-        }
-    }, [onUploaded]);
     const handleRecorderError = 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 = useCallback((pattern) => {
+        if (typeof navigator !== 'undefined' && 'vibrate' in navigator) {
+            navigator.vibrate(pattern);
+        }
+    }, []);
+    const recorder = useVoiceRecorder({
         fileName,
         mimeType,
         onRecordingStop,
@@ -1111,58 +1570,141 @@ const AudioRecorder = (props) => {
         uploader,
         uploadId: resolvedUploadId,
         onRecordingError: handleRecorderError,
-        onUploaded: handleUploaded,
+        onUploaded: onUploaded !== null && onUploaded !== void 0 ? onUploaded : (() => { }),
     });
-    const vibrate = 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 (jsx(Container, { className: className, children: showRecorderBar ? (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 })) : (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] = useState(false);
+    const [timelineLevels, setTimelineLevels] = useState([]);
+    const audioBlobRef = useRef(null);
+    const audioLevelsRef = useRef([]);
+    const lastDurationRef = useRef(0);
+    const shouldSendAfterStopRef = useRef(false);
+    const doSendRef = useRef();
+    const autoStartedRef = useRef(false);
+    const [uploadId] = useState(() => typeof crypto !== 'undefined' && 'randomUUID' in crypto
+        ? crypto.randomUUID()
+        : `upload-${Date.now()}`);
+    const handleRecordingStop = 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 = 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;
+    useEffect(() => {
+        if (recordingTime > 0) {
+            lastDurationRef.current = recordingTime;
         }
-    }, [handleRecorderError, isRecording, startRecording, vibrate]);
-    const handleRecordToggle = useCallback(() => {
-        if (!isRecording) {
-            if (audioURL) {
-                stopPlayback();
-                deleteRecording();
-            }
-            void startNewRecording();
+    }, [recordingTime]);
+    const isPreview = isPaused || (!isRecording && hasRecording);
+    const isActiveRecording = isRecording && !isPaused;
+    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]);
+    useEffect(() => {
+        if (isRecording && !isPaused) {
+            setTimelineLevels([]);
         }
+    }, [isRecording]);
+    const handleResume = useCallback(() => {
+        stopPlayback();
         toggleRecordingPause();
-    }, [audioURL, deleteRecording, isPaused, isRecording, startNewRecording, stopPlayback, toggleRecordingPause]);
-    const handleSend = useCallback(async () => {
-        if (isSending) {
-            return;
-        }
+    }, [
+        stopPlayback,
+        toggleRecordingPause,
+    ]);
+    const handlePause = toggleRecordingPause;
+    const handleCancel = 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 = 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 = useCallback(() => {
+    }, [
+        onSend,
+        onError,
+        fileName,
+        mimeType,
+        recordingTime,
+        sendRecording,
+        stopPlayback,
+        deleteRecording,
+    ]);
+    doSendRef.current = doSend;
+    const handleSendRequest = useCallback(async () => {
         if (isSending) {
             return;
         }
@@ -1171,33 +1713,103 @@ const AudioRecorder = (props) => {
             stopRecording();
             return;
         }
-        void handleSend();
-    }, [handleSend, isRecording, isSending, stopRecording]);
-    const handleCancel = useCallback(() => {
-        shouldSendAfterStopRef.current = false;
-        if (isRecording) {
-            cancelRecording();
-            return;
-        }
-        if (audioURL) {
-            stopPlayback();
-            deleteRecording();
-        }
-    }, [audioURL, cancelRecording, deleteRecording, isRecording, stopPlayback]);
-    const handlePlaybackToggle = useCallback(() => {
-        if (!hasRecording) {
-            return;
-        }
-        togglePlayback();
-    }, [hasRecording, togglePlayback]);
-    const showRecorderBar = isRecording || hasRecording;
+        await doSend();
+    }, [
+        doSend,
+        isRecording,
+        isSending,
+        stopRecording,
+    ]);
     useEffect(() => {
-        if (!isRecording && hasRecording && shouldSendAfterStopRef.current) {
-            shouldSendAfterStopRef.current = false;
-            void handleSend();
+        if (autoStart && !autoStartedRef.current) {
+            autoStartedRef.current = true;
+            void startRecording().catch((error) => {
+                onPermissionDenied === null || onPermissionDenied === void 0 ? void 0 : onPermissionDenied(error);
+            });
         }
-    }, [handleSend, hasRecording, isRecording]);
-    return (jsx(Container, { className: className, children: showRecorderBar ? (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 })) : (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 (jsx(Fragment, { children: Array.from({ length: maxBars }, (_, i) => (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 (jsx(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 (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 (jsx(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 (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));
+        }) }));
 };
 
 /**
@@ -1347,455 +1959,89 @@ const PlayPauseButton = styled.button `
     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] = useState(false);
-    const [timelineLevels, setTimelineLevels] = useState([]);
-    const audioBlobRef = useRef(null);
-    const audioLevelsRef = useRef([]);
-    const lastDurationRef = useRef(0);
-    const shouldSendAfterStopRef = useRef(false);
-    const doSendRef = useRef();
-    const autoStartedRef = useRef(false);
-    const waveformRef = useRef(null);
-    const [uploadId] = useState(() => typeof crypto !== 'undefined' && 'randomUUID' in crypto
-        ? crypto.randomUUID()
-        : `upload-${Date.now()}`);
-    const handleUploaded = useCallback(async (file) => {
-        await (onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded(file));
-    }, [onUploaded]);
-    const handleRecordingStop = 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 */
-    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) */
-    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 */
-    useEffect(() => {
-        if (isRecording && !isPaused) {
-            setTimelineLevels([]);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isRecording]);
-    /** Calculate visible bars count based on container width */
-    const getVisibleBarsCount = 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 = useCallback(() => {
-        stopPlayback();
-        toggleRecordingPause();
-    }, [stopPlayback, toggleRecordingPause]);
-    /** Pause recording (show preview) */
-    const handlePause = useCallback(() => {
-        toggleRecordingPause();
-    }, [toggleRecordingPause]);
-    const handleCancel = 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 = 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 = 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]);
-    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 (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) => (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: 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 = 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 = 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 (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 (jsxs(Wrapper, { className: className, children: [jsx(CancelButton, { type: "button", onClick: handleCancel, "aria-label": "Cancel", children: jsx(Icon28CancelOutline, { width: 20, height: 20 }) }), jsxs(RecordTrack, { children: [jsx(ButtonSlot, { children: isPreview ? (jsxs(Fragment, { children: [jsx(MicIndicator, { type: "button", onClick: handleResume, "aria-label": "Resume recording", children: jsx(Icon20VoiceOutline, { width: 14, height: 14 }) }), jsx(PlayPauseButton, { type: "button", onClick: togglePlayback, "aria-label": isPlaying ? 'Pause' : 'Play', children: isPlaying
                                         ? jsx(Icon16Pause, { width: 14, height: 14 })
-                                        : jsx(Icon16Play, { width: 14, height: 14 }) })] })) : (jsx(StopButton, { type: "button", onClick: handlePause, "aria-label": "Pause recording", children: jsx(Icon16Square, { width: 12, height: 12 }) })) }), jsx(WaveformArea, { ref: waveformRef, children: isPreview ? renderPreviewBars() : renderTimelineBars() }), jsx(Timer, { children: displayTime })] }), jsx(SendButton, { type: "button", onClick: handleSendRequest, disabled: isSending || (!hasRecording && !isRecording), "aria-label": "Send", children: isSending ? (jsx(SpinnerIcon, {})) : (jsx(Icon28SendOutline, {})) })] }));
+                                        : jsx(Icon16Play, { width: 14, height: 14 }) })] })) : (jsx(StopButton, { type: "button", onClick: handlePause, "aria-label": "Pause recording", children: jsx(Icon16Square, { width: 12, height: 12 }) })) }), jsx(WaveformArea, { ref: waveformRef, children: isPreview ? (jsx(PreviewBars, { timelineLevels: timelineLevels, previewLevels: previewLevels, isPlaying: isPlaying, playbackTime: playbackTime, recordingTime: recordingTime, lastDuration: lastDurationRef.current, getVisibleBarsCount: getVisibleBarsCount })) : (jsx(TimelineBars, { timelineLevels: timelineLevels, getVisibleBarsCount: getVisibleBarsCount })) }), jsx(Timer, { children: displayTime })] }), jsx(SendButton, { type: "button", onClick: handleSendRequest, disabled: isSending || (!hasRecording && !isRecording), "aria-label": "Send", children: isSending ? (jsx(SpinnerIcon, {})) : (jsx(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] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isLoaded, setIsLoaded] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(externalDuration || 0);
-    const [waveformLevels, setWaveformLevels] = useState(waveformData || createInitialLevels);
-    const audioRef = useRef(null);
-    const blobRef = useRef(null);
-    const objectUrlRef = useRef(null);
-    const abortControllerRef = useRef(null);
-    const progress = duration > 0 ? currentTime / duration : 0;
-    /** Stop this player (called by manager when another player starts) */
-    const stopThis = useCallback(() => {
-        const audio = audioRef.current;
-        if (audio && !audio.paused) {
-            audio.pause();
-        }
-        setIsPlaying(false);
-    }, []);
-    /** Subscribe to global manager on mount */
-    useEffect(() => {
-        return audioPlaybackManager.subscribe(stopThis);
-    }, [stopThis]);
-    const ensureAudioLoaded = 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 = 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 = 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 = 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 */
-    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]);
-    useEffect(() => {
-        if (waveformData) {
-            setWaveformLevels(waveformData);
-        }
-    }, [waveformData]);
-    useEffect(() => {
-        if (externalDuration) {
-            setDuration(externalDuration);
-        }
-    }, [externalDuration]);
-    return {
-        progress,
-        duration,
-        isLoaded,
-        isPlaying,
-        isLoading,
-        currentTime,
-        waveformLevels,
-        seekTo,
-        preload,
-        formatTime,
-        togglePlayback,
-    };
-};
+    }
+}
+const VoicePlaybackChain = new VoicePlaybackChainClass();
 
 /**
  * VoiceMessagePlayer styles
@@ -1889,11 +2135,54 @@ 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 VoiceMessagePlayer = React.forwardRef((props, ref) => {
+    const { src, onClick, onEnded, chainId, duration, className, waveformData, autoPreload = true, } = props;
     const trackRef = useRef(null);
+    const wrapperRef = useRef(null);
     const [trackWidth, setTrackWidth] = useState(0);
-    const { progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({ src, duration, waveformData });
+    const handleEnded = 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,
+    });
+    useImperativeHandle(ref, () => ({ play, prefetch }), [play, prefetch]);
+    /** Auto-preload audio when player enters viewport */
+    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 */
+    useEffect(() => {
+        if (chainId != null) {
+            return VoicePlaybackChain.register(chainId, () => play());
+        }
+    }, [chainId, play]);
     /** Measure track width once after mount */
     useLayoutEffect(() => {
         if (trackRef.current) {
@@ -1934,7 +2223,7 @@ const VoiceMessagePlayer = (props) => {
         const peak = Math.max(...raw, 1);
         return raw.map((v) => (v / peak) * 100);
     }, [waveformLevels, trackWidth]);
-    return (jsxs(PlayerWrapper, { onClick: onClick, className: className, children: [jsx(PlayButton, { type: "button", disabled: isLoading || !src, onClick: isLoaded ? togglePlayback : preload, "aria-label": !isLoaded ? 'Download' : isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsx(LoadingSpinner, {})) : !isLoaded ? (jsx(Icon24DownloadOutline, {})) : isPlaying ? (jsx(Icon24Pause, {})) : (jsx(Icon24Play, {})) }), jsxs(ContentColumn, { children: [jsx(WaveformTrack, { ref: trackRef, onClick: handleTrackClick, children: interpolatedBars.map((level, i) => {
+    return (jsxs(PlayerWrapper, { ref: wrapperRef, onClick: onClick, className: className, children: [jsx(PlayButton, { type: "button", disabled: isLoading || (!src && !props.preloadedBlob), onClick: isLoaded ? togglePlayback : preload, "aria-label": isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsx(LoadingSpinner, {})) : isPlaying ? (jsx(Icon24Pause, {})) : (jsx(Icon24Play, {})) }), jsxs(ContentColumn, { children: [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
@@ -1948,7 +2237,40 @@ const VoiceMessagePlayer = (props) => {
                                         : 'color-mix(in srgb, var(--text_primary, #0a0a0a) 25%, transparent)',
                                 } }, i));
                         }) }), 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();
 
-export { AUDIO_LEVEL_BARS, AudioRecorder, StorageSpaceEnum, VoiceMessagePlayer, VoiceRecorderInput, WaveformBars, clampValue, decodeAudioLevels, formatTime, useRecorderVisualization, useRecordingTiming, useVoiceMessagePlayer, useVoiceRecorder };
+export { AUDIO_LEVEL_BARS, AudioRecorder, StorageSpaceEnum, VoiceBlobCache, VoiceMessagePlayer, VoicePlaybackChain, VoiceRecorderInput, WaveformBars, clampValue, formatTime, useRecorderVisualization, useRecordingTiming, useVoiceMessagePlayer, useVoiceRecorder };
 //# sourceMappingURL=index.js.map