From 69f92c88a1330465ba2ec89aa75280d95d8dbb17 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 8 May 2024 22:03:31 -0400 Subject: [PATCH] Loading state when requesting a Frame Preview (#356) - Spinner on Editor canvas when requesting a Frame Preview - if Frame Preview returns an error, pop a toast Co-authored-by: wil --- app/pages/PageEnigma/PageEditor.tsx | 38 ++++-------- app/pages/PageEnigma/Queue/Queue.ts | 12 +++- .../PageEnigma/Queue/fromEngineActions.ts | 1 + .../PageEnigma/comps/PreviewFrameImage.tsx | 61 +++++++++++++++++++ .../comps/Timeline/utils/useQueueHandler.ts | 12 +++- app/pages/PageEnigma/js/editor.ts | 14 ++++- 6 files changed, 105 insertions(+), 33 deletions(-) create mode 100644 app/pages/PageEnigma/comps/PreviewFrameImage.tsx diff --git a/app/pages/PageEnigma/PageEditor.tsx b/app/pages/PageEnigma/PageEditor.tsx index 697f6d32bb..f8cf63d760 100644 --- a/app/pages/PageEnigma/PageEditor.tsx +++ b/app/pages/PageEnigma/PageEditor.tsx @@ -1,40 +1,37 @@ import React, { useContext, useEffect } from "react"; +import { useSignals } from "@preact/signals-react/runtime"; import { LoadingDots } from "~/components"; import { SidePanel } from "~/modules/SidePanel"; +import { TopBar } from "~/modules/TopBar"; import { Controls3D } from "./comps/Controls3D"; import { ControlsTopButtons } from "./comps/ControlsTopButtons"; import { ControlsVideo } from "./comps/ControlsVideo"; import { ControlPanelSceneObject } from "./comps/ControlPanelSceneObject"; import { PreviewEngineCamera } from "./comps/PreviewEngineCamera"; +import { PreviewFrameImage } from "./comps/PreviewFrameImage"; import { ViewSideBySide } from "./comps/ViewSideBySide"; import { Timeline } from "./comps/Timeline"; +// import { AssetType } from "~/pages/PageEnigma/models"; +import { AppUiContext } from "~/contexts/AppUiContext"; import { APPUI_VIEW_MODES } from "../../reducers"; +import { pageHeight, pageWidth } from "~/store"; import { timelineHeight, sidePanelWidth, sidePanelVisible, dndSidePanelWidth, dndTimelineHeight, - dragItem, - canDrop, + // dragItem, + // canDrop, } from "~/pages/PageEnigma/store"; -import { useSignals } from "@preact/signals-react/runtime"; -import { AppUiContext } from "~/contexts/AppUiContext"; -import { pageHeight, pageWidth } from "~/store"; -import { TopBar } from "~/modules/TopBar"; -import { - editorState, - EditorStates, - previewSrc, -} from "~/pages/PageEnigma/store/engine"; -import { AssetType } from "~/pages/PageEnigma/models"; + + export const PageEditor = () => { useSignals(); - const [appUiState] = useContext(AppUiContext); //To prevent the click event from propagating to the canvas: TODO: HANDLE THIS BETTER? @@ -92,20 +89,7 @@ export const PageEditor = () => { height: pageHeight.value - timelineHeight.value - 68, }}> - {editorState.value === EditorStates.PREVIEW && ( - - )} + {/* Top controls */} diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts index a5365cf026..6c48cccb0d 100644 --- a/app/pages/PageEnigma/Queue/Queue.ts +++ b/app/pages/PageEnigma/Queue/Queue.ts @@ -9,23 +9,33 @@ import { } from "~/pages/PageEnigma/models"; import { toTimelineActions } from "./toTimelineActions"; +import { ClipUI } from "../datastructures/clips/clip_ui"; +import { ToastTypes } from "~/contexts/ToasterContext"; + +export type ToastDataType = { + type: ToastTypes; + message: string; +} + type UnionedActionTypes = | fromEngineActions | toEngineActions | toTimelineActions; + type UnionedDataTypes = | QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem + | ToastDataType | null; export type QueueSubscribeType = { action: UnionedActionTypes; data: UnionedDataTypes; }; -import { ClipUI } from "../datastructures/clips/clip_ui"; + class Queue { private _queue: Record< string, diff --git a/app/pages/PageEnigma/Queue/fromEngineActions.ts b/app/pages/PageEnigma/Queue/fromEngineActions.ts index a1ebc359b2..8db2fe6ee2 100644 --- a/app/pages/PageEnigma/Queue/fromEngineActions.ts +++ b/app/pages/PageEnigma/Queue/fromEngineActions.ts @@ -7,5 +7,6 @@ export enum fromEngineActions { UPDATE_CHARACTER_ID = "update_character_id", UPDATE_TIME = "update_time", UPDATE_TIME_LINE = "update_timeline", + POP_A_TOAST = "pop_a_toast", // data={currentTime: number} } diff --git a/app/pages/PageEnigma/comps/PreviewFrameImage.tsx b/app/pages/PageEnigma/comps/PreviewFrameImage.tsx new file mode 100644 index 0000000000..6f7634bfd1 --- /dev/null +++ b/app/pages/PageEnigma/comps/PreviewFrameImage.tsx @@ -0,0 +1,61 @@ +import { useSignals } from "@preact/signals-react/runtime"; + +import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import { + editorState, + EditorStates, + previewSrc, +} from "~/pages/PageEnigma/store/engine"; +import { + timelineHeight, + sidePanelWidth, + sidePanelVisible, +} from "~/pages/PageEnigma/store"; +import { pageHeight, pageWidth } from "~/store"; + +import { H3 } from "~/components"; + +export const PreviewFrameImage = ()=>{ + useSignals(); + if( editorState.value === EditorStates.PREVIEW ){ + if ( previewSrc.value === "" ){ + return ( +
+
+ + +

Generating Preview...

+
+
+ ); + }else{ + return( + + ); + } + } + return null; +} \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index 93d3dc1aee..bd9b5b4684 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -11,7 +11,7 @@ import { loadObjectData, selectedObject, } from "~/pages/PageEnigma/store"; -import Queue from "~/pages/PageEnigma/Queue/Queue"; +import Queue, { ToastDataType } from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; import { @@ -22,12 +22,14 @@ import { UpdateTime, } from "~/pages/PageEnigma/models"; import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; +import { ToasterContext } from "~/contexts/ToasterContext"; +import { ToastTypes } from "~/contexts/ToasterContext"; import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions"; import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui"; interface Arguments { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem | null; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem | ToastDataType | null; } const LOADING_FUNCTIONS: Record void> = { @@ -41,6 +43,7 @@ export function useQueueHandler() { useSignals(); const { addKeyframe, clearExistingData, deleteObjectOrCharacter } = useContext(TrackContext); + const { addToast } = useContext(ToasterContext); const handleFromEngineActions = useCallback( ({ action, data }: Arguments) => { @@ -79,6 +82,11 @@ export function useQueueHandler() { LOADING_FUNCTIONS[item.group](item); }); break; + case fromEngineActions.POP_A_TOAST:{ + const message = (data as ToastDataType).message; + addToast(ToastTypes.ERROR, message); + break; + } default: throw new Error(`Unknown action ${action}`); } diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index e29ae51dc4..cb17c69353 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -43,6 +43,7 @@ import { import { AuthState } from "~/contexts/Authentication/types"; import { hotkeysStatus } from "~/pages/PageEnigma/store"; import { SceneSignal } from "~/store"; +import { ToastTypes } from "~/contexts/ToasterContext"; // Main editor class that will call everything else all you need to call is " initialize() ". @@ -1333,11 +1334,18 @@ class Editor { ); previewSrc.value = url; - return Promise.resolve(url); + } catch (err: any) { - console.log(err.message); - return Promise.resolve(""); + Queue.publish({ + queueName: QueueNames.FROM_ENGINE, + action: fromEngineActions.POP_A_TOAST, + data: { + type: ToastTypes.ERROR, + message: err.message + }, + }) + // return Promise.resolve(""); } } }