From be22102f9578c4218dffd34f9c90e2ed52849a97 Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Sun, 1 May 2022 13:28:28 +0800
Subject: [PATCH] Add command bar start action handel

---
 source/Component/CommandBar/CommandBar.tsx | 65 +++++++++++++++++++---
 source/Panel/ClipPlayer/ClipRecorder.tsx   |  2 +-
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/source/Component/CommandBar/CommandBar.tsx b/source/Component/CommandBar/CommandBar.tsx
index 59b68a4..cf2b39d 100644
--- a/source/Component/CommandBar/CommandBar.tsx
+++ b/source/Component/CommandBar/CommandBar.tsx
@@ -9,6 +9,7 @@ import { SettingPopup } from "@Component/SettingPopup/SettingPopup";
 import { BehaviorPopup } from "@Component/BehaviorPopup/BehaviorPopup";
 import { MouseMod } from "@GLRender/ClassicRenderer";
 import { ArchiveSave } from "@Context/Archive";
+import { ActuatorModel } from "@Model/Actuator";
 import "./CommandBar.scss";
 
 const COMMAND_BAR_WIDTH = 45;
@@ -50,6 +51,62 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
         isSaveRunning: false
     };
 
+    private renderPlayActionButton(): ReactNode {
+
+        let icon: string = "Play";
+        let handel: () => any = () => {};
+
+        // 播放模式
+        if (this.props.status?.focusClip) {
+
+            // 暂停播放
+            if (this.props.status?.actuator.mod === ActuatorModel.Play) {
+                icon = "Pause";
+                handel = () => {
+                    this.props.status?.actuator.pausePlay();
+					console.log("ClipRecorder: Pause play...");
+                };
+            }
+
+            // 开始播放
+            else {
+                icon = "Play";
+                handel = () => {
+                    this.props.status?.actuator.playing();
+					console.log("ClipRecorder: Play start...");
+                };
+            }
+        }
+        
+        // 正在录制中
+        else if (
+            this.props.status?.actuator.mod === ActuatorModel.Record ||
+			this.props.status?.actuator.mod === ActuatorModel.Offline
+        ) {
+
+            // 暂停录制
+            icon = "Stop";
+            handel = () => {
+                this.props.status?.actuator.endRecord();
+                console.log("ClipRecorder: Rec end...");
+            };
+        }
+
+        // 正常控制主时钟
+        else {
+            icon = this.props.status?.actuator.start() ? "Pause" : "Play";
+            handel = () => this.props.status?.actuator.start(
+                !this.props.status?.actuator.start()
+            );
+        }
+
+        return <CommandButton
+            iconName={icon}
+            i18NKey="Command.Bar.Play.Info"
+            click={handel}
+        />;
+    }
+
     public render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
@@ -84,13 +141,7 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
                     }}
                 />
 
-                <CommandButton
-                    iconName={this.props.status?.actuator.start() ? "Pause" : "Play"}
-                    i18NKey="Command.Bar.Play.Info"
-                    click={() => this.props.status ? this.props.status.actuator.start(
-                        !this.props.status.actuator.start()
-                    ) : undefined}
-                />
+                {this.renderPlayActionButton()}
 
                 <CommandButton
                     iconName="HandsFree"
diff --git a/source/Panel/ClipPlayer/ClipRecorder.tsx b/source/Panel/ClipPlayer/ClipRecorder.tsx
index 1fe079f..46fda3f 100644
--- a/source/Panel/ClipPlayer/ClipRecorder.tsx
+++ b/source/Panel/ClipPlayer/ClipRecorder.tsx
@@ -90,7 +90,7 @@ class ClipRecorder extends Component<IMixinStatusProps> {
 
 					// 启动播放时钟
 					this.props.status?.actuator.pausePlay();
-					console.log("ClipRecorder: Pause start...");
+					console.log("ClipRecorder: Pause play...");
 				}
 			}}
 			valueChange={(value) => {