Use millis for FilmLength calculations because seconds*60 is meaningless

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

@@ -30,11 +30,11 @@ export const ControlsVideo = () => {
   const [refresh, setRefresh] = useState(0);
   const showStylePage = usePosthogFeatureFlag(FeatureFlags.SHOW_STYLE_PAGE);
 
-  function formatTime(seconds: number) {
-    const date = new Date(seconds * 1000);
-    const minutes = String(date.getUTCMinutes()).padStart(2, "0");
+  function formatTime(millis: number) {
+    const date = new Date(millis);
     const secs = String(date.getUTCSeconds()).padStart(2, "0");
-    return `00:${minutes}:${secs}`;
+    const ms = String(date.getUTCMilliseconds()).padStart(2, "0").slice(0, 2);
+    return `00:${secs}:${ms}`;
   }
 
   const isPlaying =
@@ -52,7 +52,7 @@ export const ControlsVideo = () => {
   };
 
   const handleToEnd = () => {
-    currentTime.value = filmLength.value * 60;
+    currentTime.value = filmLength.value * 1000;
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,
       action: toEngineActions.UPDATE_TIME,
@@ -80,7 +80,7 @@ export const ControlsVideo = () => {
     editorEngine?.togglePlayback();
   };
   const handleForwardStep = () => {
-    currentTime.value = Math.min(currentTime.value + 1, filmLength.value * 60);
+    currentTime.value = Math.min(currentTime.value + 1, filmLength.value * 1000);
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,
       action: toEngineActions.UPDATE_TIME,
@@ -127,7 +127,7 @@ export const ControlsVideo = () => {
             </span>
             <span className="opacity-50">/</span>
             <span className="w-[54px] opacity-50">
-              {formatTime(filmLength.value * 60)}
+              {formatTime(filmLength.value * 1000)}
             </span>
           </div>
           {showStylePage && (

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

@@ -141,7 +141,7 @@ export const Timeline = () => {
             >
               <div
                 className=""
-                style={{ width: filmLength.value * 60 * 4 * scale.value + 72 }}
+                style={{ width: filmLength.value * 1000 * 4 * scale.value + 72 }}
               >
                 {currentPage.value === Pages.EDIT ? (
                   <>

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

@@ -60,7 +60,7 @@ export const TrackClips = ({ id, clips, updateClip, group, type }: Props) => {
       (event.clientX - position.x) / 4 / scale.value,
     );
 
-    if (clipOffset + 30 > filmLength.value * 60) {
+    if (clipOffset + 500 > filmLength.value * 1000) {
       DndAsset.notDropText = "Not enough room to hold item";
       canDrop.value = false;
       return;
@@ -116,7 +116,7 @@ export const TrackClips = ({ id, clips, updateClip, group, type }: Props) => {
           max={
             index < clips.length - 1
               ? clips[index + 1].offset
-              : filmLength.value * 60
+              : filmLength.value * 1000
           }
           group={group}
           updateClip={updateClip}

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

@@ -26,7 +26,7 @@ export const TrackClipsPrompt = ({ id, clips, updateClip }: Props) => {
   const clientX = useRef(0);
 
   function onPointerOver(event: PointerEvent) {
-    const max = filmLength.value * 60 * 4 * scale.value;
+    const max = filmLength.value * 1000 * 4 * scale.value;
     if (event.pageX < 320) {
       setHover(320);
     } else {
@@ -41,7 +41,7 @@ export const TrackClipsPrompt = ({ id, clips, updateClip }: Props) => {
     if (hover === -1) {
       return;
     }
-    const max = filmLength.value * 60 * 4 * scale.value;
+    const max = filmLength.value * 1000 * 4 * scale.value;
     const offset =
       (event.pageX < 320 ? 0 : Math.min(event.pageX - 320, max + 80)) /
       4 /
@@ -86,7 +86,7 @@ export const TrackClipsPrompt = ({ id, clips, updateClip }: Props) => {
           max={
             index < clips.length - 1
               ? clips[index + 1].offset
-              : filmLength.value * 60
+              : filmLength.value * 1000
           }
           group={ClipGroup.PROMPT_TRAVEL}
           updateClip={updateClip}

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

@@ -13,7 +13,7 @@ export const TrackKeyFrame = ({ keyframe, updateKeyframe }: Props) => {
 
   const { onPointerDown, offset } = useMouseEventsKeyframe({
     keyframe,
-    max: filmLength.value * 60,
+    max: filmLength.value * 1000,
     min: 0,
     updateKeyframe,
   });

app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts

@@ -18,7 +18,7 @@ export const useMouseEventsScrubber = () => {
   const [time, setTime] = useState(-1);
 
   const getDelta = useCallback((event: MouseEvent) => {
-    const max = filmLength.value * 60;
+    const max = filmLength.value * 1000;
 
     const delta = Math.round(
       (event.clientX - clientX.current) / 4 / scale.value + currentTime.value,

app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsTimeline.ts

@@ -48,7 +48,7 @@ export const useMouseEventsTimeline = () => {
         if (newPosition < 0) {
           newPosition = 0;
         }
-        const max = filmLength.value * 60;
+        const max = filmLength.value * 1000;
         if (newPosition > max) {
           newPosition = max;
         }

app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts

@@ -22,7 +22,7 @@ export default function useTimelineClick(page: Pages) {
     if (newTime < 0) {
       return;
     }
-    const max = filmLength.value * 60;
+    const max = filmLength.value * 1000;
     if (newTime > max) {
       return;
     }

app/pages/PageEnigma/comps/TimerGrid/TimerGrid.tsx

@@ -9,7 +9,7 @@ import { useSignals } from "@preact/signals-react/runtime";
 
 export const TimerGrid = () => {
   useSignals();
-  const sectionWidth = 60 * 4 * scale.value;
+  const sectionWidth = 1000 * 4 * scale.value;
   const scrollX = timelineScrollX.value;
 
   return (

app/pages/PageEnigma/signals/sizing.ts

@@ -5,7 +5,7 @@ import { pageWidth } from "~/signals";
 import { timelineScrollX } from "~/pages/PageEnigma/signals/timing";
 
 // timeline
-export const scale = signal(1);
+export const scale = signal(0.1);
 export const filmLength = signal(7); // seconds
 export const timelineHeight = signal(0);
 
@@ -59,7 +59,7 @@ export const timelinePremiumLockPosition = computed(() => {
 });
 
 export const fullWidth = computed(() => {
-  return filmLength.value * 60 * 4 * scale.value;
+  return filmLength.value * 1000 * 4 * scale.value;
 });
 
 // side panel

app/pages/PageEnigma/signals/utils/publishClip.ts

@@ -14,8 +14,8 @@ export function publishClip(
     action: toEngineActions.ADD_CLIP,
     data: newClip,
   });
-  if (offset + (dragItem.length ?? 0) > filmLength.value * 60) {
-    newClip.length = filmLength.value * 60 - offset;
+  if (offset + (dragItem.length ?? 0) > filmLength.value * 1000) {
+    newClip.length = filmLength.value * 1000 - offset;
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,
       action: toEngineActions.UPDATE_CLIP,