Merge pull request #538 from lixinghua123/alpha-lxh

fix: Audio tool clipRegion loading display
open-mmlab · Aug 16, 2024 · 886e66f · 886e66f
2 parents 355e484 + 9143e3f
commit 886e66f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git a/packages/lb-components/src/components/audioPlayer/index.tsx b/packages/lb-components/src/components/audioPlayer/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { getWebPcm2WavBase64 } from '@/components/audioAnnotate/utils/getWebPcm2Wac';
 import _, { debounce, sortBy } from 'lodash';
 import { PauseOutlined, CaretRightOutlined } from '@ant-design/icons';
@@ -39,6 +39,7 @@ import ToolFooter from '@/views/MainView/toolFooter';
 import { IInputList, RenderFooter } from '@/types/main';
 import { decimalReserved } from '@/components/videoPlayer/utils';
 import { I18nextProvider } from 'react-i18next';
+import useSize from '@/hooks/useSize';
 
 const { EToolName } = cTool;
 const EKeyCode = cKeyCode.default;
@@ -139,7 +140,7 @@ export const AudioPlayer = ({
   };
   // 鼠标移入到进度条上的时间
   const [hoverTime, setHoverTime] = useState<number>(0);
-  const [zoom, setZoom] = useState<number>(1);
+  const [zoom, setZoom] = useState<number>(audioZoomInfo.defaultValue);
   const waveformContainerRef = useRef<null | HTMLDivElement>(null);
   const [edgeAdsorption, setEdgeAdsorption] = useState<{ start?: number; end?: number }>({});
   const { audioClipState, setAudioClipState } = useAudioClipStore();
@@ -152,6 +153,19 @@ export const AudioPlayer = ({
   const update = useUpdate();
   const [sortByStartRegions, setSortByStartRegions] = useState<IAudioTimeSlice[]>([]);
   const [regionMap, setRegionMap] = useState<{ [key: string]: IAudioTimeSlice }>({});
+  const [visibleTimeRange, setVisibleTimeRange] = useState({ start: 0, end: 0 });
+  const waveSize = useSize(waveformContainerRef);
+  const regionList = useMemo(
+    () =>
+      regions.filter((i) => {
+        const { start, end } = visibleTimeRange;
+        if (i.start <= end && i.end >= start) {
+          return true;
+        }
+        return false;
+      }),
+    [regions, visibleTimeRange],
+  );
 
   const debounceZoom = debounce(() => {
     EventBus.emit('audioZoom');
@@ -393,7 +407,7 @@ export const AudioPlayer = ({
   };
 
   const { run: throttleSelectedRegion } = useThrottleFn(setSelectedRegion, {
-    wait: 500,
+    wait: 100,
   });
 
   useSwitchHotkey({
@@ -808,6 +822,31 @@ export const AudioPlayer = ({
     setAudioUrl();
   }, [url]);
 
+  useEffect(() => {
+    throttleSetTimeRange();
+  }, [waveSize, duration]);
+
+  const setVisibleAreaRange = () => {
+    if (waveformContainerRef.current && duration) {
+      const currentScroll = waveformContainerRef.current.scrollLeft;
+      const containerWidth = waveformContainerRef.current.clientWidth;
+
+      // Calculate the start time and end time of the visible area
+      const visibleStartTime =
+        (currentScroll / waveformContainerRef.current.scrollWidth) * duration;
+      const visibleEndTime =
+        ((currentScroll + containerWidth) / waveformContainerRef.current.scrollWidth) * duration;
+      setVisibleTimeRange({
+        start: visibleStartTime,
+        end: visibleEndTime,
+      });
+    }
+  };
+
+  const { run: throttleSetTimeRange } = useThrottleFn(setVisibleAreaRange, {
+    wait: 300,
+  });
+
   // 计算播放到鼠标位置的时间
   const calcTime = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (waveRef?.current && progressRef?.current) {
@@ -853,7 +892,11 @@ export const AudioPlayer = ({
       <ClipTip getRegionInstanceById={getRegionInstanceById} clipping={clipping} />
       <CombineTip container={waveformContainerRef.current} />
       <SegmentTip segmentTimeTip={segmentTimeTip} />
-      <div className={styles.waveformContainer} ref={waveformContainerRef}>
+      <div
+        className={styles.waveformContainer}
+        ref={waveformContainerRef}
+        onScroll={() => throttleSetTimeRange()}
+      >
         <div
           id='waveform'
           style={{
@@ -921,6 +964,7 @@ export const AudioPlayer = ({
         />
         <ZoomSlider
           onChange={(val) => {
+            getWaveRef()?.pause();
             zoomHandler(val);
           }}
           zoom={zoom}
@@ -934,7 +978,7 @@ export const AudioPlayer = ({
     return (
       <AudioPlayerContext.Provider value={context}>
         {audioPlayer}
-        {regions.map((region) => {
+        {regionList.map((region) => {
           const { id } = region;
           const el = document.querySelector(`[data-id=${id}]`);
           return el ? (

diff --git a/packages/lb-components/src/components/audioPlayer/zoomSlider/index.tsx b/packages/lb-components/src/components/audioPlayer/zoomSlider/index.tsx
@@ -9,13 +9,14 @@ import { useLatest } from 'ahooks';
 import styles from './index.module.scss';
 import { useTranslation } from 'react-i18next';
 
-const EKeyCode = cKeyCode.default
+const EKeyCode = cKeyCode.default;
 
 // 建议用户裁剪音频到10分钟以下送标
 export const audioZoomInfo = {
   min: 1,
   max: 150,
-  ratio: 1,
+  ratio: 10,
+  defaultValue: 30,
 };
 
 interface IZoomSliderProps {