react-audio-wavekit 0.1.1 → 0.1.3

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/recorder/live-streaming/stack-recorder/stack-recorder-compound.cjs

@@ -106,21 +106,7 @@ const LiveStreamingStackRecorder = react.forwardRef(
       }
       drawWaveform();
     }, [isRecording, isPaused, drawWaveform]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "canvas",
-      {
-        ref: canvasRef,
-        className,
-        style: {
-          width: "100%",
-          height: "100%",
-          ...style
-        },
-        "aria-hidden": "true",
-        tabIndex: -1,
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className, style, "aria-hidden": "true", tabIndex: -1, ...props });
   }
 );
 exports.LiveStreamingStackRecorder = LiveStreamingStackRecorder;

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

@@ -104,21 +104,7 @@ const LiveStreamingStackRecorder = forwardRef(
       }
       drawWaveform();
     }, [isRecording, isPaused, drawWaveform]);
-    return /* @__PURE__ */ jsx(
-      "canvas",
-      {
-        ref: canvasRef,
-        className,
-        style: {
-          width: "100%",
-          height: "100%",
-          ...style
-        },
-        "aria-hidden": "true",
-        tabIndex: -1,
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className, style, "aria-hidden": "true", tabIndex: -1, ...props });
   }
 );
 export {

package/package.json

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