fix: Audio tool display abnormality

open-mmlab · Jul 17, 2024 · 80a9b49 · 80a9b49
1 parent db450a1
commit 80a9b49
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/packages/lb-components/src/components/audioPlayer/clipRegion/index.module.scss b/packages/lb-components/src/components/audioPlayer/clipRegion/index.module.scss
@@ -6,7 +6,6 @@
   height: 100%;
   border: 1px solid transparent;
   font-size: 12px;
-  overflow-y: auto;
   .loop {
     position: absolute;
     width: 18px;

diff --git a/packages/lb-components/src/components/audioPlayer/clipRegion/index.tsx b/packages/lb-components/src/components/audioPlayer/clipRegion/index.tsx
@@ -33,6 +33,7 @@ interface IProps {
   zoom: number;
   /** WaveSurfer region 实例 */
   instance?: any;
+  isCheck?: boolean;
 }
 
 const { Paragraph } = Typography;
@@ -83,7 +84,7 @@ const ClipRegion = (props: IProps) => {
   } = audioClipState;
 
   const ref = useRef(null);
-  const { el, region, edgeAdsorption, clipping, instance } = props;
+  const { el, region, edgeAdsorption, clipping, instance, isCheck } = props;
   const { attribute = '', text = '', id, start, end, subAttribute } = region;
 
   const { id: selectedId } = selectedRegion;
@@ -96,6 +97,7 @@ const ClipRegion = (props: IProps) => {
 
   const style: any = {
     border: `2px solid ${attributeColor}`,
+    overflowY: isCheck ? 'initial' : 'auto', // View mode does not require scroll bars to be displayed
   };
 
   if (id === selectedId) {

diff --git a/packages/lb-components/src/components/audioPlayer/index.tsx b/packages/lb-components/src/components/audioPlayer/index.tsx
@@ -284,6 +284,7 @@ export const AudioPlayer = ({
 
   useDeepCompareEffect(() => {
     setSortByStartRegions(sortBy(regions, ['start']));
+
     setRegionMap(
       regions.reduce((prev, current) => {
         const { id } = current;
@@ -293,6 +294,10 @@ export const AudioPlayer = ({
         };
       }, {}),
     );
+    // TODO: In view mode, the frame is not displayed when switching tree nodes.
+    if (isCheck) {
+      generateRegions();
+    }
   }, [regions]);
 
   useEffect(() => {
@@ -940,6 +945,7 @@ export const AudioPlayer = ({
               clipping={clipping}
               zoom={zoom}
               instance={getRegionInstanceById(id)}
+              isCheck={isCheck}
             />
           ) : null;
         })}