From 4c9193ce34234c4ce1cd6798669132da96ed7e4e Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 27 Mar 2024 11:39:37 -0400 Subject: [PATCH 1/8] fix engine reinit over rerender problem --- app/pages/PageEnigma/PageEnigmaComponent.tsx | 7 ++--- .../PageEnigma/contexts/EngineProvider.tsx | 30 ++++++++++++------- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index 0f8db07a61..6a4e2c3437 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useReducer } from "react"; +import { useEffect, useReducer } from "react"; import { faSparkles } from "@fortawesome/pro-solid-svg-icons"; @@ -20,13 +20,13 @@ import { ViewSideBySide } from "./comps/ViewSideBySide"; export const PageEnigmaComponent = () => { const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState); - - const canvasRef = useRef(null); + useEffect(()=>{ setTimeout(()=>dispatchAppUiState({ type: ACTION_TYPES.HIDE_EDITOR_LOADER }), 3000); },[]); + return (
@@ -46,7 +46,6 @@ export const PageEnigmaComponent = () => {
{ useEffect(() => { //componentDidMount - if (editor !== null) { - console.warn("Editor Engine already exist"); - } else if (document.getElementById("video-scene") === null) { + if (document.getElementById("video-scene") === null) { console.error( - 'Editor Engine need a target cavas with the id "video-scene"', + 'Editor Engine need a target canvas with the id "video-scene"', ); - } else { - const editor = new Editor(); - editor.initialize(); - setEditor(editor); + } else { + setEditor((curr)=>{ + if(curr!==null){ + console.warn("Editor Engine already exist"); + return curr; + }else{ + return new Editor(); + } + }); } }, []); + useEffect(()=>{ + if (editor && editor.can_initailize) + editor.initialize(); + }, [editor]); + return ( - {children} + + {children} + ); }; From 6565dc4cb04d9a640dd0d63feb6cfb138c246c3c Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 27 Mar 2024 11:52:27 -0400 Subject: [PATCH 2/8] change default tab --- app/modules/Tabs/Tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx index 321d038e04..3a83dfbd65 100644 --- a/app/modules/Tabs/Tabs.tsx +++ b/app/modules/Tabs/Tabs.tsx @@ -20,7 +20,7 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => { return (
- + {tabs.map((tab, idx) => ( Date: Wed, 27 Mar 2024 12:44:31 -0400 Subject: [PATCH 3/8] preliminarily, this should work --- .../comps/ControlsTopButtons/ControlsTopButtons.tsx | 4 ++-- app/pages/PageEnigma/contexts/EngineProvider.tsx | 13 ++++++++++--- app/pages/PageEnigma/js/editor.js | 13 ++++++++++++- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx index 65af5650f3..5828f7075b 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx @@ -9,7 +9,7 @@ export const ControlsTopButtons = () => { const handleButtonSave = () => { console.log(`SceneName is ${sceneName}`); - // editorEngine?.save(); + editorEngine?.save(); }; const handleButtonCameraView = () => { @@ -24,7 +24,7 @@ export const ControlsTopButtons = () => { }; const handleButtonRender = () => { console.log("Saving GLB to server for reference"); - editorEngine._upload_for_testing(); + editorEngine?._upload_for_testing(); //editorEngine?.togglePlayback(); }; const handleButtonPlay = () => {}; diff --git a/app/pages/PageEnigma/contexts/EngineProvider.tsx b/app/pages/PageEnigma/contexts/EngineProvider.tsx index 7f40dc4976..1ddcfffec2 100644 --- a/app/pages/PageEnigma/contexts/EngineProvider.tsx +++ b/app/pages/PageEnigma/contexts/EngineProvider.tsx @@ -1,13 +1,18 @@ -import { ReactNode, useEffect, useRef, useState } from "react"; -import { EngineContext } from "./EngineContext"; +import { ReactNode, useContext, useEffect, useState } from "react"; + import Editor from "~/pages/PageEnigma/js/editor"; +import { EngineContext } from "./EngineContext"; +import { AppUiContext } from "./AppUiContext"; + + interface Props { children: ReactNode; } export const EngineProvider = ({ children }: Props) => { const [editor, setEditor] = useState(null); + const [appUiState, dispatchAppUiState] = useContext(AppUiContext); useEffect(() => { //componentDidMount @@ -19,7 +24,9 @@ export const EngineProvider = ({ children }: Props) => { ); } else { const editor = new Editor(); - editor.initialize(); + editor.initialize({ + dispatchAppUiState + }); setEditor(editor); } }, []); diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index c8b2b04515..73fe2e7f25 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/app/pages/PageEnigma/js/editor.js @@ -22,6 +22,7 @@ import { LipSync } from "./lipsync.js"; import { LipSyncEngine } from "./lip_sync_engine.ts"; import { AnimationEngine } from "./animation_engine.ts"; import { faL } from "@fortawesome/pro-solid-svg-icons"; +import { ACTION_TYPES } from "../reducer/types.js"; if (typeof window !== "undefined") { import("ccapture.js") @@ -117,7 +118,12 @@ class Editor { } // Initializes the main scene and ThreeJS essentials. - initialize() { + /* + config :{ + appUiDispatcher: dispatch function to react app + } + */ + initialize(config) { if (this.can_initailize == false) { return; } @@ -164,6 +170,8 @@ class Editor { this.timeline.scene = this.activeScene; + // setup Callbacks to ReactLand + this.appUiDispatcher = config.appUiDispatcher; this._test_demo() } @@ -377,6 +385,9 @@ class Editor { //this.audio_engine.playClip("m_f7jnwt3d1ddchatdk5vaqt0n4mb1hg"); //console.log(this.selected); + this.appUiDispatcher({ + type: ACTION_TYPES.SHOW_EDITOR_LOADER + }); if (this.selected == null) { return; } From d2dd08aec496cbf4987b53ff932b6a2182a30260 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 27 Mar 2024 13:43:39 -0400 Subject: [PATCH 4/8] hide loader comment --- app/pages/PageEnigma/js/editor.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index d0a0412246..055eff14a6 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/app/pages/PageEnigma/js/editor.js @@ -131,6 +131,7 @@ class Editor { return; } this.can_initailize == false; + // Gets the canvas. this.canvReference = document.getElementById("video-scene"); // Base width and height. @@ -393,6 +394,11 @@ class Editor { type: ACTION_TYPES.SHOW_EDITOR_LOADER }); + + // this.dispatchAppUiState({ + // type: ACTION_TYPES.HIDE_EDITOR_LOADER + // }); + if (this.selected == null) { return; } From 1fad2c5353e848dde06a210f70034fc4f0f15e00 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 27 Mar 2024 14:41:01 -0400 Subject: [PATCH 5/8] load scene token button --- .../ControlsTopButtons/ControlsTopButtons.tsx | 92 ++++++++++++------- 1 file changed, 58 insertions(+), 34 deletions(-) diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx index 65af5650f3..c8246c1718 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx @@ -6,16 +6,22 @@ import { EngineContext } from "../../contexts/EngineContext"; export const ControlsTopButtons = () => { const editorEngine = useContext(EngineContext); const [sceneName, setSceneName] = useState(""); + const [sceneToken, setSceneToken] = useState(""); const handleButtonSave = () => { console.log(`SceneName is ${sceneName}`); // editorEngine?.save(); }; - const handleButtonCameraView = () => { - editorEngine?.change_camera_view(); + const handleButtonLoadScene = () => { + console.log(`Scene Token is ${sceneToken}`); + // editorEngine?.save(); }; + // const handleButtonCameraView = () => { + // editorEngine?.change_camera_view(); + // }; + const handleButtonPlayBack = () => { editorEngine?.start_playback(); }; @@ -24,46 +30,64 @@ export const ControlsTopButtons = () => { }; const handleButtonRender = () => { console.log("Saving GLB to server for reference"); - editorEngine._upload_for_testing(); + editorEngine?._upload_for_testing(); //editorEngine?.togglePlayback(); }; const handleButtonPlay = () => {}; return ( -
- +
+
+ + + - - - + + + - -

Do you need help?

-

Ask Michael about this project

-

Ask Miles about ThreeJS

-

Ask Wil about React

- + +

Do you need help?

+

Ask Michael about this project

+

Ask Miles about ThreeJS

+

Ask Wil about React

+ +
-
+
+ +
+
From d73e2d14445b7d152f6e451cdaa7ae05d922f0a9 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 27 Mar 2024 15:59:43 -0400 Subject: [PATCH 6/8] preliminarily, some div scaffolding --- app/components/LoadingBar.tsx | 47 +++++++++++++++++++++++++++++++++ app/components/index.tsx | 2 ++ app/routes/ComponentLibrary.tsx | 34 +++++++++++++++++++----- 3 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 app/components/LoadingBar.tsx diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx new file mode 100644 index 0000000000..cf2969c641 --- /dev/null +++ b/app/components/LoadingBar.tsx @@ -0,0 +1,47 @@ +import { twMerge } from 'tailwind-merge'; +import { H4 } from '.'; + +interface LoadingBarProps{ + label?: string; + progress?: number; + variant?: string; + pulsing?: boolean; + message?: string; +} +export const LoadingBar = ({ + label, + progress = 50, + variant = 'primary', + pulsing = false, + message, +}: LoadingBarProps) => { + + function getVariantClassNames(variant: string) { + switch (variant) { + case "secondary": { + return " bg-brand-secondary text-white "; + } + case "primary": + default: { + return " bg-brand-primary text-white "; + } + } + } + const progressClassName = twMerge( + "h-2.5 rounded-full", + getVariantClassNames(variant), + ); + + return ( +
+ {label && } +
+
+
+ {message &&

{message}

} +
+ ); +} \ No newline at end of file diff --git a/app/components/index.tsx b/app/components/index.tsx index 28c7eb3efc..2065c8c20c 100644 --- a/app/components/index.tsx +++ b/app/components/index.tsx @@ -6,6 +6,7 @@ import { Input } from "./Input"; import { H4 } from "./H4"; import { ItemPicker } from "./ItemPicker"; import { Textarea } from "./Textarea"; +import { LoadingBar } from "./LoadingBar"; import { LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots"; export { @@ -17,6 +18,7 @@ export { ItemPicker, Textarea, Input, + LoadingBar, LoadingDotsBricks, LoadingDotsTyping, }; diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx index 41bbfb7f8d..54814f8451 100644 --- a/app/routes/ComponentLibrary.tsx +++ b/app/routes/ComponentLibrary.tsx @@ -1,11 +1,33 @@ -import { Button } from "~/components/Button"; -import { ButtonLink } from "~/components/ButtonLink"; +import { + Button, + ButtonLink, + H4, + LoadingBar +} from "~/components"; + export default function ComponentLibrary () { return( - <> - - Button with Link - +
+ +
+

Buttons

+
+ + + +
+
+ +
+

ButtonLink

+ Back to / +
+ +
+

Loading Bar

+ +
+
); }; \ No newline at end of file From 31784353a59c6625552b81ec2e0f0c369add2a40 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 27 Mar 2024 16:43:24 -0400 Subject: [PATCH 7/8] this works better --- app/components/ItemPicker.tsx | 2 +- app/components/LoadingBar.tsx | 13 ++++++++++--- app/routes/ComponentLibrary.tsx | 27 ++++++++++++++++++++++++++- 3 files changed, 37 insertions(+), 5 deletions(-) diff --git a/app/components/ItemPicker.tsx b/app/components/ItemPicker.tsx index a0949916ec..8e80dd2742 100644 --- a/app/components/ItemPicker.tsx +++ b/app/components/ItemPicker.tsx @@ -25,7 +25,7 @@ export const ItemPicker = ({ onClick={handleSelected} > -
+

{label}

) diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx index cf2969c641..09993ce0eb 100644 --- a/app/components/LoadingBar.tsx +++ b/app/components/LoadingBar.tsx @@ -7,6 +7,7 @@ interface LoadingBarProps{ variant?: string; pulsing?: boolean; message?: string; + wrapperClassName?: string; } export const LoadingBar = ({ label, @@ -14,6 +15,7 @@ export const LoadingBar = ({ variant = 'primary', pulsing = false, message, + wrapperClassName : propsWrapperClassName, }: LoadingBarProps) => { function getVariantClassNames(variant: string) { @@ -27,15 +29,20 @@ export const LoadingBar = ({ } } } + + const wrapperClassName = twMerge( + "w-full h-full flex flex-col justify-center items-center bg-ui-background p-4 gap-4", + propsWrapperClassName, + ) const progressClassName = twMerge( - "h-2.5 rounded-full", + "h-2.5 rounded-full transition-all duration-1000", getVariantClassNames(variant), ); return ( -
+
{label && } -
+
{ + if(progress === 0){ + const loop = setInterval(function timer(){ + setProgress((curr)=>{ + if (curr < 100){ + return curr+10; + }else{ + clearTimeout(loop); + return curr; + } + })} + , 3000); + } + }, [progress]); + return(
@@ -26,7 +43,15 @@ export default function ComponentLibrary () {

Loading Bar

- +
+ + +
+
); From 905dc454f23b41e3dde01a0ade4d5ea2a60eb7ce Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 27 Mar 2024 17:02:52 -0400 Subject: [PATCH 8/8] stable build --- app/components/LoadingBar.tsx | 6 +++--- app/routes/ComponentLibrary.tsx | 16 +++++++++++++++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx index 09993ce0eb..90a112df5c 100644 --- a/app/components/LoadingBar.tsx +++ b/app/components/LoadingBar.tsx @@ -5,17 +5,17 @@ interface LoadingBarProps{ label?: string; progress?: number; variant?: string; - pulsing?: boolean; message?: string; wrapperClassName?: string; + useFakeTimer?: number; } export const LoadingBar = ({ label, - progress = 50, + progress = 0, variant = 'primary', - pulsing = false, message, wrapperClassName : propsWrapperClassName, + useFakeTimer = (1000 * 60) //defaults to 1min }: LoadingBarProps) => { function getVariantClassNames(variant: string) { diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx index 9414bc40ee..acc2188c52 100644 --- a/app/routes/ComponentLibrary.tsx +++ b/app/routes/ComponentLibrary.tsx @@ -3,7 +3,9 @@ import { Button, ButtonLink, H4, - LoadingBar + LoadingBar, + LoadingDotsTyping, + LoadingDotsBricks, } from "~/components"; @@ -41,6 +43,18 @@ export default function ComponentLibrary () { Back to /
+
+

Loading Dots

+
+
+ +
+
+ +
+
+
+

Loading Bar