@exode-team/react-recorder 1.1.7 → 1.1.8

package/dist/index.js

@@ -274,6 +274,9 @@ const useMediaRecorder = (callbacks) => {
         if (!mediaRecorderRef.current || !isRecording) {
             return;
         }
+        if (mediaRecorderRef.current.state === 'paused') {
+            mediaRecorderRef.current.resume();
+        }
         mediaRecorderRef.current.stop();
     }, [isRecording]);
     const cancelRecording = useCallback(() => {
@@ -432,6 +435,7 @@ const useAudioPlayback = () => {
  * @author: exode <hello@exode.ru>
  */
 const useRecordingTiming = () => {
+    const [lastDuration, setLastDuration] = useState(0);
     const [recordingTime, setRecordingTime] = useState(0);
     const timerRef = useRef(null);
     const recordingStartRef = useRef(null);
@@ -459,6 +463,7 @@ const useRecordingTiming = () => {
     const startNewSession = useCallback(() => {
         recordingAccumulatedRef.current = 0;
         setRecordingTime(0);
+        setLastDuration(0);
         recordingStartRef.current = performance.now();
         startTicker();
     }, [startTicker]);
@@ -476,7 +481,21 @@ const useRecordingTiming = () => {
         setRecordingTime(roundTo(recordingAccumulatedRef.current));
         stopTicker();
     }, [stopTicker]);
+    const getElapsedMs = useCallback(() => {
+        const accumulated = recordingAccumulatedRef.current;
+        const elapsed = recordingStartRef.current !== null
+            ? (performance.now() - recordingStartRef.current) / 1000 + accumulated
+            : accumulated;
+        return Math.round(elapsed * 1000);
+    }, []);
     const resetSession = useCallback(() => {
+        const accumulated = recordingAccumulatedRef.current;
+        const elapsed = recordingStartRef.current !== null
+            ? (performance.now() - recordingStartRef.current) / 1000 + accumulated
+            : accumulated;
+        if (elapsed > 0) {
+            setLastDuration(roundTo(elapsed));
+        }
         stopTicker();
         recordingStartRef.current = null;
         recordingAccumulatedRef.current = 0;
@@ -488,6 +507,8 @@ const useRecordingTiming = () => {
         };
     }, [stopTicker]);
     return {
+        lastDuration,
+        getElapsedMs,
         pauseSession,
         resetSession,
         recordingTime,
@@ -589,7 +610,7 @@ const useRecorderVisualization = () => {
  * @author: exode <hello@exode.ru>
  */
 const useRecordingSender = (options) => {
-    const { uploader, fileName, mimeType, uploadId, audioBlob, onUploaded, onRecordingError, deleteRecording, autoResetAfterUpload, } = options;
+    const { uploader, fileName, mimeType, uploadId, audioBlob, onUploaded, getDurationMs, onRecordingError, deleteRecording, autoResetAfterUpload, } = options;
     const sendRecording = useCallback(async () => {
         if (!audioBlob) {
             const error = new Error('Voice recording is not available');
@@ -602,11 +623,13 @@ const useRecordingSender = (options) => {
             throw error;
         }
         try {
+            const durationMs = getDurationMs();
+            const durationSec = durationMs / 1000;
             const file = new File([audioBlob], fileName, {
                 type: audioBlob.type || mimeType,
             });
             const uploaded = await uploader(file, { uploadId });
-            await onUploaded(uploaded);
+            await onUploaded(uploaded, durationSec);
             if (autoResetAfterUpload) {
                 deleteRecording();
             }
@@ -622,8 +645,9 @@ const useRecordingSender = (options) => {
         audioBlob,
         mimeType,
         onUploaded,
-        onRecordingError,
+        getDurationMs,
         deleteRecording,
+        onRecordingError,
         autoResetAfterUpload,
     ]);
     return { sendRecording };
@@ -639,7 +663,7 @@ function useVoiceRecorder(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();
-    const { recordingTime, pauseSession, resetSession, resumeSession, startNewSession, } = useRecordingTiming();
+    const { lastDuration, getElapsedMs, recordingTime, pauseSession, resetSession, resumeSession, startNewSession, } = useRecordingTiming();
     const resetCurrentRecording = useCallback((opts) => {
         var _a;
         setAudioBlob(null);
@@ -667,10 +691,11 @@ function useVoiceRecorder(props) {
         mimeType,
         uploadId,
         uploader,
-        autoResetAfterUpload,
         onUploaded,
-        onRecordingError,
         deleteRecording,
+        onRecordingError,
+        autoResetAfterUpload,
+        getDurationMs: getElapsedMs,
     });
     const mountRecordingBlob = useCallback((blob) => {
         setAudioBlob(blob);
@@ -753,6 +778,7 @@ function useVoiceRecorder(props) {
         isPlaying,
         isRecording,
         audioLevels,
+        lastDuration,
         playbackTime,
         recordingTime,
         previewLevels,
@@ -1099,9 +1125,6 @@ const useAudioRecorderHandlers = (options) => {
         toggleRecordingPause,
     ]);
     const handleSend = useCallback(async () => {
-        if (isSending) {
-            return;
-        }
         shouldSendAfterStopRef.current = false;
         setIsSending(true);
         try {
@@ -1118,7 +1141,6 @@ const useAudioRecorderHandlers = (options) => {
             setIsSending(false);
         }
     }, [
-        isSending,
         stopPlayback,
         onUploadError,
         sendRecording,
@@ -1129,6 +1151,7 @@ const useAudioRecorderHandlers = (options) => {
             return;
         }
         if (isRecording) {
+            setIsSending(true);
             shouldSendAfterStopRef.current = true;
             stopRecording();
             return;
@@ -1266,6 +1289,44 @@ const IdleControl = (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 Bars = styled.div `
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+`;
+const Bar = styled.div `
+    flex: 1;
+    min-width: 2px;
+    border-radius: 9999px;
+    background: var(--white, #ffffff);
+    opacity: 0.6;
+    transition: height 120ms ease, opacity 120ms ease;
+`;
+
+const WaveformBars = (props) => {
+    const { values, progress, styleInterpolator, scale = 40, minHeight = 6, divider = 100, } = props;
+    return (jsx(Bars, { children: values.map((value, index) => {
+            const normalized = clampValue(value);
+            const height = Math.max(minHeight, (normalized / divider) * scale);
+            const barProgress = values.length > 1 ? index / (values.length - 1) : 0;
+            const isPlayed = (progress !== null && progress !== void 0 ? progress : 0) > 0 && barProgress <= (progress !== null && progress !== void 0 ? progress : 0);
+            const interpolated = styleInterpolator === null || styleInterpolator === void 0 ? void 0 : styleInterpolator({
+                normalized,
+                height,
+                index,
+                progress: progress !== null && progress !== void 0 ? progress : 0,
+                barProgress,
+                isPlayed,
+            });
+            return (jsx(Bar, { style: {
+                    height: `${height}px`,
+                    ...interpolated,
+                } }, index));
+        }) }));
+};
+
 /**
  * RecordingShell styles
  *
@@ -1360,21 +1421,6 @@ const Waveform = styled.div `
     align-items: center;
     overflow: hidden;
 `;
-const Bars = styled.div `
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: flex-end;
-    gap: 3px;
-`;
-const Bar = styled.div `
-    flex: 1;
-    min-width: 2px;
-    border-radius: 9999px;
-    background: var(--white, #ffffff);
-    opacity: 0.6;
-    transition: height 120ms ease, opacity 120ms ease;
-`;
 const Timer$1 = styled.span `
     text-align: right;
     font-size: 13px;
@@ -1436,31 +1482,33 @@ const Spinner = styled.span `
     }
 `;
 
-const WaveformBars = (props) => {
-    const { values, styleInterpolator, scale = 40, minHeight = 6, divider = 100, } = props;
-    return (jsx(Bars, { children: values.map((value, index) => {
-            const normalized = clampValue(value);
-            const height = Math.max(minHeight, (normalized / divider) * scale);
-            const interpolated = styleInterpolator === null || styleInterpolator === void 0 ? void 0 : styleInterpolator({ normalized, height, index });
-            return (jsx(Bar, { style: {
-                    height: `${height}px`,
-                    ...interpolated,
-                } }, index));
-        }) }));
-};
-
 const RecordingShell = (props) => {
     const { isPaused, isPlaying, isSending, isRecording, audioLevels, hasRecording, playbackTime, previewLevels, recordingTime, stopAriaLabel, playAriaLabel, sendAriaLabel, startAriaLabel, cancelAriaLabel, playbackDuration, pausePlaybackAriaLabel, pauseRecordingAriaLabel, resumeRecordingAriaLabel, onSend, onCancel, formatTime, onRecordToggle, onTogglePlayback, } = props;
+    const { lastDuration } = props;
+    const isPreview = !isRecording || isPaused;
     const waveformValues = isRecording ? audioLevels : (hasRecording ? previewLevels : audioLevels);
+    const effectiveDuration = recordingTime
+        || playbackDuration
+        || lastDuration
+        || 1;
+    const progress = (isPreview && isPlaying)
+        ? Math.min(1, playbackTime / effectiveDuration)
+        : 0;
     const displayTime = useMemo(() => {
-        if (isRecording) {
+        if (isPlaying) {
+            return formatTime(playbackTime);
+        }
+        if (isRecording && !isPaused) {
+            return formatTime(recordingTime);
+        }
+        if (isRecording && isPaused) {
             return formatTime(recordingTime);
         }
+        if (lastDuration > 0) {
+            return formatTime(lastDuration);
+        }
         if (hasRecording) {
-            if (isPlaying) {
-                return formatTime(playbackTime);
-            }
-            if (playbackDuration > 0) {
+            if (playbackDuration > 0.5) {
                 return formatTime(playbackDuration);
             }
             if (recordingTime > 0) {
@@ -1468,7 +1516,17 @@ const RecordingShell = (props) => {
             }
         }
         return formatTime(0);
-    }, [formatTime, hasRecording, isPlaying, playbackDuration, playbackTime, recordingTime]);
+    }, [
+        isPaused,
+        isPlaying,
+        formatTime,
+        isRecording,
+        lastDuration,
+        hasRecording,
+        playbackTime,
+        recordingTime,
+        playbackDuration,
+    ]);
     const recordButtonDisabled = isSending;
     const recordButtonIcon = !isRecording || isPaused
         ? jsx(Icon16Microphone, { width: 24, height: 24 })
@@ -1486,10 +1544,13 @@ const RecordingShell = (props) => {
         : 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(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 }) => ({
+    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, { scale: 42, minHeight: 6, divider: 100, progress: progress, values: waveformValues, styleInterpolator: ({ normalized, isPlayed, progress: p }) => ({
                                 height: `${12 + normalized / 2}px`,
                                 maxHeight: '34px',
-                                opacity: 0.38 + Math.min(0.5, normalized / 120),
+                                opacity: p > 0
+                                    ? (isPlayed ? 0.80 : 0.22)
+                                    : 0.38 + Math.min(0.5, normalized / 120),
+                                transition: 'opacity 80ms ease',
                             }) }) }), 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 })) })] }));
 };
 
@@ -1572,9 +1633,9 @@ const AudioRecorder = (props) => {
         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 })) }));
+    const { isPaused, isPlaying, formatTime, audioLevels, isRecording, lastDuration, playbackTime, hasRecording, previewLevels, recordingTime, playbackDuration, } = recorder;
+    const showRecorderBar = isRecording || hasRecording || isSending;
+    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, lastDuration: lastDuration, 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 })) }));
 };
 
 /**
@@ -2213,7 +2274,7 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
             observer.disconnect();
         };
     }, []);
-    const displayTime = isPlaying
+    const displayTime = (isPlaying || currentTime > 0)
         ? formatTime(currentTime)
         : formatTime(resolvedDuration);
     const handleTrackClick = useCallback((e) => {