Merge pull request #523 from lixinghua123/alpha-lxh

fix audio tool bug
open-mmlab · Jul 17, 2024 · e0d64b7 · e0d64b7
2 parents d6ee51c + 80a9b49
commit e0d64b7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/packages/lb-components/src/components/audioAnnotate/audioSide/clipSidebar/index.tsx b/packages/lb-components/src/components/audioAnnotate/audioSide/clipSidebar/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import AttributeList from '@/components/attributeList';
 import { IAudioTimeSlice, ITextConfigItem } from '@labelbee/lb-utils';
-import { EventBus } from '@labelbee/lb-annotation';
+import { EventBus, TagUtils } from '@labelbee/lb-annotation';
 import ClipIcon from '@/assets/annotation/audio/clipSmall.svg';
 import ClipActiveIcon from '@/assets/annotation/audio/clipASmall.svg';
 import DeleteIcon from '@/assets/annotation/audio/delete.svg';
@@ -73,12 +73,31 @@ const ClipSidebar = (props: IClipSidebarProps) => {
     }),
   ];
 
+  // Display attribute and secondary attribute text
+  const getAttributeText = (
+    attribute: string,
+    subAttribute?: {
+      [key: string]: string;
+    },
+  ) => {
+    const text = getAttributeShowText(attribute, list);
+    const subAttributes = subAttribute
+      ? TagUtils.getTagNameList(subAttribute, subAttributeList)
+      : [];
+    let subAttributeText = '';
+    const segmentSymbol = '，\n';
+    subAttributes.forEach((i) => {
+      subAttributeText += `${i.keyName}：${i.value.join(`、`)}${segmentSymbol}`;
+    });
+    return `${text}${segmentSymbol}${subAttributeText}`;
+  };
+
   const showClipText = (region: IAudioTimeSlice) => {
     let clipShowText = '';
     if (clipTextConfigurable && clipTextList?.length > 0) {
       clipTextList.forEach((i: ITextConfigItem, index: number) => {
         const segmentSymbol = !clipAttributeConfigurable && index === 0 ? '' : '，';
-        clipShowText = clipShowText + `${segmentSymbol}${i.label}：${region[i.key]}`;
+        clipShowText = clipShowText + `${i.label}：${region[i.key]}${segmentSymbol}`;
       });
     }
     return clipShowText;
@@ -91,11 +110,11 @@ const ClipSidebar = (props: IClipSidebarProps) => {
         {regions.length > 0 ? (
           <div className={styles.regions}>
             {regions.map((item) => {
-              const { id, attribute, text, start, end } = item;
+              const { id, attribute, text, start, end, subAttribute } = item;
               const showLoop = id === selectedId && selectedRegion.loop;
 
               const showText = `${
-                clipAttributeConfigurable ? getAttributeShowText(attribute, list) : ''
+                clipAttributeConfigurable ? getAttributeText(attribute, subAttribute) : ''
               }${showClipText(item)}`;
               return (
                 <div

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;
         })}