Add clip list component

source/Panel/ClipPlayer/ClipPlayer.scss

@@ -0,0 +1,6 @@
+div.Clip-player-clip-list-root {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+}

source/Panel/ClipPlayer/ClipPlayer.tsx

@@ -1,12 +1,31 @@
 import { Component, ReactNode } from "react";
+import { ClipList } from "@Component/ClipList/ClipList";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { Theme } from "@Component/Theme/Theme";
+import { Message } from "@Input/Message/Message";
+import { Clip } from "@Model/Clip";
 import "./ClipPlayer.scss";
 
-class ClipPlayer extends Component {
+@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange")
+class ClipPlayer extends Component<IMixinStatusProps> {
+
+	private renderMessage(): ReactNode {
+		return <Message i18nKey="Panel.Info.Clip.List.Error.Nodata"/>;
+	}
+
+	private renderClipList(clipList: Clip[]): ReactNode {
+		return <ClipList
+			clips={clipList}
+		/>;
+	}
 
 	public render(): ReactNode {
-		return <>
-			
-		</>;
+		const clipList = this.props.status?.model.clipPool ?? [];
+
+		return <Theme className="Clip-player-clip-list-root">
+			{ clipList.length > 0 ? null : this.renderMessage() }
+			{ this.renderClipList(clipList) }
+		</Theme>;
 	}
 }
 

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -37,7 +37,7 @@ class ClipRecorder extends Component<IMixinStatusProps> {
 				if (mod === "R" && !runner) {
 
 					// 获取新实例
-					let newClip = this.props.status?.model.addClip();
+					let newClip = this.props.status?.newClip();
 					
 					// 开启录制时钟
 					this.props.status?.actuator.startRecord(newClip!);