react-audio-wavekit 0.1.2 → 0.1.4

package/README.md

@@ -101,10 +101,7 @@ Scrolling timeline waveform (Voice Memos style). Canvas grows horizontally as re
   className="h-12 w-80 rounded bg-slate-100"
   appearance={{ scrollbar: { thumbColor: "#94a3b8" } }}
 >
-  <LiveStreamingRecorder.Canvas
-    appearance={{ barColor: "#3b82f6", barWidth: 2, barGap: 1 }}
-    growWidth={true}
-  />
+  <LiveStreamingRecorder.Canvas appearance={{ barColor: "#3b82f6", barWidth: 2, barGap: 1 }} />
 </LiveStreamingRecorder.Root>
 ```
 
@@ -122,7 +119,6 @@ Scrolling timeline waveform (Voice Memos style). Canvas grows horizontally as re
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `growWidth` | `boolean` | `true` | Canvas grows horizontally (enables scrolling) |
 | `appearance` | `WaveformAppearance` | - | See [Appearance Options](#appearance-options) |
 
 ### LiveStreamingStackRecorder

package/dist/index.d.ts

@@ -97,13 +97,6 @@ declare interface LiveStreamingRecorderCanvasProps extends HTMLAttributes<HTMLCa
     style?: React.CSSProperties;
     /** Waveform appearance configuration (barColor, barWidth, etc.) - scrollbar 설정은 Root에서만 유효 */
     appearance?: LiveStreamingRecorderAppearance;
-    /**
-     * Allow canvas width to grow beyond container (enables scrolling)
-     * - true: Canvas grows horizontally as recording continues (Voice Memos style)
-     * - false: Canvas stays fixed width, bars get compressed
-     * @default true
-     */
-    growWidth?: boolean;
 }
 
 declare type LiveStreamingRecorderContextValue = UseRecordingAmplitudesReturn;

package/dist/recorder/live-streaming/recorder/recorder-compound.cjs

@@ -100,7 +100,7 @@ const LiveStreamingRecorderRoot = react.forwardRef(
   }
 );
 const LiveStreamingRecorderCanvas = react.forwardRef(
-  function LiveStreamingRecorderCanvas2({ className = "", style, appearance, growWidth = true, ...props }, ref) {
+  function LiveStreamingRecorderCanvas2({ className = "", style, appearance, ...props }, ref) {
     const { amplitudes, isRecording, isPaused } = recorderContext.useLiveStreamingRecorderContext();
     const canvasRef = react.useRef(null);
     const animationRef = react.useRef(null);
@@ -137,17 +137,11 @@ const LiveStreamingRecorderCanvas = react.forwardRef(
       const barHeightScale = appearance?.barHeightScale ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barHeightScale;
       const totalBarWidth = barWidth + barGap;
       if (isRecording || amplitudes.length > 0) {
-        let canvasWidth;
-        if (growWidth) {
-          const requiredWidth = amplitudes.length * totalBarWidth;
-          const calculatedWidth = amplitudes.length > 0 ? requiredWidth : containerWidth;
-          canvasWidth = Math.max(calculatedWidth, prevCanvasWidthRef.current);
-          prevCanvasWidthRef.current = canvasWidth;
-          canvas.style.width = `${canvasWidth}px`;
-        } else {
-          canvasWidth = containerWidth;
-          canvas.style.width = "100%";
-        }
+        const requiredWidth = amplitudes.length * totalBarWidth;
+        const calculatedWidth = amplitudes.length > 0 ? requiredWidth : containerWidth;
+        const canvasWidth = Math.max(calculatedWidth, prevCanvasWidthRef.current);
+        prevCanvasWidthRef.current = canvasWidth;
+        canvas.style.width = `${canvasWidth}px`;
         canvas.width = canvasWidth * dpr;
         canvas.height = containerHeight * dpr;
         ctx.scale(dpr, dpr);
@@ -155,29 +149,16 @@ const LiveStreamingRecorderCanvas = react.forwardRef(
         ctx.fillStyle = barColor;
         const minBarHeight = 2;
         ctx.beginPath();
-        if (growWidth) {
-          for (let i = 0; i < amplitudes.length; i++) {
-            const amplitude = amplitudes[i];
-            const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
-            const x = i * totalBarWidth;
-            const y = (containerHeight - barHeight) / 2;
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
-          }
-        } else {
-          const barsCount = Math.floor(canvasWidth / totalBarWidth);
-          const step = amplitudes.length / barsCount;
-          for (let i = 0; i < barsCount; i++) {
-            const amplitudeIndex = Math.min(Math.floor(i * step), amplitudes.length - 1);
-            const amplitude = amplitudes[amplitudeIndex] || 0;
-            const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
-            const x = i * totalBarWidth;
-            const y = (containerHeight - barHeight) / 2;
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
-          }
+        for (let i = 0; i < amplitudes.length; i++) {
+          const amplitude = amplitudes[i];
+          const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
+          const x = i * totalBarWidth;
+          const y = (containerHeight - barHeight) / 2;
+          ctx.roundRect(x, y, barWidth, barHeight, barRadius);
         }
         ctx.fill();
       }
-    }, [amplitudes, isRecording, appearance, growWidth]);
+    }, [amplitudes, isRecording, appearance]);
     react.useEffect(() => {
       const canvas = canvasRef.current;
       if (!canvas) return;
@@ -204,7 +185,7 @@ const LiveStreamingRecorderCanvas = react.forwardRef(
       if (isRecording && !isPaused) {
         const draw = () => {
           drawWaveform();
-          if (growWidth && containerRef.current) {
+          if (containerRef.current) {
             containerRef.current.scrollLeft = containerRef.current.scrollWidth;
           }
           animationRef.current = requestAnimationFrame(draw);
@@ -218,15 +199,14 @@ const LiveStreamingRecorderCanvas = react.forwardRef(
         };
       }
       drawWaveform();
-    }, [isRecording, isPaused, drawWaveform, growWidth]);
+    }, [isRecording, isPaused, drawWaveform]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "canvas",
       {
         ref: canvasRef,
         className,
         style: {
-          // Set to block in growWidth mode to allow self-determined width
-          display: growWidth ? "block" : void 0,
+          display: "block",
           height: "100%",
           ...style
         },

package/dist/recorder/live-streaming/recorder/recorder-compound.js

@@ -98,7 +98,7 @@ const LiveStreamingRecorderRoot = forwardRef(
   }
 );
 const LiveStreamingRecorderCanvas = forwardRef(
-  function LiveStreamingRecorderCanvas2({ className = "", style, appearance, growWidth = true, ...props }, ref) {
+  function LiveStreamingRecorderCanvas2({ className = "", style, appearance, ...props }, ref) {
     const { amplitudes, isRecording, isPaused } = useLiveStreamingRecorderContext();
     const canvasRef = useRef(null);
     const animationRef = useRef(null);
@@ -135,17 +135,11 @@ const LiveStreamingRecorderCanvas = forwardRef(
       const barHeightScale = appearance?.barHeightScale ?? DEFAULT_WAVEFORM_APPEARANCE.barHeightScale;
       const totalBarWidth = barWidth + barGap;
       if (isRecording || amplitudes.length > 0) {
-        let canvasWidth;
-        if (growWidth) {
-          const requiredWidth = amplitudes.length * totalBarWidth;
-          const calculatedWidth = amplitudes.length > 0 ? requiredWidth : containerWidth;
-          canvasWidth = Math.max(calculatedWidth, prevCanvasWidthRef.current);
-          prevCanvasWidthRef.current = canvasWidth;
-          canvas.style.width = `${canvasWidth}px`;
-        } else {
-          canvasWidth = containerWidth;
-          canvas.style.width = "100%";
-        }
+        const requiredWidth = amplitudes.length * totalBarWidth;
+        const calculatedWidth = amplitudes.length > 0 ? requiredWidth : containerWidth;
+        const canvasWidth = Math.max(calculatedWidth, prevCanvasWidthRef.current);
+        prevCanvasWidthRef.current = canvasWidth;
+        canvas.style.width = `${canvasWidth}px`;
         canvas.width = canvasWidth * dpr;
         canvas.height = containerHeight * dpr;
         ctx.scale(dpr, dpr);
@@ -153,29 +147,16 @@ const LiveStreamingRecorderCanvas = forwardRef(
         ctx.fillStyle = barColor;
         const minBarHeight = 2;
         ctx.beginPath();
-        if (growWidth) {
-          for (let i = 0; i < amplitudes.length; i++) {
-            const amplitude = amplitudes[i];
-            const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
-            const x = i * totalBarWidth;
-            const y = (containerHeight - barHeight) / 2;
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
-          }
-        } else {
-          const barsCount = Math.floor(canvasWidth / totalBarWidth);
-          const step = amplitudes.length / barsCount;
-          for (let i = 0; i < barsCount; i++) {
-            const amplitudeIndex = Math.min(Math.floor(i * step), amplitudes.length - 1);
-            const amplitude = amplitudes[amplitudeIndex] || 0;
-            const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
-            const x = i * totalBarWidth;
-            const y = (containerHeight - barHeight) / 2;
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
-          }
+        for (let i = 0; i < amplitudes.length; i++) {
+          const amplitude = amplitudes[i];
+          const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
+          const x = i * totalBarWidth;
+          const y = (containerHeight - barHeight) / 2;
+          ctx.roundRect(x, y, barWidth, barHeight, barRadius);
         }
         ctx.fill();
       }
-    }, [amplitudes, isRecording, appearance, growWidth]);
+    }, [amplitudes, isRecording, appearance]);
     useEffect(() => {
       const canvas = canvasRef.current;
       if (!canvas) return;
@@ -202,7 +183,7 @@ const LiveStreamingRecorderCanvas = forwardRef(
       if (isRecording && !isPaused) {
         const draw = () => {
           drawWaveform();
-          if (growWidth && containerRef.current) {
+          if (containerRef.current) {
             containerRef.current.scrollLeft = containerRef.current.scrollWidth;
           }
           animationRef.current = requestAnimationFrame(draw);
@@ -216,15 +197,14 @@ const LiveStreamingRecorderCanvas = forwardRef(
         };
       }
       drawWaveform();
-    }, [isRecording, isPaused, drawWaveform, growWidth]);
+    }, [isRecording, isPaused, drawWaveform]);
     return /* @__PURE__ */ jsx(
       "canvas",
       {
         ref: canvasRef,
         className,
         style: {
-          // Set to block in growWidth mode to allow self-determined width
-          display: growWidth ? "block" : void 0,
+          display: "block",
           height: "100%",
           ...style
         },

package/dist/waveform/waveform-renderer.cjs

@@ -90,14 +90,55 @@ const WaveformRenderer = react.forwardRef(function WaveformRenderer2({ peaks, ap
     },
     [onSeek, duration]
   );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (!onSeek || !duration || duration <= 0) return;
+      const SEEK_STEP = 5;
+      const current = currentTime ?? 0;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          onSeek(Math.max(0, current - SEEK_STEP));
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          onSeek(Math.min(duration, current + SEEK_STEP));
+          break;
+        case "Home":
+          e.preventDefault();
+          onSeek(0);
+          break;
+        case "End":
+          e.preventDefault();
+          onSeek(duration);
+          break;
+      }
+    },
+    [onSeek, duration, currentTime]
+  );
+  const formatTimeForScreen = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    if (mins > 0) {
+      return `${mins}분 ${secs}초`;
+    }
+    return `${secs}초`;
+  };
+  const isInteractive = !!onSeek && !!duration && duration > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
       ref: canvasRef,
-      role: "img",
-      "aria-label": "Audio waveform",
+      role: isInteractive ? "slider" : "img",
+      "aria-label": isInteractive ? "오디오 탐색" : "오디오 파형",
+      "aria-valuemin": isInteractive ? 0 : void 0,
+      "aria-valuemax": isInteractive ? Math.floor(duration) : void 0,
+      "aria-valuenow": isInteractive ? Math.floor(currentTime ?? 0) : void 0,
+      "aria-valuetext": isInteractive ? `${formatTimeForScreen(currentTime ?? 0)} / ${formatTimeForScreen(duration)}` : void 0,
+      tabIndex: isInteractive ? 0 : -1,
       onClick: handleClick,
-      style: { cursor: onSeek ? "pointer" : void 0, ...style },
+      onKeyDown: isInteractive ? handleKeyDown : void 0,
+      style: { cursor: isInteractive ? "pointer" : void 0, ...style },
       ...props
     }
   );

package/dist/waveform/waveform-renderer.js

@@ -88,14 +88,55 @@ const WaveformRenderer = forwardRef(function WaveformRenderer2({ peaks, appearan
     },
     [onSeek, duration]
   );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!onSeek || !duration || duration <= 0) return;
+      const SEEK_STEP = 5;
+      const current = currentTime ?? 0;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          onSeek(Math.max(0, current - SEEK_STEP));
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          onSeek(Math.min(duration, current + SEEK_STEP));
+          break;
+        case "Home":
+          e.preventDefault();
+          onSeek(0);
+          break;
+        case "End":
+          e.preventDefault();
+          onSeek(duration);
+          break;
+      }
+    },
+    [onSeek, duration, currentTime]
+  );
+  const formatTimeForScreen = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    if (mins > 0) {
+      return `${mins}분 ${secs}초`;
+    }
+    return `${secs}초`;
+  };
+  const isInteractive = !!onSeek && !!duration && duration > 0;
   return /* @__PURE__ */ jsx(
     "canvas",
     {
       ref: canvasRef,
-      role: "img",
-      "aria-label": "Audio waveform",
+      role: isInteractive ? "slider" : "img",
+      "aria-label": isInteractive ? "오디오 탐색" : "오디오 파형",
+      "aria-valuemin": isInteractive ? 0 : void 0,
+      "aria-valuemax": isInteractive ? Math.floor(duration) : void 0,
+      "aria-valuenow": isInteractive ? Math.floor(currentTime ?? 0) : void 0,
+      "aria-valuetext": isInteractive ? `${formatTimeForScreen(currentTime ?? 0)} / ${formatTimeForScreen(duration)}` : void 0,
+      tabIndex: isInteractive ? 0 : -1,
       onClick: handleClick,
-      style: { cursor: onSeek ? "pointer" : void 0, ...style },
+      onKeyDown: isInteractive ? handleKeyDown : void 0,
+      style: { cursor: isInteractive ? "pointer" : void 0, ...style },
       ...props
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-audio-wavekit",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "CC0-1.0",
   "type": "module",
   "main": "dist/index.cjs",