@exode-team/react-recorder 1.1.1 → 1.1.2

package/dist/index.js

@@ -960,6 +960,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 +1037,7 @@ const useVoiceMessagePlayer = (options) => {
         currentTime,
         waveformLevels,
         seekTo,
+        prefetch,
         preload,
         formatTime,
         togglePlayback,
@@ -2128,8 +2136,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,14 +2146,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,
     });
-    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) {
@@ -2191,7 +2223,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