From 80a9b49bfde9e66a6b6031eab76791143f2ff070 Mon Sep 17 00:00:00 2001
From: "lixinghua.vendor" <lixinghua.vendor@sensetime.com>
Date: Tue, 16 Jul 2024 19:19:31 +0800
Subject: [PATCH] fix: Audio tool display abnormality

---
 .../src/components/audioPlayer/clipRegion/index.module.scss | 1 -
 .../src/components/audioPlayer/clipRegion/index.tsx         | 4 +++-
 packages/lb-components/src/components/audioPlayer/index.tsx | 6 ++++++
 3 files changed, 9 insertions(+), 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
index 734079f6c..2574a8826 100644
--- 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
index 91da76918..5ab9ecf90 100644
--- 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
index 18bb18ae8..7c26012e3 100644
--- 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;
         })}