@exode-team/react-recorder 1.1.2 → 1.1.5

package/dist/index.d.ts

@@ -12,9 +12,8 @@ export { useVoiceRecorder } from './hooks/useVoiceRecorder';
 export { useVoiceMessagePlayer } from './hooks/useVoiceMessagePlayer';
 export { useRecorderVisualization } from './hooks/useRecorderVisualization';
 export { useRecordingTiming } from './hooks/useRecordingTiming';
-export type { StorageSpace, StorageFileEntity, UploadStrategy } from './types/upload';
+export type { StorageFileEntity, UploadStrategy } from './types/upload';
 export type { UseVoiceRecorderOptions, UseVoiceRecorderResult, UseVoiceMessagePlayerOptions, UseVoiceMessagePlayerResult, } from './types/recorder';
-export { StorageSpaceEnum } from './types/upload';
 export { AUDIO_LEVEL_BARS } from './constants';
 export { clampValue } from './utils/math';
 export { formatTime } from './utils/format';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,YAAY,EAAE,qBAAqB,EAAE,MAAM,oDAAoD,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACtF,YAAY,EACR,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC5B,2BAA2B,GAC9B,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,YAAY,EAAE,qBAAqB,EAAE,MAAM,oDAAoD,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACxE,YAAY,EACR,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC5B,2BAA2B,GAC9B,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useEffect, useMemo, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, useImperativeHandle } from 'react';
 import styled from 'styled-components';
-import { Icon32Microphone, Icon16Microphone, Icon16Square, Icon16Pause, Icon16Play, Icon28CancelOutline, Icon28SendOutline, Icon20VoiceOutline, Icon24Pause, Icon24Play } from '@vkontakte/icons';
+import { Icon32Microphone, Icon16Microphone, Icon16Pause, Icon16Play, Icon28DeleteOutlineAndroid, Icon28SendOutline, Icon20Voice, Icon24Pause, Icon24Play } from '@vkontakte/icons';
 
 /**
  * Math utilities
@@ -585,7 +585,7 @@ const useRecorderVisualization = () => {
  * @author: exode <hello@exode.ru>
  */
 const useRecordingSender = (options) => {
-    const { space, uploader, fileName, mimeType, uploadId, audioBlob, onUploaded, onRecordingError, deleteRecording, autoResetAfterUpload, } = options;
+    const { 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');
@@ -601,7 +601,7 @@ const useRecordingSender = (options) => {
             const file = new File([audioBlob], fileName, {
                 type: audioBlob.type || mimeType,
             });
-            const uploaded = await uploader(file, { space, uploadId });
+            const uploaded = await uploader(file, { uploadId });
             await onUploaded(uploaded);
             if (autoResetAfterUpload) {
                 deleteRecording();
@@ -612,7 +612,6 @@ const useRecordingSender = (options) => {
             throw error;
         }
     }, [
-        space,
         uploadId,
         uploader,
         fileName,
@@ -632,7 +631,7 @@ const useRecordingSender = (options) => {
  * @author: exode <hello@exode.ru>
  */
 function useVoiceRecorder(props) {
-    const { space, uploadId, uploader, onUploaded, onRecordingStop, onRecordingStart, onRecordingError, onRecordingDelete, onPermissionDenied, fileName = 'record.webm', mimeType = 'audio/webm', autoResetAfterUpload = true, } = props;
+    const { 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 { audioLevels, previewLevels, resetAudioLevels, stopVisualization, resetPreviewLevels, resumeVisualization, cleanupVisualization, generatePreviewLevels, initializeVisualization, } = useRecorderVisualization();
@@ -662,7 +661,6 @@ function useVoiceRecorder(props) {
         audioBlob,
         fileName,
         mimeType,
-        space,
         uploadId,
         uploader,
         autoResetAfterUpload,
@@ -782,6 +780,7 @@ const useAudioBlobLoader = (options) => {
     const audioRef = useRef(null);
     const objectUrlRef = useRef(null);
     const abortControllerRef = useRef(null);
+    const failedSrcRef = useRef(null);
     const callbacksRef = useRef(playbackCallbacks);
     callbacksRef.current = playbackCallbacks;
     const createAudioFromBlob = useCallback((blob) => {
@@ -818,7 +817,7 @@ const useAudioBlobLoader = (options) => {
     }, [waveformData, createAudioFromBlob]);
     const ensureAudioLoaded = useCallback(async () => {
         var _a;
-        if (audioRef.current) {
+        if (audioRef.current || failedSrcRef.current === src) {
             return;
         }
         if (preloadedBlob) {
@@ -849,6 +848,7 @@ const useAudioBlobLoader = (options) => {
             if (error instanceof DOMException && error.name === 'AbortError') {
                 return;
             }
+            failedSrcRef.current = src;
             console.warn('[voice-player] Failed to load audio', error);
         }
         finally {
@@ -859,6 +859,7 @@ const useAudioBlobLoader = (options) => {
     }, [src, waveformData, preloadedBlob, mountFromBlob, createAudioFromBlob]);
     /** Cleanup on src change or unmount */
     useEffect(() => {
+        failedSrcRef.current = null;
         return () => {
             var _a;
             (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
@@ -1188,7 +1189,6 @@ const useAudioRecorderHandlers = (options) => {
 const Container = styled.div `
     position: relative;
     width: 100%;
-    padding: 16px;
     transition: color 200ms ease, background-color 200ms ease;
     color: var(--text_primary, #0a0a0a);
 `;
@@ -1273,29 +1273,28 @@ const Wrapper$1 = styled.div `
     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);
+    background: var(--background_hover, color-mix(in srgb, var(--text_primary, #0a0a0a) 6%, transparent));
 `;
 const CancelButton$1 = styled.button `
-    width: 36px;
-    height: 36px;
+    width: 38px;
+    height: 38px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 18px;
-    background: transparent;
+    border-radius: 19px;
+    background: color-mix(in srgb, var(--exode_red) 10%, transparent);
     border: 0;
+    flex-shrink: 0;
     color: color-mix(in srgb, var(--text_primary, #0a0a0a) 54%, transparent);
     cursor: pointer;
-    transition: color 160ms ease, background-color 160ms ease;
+    transition: transform 160ms ease;
 
-    &:hover {
-        background-color: color-mix(in srgb, var(--text_primary, #0a0a0a) 12%, transparent);
-        color: color-mix(in srgb, var(--text_primary, #0a0a0a) 76%, transparent);
+    &:hover:not(:disabled) {
+        transform: translateY(-1px);
     }
 
-    &:active {
-        background-color: color-mix(in srgb, var(--text_primary, #0a0a0a) 18%, transparent);
+    &:active:not(:disabled) {
+        transform: translateY(0);
     }
 `;
 const Track = styled.div `
@@ -1303,7 +1302,7 @@ const Track = styled.div `
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 8px 12px;
+    padding: 8px 10px;
     border-radius: 9999px;
     background: color-mix(in srgb, var(--text_primary, #0a0a0a) 10%, transparent);
 `;
@@ -1318,7 +1317,7 @@ const CircleButton = styled.button `
     cursor: pointer;
     transition: transform 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
     flex-shrink: 0;
-    background: ${({ $variant }) => ($variant === 'play' ? 'var(--background_content, #ffffff)' : 'var(--background_content, #ffffff)')};
+    background: var(--background_content, #ffffff);
 
     color: ${({ $variant }) => {
     if ($variant === 'record') {
@@ -1467,7 +1466,9 @@ const RecordingShell = (props) => {
         return formatTime(0);
     }, [formatTime, hasRecording, isPlaying, playbackDuration, playbackTime, recordingTime]);
     const recordButtonDisabled = isSending;
-    const recordButtonIcon = !isRecording || isPaused ? jsx(Icon16Microphone, {}) : jsx(Icon16Square, {});
+    const recordButtonIcon = !isRecording || isPaused
+        ? jsx(Icon16Microphone, { width: 24, height: 24 })
+        : jsx(Icon16Pause, { width: 24, height: 24 });
     const recordButtonVariant = !isRecording || isPaused ? 'resume' : 'record';
     const recordButtonAria = !isRecording
         ? startAriaLabel
@@ -1476,14 +1477,16 @@ const RecordingShell = (props) => {
             : pauseRecordingAriaLabel || stopAriaLabel;
     const canShowPlayback = !isRecording || isPaused;
     const playbackDisabled = !hasRecording && !isRecording;
-    const playbackIcon = isPlaying ? jsx(Icon16Pause, {}) : jsx(Icon16Play, {});
+    const playbackIcon = isPlaying
+        ? jsx(Icon16Pause, { width: 24, height: 24 })
+        : jsx(Icon16Play, { width: 24, height: 24 });
     const playbackAria = isPlaying ? pausePlaybackAriaLabel : playAriaLabel;
     const sendDisabled = isSending || (!hasRecording && !isRecording);
-    return (jsxs(Wrapper$1, { children: [jsx(CancelButton$1, { type: "button", onClick: onCancel, "aria-label": cancelAriaLabel, children: jsx(Icon28CancelOutline, { width: 20, height: 20 }) }), jsxs(Track, { children: [jsx(CircleButton, { type: "button", "$variant": recordButtonVariant, onClick: onRecordToggle, "aria-label": recordButtonAria, disabled: recordButtonDisabled, children: recordButtonIcon }), !canShowPlayback ? null : (jsx(CircleButton, { type: "button", "$variant": "play", onClick: onTogglePlayback, "aria-label": playbackAria, disabled: playbackDisabled, children: playbackIcon })), jsx(Waveform, { "$expanded": canShowPlayback, children: jsx(WaveformBars, { values: waveformValues, divider: 100, scale: 42, minHeight: 6, styleInterpolator: ({ normalized }) => ({
+    return (jsxs(Wrapper$1, { children: [jsx(CancelButton$1, { type: "button", onClick: onCancel, "aria-label": cancelAriaLabel, children: jsx(Icon28DeleteOutlineAndroid, { fill: "var(--exode_red)", width: 24, height: 24, style: { minWidth: 24 } }) }), jsxs(Track, { children: [jsx(CircleButton, { type: "button", "$variant": recordButtonVariant, onClick: onRecordToggle, "aria-label": recordButtonAria, disabled: recordButtonDisabled, children: recordButtonIcon }), !canShowPlayback ? null : (jsx(CircleButton, { type: "button", "$variant": "play", onClick: onTogglePlayback, "aria-label": playbackAria, disabled: playbackDisabled, children: playbackIcon })), jsx(Waveform, { "$expanded": canShowPlayback, children: jsx(WaveformBars, { values: waveformValues, divider: 100, scale: 42, minHeight: 6, styleInterpolator: ({ normalized }) => ({
                                 height: `${12 + normalized / 2}px`,
                                 maxHeight: '34px',
                                 opacity: 0.38 + Math.min(0.5, normalized / 120),
-                            }) }) }), jsx(Timer$1, { children: displayTime })] }), jsx(SendButton$1, { type: "button", onClick: onSend, disabled: sendDisabled, "aria-label": sendAriaLabel, children: isSending ? (jsx(SpinnerSlot, { children: jsx(Spinner, {}) })) : (jsx(Icon28SendOutline, { width: 20, height: 20 })) })] }));
+                            }) }) }), jsx(Timer$1, { children: displayTime })] }), jsx(SendButton$1, { type: "button", onClick: onSend, disabled: sendDisabled, "aria-label": sendAriaLabel, children: isSending ? (jsx(SpinnerSlot, { children: jsx(Spinner, {}) })) : (jsx(Icon28SendOutline, { width: 24, height: 24 })) })] }));
 };
 
 /**
@@ -1531,24 +1534,12 @@ const mergeMessages = (custom) => {
     };
 };
 
-/**
- * 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 { fileName, uploadId, mimeType, className, uploader, onUploaded, onUploadError, onRecordingStop, onRecordingError, onRecordingStart, onRecordingDelete, onPermissionDenied, autoResetAfterUpload, messages: customMessages, } = props;
     const messages = useMemo(() => mergeMessages(customMessages), [customMessages]);
     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 handleRecorderError = useCallback((error) => {
         onRecordingError === null || onRecordingError === void 0 ? void 0 : onRecordingError(error);
         onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(error);
@@ -1566,7 +1557,6 @@ const AudioRecorder = (props) => {
         onRecordingDelete,
         onPermissionDenied,
         autoResetAfterUpload,
-        space: resolvedSpace,
         uploader,
         uploadId: resolvedUploadId,
         onRecordingError: handleRecorderError,
@@ -1589,7 +1579,7 @@ const AudioRecorder = (props) => {
  * @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 { onSend, onError, onCancel, uploader, onUploaded, onPermissionDenied, autoStart = true, mimeType = 'audio/webm', fileName = 'voice-message.webm', } = options;
     const [isSending, setIsSending] = useState(false);
     const [timelineLevels, setTimelineLevels] = useState([]);
     const audioBlobRef = useRef(null);
@@ -1610,7 +1600,6 @@ const useVoiceRecorderInput = (options) => {
         }
     }, []);
     const recorder = useVoiceRecorder({
-        space,
         fileName,
         mimeType,
         uploadId,
@@ -1743,8 +1732,8 @@ const useVoiceRecorderInput = (options) => {
 
 const PreviewBars = (props) => {
     var _a, _b;
-    const { isPlaying, playbackTime, lastDuration, previewLevels, recordingTime, timelineLevels, getVisibleBarsCount, } = props;
-    const maxBars = getVisibleBarsCount();
+    const { isPlaying, playbackTime, lastDuration, previewLevels, recordingTime, timelineLevels, visibleBarsCount, } = props;
+    const maxBars = visibleBarsCount;
     const sourceLevels = timelineLevels.length > 0
         ? timelineLevels
         : previewLevels;
@@ -1788,8 +1777,8 @@ const PreviewBars = (props) => {
 };
 
 const TimelineBars = (props) => {
-    const { timelineLevels, getVisibleBarsCount } = props;
-    const maxBars = getVisibleBarsCount();
+    const { timelineLevels, visibleBarsCount } = props;
+    const maxBars = visibleBarsCount;
     const visible = timelineLevels.slice(-maxBars);
     const padded = [
         ...visible,
@@ -1834,15 +1823,11 @@ const CancelButton = styled.button `
     border-radius: 16px;
     background: transparent;
     border: 0;
+    margin-right: 4px;
     flex-shrink: 0;
     color: color-mix(in srgb, var(--text_primary, #0a0a0a) 45%, transparent);
     cursor: pointer;
     transition: color 160ms ease, background-color 160ms ease;
-
-    &:hover {
-        background-color: color-mix(in srgb, var(--text_primary, #0a0a0a) 8%, transparent);
-        color: color-mix(in srgb, var(--text_primary, #0a0a0a) 72%, transparent);
-    }
 `;
 const RecordTrack = styled.div `
     flex: 1;
@@ -1858,7 +1843,8 @@ const RecordTrack = styled.div `
 const ButtonSlot = styled.div `
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: 4px;
+    padding: 2px;
     flex-shrink: 0;
 `;
 const StopButton = styled.button `
@@ -1940,14 +1926,10 @@ const MicIndicator = styled.button `
     border: 0;
     flex-shrink: 0;
     cursor: pointer;
-    background: color-mix(in srgb, var(--exode_red, #ed1c24) 14%, transparent);
-    color: var(--exode_red, #ed1c24);
+    background: var(--background_content, #ffffff);
+    color: color-mix(in srgb, var(--accent, #3f8ae0) 86%, white 14%);
     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);
     }
@@ -1995,19 +1977,39 @@ const VoiceRecorderInput = (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 [visibleBarsCount, setVisibleBarsCount] = useState(0);
+    const measureBars = () => {
         const el = waveformRef.current;
         if (!el) {
-            return 60;
+            return;
         }
-        return Math.floor(el.clientWidth / (TIMELINE_BAR_WIDTH + TIMELINE_BAR_GAP));
+        setVisibleBarsCount(Math.floor(el.clientWidth / (TIMELINE_BAR_WIDTH + TIMELINE_BAR_GAP)));
+    };
+    /** Sync recalc before paint — catches layout shifts from button changes */
+    useLayoutEffect(measureBars);
+    /** ResizeObserver for external size changes (window resize, container resize) */
+    useEffect(() => {
+        const el = waveformRef.current;
+        if (!el) {
+            return;
+        }
+        let rafId = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(measureBars);
+        });
+        observer.observe(el);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+        };
     }, []);
     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
+    return (jsxs(Wrapper, { className: className, children: [jsx(CancelButton, { type: "button", onClick: handleCancel, "aria-label": "Cancel", children: jsx(Icon28DeleteOutlineAndroid, { fill: "var(--exode_red)", width: 28, height: 28, style: { minWidth: 28 } }) }), jsxs(RecordTrack, { children: [jsx(ButtonSlot, { children: isPreview ? (jsxs(Fragment, { children: [jsx(MicIndicator, { type: "button", onClick: handleResume, "aria-label": "Resume recording", children: jsx(Icon20Voice, { 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 ? (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, {})) })] }));
+                                        : jsx(Icon16Play, { width: 14, height: 14 }) })] })) : (jsx(StopButton, { type: "button", onClick: handlePause, "aria-label": "Pause recording", children: jsx(Icon16Pause, { width: 14, height: 14 }) })) }), jsx(WaveformArea, { ref: waveformRef, children: isPreview ? (jsx(PreviewBars, { timelineLevels: timelineLevels, previewLevels: previewLevels, isPlaying: isPlaying, playbackTime: playbackTime, recordingTime: recordingTime, lastDuration: lastDurationRef.current, visibleBarsCount: visibleBarsCount })) : (jsx(TimelineBars, { timelineLevels: timelineLevels, visibleBarsCount: visibleBarsCount })) }), jsx(Timer, { children: displayTime })] }), jsx(SendButton, { type: "button", onClick: handleSendRequest, disabled: isSending || (!hasRecording && !isRecording), "aria-label": "Send", children: isSending ? (jsx(SpinnerIcon, {})) : (jsx(Icon28SendOutline, {})) })] }));
 };
 
 /**
@@ -2183,11 +2185,29 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
             return VoicePlaybackChain.register(chainId, () => play());
         }
     }, [chainId, play]);
-    /** Measure track width once after mount */
-    useLayoutEffect(() => {
+    const measureTrackWidth = () => {
         if (trackRef.current) {
             setTrackWidth(trackRef.current.clientWidth);
         }
+    };
+    /** Sync recalc before paint — catches layout shifts */
+    useLayoutEffect(measureTrackWidth);
+    /** ResizeObserver for external size changes (window resize, container resize) */
+    useEffect(() => {
+        const el = trackRef.current;
+        if (!el) {
+            return;
+        }
+        let rafId = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(measureTrackWidth);
+        });
+        observer.observe(el);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+        };
     }, []);
     const displayTime = isPlaying
         ? formatTime(currentTime)
@@ -2272,5 +2292,5 @@ class VoiceBlobCacheClass {
 }
 const VoiceBlobCache = new VoiceBlobCacheClass();
 
-export { AUDIO_LEVEL_BARS, AudioRecorder, StorageSpaceEnum, VoiceBlobCache, VoiceMessagePlayer, VoicePlaybackChain, VoiceRecorderInput, WaveformBars, clampValue, formatTime, useRecorderVisualization, useRecordingTiming, useVoiceMessagePlayer, useVoiceRecorder };
+export { AUDIO_LEVEL_BARS, AudioRecorder, VoiceBlobCache, VoiceMessagePlayer, VoicePlaybackChain, VoiceRecorderInput, WaveformBars, clampValue, formatTime, useRecorderVisualization, useRecordingTiming, useVoiceMessagePlayer, useVoiceRecorder };
 //# sourceMappingURL=index.js.map