Merge pull request #391 from MMMMoriaty/alpha-whq

fix: Bugs in video clip tool

packages/lb-components/src/components/videoAnnotate/videoClipTool/components/videoTimeSlicesOverVideo/index.module.scss

@@ -10,27 +10,27 @@ $videoHeight: calc(100% - #{$containerHeight} - #{$videoTrackHeight * 2} - #{$ti
     position: absolute;
     top: 0;
     right: 0;
-    max-height: $videoHeight;
+    //max-height: $videoHeight;
+    max-width:416px;
+    max-height: 80%;
     padding-right: 4px;
     overflow: auto;
     z-index: 22;
 }
 
 .timeSliceWrapper {
-    height: #{$HEIGHT * 2};
+    min-height: #{$HEIGHT * 2};
     margin-bottom: 8px;
     transition: opacity 0.4s ease-in-out;
-    opacity: .3;
+    opacity: .9;
 
-    &.active {
-        opacity: 1;
-    }
 
     .timeSliceItemText,
     .timeSliceItemAttribute {
-        height: $HEIGHT;
+        min-height: $HEIGHT;
         font-size: 16px;
         color: white;
+        word-break: break-all;
     }
 
     .timeSliceItemText {

packages/lb-components/src/components/videoAnnotate/videoClipTool/index.tsx

@@ -82,6 +82,10 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
     return this.state.selectedAttribute
   }
 
+  public get selectedID() {
+    return this.state.selectedID;
+  }
+
   public get selectedSliceIndex() {
     return this.state.result.findIndex((i) => i.id === this.state.selectedID);
   }
@@ -134,6 +138,14 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
     return this.state.valid;
   }
 
+  public get config() {
+    return jsonParser(this.props.stepInfo?.config);
+  }
+
+  public get selectedText() {
+    return this.state.result?.[this.selectedSliceIndex]?.textAttribute;
+  }
+
   /** 步骤信息 */
   public stepInfo = () => {
     return this.props.stepInfo;
@@ -203,6 +215,8 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
 
   public updateSidebar = () => {
     this.emitEvent('changeClipSidebar');
+    this.emitEvent('updateTextAttribute');
+    this.emitEvent('changeAttributeSidebar');
   }
 
   public exportData = () => {
@@ -487,6 +501,14 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
     this.updateSidebar()
   };
 
+  /** 更新当前时间 */
+
+  public updateCurrentTime = (time: number) => {
+    this.setState({
+      currentTime: time,
+    })
+  }
+
   /**
    * 视频右键操作
    * @param e
@@ -538,9 +560,9 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
 
     const {
       result,
-      currentTime,
       videoError,
       valid,
+      currentTime
     } = this.state;
 
     return (
@@ -562,8 +584,10 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
           dataLoaded={this.videoLoaded}
           toggleClipStatus={this.toggleClipStatus}
           addTime={this.addTime}
+          updateCurrentTime={this.updateCurrentTime}
         />
         <VideoTimeSlicesOverVideo
+          key={this.videoPlayer?.currentTime}
           result={result}
           currentTime={currentTime}
           attributeList={this.props.config.attributeList}
@@ -673,7 +697,7 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
    * 设置当前选中片段的文本
    * @param textValue
    */
-  public setTextAttribute = (textValue: string) => {
+  public textChange = (textValue: string) => {
     const { result, selectedID } = this.state;
     this.setState({
       textValue,

packages/lb-components/src/components/videoPlayer/index.tsx

@@ -71,6 +71,7 @@ interface IVideoPlayerProps {
   addTime?: () => void;
   toggleClipStatus?: () => void;
   drawLayerSlot?: any;
+  updateCurrentTime?: (time: number) => void;
 }
 
 interface IVideoPlayerState {
@@ -264,6 +265,7 @@ export class VideoPlayer extends React.Component<IVideoPlayerProps, IVideoPlayer
       this.setState({
         currentTime,
       });
+      this.props.updateCurrentTime?.(currentTime)
     }
   };
 

packages/lb-components/src/views/MainView/sidebar/AnnotationText/index.tsx

@@ -29,6 +29,7 @@ const AnnotationText: React.FC<IProps> = ({ toolInstance }) => {
       });
     }
   }, [toolInstance]);
+
   if (!toolInstance) {
     return null;
   }