fix(style): image size cache'

src/components/speech-content/audio-player.tsx

@@ -106,6 +106,12 @@ const AudioPlayer: React.FC<
     }
   };
 
+  const seekTo = (value: number) => {
+    if (wavesurfer.current) {
+      wavesurfer.current.seekTo(value);
+    }
+  };
+
   const duration = () => {
     if (wavesurfer.current) {
       return wavesurfer.current.getDuration();
@@ -123,7 +129,8 @@ const AudioPlayer: React.FC<
     return {
       play,
       pause,
-      duration
+      duration,
+      seekTo
     };
   });
 
@@ -135,7 +142,13 @@ const AudioPlayer: React.FC<
       destroyWavesurfer();
     };
   }, [audioUrl, container.current]);
-  return <div ref={container} className="audio-container"></div>;
+  return (
+    <div
+      ref={container}
+      className="audio-container"
+      style={{ display: 'none' }}
+    ></div>
+  );
 });
 
 export default React.memo(AudioPlayer);

src/components/speech-content/speech-item.tsx

@@ -1,3 +1,4 @@
+import AudioAnimation from '@/components/audio-animation';
 import useResizeObserver from '@/components/logs-viewer/use-size';
 import {
   DownloadOutlined,
@@ -5,12 +6,13 @@ import {
   PlayCircleOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Tooltip } from 'antd';
+import { Button, Slider, Tooltip } from 'antd';
 import dayjs from 'dayjs';
-import _ from 'lodash';
+import _, { throttle } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import AudioPlayer from './audio-player';
 import './styles/index.less';
+import './styles/slider-progress.less';
 
 const audioFormat = {
   'audio/mpeg': 'mp3',
@@ -72,10 +74,18 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
     setIsPlay(false);
   }, []);
 
-  const handleOnAudioprocess = useCallback((current: number) => {
-    setCurrentTime(() => current);
-    console.log('current:', current, duration);
-  }, []);
+  const throttleUpdateCurrentTime = throttle((current: number) => {
+    setCurrentTime(current);
+  }, 100);
+
+  const handleOnAudioprocess = useCallback(
+    (current: number) => {
+      console.log('current:', current);
+      // setCurrentTime(() => current);
+      throttleUpdateCurrentTime(current);
+    },
+    [throttleUpdateCurrentTime]
+  );
 
   const handleReay = useCallback((duration: number) => {
     setIsPlay(props.autoplay);
@@ -87,13 +97,17 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
   }, []);
 
   const handleAnimationResize = useCallback((size: any) => {
-    console.log('size:=======', size);
     setAnimationSize({
       width: size.width,
       height: size.height
     });
   }, []);
 
+  const handleSliderChange = (value: number) => {
+    ref.current?.seekTo(value);
+    setCurrentTime(value);
+  };
+
   useEffect(() => {
     console.log('width:', size);
   }, [size]);
@@ -112,7 +126,6 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
   return (
     <div>
       <div className="speech-item">
-        <div style={{}}></div>
         <div
           className="wrapper"
           style={{ height: 82, width: '100%' }}
@@ -128,22 +141,31 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
             onAudioprocess={handleOnAudioprocess}
             ref={ref}
           ></AudioPlayer>
-          {/* {!isPlay && (
+          {isPlay && (
             <AudioAnimation
               maxBarCount={180}
+              fixedHeight={true}
               height={82}
               width={800}
               analyserData={audioChunks}
             ></AudioAnimation>
-          )} */}
+          )}
         </div>
       </div>
-      {/* <Slider value={currentTime} max={duration} step={0.01}></Slider> */}
+      <Slider
+        className="slider-progress"
+        value={currentTime}
+        max={duration}
+        step={0.01}
+        onChange={handleSliderChange}
+      ></Slider>
       <div className="speech-actions">
         <span className="tags">
           <span className="item">{props.format}</span>
         </span>
-        <span className="duration">{_.round(duration, 2)}</span>
+        <span className="duration">
+          {_.round(currentTime, 2) || _.round(duration, 2)}
+        </span>
         <div className="actions">
           <Tooltip
             title={

src/components/speech-content/styles/index.less

@@ -69,6 +69,12 @@
     }
   }
 
+  .duration {
+    display: flex;
+    justify-content: center;
+    width: 100px;
+  }
+
   .tags {
     display: flex;
     justify-content: flex-start;

src/components/speech-content/styles/slider-progress.less

@@ -0,0 +1,21 @@
+.slider-progress {
+  &:hover {
+    .ant-slider-track {
+      background-color: var(--ant-blue-5);
+    }
+  }
+
+  .ant-slider-rail {
+    border-radius: var(--border-radius-base);
+    height: 2px;
+  }
+
+  .ant-slider-track {
+    background-color: var(--ant-blue-5);
+    height: 2px;
+  }
+
+  .ant-slider-handle {
+    display: none;
+  }
+}