From 7f4fa98259c896fcbec1449b799e79520b131c2f Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Mon, 25 Mar 2024 06:48:58 +0700
Subject: [PATCH] Move the test buttons

---
 app/models/track.ts                           |  9 ++++
 .../PageEnigma/comps/Timeline/Camera.tsx      | 44 +++++++++++++++++++
 .../PageEnigma/comps/Timeline/Timeline.tsx    | 13 +++---
 3 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 app/pages/PageEnigma/comps/Timeline/Camera.tsx

diff --git a/app/models/track.ts b/app/models/track.ts
index 7fd04024f6..a312aab70d 100644
--- a/app/models/track.ts
+++ b/app/models/track.ts
@@ -1,3 +1,5 @@
+import {Base} from "postcss-selector-parser";
+
 export interface BaseClip {
   id: string;
   name: string;
@@ -18,3 +20,10 @@ export interface CharacterTrack {
   positionClips: PositionClip[];
   lipSyncClips: LipSyncClip[];
 }
+
+export interface CameraTrack {
+  id: string;
+  clips: CameraClip[];
+}
+
+export interface CameraClip extends BaseClip {}
diff --git a/app/pages/PageEnigma/comps/Timeline/Camera.tsx b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
new file mode 100644
index 0000000000..4ac7fbc41b
--- /dev/null
+++ b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
@@ -0,0 +1,44 @@
+import { TrackClip } from "./TrackClip";
+import {CameraTrack, CharacterTrack} from "~/models/track";
+
+interface Props {
+  scale: number;
+  time: number;
+  camera: CameraTrack;
+  updateClip: (id: string, offset: number, length: number) => void;
+}
+
+export const Character = ({
+  camera: { clips },
+  updateClip,
+}: Props) => {
+  return (
+    <div className="bg-charcter-groupBg block h-48 w-full rounded-lg p-2">
+      <div className="mb-2 text-sm text-white">Character</div>
+      <div className="flex flex-col gap-2">
+        <div className="px-4">
+          <div className="bg-character-clip relative mt-4 block h-8 w-full rounded">
+            {clips.map((clip, index) => (
+              <TrackClip
+                key={clip.id}
+                min={
+                  index > 0
+                    ? clips[index - 1].offset +
+                      clips[index - 1].length
+                    : 0
+                }
+                max={
+                  index < clips.length - 1
+                    ? clips[index + 1].offset
+                    : 1000
+                }
+                updateClip={updateClip}
+                clip={clip}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 670c9d5738..73ee72e905 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -33,10 +33,10 @@ export const Timeline = ({
   const width = 1500;
   return (
     <LowerPanel>
-      <div className="fixed" style={{top: 72, left: 1000}}>
-      <Button onClick={handleButtonLoad}>Load</Button>
-      <Button onClick={handleButtonRender}>Render</Button>
-      <Button onClick={handleButtonPlay}>Play</Button>
+      <div className="fixed" style={{ top: 72, left: "calc(100% - 600px)" }}>
+        <Button onClick={handleButtonLoad}>Load</Button>
+        <Button onClick={handleButtonRender}>Render</Button>
+        <Button onClick={handleButtonPlay}>Play</Button>
       </div>
       <div className="h-10 border-b border-ui-panel-border"></div>
       <input
@@ -70,7 +70,10 @@ export const Timeline = ({
             />
           ))}
         </div>
-          <div className="h-full absolute bg-brand-primary block" style={{left: time + 40, top: 0, width: 1}} />
+        <div
+          className="absolute block h-full bg-brand-primary"
+          style={{ left: time + 40, top: 0, width: 1 }}
+        />
       </div>
     </LowerPanel>
   );