feat: Gate video clip linkage

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

@@ -144,7 +144,14 @@ const VideoClipAnnotatedItem = ({
 
 const VideoClipAnnotatedList = (props: { toolInstance: any }) => {
   const { toolInstance } = props
-  const { selectedID, result, videoPlayer, clipStatus, updateSelectedSliceTimeProperty } = toolInstance?.exportContext || {}
+  const {
+    selectedID,
+    result,
+    videoPlayer,
+    clipStatus,
+    updateSelectedSliceTimeProperty,
+    linkageConfigurable,
+  } = toolInstance?.exportContext || {}
 
   const [_, forceRender] = useState(0);
   const listRef = useRef<HTMLDivElement>(null);
@@ -171,12 +178,14 @@ const VideoClipAnnotatedList = (props: { toolInstance: any }) => {
     [result, _],
   );
   const handleItemClick = (timeSliceProps: IVideoTimeSlice) => {
-    skipScrollRef.current = true;
+    if (linkageConfigurable) {
+      skipScrollRef.current = true;
+    }
     toolInstance.exportContext.onSelectedTimeSlice(timeSliceProps);
   };
 
   useLayoutEffect(() => {
-    if (!selectedID || !listRef.current) {
+    if (!linkageConfigurable || !selectedID || !listRef.current) {
       return;
     }
     if (skipScrollRef.current) {
@@ -187,15 +196,15 @@ const VideoClipAnnotatedList = (props: { toolInstance: any }) => {
     if (index >= 0) {
       listRef.current.children[index]?.scrollIntoView({ block: 'nearest' });
     }
-  }, [selectedID, _, resultList]);
+  }, [linkageConfigurable, selectedID, _, resultList]);
 
   if (!toolInstance?.exportContext) {
     return null
   }
   return (
     <div>
       <div className={styles.timeSliceListHeader}>{t('AnnotatedList')}</div>
-      <VideoClipAnnotatedListWrapper scrollRef={listRef}>
+      <VideoClipAnnotatedListWrapper scrollRef={linkageConfigurable ? listRef : undefined}>
         {resultList?.map((timeSliceProps: IVideoTimeSlice, index: number) => (
           <VideoClipAnnotatedItem
             timeSliceProps={timeSliceProps}

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

@@ -108,6 +108,7 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
       removeTimeSlice: this.removeTimeSlice,
       updateSelectedSliceTimeProperty: this.updateSelectedSliceTimeProperty,
       extraResult: this.state.extraResult,
+      linkageConfigurable: this.props.config?.linkageConfigurable === true,
     };
   }
   public fns: Map<string, any[]> = new Map();
@@ -511,7 +512,9 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
     this.setState({
       currentTime: time,
     });
-    this.selectTimeSliceByTime(time);
+    if (this.props.config?.linkageConfigurable === true) {
+      this.selectTimeSliceByTime(time);
+    }
   };
 
   /** 根据时间查找片段 */
@@ -623,6 +626,7 @@ class VideoClipTool extends React.Component<IVideoClipProps, IState> {
           toggleClipStatus={this.toggleClipStatus}
           addTime={this.addTime}
           updateCurrentTime={this.updateCurrentTime}
+          syncTimeOnPlay={this.props.config?.linkageConfigurable === true}
         />
         <VideoTimeSlicesOverVideo
           key={this.videoPlayer?.currentTime}

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

@@ -52,7 +52,8 @@ export const VideoPlayerCtx = React.createContext<{
   toggleClipStatus: () => {},
 });
 
-const PER_INTERVAL = 300;
+const PER_INTERVAL_DEFAULT = 50;
+const PER_INTERVAL_SYNC = 300;
 const PER_FORWARD = 0.1;
 const PLAYBACK_RATES = [0.1, 0.2, 0.3, 0.4, 0.5, 1, 1.5, 2, 4, 6, 8, 16];
 
@@ -72,6 +73,8 @@ interface IVideoPlayerProps {
   toggleClipStatus?: () => void;
   drawLayerSlot?: any;
   updateCurrentTime?: (time: number) => void;
+  /** 开启后播放过程持续同步 currentTime（具身联动） */
+  syncTimeOnPlay?: boolean;
 }
 
 interface IVideoPlayerState {
@@ -209,26 +212,37 @@ export class VideoPlayer extends React.Component<IVideoPlayerProps, IVideoPlayer
       this.timeInterval = undefined;
     }
 
-    /** Due to speedrate can less than PER_INTERVAL, it need to set current time after stopped */
+    /** Due to speedrate can less than play interval, it need to set current time after stopped */
     if (this.videoElm) {
       this.setCurrentTime(this.videoElm.currentTime);
     }
   };
 
   public onVideoStart = () => {
+    const syncTimeOnPlay = this.props.syncTimeOnPlay === true;
+    const interval = syncTimeOnPlay ? PER_INTERVAL_SYNC : PER_INTERVAL_DEFAULT;
     this.timeInterval = window.setInterval(() => {
       if (this.videoElm) {
         try {
           if (this.videoElm?.buffered.length > 0) {
             const buffered = this.videoElm?.buffered.end(0);
-            this.setState({ buffered });
+            if (syncTimeOnPlay) {
+              this.setState({ buffered });
+            } else {
+              this.setState({
+                currentTime: decimalReserved(this.videoElm?.currentTime, 1),
+                buffered,
+              });
+            }
+          }
+          if (syncTimeOnPlay) {
+            this.props.updateCurrentTime?.(decimalReserved(this.videoElm?.currentTime, 1));
           }
-          this.props.updateCurrentTime?.(decimalReserved(this.videoElm?.currentTime, 1));
         } catch (error) {
           console.error(error);
         }
       }
-    }, PER_INTERVAL);
+    }, interval);
   };
 
   public resetVideoData = () => {