@exode-team/react-recorder 1.1.2 → 1.1.3

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
@@ -782,6 +782,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 +819,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 +850,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 +861,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 +1191,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 +1275,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 +1304,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);
 `;
@@ -1467,7 +1468,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 +1479,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 })) })] }));
 };
 
 /**
@@ -1743,8 +1748,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 +1793,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 +1839,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 +1859,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 `
@@ -1995,19 +1997,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 +2205,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)