react-audio-wavekit 0.1.0

package/dist/recorder/live-recorder/index.cjs

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const useAudioAnalyser = require("../use-audio-analyser.cjs");
+const LiveRecorder = react.forwardRef(
+  ({
+    mediaRecorder,
+    className = "",
+    appearance,
+    fftSize = 2048,
+    smoothingTimeConstant = 0.8,
+    showIdleState = true,
+    ...props
+  }, ref) => {
+    const canvasRef = react.useRef(null);
+    const animationRef = react.useRef(null);
+    const { audioContextRef, analyserRef, dataArrayRef, bufferLengthRef } = useAudioAnalyser.useAudioAnalyser({
+      mediaRecorder,
+      fftSize,
+      smoothingTimeConstant
+    });
+    react.useImperativeHandle(ref, () => ({
+      getCanvas: () => canvasRef.current,
+      getAudioContext: () => audioContextRef.current,
+      getAnalyser: () => analyserRef.current
+    }));
+    react.useEffect(() => {
+      if (!mediaRecorder || !canvasRef.current) {
+        return;
+      }
+      const canvas = canvasRef.current;
+      const barWidth = appearance?.barWidth ?? 3;
+      const barGap = appearance?.barGap ?? 1;
+      const barRadius = appearance?.barRadius ?? 1.5;
+      const barHeightScale = appearance?.barHeightScale ?? 0.95;
+      const barColor = appearance?.barColor ?? getComputedStyle(canvas).color ?? "#3b82f6";
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      let isPaused = false;
+      const draw = () => {
+        if (isPaused) {
+          animationRef.current = requestAnimationFrame(draw);
+          return;
+        }
+        const analyser = analyserRef.current;
+        const dataArray = dataArrayRef.current;
+        const bufferLength = bufferLengthRef.current;
+        if (!analyser || !dataArray || !ctx) return;
+        const { width, height } = canvas.getBoundingClientRect();
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        ctx.scale(dpr, dpr);
+        analyser.getByteTimeDomainData(dataArray);
+        ctx.clearRect(0, 0, width, height);
+        const totalBarWidth = barWidth + barGap;
+        const numBars = Math.floor((width + barGap) / totalBarWidth);
+        ctx.fillStyle = barColor;
+        for (let i = 0; i < numBars; i++) {
+          const dataIndex = Math.floor(i / numBars * bufferLength);
+          const value = dataArray[dataIndex] || 0;
+          const amplitude = Math.abs(value - 128) / 128;
+          const barHeight = Math.max(2, amplitude * height * barHeightScale);
+          const x = i * totalBarWidth;
+          const y = (height - barHeight) / 2;
+          ctx.beginPath();
+          ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+          ctx.fill();
+        }
+        animationRef.current = requestAnimationFrame(draw);
+      };
+      const handlePause = () => {
+        isPaused = true;
+      };
+      const handleResume = () => {
+        isPaused = false;
+      };
+      mediaRecorder.addEventListener("pause", handlePause);
+      mediaRecorder.addEventListener("resume", handleResume);
+      const timeoutId = setTimeout(() => {
+        draw();
+      }, 50);
+      return () => {
+        clearTimeout(timeoutId);
+        mediaRecorder.removeEventListener("pause", handlePause);
+        mediaRecorder.removeEventListener("resume", handleResume);
+        if (animationRef.current) {
+          cancelAnimationFrame(animationRef.current);
+          animationRef.current = null;
+        }
+      };
+    }, [mediaRecorder, appearance, analyserRef, dataArrayRef, bufferLengthRef]);
+    react.useEffect(() => {
+      if (mediaRecorder || !showIdleState || !canvasRef.current) return;
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const barWidth = appearance?.barWidth ?? 3;
+      const barGap = appearance?.barGap ?? 1;
+      const barRadius = appearance?.barRadius ?? 1.5;
+      const barColor = appearance?.barColor ?? getComputedStyle(canvas).color ?? "#3b82f6";
+      const { width, height } = canvas.getBoundingClientRect();
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = barColor;
+      const minBarHeight = 2;
+      const totalBarWidth = barWidth + barGap;
+      const barCount = Math.floor((width + barGap) / totalBarWidth);
+      for (let i = 0; i < barCount; i++) {
+        const x = i * totalBarWidth;
+        const y = (height - minBarHeight) / 2;
+        ctx.beginPath();
+        ctx.roundRect(x, y, barWidth, minBarHeight, barRadius);
+        ctx.fill();
+      }
+    }, [mediaRecorder, appearance, showIdleState]);
+    return /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: `text-inherit ${className}`, "aria-hidden": "true", tabIndex: -1, ...props });
+  }
+);
+LiveRecorder.displayName = "LiveRecorder";
+exports.LiveRecorder = LiveRecorder;

package/dist/recorder/live-recorder/index.js

@@ -0,0 +1,125 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useEffect } from "react";
+import { useAudioAnalyser } from "../use-audio-analyser.js";
+const LiveRecorder = forwardRef(
+  ({
+    mediaRecorder,
+    className = "",
+    appearance,
+    fftSize = 2048,
+    smoothingTimeConstant = 0.8,
+    showIdleState = true,
+    ...props
+  }, ref) => {
+    const canvasRef = useRef(null);
+    const animationRef = useRef(null);
+    const { audioContextRef, analyserRef, dataArrayRef, bufferLengthRef } = useAudioAnalyser({
+      mediaRecorder,
+      fftSize,
+      smoothingTimeConstant
+    });
+    useImperativeHandle(ref, () => ({
+      getCanvas: () => canvasRef.current,
+      getAudioContext: () => audioContextRef.current,
+      getAnalyser: () => analyserRef.current
+    }));
+    useEffect(() => {
+      if (!mediaRecorder || !canvasRef.current) {
+        return;
+      }
+      const canvas = canvasRef.current;
+      const barWidth = appearance?.barWidth ?? 3;
+      const barGap = appearance?.barGap ?? 1;
+      const barRadius = appearance?.barRadius ?? 1.5;
+      const barHeightScale = appearance?.barHeightScale ?? 0.95;
+      const barColor = appearance?.barColor ?? getComputedStyle(canvas).color ?? "#3b82f6";
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      let isPaused = false;
+      const draw = () => {
+        if (isPaused) {
+          animationRef.current = requestAnimationFrame(draw);
+          return;
+        }
+        const analyser = analyserRef.current;
+        const dataArray = dataArrayRef.current;
+        const bufferLength = bufferLengthRef.current;
+        if (!analyser || !dataArray || !ctx) return;
+        const { width, height } = canvas.getBoundingClientRect();
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        ctx.scale(dpr, dpr);
+        analyser.getByteTimeDomainData(dataArray);
+        ctx.clearRect(0, 0, width, height);
+        const totalBarWidth = barWidth + barGap;
+        const numBars = Math.floor((width + barGap) / totalBarWidth);
+        ctx.fillStyle = barColor;
+        for (let i = 0; i < numBars; i++) {
+          const dataIndex = Math.floor(i / numBars * bufferLength);
+          const value = dataArray[dataIndex] || 0;
+          const amplitude = Math.abs(value - 128) / 128;
+          const barHeight = Math.max(2, amplitude * height * barHeightScale);
+          const x = i * totalBarWidth;
+          const y = (height - barHeight) / 2;
+          ctx.beginPath();
+          ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+          ctx.fill();
+        }
+        animationRef.current = requestAnimationFrame(draw);
+      };
+      const handlePause = () => {
+        isPaused = true;
+      };
+      const handleResume = () => {
+        isPaused = false;
+      };
+      mediaRecorder.addEventListener("pause", handlePause);
+      mediaRecorder.addEventListener("resume", handleResume);
+      const timeoutId = setTimeout(() => {
+        draw();
+      }, 50);
+      return () => {
+        clearTimeout(timeoutId);
+        mediaRecorder.removeEventListener("pause", handlePause);
+        mediaRecorder.removeEventListener("resume", handleResume);
+        if (animationRef.current) {
+          cancelAnimationFrame(animationRef.current);
+          animationRef.current = null;
+        }
+      };
+    }, [mediaRecorder, appearance, analyserRef, dataArrayRef, bufferLengthRef]);
+    useEffect(() => {
+      if (mediaRecorder || !showIdleState || !canvasRef.current) return;
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const barWidth = appearance?.barWidth ?? 3;
+      const barGap = appearance?.barGap ?? 1;
+      const barRadius = appearance?.barRadius ?? 1.5;
+      const barColor = appearance?.barColor ?? getComputedStyle(canvas).color ?? "#3b82f6";
+      const { width, height } = canvas.getBoundingClientRect();
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = barColor;
+      const minBarHeight = 2;
+      const totalBarWidth = barWidth + barGap;
+      const barCount = Math.floor((width + barGap) / totalBarWidth);
+      for (let i = 0; i < barCount; i++) {
+        const x = i * totalBarWidth;
+        const y = (height - minBarHeight) / 2;
+        ctx.beginPath();
+        ctx.roundRect(x, y, barWidth, minBarHeight, barRadius);
+        ctx.fill();
+      }
+    }, [mediaRecorder, appearance, showIdleState]);
+    return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: `text-inherit ${className}`, "aria-hidden": "true", tabIndex: -1, ...props });
+  }
+);
+LiveRecorder.displayName = "LiveRecorder";
+export {
+  LiveRecorder
+};

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

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const overlayscrollbarsReact = require("overlayscrollbars-react");
+const react = require("react");
+const constants = require("../../../constants.cjs");
+const recorderContext = require("./recorder-context.cjs");
+const LiveStreamingRecorderRoot = react.forwardRef(
+  function LiveStreamingRecorderRoot2({
+    children,
+    className = "",
+    style,
+    mediaRecorder,
+    fftSize,
+    smoothingTimeConstant,
+    sampleInterval,
+    appearance,
+    ...props
+  }, ref) {
+    const containerRef = react.useRef(null);
+    const uniqueId = react.useId().replace(/:/g, "");
+    const themeClassName = `os-theme-lsr-${uniqueId}`;
+    const scrollbar = appearance?.scrollbar;
+    const thumbColor = scrollbar?.thumbColor ?? constants.DEFAULT_SCROLLBAR_APPEARANCE.thumbColor;
+    const hidden = scrollbar?.hidden ?? constants.DEFAULT_SCROLLBAR_APPEARANCE.hidden;
+    const [initializeOS, osInstance] = overlayscrollbarsReact.useOverlayScrollbars({
+      options: {
+        overflow: { x: "scroll", y: "hidden" },
+        scrollbars: {
+          theme: themeClassName,
+          visibility: hidden ? "hidden" : "auto",
+          autoHide: "leave",
+          // 마우스가 영역을 벗어나면 숨김 (가장 대중적인 UX)
+          autoHideDelay: 400,
+          dragScroll: true,
+          clickScroll: true
+        }
+      },
+      defer: true
+    });
+    react.useEffect(() => {
+      if (containerRef.current) {
+        initializeOS(containerRef.current);
+      }
+    }, [initializeOS]);
+    react.useEffect(() => {
+      const instance = osInstance();
+      if (instance) {
+        instance.options({
+          scrollbars: {
+            visibility: hidden ? "hidden" : "auto"
+          }
+        });
+      }
+    }, [osInstance, hidden]);
+    react.useEffect(() => {
+      const styleId = `lsr-os-theme-${uniqueId}`;
+      document.getElementById(styleId)?.remove();
+      const styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      styleElement.textContent = `
+        .${themeClassName} {
+          --os-size: 8px;
+          --os-padding-perpendicular: 2px;
+          --os-padding-axis: 2px;
+          --os-track-border-radius: 4px;
+          --os-track-bg: transparent;
+          --os-track-bg-hover: transparent;
+          --os-handle-border-radius: 4px;
+          --os-handle-bg: ${thumbColor};
+          --os-handle-bg-hover: ${thumbColor};
+          --os-handle-bg-active: ${thumbColor};
+          --os-handle-min-size: 30px;
+        }
+      `;
+      document.head.appendChild(styleElement);
+      return () => {
+        document.getElementById(styleId)?.remove();
+      };
+    }, [uniqueId, themeClassName, thumbColor]);
+    react.useEffect(() => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(containerRef.current);
+        } else {
+          ref.current = containerRef.current;
+        }
+      }
+    }, [ref]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      recorderContext.LiveStreamingRecorderProvider,
+      {
+        mediaRecorder,
+        fftSize,
+        smoothingTimeConstant,
+        sampleInterval,
+        children
+      }
+    ) });
+  }
+);
+const LiveStreamingRecorderCanvas = react.forwardRef(
+  function LiveStreamingRecorderCanvas2({ className = "", style, appearance, growWidth = true, ...props }, ref) {
+    const { amplitudes, isRecording, isPaused } = recorderContext.useLiveStreamingRecorderContext();
+    const canvasRef = react.useRef(null);
+    const animationRef = react.useRef(null);
+    const containerSizeRef = react.useRef({ width: 0, height: 0 });
+    const containerRef = react.useRef(null);
+    const prevCanvasWidthRef = react.useRef(0);
+    react.useEffect(() => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(canvasRef.current);
+        } else {
+          ref.current = canvasRef.current;
+        }
+      }
+    }, [ref]);
+    react.useEffect(() => {
+      if (amplitudes.length === 0) {
+        prevCanvasWidthRef.current = 0;
+      }
+    }, [amplitudes.length]);
+    const drawWaveform = react.useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const container = canvas.parentElement;
+      const containerWidth = container?.clientWidth || canvas.clientWidth;
+      const containerHeight = container?.clientHeight || canvas.clientHeight;
+      const barColor = appearance?.barColor ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barColor;
+      const barWidth = appearance?.barWidth ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barWidth;
+      const barGap = appearance?.barGap ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barGap;
+      const barRadius = appearance?.barRadius ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barRadius;
+      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%";
+        }
+        canvas.width = canvasWidth * dpr;
+        canvas.height = containerHeight * dpr;
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, canvasWidth, containerHeight);
+        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);
+          }
+        }
+        ctx.fill();
+      }
+    }, [amplitudes, isRecording, appearance, growWidth]);
+    react.useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const osContent = canvas.parentElement;
+      const osViewport = osContent?.parentElement;
+      if (osViewport?.classList.contains("os-viewport")) {
+        containerRef.current = osViewport;
+      } else {
+        containerRef.current = canvas.parentElement;
+      }
+      const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        containerSizeRef.current = { width, height };
+        if (!isRecording) {
+          drawWaveform();
+        }
+      });
+      resizeObserver.observe(canvas);
+      return () => resizeObserver.disconnect();
+    }, [isRecording, drawWaveform]);
+    react.useEffect(() => {
+      if (isRecording && !isPaused) {
+        const draw = () => {
+          drawWaveform();
+          if (growWidth && containerRef.current) {
+            containerRef.current.scrollLeft = containerRef.current.scrollWidth;
+          }
+          animationRef.current = requestAnimationFrame(draw);
+        };
+        draw();
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+          }
+        };
+      }
+      drawWaveform();
+    }, [isRecording, isPaused, drawWaveform, growWidth]);
+    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,
+          height: "100%",
+          ...style
+        },
+        "aria-hidden": "true",
+        tabIndex: -1,
+        ...props
+      }
+    );
+  }
+);
+const LiveStreamingRecorder = Object.assign(LiveStreamingRecorderRoot, {
+  Root: LiveStreamingRecorderRoot,
+  Canvas: LiveStreamingRecorderCanvas
+});
+exports.LiveStreamingRecorder = LiveStreamingRecorder;