From fba3c48fba9271d7d216befe1322b5bcd7378e2e Mon Sep 17 00:00:00 2001 From: Tanish Manku Date: Thu, 19 Dec 2024 18:35:04 -0800 Subject: [PATCH] Use millis for FilmLength calculations because seconds*60 is meaningless --- .../comps/ControlsVideo/ControlsVideo.tsx | 14 +++++++------- app/pages/PageEnigma/comps/Timeline/Timeline.tsx | 2 +- app/pages/PageEnigma/comps/Timeline/TrackClips.tsx | 4 ++-- .../PageEnigma/comps/Timeline/TrackClipsPrompt.tsx | 6 +++--- .../PageEnigma/comps/Timeline/TrackKeyFrame.tsx | 2 +- .../comps/Timeline/utils/useMouseEventsScrubber.ts | 2 +- .../comps/Timeline/utils/useMouseEventsTimeline.ts | 2 +- .../comps/Timeline/utils/useTimelineClick.ts | 2 +- app/pages/PageEnigma/comps/TimerGrid/TimerGrid.tsx | 2 +- app/pages/PageEnigma/signals/sizing.ts | 4 ++-- app/pages/PageEnigma/signals/utils/publishClip.ts | 4 ++-- 11 files changed, 22 insertions(+), 22 deletions(-) diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx index f843378134..91da1c8a0f 100644 --- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx +++ b/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 = () => { / - {formatTime(filmLength.value * 60)} + {formatTime(filmLength.value * 1000)} {showStylePage && ( diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx index 50a1d112fc..0a32a115c7 100644 --- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -141,7 +141,7 @@ export const Timeline = () => { >
{currentPage.value === Pages.EDIT ? ( <> diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx index 02e7bd21c1..2c05a695c8 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx +++ b/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} diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClipsPrompt.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClipsPrompt.tsx index 60cfdcd073..3657f94fd6 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackClipsPrompt.tsx +++ b/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} diff --git a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx index f9aa7722ca..c552fee3ad 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx +++ b/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, }); diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts index d4223d1dd6..30bba39a00 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts +++ b/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, diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsTimeline.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsTimeline.ts index bda6ace369..b68f49db88 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsTimeline.ts +++ b/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; } diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts b/app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts index f96ead2d6e..5ff9081227 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts +++ b/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; } diff --git a/app/pages/PageEnigma/comps/TimerGrid/TimerGrid.tsx b/app/pages/PageEnigma/comps/TimerGrid/TimerGrid.tsx index c2d638c556..e1a3b334f2 100644 --- a/app/pages/PageEnigma/comps/TimerGrid/TimerGrid.tsx +++ b/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 ( diff --git a/app/pages/PageEnigma/signals/sizing.ts b/app/pages/PageEnigma/signals/sizing.ts index 95f8a27391..61c0a75d52 100644 --- a/app/pages/PageEnigma/signals/sizing.ts +++ b/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 diff --git a/app/pages/PageEnigma/signals/utils/publishClip.ts b/app/pages/PageEnigma/signals/utils/publishClip.ts index 02fd78a1be..a20218112d 100644 --- a/app/pages/PageEnigma/signals/utils/publishClip.ts +++ b/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,