Add clip player logic

source/Panel/ClipPlayer/ClipPlayer.tsx

@@ -17,19 +17,20 @@ class ClipPlayer extends Component<IMixinStatusProps> {
 		return <Message i18nKey="Panel.Info.Clip.List.Error.Nodata"/>;
 	}
 
+	private isClipListDisable() {
+		return !this.props.status?.focusClip && 
+		(
+			this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline
+		);
+	}
+
 	private renderClipList(clipList: Clip[]): ReactNode {
-   
-		const disable =
-			!this.props.status?.focusClip && 
-			(
-				this.props.status?.actuator.mod === ActuatorModel.Record ||
-				this.props.status?.actuator.mod === ActuatorModel.Offline
-			);
 
 		return <ClipList
 			focus={this.props.status?.focusClip}
 			clips={clipList}
-			disable={disable}
+			disable={this.isClipListDisable()}
 			delete={(clip) => {
 				this.isInnerClick = true;
 				const status = this.props.status;
@@ -40,7 +41,8 @@ class ClipPlayer extends Component<IMixinStatusProps> {
 						yesI18n: "Popup.Action.Objects.Confirm.Delete",
 						red: "yes",
 						yes: () => {
-							status.setClipObject()
+							status.setClipObject();
+							this.props.status?.actuator.endPlay();
 							status.model.deleteClip(clip.id);
 						}
 					});
@@ -52,6 +54,7 @@ class ClipPlayer extends Component<IMixinStatusProps> {
 			click={(clip) => {
 				this.isInnerClick = true;
 				this.props.status?.setClipObject(clip);
+				this.props.status?.actuator.startPlay(clip);
 			}}
 		/>;
 	}
@@ -64,11 +67,19 @@ class ClipPlayer extends Component<IMixinStatusProps> {
 			fontLevel={FontLevel.normal}
 			backgroundLevel={BackgroundLevel.Level4}
 			onClick={()=>{
+				
+				// 拦截禁用状态的事件
+				if (this.isClipListDisable()) {
+					return;
+				}
+				
 				if (this.isInnerClick) {
 					this.isInnerClick = false;
 				}
+
 				else {
 					this.props.status?.setClipObject();
+					this.props.status?.actuator.endPlay();
 				}
 			}}
 		>

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -9,8 +9,12 @@ class ClipRecorder extends Component<IMixinStatusProps> {
 
 		let mod: "P" | "R" = this.props.status?.focusClip ? "P" : "R";
 		let runner: boolean = false;
-		let currentTime: number = 0;
+		let currentTime: number | undefined = 0;
+		let allTime: number | undefined = 0;
 		let name: string | undefined;
+		let currentFrame: number | undefined = 0;
+		let allFrame: number | undefined = 0;
+		let fps: number | undefined = 0;
 
 		// 是否开始录制
 		if (mod === "R") {
@@ -28,15 +32,30 @@ class ClipRecorder extends Component<IMixinStatusProps> {
 
 			// 是否正在播放
 			runner = this.props.status?.actuator.mod === ActuatorModel.Play;
-
 			name = this.props.status?.focusClip?.name;
+			allTime = this.props.status?.focusClip?.time;
+			allFrame = this.props.status?.focusClip?.frames.length;
+			currentFrame = this.props.status?.actuator.playFrameId;
+			currentTime = this.props.status?.actuator.playFrame?.process;
+
+			if (allFrame !== undefined) {
+				allFrame --;
+			}
+
+			if (allTime !== undefined && allFrame !== undefined) {
+				fps = Math.round(allFrame / allTime);
+			}
 		}
 
 		return <Recorder
 			name={name}
 			currentTime={currentTime}
+			allTime={allTime}
+			currentFrame={currentFrame}
+			allFrame={allFrame}
 			mode={mod}
 			running={runner}
+			fps={fps}
 			action={() => {
 
 				// 开启录制
@@ -57,6 +76,22 @@ class ClipRecorder extends Component<IMixinStatusProps> {
 					this.props.status?.actuator.endRecord();
 					console.log("ClipRecorder: Rec end...");
 				}
+
+				// 开始播放
+				if (mod === "P" && !runner) {
+
+					// 启动播放时钟
+					this.props.status?.actuator.playing();
+					console.log("ClipRecorder: Play start...");
+				}
+
+				// 暂停播放
+				if (mod === "P" && runner) {
+
+					// 启动播放时钟
+					this.props.status?.actuator.pausePlay();
+					console.log("ClipRecorder: Pause start...");
+				}
 			}}
 		/>
 	}