@wq-hook/volcano-react 1.0.5 → 1.0.7

package/dist/index.d.mts

@@ -247,8 +247,12 @@ interface UseMessageTTSReturn {
     isSynthesizing: boolean;
     /** 错误信息 */
     error: string | null;
-    /** 播放进度（0-1） */
+    /** 播放进度（0-100） */
     progress: number;
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 音频总时长（秒） */
+    duration: number;
     /** 播放文本方法 */
     play: (text: string) => Promise<void>;
     /** 暂停播放方法 */
@@ -348,6 +352,10 @@ interface UseStreamTTSReturn {
     streamText: string;
     /** 播放进度（0-100） */
     progress: number;
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 音频总时长（秒） */
+    duration: number;
     /** 建立 WebSocket 连接 */
     connect: () => Promise<string>;
     /** 接收流式文本块 */
@@ -395,6 +403,10 @@ interface StreamPlaybackState {
     isPaused: boolean;
     isSynthesizing: boolean;
     progress: number;
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 音频总时长（秒） */
+    duration: number;
     visualizationData: VisualizationData;
     error: string | null;
     isConnected: boolean;
@@ -678,10 +690,10 @@ interface AudioWaveVisualizerProps {
     color?: string | [string, string];
     /** 波形条数 */
     bars?: number;
-    /** 高度（px） */
-    height?: number;
-    /** 宽度（px） */
-    width?: number;
+    /** 高度：数字（像素）或 CSS 字符串（如 "60px"、"100%"、"5rem"） */
+    height?: number | string;
+    /** 宽度：数字（像素）或 CSS 字符串（如 "100%"、"80%"、"300px"） */
+    width?: number | string;
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */
@@ -693,6 +705,10 @@ declare const AudioWaveVisualizer: React$1.FC<AudioWaveVisualizerProps>;
 interface AudioProgressBarProps {
     /** 播放进度（0-100） */
     progress: number;
+    /** 当前播放时间（秒），传入后将显示时间格式 */
+    currentTime?: number;
+    /** 音频总时长（秒），传入后将显示时间格式 */
+    duration?: number;
     /** 宽度（px 或百分比） */
     width?: number | string;
     /** 高度（px） */

package/dist/index.d.ts

@@ -247,8 +247,12 @@ interface UseMessageTTSReturn {
     isSynthesizing: boolean;
     /** 错误信息 */
     error: string | null;
-    /** 播放进度（0-1） */
+    /** 播放进度（0-100） */
     progress: number;
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 音频总时长（秒） */
+    duration: number;
     /** 播放文本方法 */
     play: (text: string) => Promise<void>;
     /** 暂停播放方法 */
@@ -348,6 +352,10 @@ interface UseStreamTTSReturn {
     streamText: string;
     /** 播放进度（0-100） */
     progress: number;
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 音频总时长（秒） */
+    duration: number;
     /** 建立 WebSocket 连接 */
     connect: () => Promise<string>;
     /** 接收流式文本块 */
@@ -395,6 +403,10 @@ interface StreamPlaybackState {
     isPaused: boolean;
     isSynthesizing: boolean;
     progress: number;
+    /** 当前播放时间（秒） */
+    currentTime: number;
+    /** 音频总时长（秒） */
+    duration: number;
     visualizationData: VisualizationData;
     error: string | null;
     isConnected: boolean;
@@ -678,10 +690,10 @@ interface AudioWaveVisualizerProps {
     color?: string | [string, string];
     /** 波形条数 */
     bars?: number;
-    /** 高度（px） */
-    height?: number;
-    /** 宽度（px） */
-    width?: number;
+    /** 高度：数字（像素）或 CSS 字符串（如 "60px"、"100%"、"5rem"） */
+    height?: number | string;
+    /** 宽度：数字（像素）或 CSS 字符串（如 "100%"、"80%"、"300px"） */
+    width?: number | string;
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */
@@ -693,6 +705,10 @@ declare const AudioWaveVisualizer: React$1.FC<AudioWaveVisualizerProps>;
 interface AudioProgressBarProps {
     /** 播放进度（0-100） */
     progress: number;
+    /** 当前播放时间（秒），传入后将显示时间格式 */
+    currentTime?: number;
+    /** 音频总时长（秒），传入后将显示时间格式 */
+    duration?: number;
     /** 宽度（px 或百分比） */
     width?: number | string;
     /** 高度（px） */

package/dist/index.js

@@ -804,6 +804,8 @@ var PlaybackSession = class {
       isPaused: false,
       isSynthesizing: false,
       progress: 0,
+      currentTime: 0,
+      duration: 0,
       visualizationData: {
         frequencyData: new Uint8Array(0),
         timeDomainData: new Uint8Array(0)
@@ -907,7 +909,11 @@ var PlaybackSession = class {
       }
       if (isFinite(duration) && duration > 0) {
         const progress = this.audio.currentTime / duration * 100;
-        this.updateState({ progress });
+        this.updateState({
+          progress,
+          currentTime: this.audio.currentTime,
+          duration
+        });
       }
     };
   }
@@ -1429,6 +1435,8 @@ function useMessageTTS({
     isPaused: false,
     isSynthesizing: false,
     progress: 0,
+    currentTime: 0,
+    duration: 0,
     visualizationData: {
       frequencyData: new Uint8Array(0),
       timeDomainData: new Uint8Array(0)
@@ -1679,6 +1687,8 @@ function useMessageTTS({
     isPaused: state.isPaused,
     isSynthesizing: state.isSynthesizing,
     progress: state.progress,
+    currentTime: state.currentTime,
+    duration: state.duration,
     error,
     play,
     pause,
@@ -1717,6 +1727,8 @@ function useStreamTTS({
     isPaused: false,
     isSynthesizing: false,
     progress: 0,
+    currentTime: 0,
+    duration: 0,
     visualizationData: {
       frequencyData: new Uint8Array(0),
       timeDomainData: new Uint8Array(0)
@@ -1835,6 +1847,8 @@ function useStreamTTS({
     error: state.error,
     streamText,
     progress: state.progress,
+    currentTime: state.currentTime,
+    duration: state.duration,
     connect,
     onMessage,
     finishStream,
@@ -1865,10 +1879,40 @@ var AudioWaveVisualizer = ({
   styleObj
 }) => {
   const canvasRef = (0, import_react5.useRef)(null);
+  const containerRef = (0, import_react5.useRef)(null);
   const requestRef = (0, import_react5.useRef)(null);
+  const isWidthResponsive = typeof width === "string";
+  const isHeightResponsive = typeof height === "string";
+  const [canvasWidth, setCanvasWidth] = (0, import_react5.useState)(() => {
+    return typeof width === "number" ? width : 200;
+  });
+  const [canvasHeight, setCanvasHeight] = (0, import_react5.useState)(() => {
+    return typeof height === "number" ? height : 60;
+  });
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  (0, import_react5.useEffect)(() => {
+    if (!containerRef.current) return;
+    if (!isWidthResponsive && !isHeightResponsive) return;
+    const container = containerRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width: containerWidth, height: containerHeight } = entry.contentRect;
+        if (isWidthResponsive) {
+          setCanvasWidth(Math.floor(containerWidth * dpr));
+        }
+        if (isHeightResponsive) {
+          setCanvasHeight(Math.floor(containerHeight * dpr));
+        }
+      }
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isWidthResponsive, isHeightResponsive, dpr]);
   const progressBackground = Array.isArray(color) ? `linear-gradient(90deg, ${color[0]}, ${color[1]})` : color;
   const textColor = Array.isArray(color) ? color[0] : color;
-  const draw = () => {
+  const draw = (0, import_react5.useCallback)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -1930,7 +1974,7 @@ var AudioWaveVisualizer = ({
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
     }
-  };
+  }, [isPlaying, isPaused, frequencyData, timeDomainData, style, color, bars]);
   (0, import_react5.useEffect)(() => {
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
@@ -1947,26 +1991,36 @@ var AudioWaveVisualizer = ({
     frequencyData,
     timeDomainData,
     style,
-    color
+    color,
+    draw
   ]);
+  const actualCanvasWidth = isWidthResponsive ? canvasWidth : width;
+  const actualCanvasHeight = isHeightResponsive ? canvasHeight : height;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      ref: containerRef,
       className,
       style: {
         display: "inline-flex",
         flexDirection: "column",
         gap: "4px",
-        width,
+        width: isWidthResponsive ? width : width,
+        height: isHeightResponsive ? height : height,
         ...styleObj
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "canvas",
         {
           ref: canvasRef,
-          width,
-          height,
-          style: { display: "block" }
+          width: actualCanvasWidth,
+          height: actualCanvasHeight,
+          style: {
+            display: "block",
+            // 响应式模式下，CSS 尺寸为 100%；固定模式下使用像素值
+            width: isWidthResponsive ? "100%" : actualCanvasWidth,
+            height: isHeightResponsive ? "100%" : actualCanvasHeight
+          }
         }
       )
     }
@@ -1977,8 +2031,20 @@ var AudioWaveVisualizer_default = AudioWaveVisualizer;
 // src/components/AudioProgressBar.tsx
 var import_react6 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var formatTime = (seconds) => {
+  if (!isFinite(seconds) || seconds < 0) return "0:00";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${secs.toString().padStart(2, "0")}`;
+};
 var AudioProgressBar = ({
   progress,
+  currentTime,
+  duration,
   width = "100%",
   height = 6,
   color = "#8b5cf6",
@@ -1997,6 +2063,16 @@ var AudioProgressBar = ({
   const isDragging = (0, import_react6.useRef)(false);
   const isHovering = (0, import_react6.useRef)(false);
   const isTouch = (0, import_react6.useRef)(false);
+  const useTimeFormat = (0, import_react6.useMemo)(() => {
+    return currentTime !== void 0 && duration !== void 0 && isFinite(currentTime) && isFinite(duration) && duration > 0;
+  }, [currentTime, duration]);
+  const getDisplayText = (percentage) => {
+    if (useTimeFormat && currentTime !== void 0 && duration !== void 0) {
+      const timeFromPercentage = percentage / 100 * duration;
+      return `${formatTime(timeFromPercentage)} / ${formatTime(duration)}`;
+    }
+    return `${Math.round(percentage)}%`;
+  };
   (0, import_react6.useEffect)(() => {
     const match = window.matchMedia("(pointer: coarse)");
     isTouch.current = match.matches;
@@ -2027,9 +2103,9 @@ var AudioProgressBar = ({
       thumbRef.current.style.left = `${next}%`;
     }
     if (showText && progressTextRef.current) {
-      const rounded = Math.round(next);
-      if (progressTextRef.current.textContent !== `${rounded}%`) {
-        progressTextRef.current.textContent = `${rounded}%`;
+      const newText = getDisplayText(next);
+      if (progressTextRef.current.textContent !== newText) {
+        progressTextRef.current.textContent = newText;
       }
     }
     if (Math.abs(target - next) >= 0.1) {
@@ -2043,7 +2119,7 @@ var AudioProgressBar = ({
         cancelAnimationFrame(requestRef.current);
       }
     };
-  }, [progress, showText]);
+  }, [progress, showText, currentTime, duration]);
   const calculateProgress = (clientX) => {
     if (!containerRef.current) return 0;
     const rect = containerRef.current.getBoundingClientRect();
@@ -2061,9 +2137,9 @@ var AudioProgressBar = ({
       thumbRef.current.style.left = `${percentage}%`;
     }
     if (showText && progressTextRef.current) {
-      const rounded = Math.round(percentage);
-      if (progressTextRef.current.textContent !== `${rounded}%`) {
-        progressTextRef.current.textContent = `${rounded}%`;
+      const newText = getDisplayText(percentage);
+      if (progressTextRef.current.textContent !== newText) {
+        progressTextRef.current.textContent = newText;
       }
     }
   };
@@ -2196,22 +2272,19 @@ var AudioProgressBar = ({
             ]
           }
         ),
-        showText && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        showText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
             ref: progressTextRef,
             style: {
               fontSize: "12px",
               color: textColor,
-              minWidth: "32px",
+              minWidth: useTimeFormat ? "80px" : "32px",
               textAlign: "right",
               fontFamily: "monospace",
               lineHeight: 1
             },
-            children: [
-              Math.round(displayedProgress.current),
-              "%"
-            ]
+            children: getDisplayText(displayedProgress.current)
           }
         )
       ]

package/dist/index.mjs

@@ -760,6 +760,8 @@ var PlaybackSession = class {
       isPaused: false,
       isSynthesizing: false,
       progress: 0,
+      currentTime: 0,
+      duration: 0,
       visualizationData: {
         frequencyData: new Uint8Array(0),
         timeDomainData: new Uint8Array(0)
@@ -863,7 +865,11 @@ var PlaybackSession = class {
       }
       if (isFinite(duration) && duration > 0) {
         const progress = this.audio.currentTime / duration * 100;
-        this.updateState({ progress });
+        this.updateState({
+          progress,
+          currentTime: this.audio.currentTime,
+          duration
+        });
       }
     };
   }
@@ -1385,6 +1391,8 @@ function useMessageTTS({
     isPaused: false,
     isSynthesizing: false,
     progress: 0,
+    currentTime: 0,
+    duration: 0,
     visualizationData: {
       frequencyData: new Uint8Array(0),
       timeDomainData: new Uint8Array(0)
@@ -1635,6 +1643,8 @@ function useMessageTTS({
     isPaused: state.isPaused,
     isSynthesizing: state.isSynthesizing,
     progress: state.progress,
+    currentTime: state.currentTime,
+    duration: state.duration,
     error,
     play,
     pause,
@@ -1673,6 +1683,8 @@ function useStreamTTS({
     isPaused: false,
     isSynthesizing: false,
     progress: 0,
+    currentTime: 0,
+    duration: 0,
     visualizationData: {
       frequencyData: new Uint8Array(0),
       timeDomainData: new Uint8Array(0)
@@ -1791,6 +1803,8 @@ function useStreamTTS({
     error: state.error,
     streamText,
     progress: state.progress,
+    currentTime: state.currentTime,
+    duration: state.duration,
     connect,
     onMessage,
     finishStream,
@@ -1805,7 +1819,7 @@ function useStreamTTS({
 }
 
 // src/components/AudioWaveVisualizer.tsx
-import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState5, useCallback as useCallback5 } from "react";
 import { jsx } from "react/jsx-runtime";
 var AudioWaveVisualizer = ({
   isPlaying,
@@ -1821,10 +1835,40 @@ var AudioWaveVisualizer = ({
   styleObj
 }) => {
   const canvasRef = useRef5(null);
+  const containerRef = useRef5(null);
   const requestRef = useRef5(null);
+  const isWidthResponsive = typeof width === "string";
+  const isHeightResponsive = typeof height === "string";
+  const [canvasWidth, setCanvasWidth] = useState5(() => {
+    return typeof width === "number" ? width : 200;
+  });
+  const [canvasHeight, setCanvasHeight] = useState5(() => {
+    return typeof height === "number" ? height : 60;
+  });
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  useEffect4(() => {
+    if (!containerRef.current) return;
+    if (!isWidthResponsive && !isHeightResponsive) return;
+    const container = containerRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width: containerWidth, height: containerHeight } = entry.contentRect;
+        if (isWidthResponsive) {
+          setCanvasWidth(Math.floor(containerWidth * dpr));
+        }
+        if (isHeightResponsive) {
+          setCanvasHeight(Math.floor(containerHeight * dpr));
+        }
+      }
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isWidthResponsive, isHeightResponsive, dpr]);
   const progressBackground = Array.isArray(color) ? `linear-gradient(90deg, ${color[0]}, ${color[1]})` : color;
   const textColor = Array.isArray(color) ? color[0] : color;
-  const draw = () => {
+  const draw = useCallback5(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -1886,7 +1930,7 @@ var AudioWaveVisualizer = ({
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
     }
-  };
+  }, [isPlaying, isPaused, frequencyData, timeDomainData, style, color, bars]);
   useEffect4(() => {
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
@@ -1903,26 +1947,36 @@ var AudioWaveVisualizer = ({
     frequencyData,
     timeDomainData,
     style,
-    color
+    color,
+    draw
   ]);
+  const actualCanvasWidth = isWidthResponsive ? canvasWidth : width;
+  const actualCanvasHeight = isHeightResponsive ? canvasHeight : height;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: containerRef,
       className,
       style: {
         display: "inline-flex",
         flexDirection: "column",
         gap: "4px",
-        width,
+        width: isWidthResponsive ? width : width,
+        height: isHeightResponsive ? height : height,
         ...styleObj
       },
       children: /* @__PURE__ */ jsx(
         "canvas",
         {
           ref: canvasRef,
-          width,
-          height,
-          style: { display: "block" }
+          width: actualCanvasWidth,
+          height: actualCanvasHeight,
+          style: {
+            display: "block",
+            // 响应式模式下，CSS 尺寸为 100%；固定模式下使用像素值
+            width: isWidthResponsive ? "100%" : actualCanvasWidth,
+            height: isHeightResponsive ? "100%" : actualCanvasHeight
+          }
         }
       )
     }
@@ -1931,10 +1985,22 @@ var AudioWaveVisualizer = ({
 var AudioWaveVisualizer_default = AudioWaveVisualizer;
 
 // src/components/AudioProgressBar.tsx
-import { useEffect as useEffect5, useRef as useRef6 } from "react";
+import { useEffect as useEffect5, useRef as useRef6, useMemo } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var formatTime = (seconds) => {
+  if (!isFinite(seconds) || seconds < 0) return "0:00";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${secs.toString().padStart(2, "0")}`;
+};
 var AudioProgressBar = ({
   progress,
+  currentTime,
+  duration,
   width = "100%",
   height = 6,
   color = "#8b5cf6",
@@ -1953,6 +2019,16 @@ var AudioProgressBar = ({
   const isDragging = useRef6(false);
   const isHovering = useRef6(false);
   const isTouch = useRef6(false);
+  const useTimeFormat = useMemo(() => {
+    return currentTime !== void 0 && duration !== void 0 && isFinite(currentTime) && isFinite(duration) && duration > 0;
+  }, [currentTime, duration]);
+  const getDisplayText = (percentage) => {
+    if (useTimeFormat && currentTime !== void 0 && duration !== void 0) {
+      const timeFromPercentage = percentage / 100 * duration;
+      return `${formatTime(timeFromPercentage)} / ${formatTime(duration)}`;
+    }
+    return `${Math.round(percentage)}%`;
+  };
   useEffect5(() => {
     const match = window.matchMedia("(pointer: coarse)");
     isTouch.current = match.matches;
@@ -1983,9 +2059,9 @@ var AudioProgressBar = ({
       thumbRef.current.style.left = `${next}%`;
     }
     if (showText && progressTextRef.current) {
-      const rounded = Math.round(next);
-      if (progressTextRef.current.textContent !== `${rounded}%`) {
-        progressTextRef.current.textContent = `${rounded}%`;
+      const newText = getDisplayText(next);
+      if (progressTextRef.current.textContent !== newText) {
+        progressTextRef.current.textContent = newText;
       }
     }
     if (Math.abs(target - next) >= 0.1) {
@@ -1999,7 +2075,7 @@ var AudioProgressBar = ({
         cancelAnimationFrame(requestRef.current);
       }
     };
-  }, [progress, showText]);
+  }, [progress, showText, currentTime, duration]);
   const calculateProgress = (clientX) => {
     if (!containerRef.current) return 0;
     const rect = containerRef.current.getBoundingClientRect();
@@ -2017,9 +2093,9 @@ var AudioProgressBar = ({
       thumbRef.current.style.left = `${percentage}%`;
     }
     if (showText && progressTextRef.current) {
-      const rounded = Math.round(percentage);
-      if (progressTextRef.current.textContent !== `${rounded}%`) {
-        progressTextRef.current.textContent = `${rounded}%`;
+      const newText = getDisplayText(percentage);
+      if (progressTextRef.current.textContent !== newText) {
+        progressTextRef.current.textContent = newText;
       }
     }
   };
@@ -2152,22 +2228,19 @@ var AudioProgressBar = ({
             ]
           }
         ),
-        showText && /* @__PURE__ */ jsxs(
+        showText && /* @__PURE__ */ jsx2(
           "span",
           {
             ref: progressTextRef,
             style: {
               fontSize: "12px",
               color: textColor,
-              minWidth: "32px",
+              minWidth: useTimeFormat ? "80px" : "32px",
               textAlign: "right",
               fontFamily: "monospace",
               lineHeight: 1
             },
-            children: [
-              Math.round(displayedProgress.current),
-              "%"
-            ]
+            children: getDisplayText(displayedProgress.current)
           }
         )
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wq-hook/volcano-react",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Volcano Engine ASR & TTS React Hooks",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",