@exode-team/react-recorder 1.1.1 → 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();
@@ -960,6 +963,13 @@ const useVoiceMessagePlayer = (options) => {
             },
         },
     });
+    /** 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) {
@@ -1030,6 +1040,7 @@ const useVoiceMessagePlayer = (options) => {
         currentTime,
         waveformLevels,
         seekTo,
+        prefetch,
         preload,
         formatTime,
         togglePlayback,
@@ -1180,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);
 `;
@@ -1265,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 `
@@ -1295,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);
 `;
@@ -1459,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
@@ -1468,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 })) })] }));
 };
 
 /**
@@ -1735,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;
@@ -1780,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,
@@ -1826,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;
@@ -1850,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 `
@@ -1987,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, {})) })] }));
 };
 
 /**
@@ -2128,8 +2158,9 @@ const BAR_GAP = 2;
 const BAR_MIN_HEIGHT = 2;
 const BAR_MAX_HEIGHT = 24;
 const VoiceMessagePlayer = React.forwardRef((props, ref) => {
-    const { src, onClick, onEnded, chainId, duration, className, waveformData, } = props;
+    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 handleEnded = useCallback(() => {
         onEnded === null || onEnded === void 0 ? void 0 : onEnded();
@@ -2137,25 +2168,66 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
             VoicePlaybackChain.playNext(chainId);
         }
     }, [onEnded, chainId]);
-    const { play, progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({
+    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 }), [play]);
+    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(() => {
+    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)
@@ -2191,7 +2263,7 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
         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 && !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) => {
+    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