@wq-hook/volcano-react 1.0.6 → 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;
@@ -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;
@@ -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,
@@ -2017,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",
@@ -2037,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;
@@ -2067,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) {
@@ -2083,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();
@@ -2101,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;
       }
     }
   };
@@ -2236,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,
@@ -1971,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",
@@ -1993,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;
@@ -2023,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) {
@@ -2039,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();
@@ -2057,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;
       }
     }
   };
@@ -2192,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.6",
+  "version": "1.0.7",
   "description": "Volcano Engine ASR & TTS React Hooks",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",