Video controls update (#569)

- styling updates more modern
- video time seconds
- icon changes
- buttons to go back to start/end


![image](https://github.com/storytold/GottaGoFast/assets/46063141/efad63a3-031a-45de-92b9-3302fc28d952)

---------

Co-authored-by: wil <wil@storyteller.ai>

app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx

@@ -1,35 +1,57 @@
 import { useContext } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
 import {
   faBackwardStep,
   faForwardStep,
+  faCirclePause,
+  faCirclePlay,
   faPlay,
-  faPause,
 } from "@fortawesome/pro-solid-svg-icons";
 import { ButtonIcon } from "~/components";
 import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
-import { currentTime, filmLength } from "~/pages/PageEnigma/signals";
+import {
+  currentTime,
+  filmLength,
+  scrubberTime,
+} from "~/pages/PageEnigma/signals";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
-import { useSignals } from "@preact/signals-react/runtime";
 import { editorState } from "~/pages/PageEnigma/signals/engine";
 import { EditorStates } from "~/pages/PageEnigma/enums";
 
-// const SCALE_VALUES = [0.5, 1, 1.25, 1.5, 1.75, 2];
-// enum ScaleAdjustment {
-//   UP,
-//   DOWN,
-// }
-
 export const ControlsVideo = () => {
   useSignals();
   const editorEngine = useContext(EngineContext);
-  // const scaleIndex = useRef(1);
-  // const canPlayback = editorEngine !== null && editorEngine.can_playback;
-  // console.log(`canplayback is ${canPlayback}`);
+
+  function formatTime(seconds: number) {
+    const date = new Date(seconds * 1000);
+    const minutes = String(date.getUTCMinutes()).padStart(2, "0");
+    const secs = String(date.getUTCSeconds()).padStart(2, "0");
+    return `00:${minutes}:${secs}`;
+  }
+
   const isPlaying =
     editorEngine !== null ? editorEngine.timeline.is_playing : false;
 
+  const handleToStart = () => {
+    currentTime.value = 0;
+    Queue.publish({
+      queueName: QueueNames.TO_ENGINE,
+      action: toEngineActions.UPDATE_TIME,
+      data: { currentTime: currentTime.value },
+    });
+  };
+
+  const handleToEnd = () => {
+    currentTime.value = filmLength.value * 60;
+    Queue.publish({
+      queueName: QueueNames.TO_ENGINE,
+      action: toEngineActions.UPDATE_TIME,
+      data: { currentTime: currentTime.value },
+    });
+  };
+
   const handleBackwardStep = () => {
     currentTime.value = Math.max(currentTime.value - 1, 0);
     Queue.publish({
@@ -55,24 +77,39 @@ export const ControlsVideo = () => {
   }
 
   return (
-    <div className="flex justify-center">
-      <div className="rounded-t-lg bg-ui-controls p-2 text-white shadow-md">
-        <div className="flex content-center gap-2">
+    <div className="flex items-center justify-center">
+      <div className="flex items-center gap-4 rounded-t-lg bg-ui-controls p-1.5 text-white shadow-md">
+        <div className="flex items-center gap-1">
+          <div className="flex gap-0">
+            <ButtonIcon icon={faBackwardStep} onClick={handleToStart} />
+            <ButtonIcon
+              icon={faPlay}
+              onClick={handleBackwardStep}
+              className="rotate-180 text-sm"
+            />
+          </div>
+
           <ButtonIcon
-            // disabled={!canPlayback}
-            icon={faBackwardStep}
-            onClick={handleBackwardStep}
-          />
-          <ButtonIcon
-            // disabled={!canPlayback}
-            icon={isPlaying ? faPause : faPlay}
+            icon={isPlaying ? faCirclePause : faCirclePlay}
             onClick={handlePlayback}
+            className="p-0 text-2xl"
           />
-          <ButtonIcon
-            // disabled={!canPlayback}
-            icon={faForwardStep}
-            onClick={handleForwardStep}
-          />
+
+          <div className="flex gap-0">
+            <ButtonIcon
+              icon={faPlay}
+              onClick={handleForwardStep}
+              className="text-sm"
+            />
+            <ButtonIcon icon={faForwardStep} onClick={handleToEnd} />
+          </div>
+        </div>
+        <div className="mr-2 flex items-center gap-1.5 text-sm font-medium">
+          <span className="w-[54px]">{formatTime(scrubberTime.value)}</span>
+          <span className="opacity-50">/</span>
+          <span className="w-[54px] opacity-50">
+            {formatTime(filmLength.value * 60)}
+          </span>
         </div>
       </div>
     </div>

app/pages/PageEnigma/comps/Timeline/Scrubber.tsx

@@ -4,6 +4,7 @@ import {
   stylizeScrollX,
   timelineHeight,
   timelineScrollX,
+  scrubberTime,
 } from "~/pages/PageEnigma/signals";
 import { useMouseEventsScrubber } from "~/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -16,10 +17,13 @@ interface Props {
 export const Scrubber = ({ page }: Props) => {
   useSignals();
   const { onPointerDown, time } = useMouseEventsScrubber();
+
   const displayTime = time === -1 ? currentTime.value : time;
   const scrollX =
     page === Pages.EDIT ? timelineScrollX.value : stylizeScrollX.value;
 
+  scrubberTime.value = displayTime;
+
   if (displayTime * 4 * scale.value - scrollX < 0) {
     return null;
   }

app/pages/PageEnigma/signals/timing.ts

@@ -1,7 +1,11 @@
 import { signal } from "@preact/signals-core";
 
 export const currentTime = signal(0);
-
+// TODO: scrubber time exists to sync the time the scrubber points
+// to with the time display on video controls, we could eliminate this
+// and calculate everything properly with currentTime, but that would
+// be a developer brain struggle for another day.
+export const scrubberTime = signal(0);
 export const timelineScrollX = signal(0);
 export const timelineScrollY = signal(0);
 export const stylizeScrollX = signal(0);