From 326fe2c4974e6fddfaabe7e3be03622ef0b86a81 Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 14 Apr 2024 10:03:23 -0400 Subject: [PATCH] Fix scrubber position --- app/components/LoadingBar.tsx | 150 +++++++++--------- app/pages/PageEnigma/PageEditor.tsx | 11 +- app/pages/PageEnigma/PageEnigma.tsx | 7 + app/pages/PageEnigma/PageStyling.tsx | 41 ++--- .../PageEnigma/comps/Timeline/Scrubber.tsx | 3 +- .../PageEnigma/comps/Timeline/Timeline.tsx | 9 +- .../Timeline/utils/useMouseEventsScrubber.ts | 1 + app/pages/PageEnigma/js/editor.ts | 42 ++--- app/reducers/appUiReducer/reducer.tsx | 27 ---- app/reducers/appUiReducer/types.tsx | 34 +--- app/reducers/appUiReducer/values.tsx | 7 +- app/store/loadingBar.ts | 14 ++ 12 files changed, 141 insertions(+), 205 deletions(-) create mode 100644 app/store/loadingBar.ts diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx index 2d2ab8177e..a71e9ca78b 100644 --- a/app/components/LoadingBar.tsx +++ b/app/components/LoadingBar.tsx @@ -1,78 +1,81 @@ -import { useEffect, useState } from 'react'; -import { Transition } from '@headlessui/react'; -import { twMerge } from 'tailwind-merge'; +import { useEffect, useRef, useState } from "react"; +import { Transition } from "@headlessui/react"; +import { twMerge } from "tailwind-merge"; +import { loadingBarData, loadingBarIsShowing } from "~/store/loadingBar"; +import { useSignals } from "@preact/signals-react/runtime"; - -interface LoadingBarProps{ +interface LoadingBarProps { id?: string; - wrapperClassName?:string; + wrapperClassName?: string; innerWrapperClassName?: string; progressBackgroundClassName?: string; progressClassName?: string; - label?: string; - progress?: number; - isShowing?: boolean; variant?: string; - message?: string; - useFakeTimer?: number; } export const LoadingBar = ({ - wrapperClassName : propsWrapperClassName, + wrapperClassName: propsWrapperClassName, innerWrapperClassName: propsInnerWrapperClassName, progressBackgroundClassName: propsProgressBackgroundClassName, - progressClassName : propsProgressClassName, - label, - progress: propsProgress = 0, - isShowing = true, - variant = 'primary', - message, - useFakeTimer, + progressClassName: propsProgressClassName, + variant = "primary", ...rest }: LoadingBarProps) => { - const [progress, setProgress] = useState(propsProgress); + useSignals(); + const [progress, setProgress] = useState( + loadingBarData.value.progress, + ); + const [loop, setLoop] = useState(null); - // this takes the real progress coming from parent - useEffect(()=>{ - setProgress(propsProgress); - }, [propsProgress]); - - // this sets a fake progress, it goes to 96% - // in the amount of miliseconds provided by the flag - useEffect(()=>{ - let loop: NodeJS.Timeout; - if(useFakeTimer){ - if(useFakeTimer >= 30000){ - // this math produce 96 cuts so the progress bar updates more - loop = setInterval(function step(){ - setProgress((curr)=>{ - if(curr<96){ - return curr + 3 - }else{ - clearInterval(loop); - return curr; - } - }) - },Math.round(useFakeTimer/96)*3); - }else{ - // this math produce less cuts if useFakeTimer predicts - // a shorter load time, shorter thatn 30s - const progressPerInterval = useFakeTimer/500 - loop = loop = setInterval(function step(){ - setProgress((curr)=>{ - if(curr + progressPerInterval < 96){ - return curr + progressPerInterval - }else if (curr< 96 && curr + progressPerInterval >= 96){ - return 96; - }else{ - clearInterval(loop); - return curr; - } - }) - }, 300); - } + const useFakeTimer = useRef(0); + if (useFakeTimer.current !== loadingBarData.value.useFakeTimer) { + useFakeTimer.current = loadingBarData.value.useFakeTimer; + if (loop) { + clearInterval(loop); } - return () => clearInterval(loop); - }, []); + if (loadingBarData.value.useFakeTimer > 0) { + if (loadingBarData.value.useFakeTimer >= 30000) { + // this math produce 96 cuts so the progress bar updates more + setLoop( + setInterval( + function step() { + setProgress((curr) => { + if (curr < 96) { + return curr + 3; + } else { + clearInterval(loop!); + return curr; + } + }); + }, + Math.round(loadingBarData.value.useFakeTimer / 96) * 3, + ), + ); + } + // this math produce less cuts if useFakeTimer predicts + // a shorter load time, shorter than 30s + const progressPerInterval = loadingBarData.value.useFakeTimer / 500; + setLoop( + setInterval(function step() { + setProgress((curr) => { + if (curr + progressPerInterval < 96) { + return curr + progressPerInterval; + } else if (curr < 96 && curr + progressPerInterval >= 96) { + return 96; + } else { + clearInterval(loop!); + return curr; + } + }); + }, 300), + ); + } + } + + const oldProgress = useRef(loadingBarData.value.progress); + if (oldProgress.current !== loadingBarData.value.progress) { + oldProgress.current = loadingBarData.value.progress; + setProgress(loadingBarData.value.progress); + } function getVariantClassNames(variant: string) { switch (variant) { @@ -89,43 +92,44 @@ export const LoadingBar = ({ const wrapperClassName = twMerge( "w-full h-full relative bg-ui-background", propsWrapperClassName, - ) + ); const innerWrapperClassName = twMerge( "w-full h-full p-4 gap-4 m-auto flex flex-col justify-center items-center", propsInnerWrapperClassName, ); const progressBackgroundClassName = twMerge( "w-full bg-gray-500 rounded-full h-2.5", - propsProgressBackgroundClassName + propsProgressBackgroundClassName, ); const progressClassName = twMerge( "h-2.5 rounded-full transition-all duration-1000", getVariantClassNames(variant), - propsProgressClassName + propsProgressClassName, ); return ( + {...rest}>
- {label && } + {loadingBarData.value.label && ( + + )}
-
- {message &&

{message}

} + {loadingBarData.value.message &&

{loadingBarData.value.message}

}
); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/PageEditor.tsx b/app/pages/PageEnigma/PageEditor.tsx index 94614eaa4e..7649661d77 100644 --- a/app/pages/PageEnigma/PageEditor.tsx +++ b/app/pages/PageEnigma/PageEditor.tsx @@ -1,6 +1,6 @@ import React, { useContext } from "react"; -import { LoadingBar, LoadingDots } from "~/components"; +import { LoadingDots } from "~/components"; import { SidePanel } from "~/modules/SidePanel"; import { Controls3D } from "./comps/Controls3D"; @@ -109,15 +109,6 @@ export const PageEditor = ({ setPage }: Props) => { type="bricks" message={appUiState.showEditorLoader.message} /> -
{/* Side panel */} diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 08055ceb50..e97e66d041 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -3,6 +3,8 @@ import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackPro import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent"; import { EngineProvider } from "~/contexts/EngineProvider"; import { useInferenceJobManager } from "~/hooks"; +import { LoadingBar } from "~/components"; + export const PageEnigma = () => { useInferenceJobManager(); return ( @@ -11,6 +13,11 @@ export const PageEnigma = () => { + ); }; diff --git a/app/pages/PageEnigma/PageStyling.tsx b/app/pages/PageEnigma/PageStyling.tsx index 7ce76f2f12..98098fdf92 100644 --- a/app/pages/PageEnigma/PageStyling.tsx +++ b/app/pages/PageEnigma/PageStyling.tsx @@ -5,7 +5,7 @@ import { faArrowsRotate, faFilm, } from "@fortawesome/pro-solid-svg-icons"; -import { Button, LoadingBar } from "~/components"; +import { Button } from "~/components"; import { StyleSelection } from "~/pages/PageEnigma/comps/StyleSelection"; import { TimerGrid } from "~/pages/PageEnigma/comps/Timeline/TimerGrid"; import { Scrubber } from "~/pages/PageEnigma/comps/Timeline/Scrubber"; @@ -17,20 +17,22 @@ import { currentTime, filmLength, scale, + timelineHeight, timelineScrollX, } 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"; +import { pageWidth } from "~/store"; +import { RowHeaders } from "~/pages/PageEnigma/comps/Timeline/RowHeaders"; interface Props { setPage: (page: string) => void; } -import { AppUiContext } from "~/contexts/AppUiContext"; + export const PageStyling = ({ setPage }: Props) => { useSignals(); const editorEngine = useContext(EngineContext); - const [appUiState] = useContext(AppUiContext); const generateFrame = async () => { await editorEngine?.generateFrame(); @@ -52,6 +54,7 @@ export const PageStyling = ({ setPage }: Props) => { const onTimelineClick = useCallback( (event: React.PointerEvent) => { if (event.button === 0) { + console.log("click", event.clientX, event.pageX, timelineScrollX.value); const newTime = Math.round( (event.clientX + timelineScrollX.value - 92) / 4 / scale.value, ); @@ -62,7 +65,7 @@ export const PageStyling = ({ setPage }: Props) => { Queue.publish({ queueName: QueueNames.TO_ENGINE, action: toEngineActions.UPDATE_TIME, - data: { currentTime: Math.round(newTime) }, + data: { currentTime: newTime }, }); } }, @@ -97,30 +100,28 @@ export const PageStyling = ({ setPage }: Props) => { -
-
-
+
+ +
+
+
- + }}>
-
); }; diff --git a/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx b/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx index 74d6dbdc22..0974be1b85 100644 --- a/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx @@ -14,11 +14,10 @@ export const Scrubber = () => { const { onPointerDown, time } = useMouseEventsScrubber(); const displayTime = time === -1 ? currentTime.value : time; - if (displayTime * 4 * scale.value + 84 - timelineScrollX.value < 84) { + if (displayTime * 4 * scale.value - timelineScrollX.value < 0) { return null; } - console.log(currentTime.value, displayTime, timelineScrollX.value); return (
{ style={{ width: 88, height: timelineHeight.value - 54, - }} - > + }}>
{ style={{ width: pageWidth.value - 90, height: timelineHeight.value - 54, - }} - > + }}>
+ style={{ width: filmLength.value * 60 * 4 * scale.value + 32 }}>
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts index 2c4bb6ab7f..b074b51251 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts @@ -36,6 +36,7 @@ export const useMouseEventsScrubber = () => { (event.clientX - clientX) / 4 / scale.value + currentTime.value, ); if (isActive) { + console.log("1111"); event.stopPropagation(); event.preventDefault(); if (delta < 0 || delta > max) { diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index e1c508afb1..4d6ffc1d7a 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -31,7 +31,7 @@ import Queue from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions"; import { AssetType, MediaItem } from "~/pages/PageEnigma/models"; -import { LoadingBar } from "~/components"; +import { loadingBarData, loadingBarIsShowing } from "~/store/loadingBar"; // Main editor class that will call everything else all you need to call is " initialize() ". class Editor { @@ -362,18 +362,11 @@ class Editor { this.loadScene(sceneToken); } - this.dispatchAppUiState({ - type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR, - payload: { - showEditorLoadingBar: { - progress: 100, - }, - }, - }); - - this.dispatchAppUiState({ - type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADINGBAR, - }); + loadingBarData.value = { + ...loadingBarData.value, + progress: 100, + }; + loadingBarIsShowing.value = false; } // Token comes in from the front end to load the scene from the site. @@ -565,27 +558,20 @@ class Editor { } async showLoading() { - this.dispatchAppUiState({ - type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADINGBAR, - }); + loadingBarIsShowing.value = true; } async updateLoad(progress: number, message: string) { - this.dispatchAppUiState({ - type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR, - payload: { - showEditorLoadingBar: { - progress: progress, - message: message, - }, - }, - }); + loadingBarData.value = { + ...loadingBarData.value, + progress: progress, + message: message, + }; } async endLoading() { - this.dispatchAppUiState({ - type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADINGBAR, - }); + console.log("stop loading"); + loadingBarIsShowing.value = false; } async _test_demo() { diff --git a/app/reducers/appUiReducer/reducer.tsx b/app/reducers/appUiReducer/reducer.tsx index fe7c22edb3..3838d3f142 100644 --- a/app/reducers/appUiReducer/reducer.tsx +++ b/app/reducers/appUiReducer/reducer.tsx @@ -64,33 +64,6 @@ export function reducer(state: State, action: Action): State { }, }; } - case ACTION_TYPES.SHOW_EDITOR_LOADINGBAR: { - return { - ...state, - showEditorLoadingBar: { - ...action.payload?.showEditorLoadingBar, - isShowing: true, - }, - }; - } - case ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR: { - return { - ...state, - showEditorLoadingBar: { - ...state.showEditorLoadingBar, - ...action.payload?.showEditorLoadingBar, - }, - }; - } - case ACTION_TYPES.HIDE_EDITOR_LOADINGBAR: { - return { - ...state, - showEditorLoadingBar: { - ...state.showEditorLoadingBar, - isShowing: false, - }, - }; - } case ACTION_TYPES.ON_TIMELINE_RESIZE: { return { ...state, diff --git a/app/reducers/appUiReducer/types.tsx b/app/reducers/appUiReducer/types.tsx index 279080bd7f..09ab756bf3 100644 --- a/app/reducers/appUiReducer/types.tsx +++ b/app/reducers/appUiReducer/types.tsx @@ -26,17 +26,10 @@ export type State = { isShowing: boolean; message?: string; }; - showEditorLoadingBar: { - isShowing: boolean; - label?: string; - message?: string; - progress?: number; - useFakeTimer?: number; - }; controlPanel: ControlPanel; diagloueTts: { isOpen: boolean; - } + }; }; export enum ACTION_TYPES { @@ -44,9 +37,6 @@ export enum ACTION_TYPES { ON_CHANGE_VIEW_MODE = "on_change_view_mode", SHOW_EDITOR_LOADER = "show_editor_loader", HIDE_EDITOR_LOADER = "hide_editor_loader", - SHOW_EDITOR_LOADINGBAR = "show_editor_loadingbar", - UPDATE_EDITOR_LOADINGBAR = "update_editor_loadingbar", - HIDE_EDITOR_LOADINGBAR = "hide_editor_loadingbar", SHOW_CONTROLPANELS_SCENEOBJECT = "show_controlpanels_sceneobject", UPDATE_CONTROLPANELS_SCENEOBJECT = "update_controlpanels_sceneobject", HIDE_CONTROLPANELS_SCENEOBJECT = "hide_controlpanels_sceneobject", @@ -75,28 +65,6 @@ export type Action = }; }; } - | { type: ACTION_TYPES.HIDE_EDITOR_LOADINGBAR } - | { - type: ACTION_TYPES.SHOW_EDITOR_LOADINGBAR; - payload?: { - showEditorLoadingBar: { - label?: string; - message?: string; - progress?: number; - useFakeTimer?: number; - }; - }; - } - | { - type: ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR; - payload: { - showEditorLoadingBar: { - label?: string; - message?: string; - progress?: number; - }; - }; - } | { type: ACTION_TYPES.ON_TIMELINE_RESIZE; payload: { diff --git a/app/reducers/appUiReducer/values.tsx b/app/reducers/appUiReducer/values.tsx index c05a9a9451..e57ad3fa95 100644 --- a/app/reducers/appUiReducer/values.tsx +++ b/app/reducers/appUiReducer/values.tsx @@ -8,11 +8,6 @@ export const initialStateValues: State = { isShowing: false, message: "Loading Editor Engine 🦊", }, - showEditorLoadingBar: { - isShowing: true, - progress: 5, - message: "Loading Editor Engine 🦊", - }, controlPanel: { isShowing: false, currentSceneObject: { @@ -27,5 +22,5 @@ export const initialStateValues: State = { }, }, }, - diagloueTts:{isOpen:false} + diagloueTts: { isOpen: false }, }; diff --git a/app/store/loadingBar.ts b/app/store/loadingBar.ts new file mode 100644 index 0000000000..ca8e649f79 --- /dev/null +++ b/app/store/loadingBar.ts @@ -0,0 +1,14 @@ +import { signal } from "@preact/signals-core"; + +export const loadingBarIsShowing = signal(true); +export const loadingBarData = signal<{ + label: string; + message: string; + progress: number; + useFakeTimer: number; +}>({ + label: "", + progress: 5, + message: "Loading Editor Engine 🦊", + useFakeTimer: 0, +});