@exode-team/react-recorder 1.1.1 → 1.1.2

package/README.md

@@ -144,6 +144,7 @@ const Messages = () => {
 | `src`           | `string`                       | ✅          | —            | URL аудиофайла.                                                                             |
 | `chainId`       | `number`                       | —          | —            | ID для последовательного воспроизведения. При окончании автоматически запускает следующий.    |
 | `duration`      | `number`                       | —          | —            | Длительность в секундах (отображается до загрузки аудио).                                   |
+| `autoPreload`   | `boolean`                      | —          | `true`       | Автозагрузка аудио при попадании в viewport (IntersectionObserver).                          |
 | `waveformData`  | `number[]`                     | —          | —            | Предварительно вычисленные уровни waveform.                                                 |
 | `preloadedBlob` | `Blob \| null`                 | —          | —            | Blob для мгновенного воспроизведения без сетевого запроса.                                   |
 | `onEnded`       | `() => void`                   | —          | —            | Колбэк окончания воспроизведения.                                                           |
@@ -153,6 +154,7 @@ const Messages = () => {
 **Ref API (`VoiceMessagePlayerRef`):**
 
 - `play()` — программный запуск воспроизведения.
+- `prefetch()` — загрузка аудио без воспроизведения (fetch + decode waveform).
 
 #### `VoicePlaybackChain`
 

package/dist/components/VoiceMessagePlayer/VoiceMessagePlayer.d.ts

@@ -5,6 +5,7 @@
  */
 export interface VoiceMessagePlayerRef {
     play: () => void;
+    prefetch: () => void;
 }
 declare const VoiceMessagePlayer: any;
 export { VoiceMessagePlayer };

package/dist/components/VoiceMessagePlayer/VoiceMessagePlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceMessagePlayer/VoiceMessagePlayer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AAcD,QAAA,MAAM,kBAAkB,KAmJtB,CAAC;AAGH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"VoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceMessagePlayer/VoiceMessagePlayer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAeD,QAAA,MAAM,kBAAkB,KAsLtB,CAAC;AAGH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/hooks/useVoiceMessagePlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceMessagePlayer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,OAAO,KAAK,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAG1F,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B,KAAG,2BAmJtE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"useVoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceMessagePlayer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,OAAO,KAAK,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAG1F,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B,KAAG,2BA6JtE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/index.cjs

@@ -962,6 +962,13 @@ const useVoiceMessagePlayer = (options) => {
             },
         },
     });
+    /** Pre-fetch audio without playing (for viewport preloading) */
+    const prefetch = React.useCallback(() => {
+        if (isLoading || audioRef.current) {
+            return;
+        }
+        void ensureAudioLoaded();
+    }, [isLoading, ensureAudioLoaded]);
     /** Load audio and auto-play after loaded */
     const preload = React.useCallback(() => {
         if (isLoading || audioRef.current) {
@@ -1032,6 +1039,7 @@ const useVoiceMessagePlayer = (options) => {
         currentTime,
         waveformLevels,
         seekTo,
+        prefetch,
         preload,
         formatTime,
         togglePlayback,
@@ -2130,8 +2138,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 = React.useRef(null);
+    const wrapperRef = React.useRef(null);
     const [trackWidth, setTrackWidth] = React.useState(0);
     const handleEnded = React.useCallback(() => {
         onEnded === null || onEnded === void 0 ? void 0 : onEnded();
@@ -2139,14 +2148,37 @@ 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,
     });
-    React.useImperativeHandle(ref, () => ({ play }), [play]);
+    React.useImperativeHandle(ref, () => ({ play, prefetch }), [play, prefetch]);
+    /** Auto-preload audio when player enters viewport */
+    React.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 */
     React.useEffect(() => {
         if (chainId != null) {
@@ -2193,7 +2225,7 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
         const peak = Math.max(...raw, 1);
         return raw.map((v) => (v / peak) * 100);
     }, [waveformLevels, trackWidth]);
-    return (jsxRuntime.jsxs(PlayerWrapper, { onClick: onClick, className: className, children: [jsxRuntime.jsx(PlayButton, { type: "button", disabled: isLoading || (!src && !props.preloadedBlob), onClick: isLoaded ? togglePlayback : preload, "aria-label": isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, {})) : isPlaying ? (jsxRuntime.jsx(icons.Icon24Pause, {})) : (jsxRuntime.jsx(icons.Icon24Play, {})) }), jsxRuntime.jsxs(ContentColumn, { children: [jsxRuntime.jsx(WaveformTrack, { ref: trackRef, onClick: handleTrackClick, children: interpolatedBars.map((level, i) => {
+    return (jsxRuntime.jsxs(PlayerWrapper, { ref: wrapperRef, onClick: onClick, className: className, children: [jsxRuntime.jsx(PlayButton, { type: "button", disabled: isLoading || (!src && !props.preloadedBlob), onClick: isLoaded ? togglePlayback : preload, "aria-label": isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, {})) : isPlaying ? (jsxRuntime.jsx(icons.Icon24Pause, {})) : (jsxRuntime.jsx(icons.Icon24Play, {})) }), jsxRuntime.jsxs(ContentColumn, { children: [jsxRuntime.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