Add record function

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -1,9 +1,58 @@
 import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { Recorder } from "@Component/Recorder/Recorder";
+import { ActuatorModel } from "@Model/Actuator";
 
-class ClipRecorder extends Component {
+@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop")
+class ClipRecorder extends Component<IMixinStatusProps> {
 	public render(): ReactNode {
-		return <Recorder/>
+
+		let mod: "P" | "R" = this.props.status?.focusClip ? "P" : "R";
+		let runner: boolean = false;
+		let currentTime: number = 0;
+
+		// 是否开始录制
+		if (mod === "R") {
+
+			// 是否正在录制
+			runner = this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline;
+
+			currentTime = this.props.status?.actuator.recordClip?.time ?? 0;
+		}
+
+		else if (mod === "P") {
+
+			// 是否正在播放
+			runner = this.props.status?.actuator.mod === ActuatorModel.Play;
+		}
+
+		return <Recorder
+			currentTime={currentTime}
+			mode={mod}
+			running={runner}
+			action={() => {
+
+				// 开启录制
+				if (mod === "R" && !runner) {
+
+					// 获取新实例
+					let newClip = this.props.status?.model.addClip();
+					
+					// 开启录制时钟
+					this.props.status?.actuator.startRecord(newClip!);
+					console.log("ClipRecorder: Rec start...");
+				}
+
+				// 暂停录制
+				if (mod === "R" && runner) {
+
+					// 暂停录制时钟
+					this.props.status?.actuator.endRecord();
+					console.log("ClipRecorder: Rec end...");
+				}
+			}}
+		/>
 	}
 }