From 221de747e07bde3d0361022640b9324daac6f4a7 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Sat, 30 Mar 2024 13:03:58 +0700
Subject: [PATCH 1/4] fix current time dragging issue

---
 app/pages/PageEnigma/comps/Timeline/Timeline.tsx     |  2 +-
 .../comps/Timeline/utils/useMouseEventsAnimation.ts  | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 3fc61d7cad..d7f3f6b368 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -135,7 +135,7 @@ export const Timeline = () => {
           </div>
         )}
         <div
-          className="absolute text-brand-primary"
+          className="absolute cursor-ew-resize text-brand-primary"
           style={{ top: 8, left: displayTime * 4 * scale.value + 88 }}
           onPointerDown={onPointerDown}
         >
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
index 25de508f55..73c94ef475 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
@@ -1,22 +1,22 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { currentTime, scale } from "~/pages/PageEnigma/store";
+import { currentTime, filmLength, scale } from "~/pages/PageEnigma/store";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 
 export const useMouseEventsAnimation = () => {
-  const [isActive, setIsActive] = useState("");
+  const [isActive, setIsActive] = useState(false);
   const [clientX, setClientX] = useState(0);
 
   const [time, setTime] = useState(-1);
 
   useEffect(() => {
-    const max = length * 60 * 4 * scale.value;
+    const max = filmLength.value * 60 * 4 * scale.value;
 
     const onPointerUp = () => {
       if (isActive) {
         currentTime.value = Math.round(time);
-        setIsActive("");
+        setIsActive(false);
         setTime(-1);
         Queue.publish({
           queueName: QueueNames.TO_ENGINE,
@@ -29,7 +29,7 @@ export const useMouseEventsAnimation = () => {
     const onMouseMove = (event: MouseEvent) => {
       const delta =
         (event.clientX - clientX) / 4 / scale.value + currentTime.value;
-      if (isActive === "drag") {
+      if (isActive) {
         event.stopPropagation();
         event.preventDefault();
         if (delta < 0 || delta > max) {
@@ -53,7 +53,7 @@ export const useMouseEventsAnimation = () => {
     onPointerDown: useCallback((event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
         setClientX(event.clientX);
-        setIsActive("drag");
+        setIsActive(true);
         setTime(currentTime.value);
       }
     }, []),

From 399b2652cbbff40c5b23c53ec012a3ef631c5b99 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Sat, 30 Mar 2024 13:07:45 +0700
Subject: [PATCH 2/4] Add queue message when clicking to move currentTime

---
 app/modules/LowerPanel/LowerPanel.tsx            | 11 ++++++++++-
 app/pages/PageEnigma/comps/Timeline/Timeline.tsx |  3 ---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx
index 6bf237da52..6871d8c6df 100644
--- a/app/modules/LowerPanel/LowerPanel.tsx
+++ b/app/modules/LowerPanel/LowerPanel.tsx
@@ -6,6 +6,9 @@ import {
   scale,
   timelineHeight,
 } from "~/pages/PageEnigma/store";
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
+import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 
 interface LowerPanelPropsI {
   children: React.ReactNode;
@@ -19,7 +22,13 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
   const onTimelineClick = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
-        currentTime.value = (Math.round(event.clientX) - 92) / 4 / scale.value;
+        const newTime = Math.round((event.clientX - 92) / 4 / scale.value);
+        currentTime.value = newTime;
+        Queue.publish({
+          queueName: QueueNames.TO_ENGINE,
+          action: toEngineActions.UPDATE_TIME,
+          data: { currentTime: Math.round(newTime) },
+        });
       }
     },
     [],
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index d7f3f6b368..1a7043d26f 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -17,11 +17,8 @@ import {
   timelineHeight,
 } from "~/pages/PageEnigma/store";
 import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler";
-import { EngineContext } from "../../contexts/EngineContext";
 
 export const Timeline = () => {
-  const editorEngine = useContext(EngineContext);
-
   const {
     characters,
     objects,

From 83ced0e1e8a987d62f091cec29d6358cba077497 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Sat, 30 Mar 2024 20:13:19 +0700
Subject: [PATCH 3/4] Change timeline format

---
 .../PageEnigma/comps/Timeline/Timeline.tsx    | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 1a7043d26f..5f6affcc19 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -132,20 +132,21 @@ export const Timeline = () => {
           </div>
         )}
         <div
-          className="absolute cursor-ew-resize text-brand-primary"
+          className="absolute flex cursor-ew-resize flex-col items-center text-brand-primary"
           style={{ top: 8, left: displayTime * 4 * scale.value + 88 }}
           onPointerDown={onPointerDown}
         >
-          <FontAwesomeIcon
-            icon={faSortDown}
-            className="absolute ml-[-5px] mt-[-10px] h-5 text-brand-primary"
-          />
+          <div>
+            <FontAwesomeIcon
+              icon={faSortDown}
+              className="h-5 text-brand-primary"
+            />
+          </div>
           <div
-            className="absolute block bg-brand-primary"
+            className="block bg-brand-primary"
             style={{
-              left: 0,
-              top: 8,
-              width: 4,
+              width: 2,
+              marginTop: -5,
               height: fullHeight,
             }}
           />

From ee54c8c3e82a68d516f666ef58f254e14aafb97c Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Sat, 30 Mar 2024 20:18:41 +0700
Subject: [PATCH 4/4] Fix starting point

---
 app/pages/PageEnigma/comps/Timeline/Timeline.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 5f6affcc19..386c7f3922 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -133,7 +133,7 @@ export const Timeline = () => {
         )}
         <div
           className="absolute flex cursor-ew-resize flex-col items-center text-brand-primary"
-          style={{ top: 8, left: displayTime * 4 * scale.value + 88 }}
+          style={{ top: 8, left: displayTime * 4 * scale.value + 84 }}
           onPointerDown={onPointerDown}
         >
           <div>