From 1ac3768468d871c43c13c7f11ef3244e6858a423 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 29 Nov 2024 21:05:55 +0800
Subject: [PATCH] fix: speech size 0, do not create url

---
 .../speech-content/audio-player.tsx           |  29 ++++++++++++------
 .../speech-content/hooks/use-wavesurfer.ts    |  17 ++++++++++
 src/components/speech-content/ih.mp4          | Bin 32772 -> 0 bytes
 src/components/speech-content/speech-item.tsx |  21 +++++++++++--
 .../speech-content/styles/index.less          |   1 +
 src/pages/playground/apis/index.ts            |   2 +-
 .../playground/components/ground-stt.tsx      |  12 ++++++--
 .../playground/components/ground-tts.tsx      |  13 ++++++--
 8 files changed, 77 insertions(+), 18 deletions(-)
 delete mode 100644 src/components/speech-content/ih.mp4

diff --git a/src/components/speech-content/audio-player.tsx b/src/components/speech-content/audio-player.tsx
index 685c37c0..cef16354 100644
--- a/src/components/speech-content/audio-player.tsx
+++ b/src/components/speech-content/audio-player.tsx
@@ -13,24 +13,35 @@ interface AudioPlayerProps {
   ref?: any;
   height?: number;
   width?: number;
+  onReady?: () => void;
+  onClick?: (value: number) => void;
 }
 
 const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
   const { autoplay, audioUrl, speed = 1, ...rest } = props;
   const container = useRef<HTMLDivElement>(null);
-  const { createWavesurfer, play, pause, destroyWavesurfer, wavesurfer } =
-    useWavesurfer({
-      container,
-      autoplay: autoplay,
-      url: audioUrl,
-      audioRate: speed,
-      ...rest
-    });
+  const {
+    createWavesurfer,
+    play,
+    pause,
+    duration,
+    destroyWavesurfer,
+    wavesurfer
+  } = useWavesurfer({
+    container,
+    autoplay: autoplay,
+    url: audioUrl,
+    audioRate: speed,
+    onReady: props.onReady,
+    onClick: props.onClick,
+    ...rest
+  });
 
   useImperativeHandle(ref, () => {
     return {
       play,
-      pause
+      pause,
+      duration
     };
   });
 
diff --git a/src/components/speech-content/hooks/use-wavesurfer.ts b/src/components/speech-content/hooks/use-wavesurfer.ts
index 90ba007b..1519e942 100644
--- a/src/components/speech-content/hooks/use-wavesurfer.ts
+++ b/src/components/speech-content/hooks/use-wavesurfer.ts
@@ -11,6 +11,8 @@ interface Options {
   barRadius?: number;
   autoplay?: boolean;
   audioRate?: number;
+  onReady?: () => void;
+  onClick: (value: any) => void;
 }
 const useWavesurfer = (options: Options) => {
   const wavesurfer = useRef<WaveSurfer | null>(null);
@@ -37,6 +39,13 @@ const useWavesurfer = (options: Options) => {
       cursorWidth: 0,
       ...rest
     });
+    wavesurfer.current?.on('ready', () => {
+      options.onReady?.();
+    });
+
+    wavesurfer.current?.on('click', (value) => {
+      options.onClick?.(value);
+    });
   };
 
   const destroyWavesurfer = () => {
@@ -51,6 +60,13 @@ const useWavesurfer = (options: Options) => {
     }
   };
 
+  const duration = () => {
+    if (wavesurfer.current) {
+      return wavesurfer.current.getDuration();
+    }
+    return 0;
+  };
+
   const pause = () => {
     if (wavesurfer.current) {
       wavesurfer.current.pause();
@@ -62,6 +78,7 @@ const useWavesurfer = (options: Options) => {
     play,
     pause,
     wavesurfer,
+    duration,
     destroyWavesurfer
   };
 };
diff --git a/src/components/speech-content/ih.mp4 b/src/components/speech-content/ih.mp4
deleted file mode 100644
index 7e684ebd4ed1b51922deb380aef612909499b0c8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 32772
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
NU?*TF@P7w^{{=gz8IJ$}

diff --git a/src/components/speech-content/speech-item.tsx b/src/components/speech-content/speech-item.tsx
index 35e3021e..7284f894 100644
--- a/src/components/speech-content/speech-item.tsx
+++ b/src/components/speech-content/speech-item.tsx
@@ -1,4 +1,5 @@
 import IconFont from '@/components/icon-font';
+import { formatTime } from '@/utils/index';
 import {
   DownloadOutlined,
   PauseCircleOutlined,
@@ -37,7 +38,9 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
   const intl = useIntl();
   const [collapsed, setCollapsed] = useState(false);
   const [isPlay, setIsPlay] = useState(false);
-  const ref = useRef<HTMLAudioElement>(null);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const ref = useRef<any>(null);
 
   const handlePlay = () => {
     if (isPlay) {
@@ -53,6 +56,15 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
     setCollapsed(!collapsed);
   };
 
+  const handleReay = () => {
+    const duration = ref.current?.duration?.();
+    setDuration(duration < 1 ? 1 : duration);
+  };
+
+  const handleOnClick = (value: number) => {
+    console.log('current:', value);
+  };
+
   const onDownload = () => {
     const url = props.audioUrl || '';
     const filename = `audio-${dayjs().format('YYYYMMDDHHmmss')}.${props.format}`;
@@ -75,6 +87,8 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
           <AudioPlayer
             {...props}
             audioUrl={props.audioUrl}
+            onReady={handleReay}
+            onClick={handleOnClick}
             ref={ref}
           ></AudioPlayer>
         </div>
@@ -82,9 +96,8 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
       <div className="speech-actions">
         <span className="tags">
           <span className="item">{props.format}</span>
-          {/* <span className="item splitor"></span>
-          <span className="item">{props.speed}x</span> */}
         </span>
+        <span className="duration">{formatTime(duration)}</span>
         <div className="actions">
           <Tooltip
             title={
@@ -94,6 +107,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
             }
           >
             <Button
+              disabled={!props.audioUrl || duration === 0}
               onClick={handlePlay}
               icon={isPlay ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
               type="text"
@@ -106,6 +120,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
             })}
           >
             <Button
+              disabled={!props.audioUrl || duration === 0}
               onClick={onDownload}
               icon={<DownloadOutlined />}
               type="text"
diff --git a/src/components/speech-content/styles/index.less b/src/components/speech-content/styles/index.less
index 928e26c7..86578f03 100644
--- a/src/components/speech-content/styles/index.less
+++ b/src/components/speech-content/styles/index.less
@@ -53,6 +53,7 @@
 .speech-actions {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-top: 10px;
   padding-left: 80px;
 
diff --git a/src/pages/playground/apis/index.ts b/src/pages/playground/apis/index.ts
index 0199dc08..f55bcd73 100644
--- a/src/pages/playground/apis/index.ts
+++ b/src/pages/playground/apis/index.ts
@@ -98,7 +98,7 @@ export const textToSpeech = async (params: any, options?: any) => {
   }
 
   const audioBlob = await res.blob();
-  const audioUrl = URL.createObjectURL(audioBlob);
+  const audioUrl = audioBlob.size > 0 ? URL.createObjectURL(audioBlob) : '';
   return {
     url: audioUrl,
     type: audioBlob.type
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx
index fbc99b4b..62b450bd 100644
--- a/src/pages/playground/components/ground-stt.tsx
+++ b/src/pages/playground/components/ground-stt.tsx
@@ -119,7 +119,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
           errorMessage:
             result?.data?.error?.message ||
             result?.data?.message ||
-            result.error.detail ||
+            result?.detail ||
             ''
         });
         return;
@@ -130,8 +130,16 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
           uid: messageId.current
         }
       ]);
-    } catch (error) {
+    } catch (error: any) {
       console.log('error:', error);
+      const res = error?.response?.data;
+      if (res.error) {
+        setTokenResult({
+          error: true,
+          errorMessage:
+            res?.error?.message || res?.data?.error || res?.error?.detail || ''
+        });
+      }
     } finally {
       setLoading(false);
       setIsRecording(false);
diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx
index b4fd974d..de3f0661 100644
--- a/src/pages/playground/components/ground-tts.tsx
+++ b/src/pages/playground/components/ground-tts.tsx
@@ -130,7 +130,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
           errorMessage:
             res?.data?.error?.message ||
             res?.data?.error ||
-            res.error?.detail ||
+            res?.error?.detail ||
             ''
         });
         setMessageList([]);
@@ -148,8 +148,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
           audioUrl: res.url
         }
       ]);
-    } catch (error) {
-      console.log('error:', error);
+    } catch (error: any) {
+      const res = error?.response?.data;
+      if (res.error) {
+        setTokenResult({
+          error: true,
+          errorMessage:
+            res?.error?.message || res?.data?.error || res?.error?.detail || ''
+        });
+      }
     } finally {
       setLoading(false);
     }