diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx index 7fb2e0eb77..2d2ab8177e 100644 --- a/app/components/LoadingBar.tsx +++ b/app/components/LoadingBar.tsx @@ -4,22 +4,30 @@ import { twMerge } from 'tailwind-merge'; interface LoadingBarProps{ + id?: string; + wrapperClassName?:string; + innerWrapperClassName?: string; + progressBackgroundClassName?: string; + progressClassName?: string; label?: string; progress?: number; isShowing?: boolean; variant?: string; message?: string; - wrapperClassName?: string; useFakeTimer?: number; } export const LoadingBar = ({ + wrapperClassName : propsWrapperClassName, + innerWrapperClassName: propsInnerWrapperClassName, + progressBackgroundClassName: propsProgressBackgroundClassName, + progressClassName : propsProgressClassName, label, progress: propsProgress = 0, isShowing = true, variant = 'primary', message, - wrapperClassName : propsWrapperClassName, - useFakeTimer + useFakeTimer, + ...rest }: LoadingBarProps) => { const [progress, setProgress] = useState(propsProgress); @@ -79,12 +87,21 @@ export const LoadingBar = ({ } const wrapperClassName = twMerge( - "w-full h-full flex flex-col justify-center items-center bg-ui-background p-4 gap-4", + "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 + ); const progressClassName = twMerge( "h-2.5 rounded-full transition-all duration-1000", getVariantClassNames(variant), + propsProgressClassName ); return ( @@ -97,15 +114,18 @@ export const LoadingBar = ({ leave="transition-opacity duration-1000" leaveFrom="opacity-100" leaveTo="opacity-0" + {...rest} > - {label && } -
-
+
+ {label && } +
+
+
+ {message &&

{message}

}
- {message &&

{message}

} ); } \ No newline at end of file diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index 58389e8920..bdfbc8feb3 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -1,8 +1,8 @@ -import { useEffect, useReducer } from "react"; +import { useReducer } from "react"; import { faSparkles } from "@fortawesome/pro-solid-svg-icons"; -import { Button, LoadingDots } from "~/components"; +import { Button, LoadingBar, LoadingDots } from "~/components"; import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet"; import { SidePanel } from "~/modules/SidePanel"; import { Controls3D } from "./comps/Controls3D"; @@ -14,12 +14,11 @@ import { SidePanelTabs } from "./comps/SidePanelTabs"; import { EngineProvider } from "./contexts/EngineProvider"; import { AppUIProvider } from "./contexts/AppUiContext"; -import { reducer, initialState, ACTION_TYPES } from "./reducer"; -import { VIEW_MODES } from "./reducer/types"; +import { appUiReducer, appUiInitialStateValues, APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "./reducers"; import { ViewSideBySide } from "./comps/ViewSideBySide"; export const PageEnigmaComponent = () => { - const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState); + const [appUiState, dispatchAppUiState] = useReducer(appUiReducer, appUiInitialStateValues); return ( @@ -39,7 +38,7 @@ export const PageEnigmaComponent = () => { // style={{ height: `calc(100% - 260px` }} >
-
+
{
{ - appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE && + appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && } +
{/* Side panel */} diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx index 3ed0d03d8d..345293f1c5 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx @@ -1,10 +1,13 @@ import { useContext, useState } from "react"; -import { Button, H4, Input } from "~/components"; +import { Button, Input } from "~/components"; import { ButtonDialogue } from "~/modules/ButtonDialogue"; +import { AppUiContext } from "../../contexts/AppUiContext"; import { EngineContext } from "../../contexts/EngineContext"; +import { APPUI_ACTION_TYPES } from "../../reducers"; export const ControlsTopButtons = () => { const editorEngine = useContext(EngineContext); + const [ appUiState, dispatchAppUiState ] = useContext(AppUiContext); const [sceneName, setSceneName] = useState(""); const [sceneToken, setSceneToken] = useState(""); @@ -18,22 +21,36 @@ export const ControlsTopButtons = () => { editorEngine?.loadScene(sceneToken); }; + const handleButtonPlayBack = () => { + editorEngine?.start_playback(); + }; + + const handleButtonTest = () => { + if(appUiState?.showEditorLoadingBar.isShowing){ + dispatchAppUiState({ + type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADINGBAR, + }); + }else{ + dispatchAppUiState({ + type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADINGBAR, + payload:{ + showEditorLoadingBar: { + message: 'display of LoadingBar triggered by Test Button' + } + } + + }); + } + }; + // const handleButtonCameraView = () => { // editorEngine?.change_camera_view(); // }; - const handleButtonPlayBack = () => { - editorEngine?.start_playback(); - }; - const handleButtonLoad = () => { + // const handleButtonLoad = () => {}; + // const handleButtonRender = () => {}; - }; - const handleButtonRender = () => { - - }; - const handleButtonPlay = () => {}; - return (
@@ -93,9 +110,15 @@ export const ControlsTopButtons = () => {
- - - + {/* + */} +
); diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx index 64d013c105..85d1fc5dea 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx @@ -8,8 +8,8 @@ import { } from "~/components" import { AppUiContext } from '../../contexts/AppUiContext'; -import { ACTION_TYPES } from '../../reducer'; -import { VIEW_MODES } from '../../reducer/types'; +import { APPUI_ACTION_TYPES } from '../../reducers'; +import { APPUI_VIEW_MODES } from '../../reducers'; export const TabStylization = ()=>{ const [appUiState, dispatchAppUiState] = useContext(AppUiContext); @@ -23,10 +23,10 @@ export const TabStylization = ()=>{ const handleChangeViewMode = ()=>{ if(dispatchAppUiState!==null){ dispatchAppUiState({ - type: ACTION_TYPES.ON_CHANGE_VIEW_MODE, + type: APPUI_ACTION_TYPES.ON_CHANGE_VIEW_MODE, payload: { - viewMode: appUiState?.viewMode === VIEW_MODES.SIDE_BY_SIDE - ? VIEW_MODES.EDITOR : VIEW_MODES.SIDE_BY_SIDE, + viewMode: appUiState?.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE + ? APPUI_VIEW_MODES.EDITOR : APPUI_VIEW_MODES.SIDE_BY_SIDE, } }) } @@ -77,7 +77,7 @@ export const TabStylization = ()=>{
diff --git a/app/pages/PageEnigma/contexts/AppUiContext.tsx b/app/pages/PageEnigma/contexts/AppUiContext.tsx index 0544b3e844..f46d63e884 100644 --- a/app/pages/PageEnigma/contexts/AppUiContext.tsx +++ b/app/pages/PageEnigma/contexts/AppUiContext.tsx @@ -1,13 +1,16 @@ import { createContext, Dispatch, ReactNode } from "react"; -import { State, Action } from "../reducer"; +import { AppUiState, AppUiAction } from "../reducers"; -export const AppUiContext = createContext<[State|null, Dispatch|null]>([null,null]); +export const AppUiContext = createContext<[ + AppUiState | null, + Dispatch +]>([ null ,()=>{}]); export const AppUIProvider = ({ value, children, }:{ - value:[State, Dispatch], + value:[AppUiState, Dispatch], children: ReactNode })=>{ return ( diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 12d899a409..789e649ee4 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -18,7 +18,7 @@ import { TimeLine, TimelineDataState } from "./timeline.js"; import { ClipUI } from "../datastructures/clips/clip_offset.js"; import { LipSyncEngine } from "./lip_sync_engine.js"; import { AnimationEngine } from "./animation_engine.js"; -import { ACTION_TYPES } from "../reducer"; +import { APPUI_ACTION_TYPES } from "../reducers"; class EditorState { // { @@ -176,7 +176,7 @@ class Editor { // Show Loader this.dispatchAppUiState({ - type: ACTION_TYPES.SHOW_EDITOR_LOADER + type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADER }); if (this.can_initialize == false) { @@ -234,14 +234,14 @@ class Editor { // hide loader this.dispatchAppUiState({ - type: ACTION_TYPES.HIDE_EDITOR_LOADER + type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER }); } // Token comes in from the front end to load the scene from the site. public async loadScene(scene_media_token: string) { this.dispatchAppUiState({ - type: ACTION_TYPES.SHOW_EDITOR_LOADER + type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADER }); if (scene_media_token != null) { @@ -275,7 +275,7 @@ class Editor { }); this.dispatchAppUiState({ - type: ACTION_TYPES.HIDE_EDITOR_LOADER + type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER }); } @@ -283,7 +283,7 @@ class Editor { // remove controls when saving scene. this.removeTransformControls(); this.dispatchAppUiState({ - type: ACTION_TYPES.SHOW_EDITOR_LOADER + type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADER }); console.log(`saveScene => SceneMediaToken:${this.current_scene_media_token} SceneGLBMediaToken:${this.current_scene_glb_media_token}`); @@ -305,7 +305,7 @@ class Editor { } this.dispatchAppUiState({ - type: ACTION_TYPES.HIDE_EDITOR_LOADER + type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER }); } diff --git a/app/pages/PageEnigma/reducer/index.tsx b/app/pages/PageEnigma/reducer/index.tsx deleted file mode 100644 index 48da7e99b6..0000000000 --- a/app/pages/PageEnigma/reducer/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import {State, Action, ACTION_TYPES, VIEW_MODES} from './types'; -import {reducer} from './reducer'; - -const initialState:State = { - timelineHeight: 260, - viewMode: VIEW_MODES.EDITOR, - showEditorLoader: { - isShowing:true, - message: 'loading Editor Engine 🦊' - } -} - -export type {State, Action}; -export { - ACTION_TYPES, - initialState, - reducer, -} \ No newline at end of file diff --git a/app/pages/PageEnigma/reducers/appUiReducer/index.tsx b/app/pages/PageEnigma/reducers/appUiReducer/index.tsx new file mode 100644 index 0000000000..3c94ae01c3 --- /dev/null +++ b/app/pages/PageEnigma/reducers/appUiReducer/index.tsx @@ -0,0 +1,16 @@ +import {State, Action, ACTION_TYPES, VIEW_MODES} from './types'; +import {reducer} from './reducer'; + +import { initialStateValues } from './values'; + +export type { + State as AppUiState, + Action as AppUiAction, +}; + +export { + VIEW_MODES as APPUI_VIEW_MODES, + ACTION_TYPES as APPUI_ACTION_TYPES, + initialStateValues as appUiInitialStateValues, + reducer as appUiReducer, +} \ No newline at end of file diff --git a/app/pages/PageEnigma/reducer/reducer.tsx b/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx similarity index 60% rename from app/pages/PageEnigma/reducer/reducer.tsx rename to app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx index 7062c2b4b5..63881a7a4b 100644 --- a/app/pages/PageEnigma/reducer/reducer.tsx +++ b/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx @@ -6,8 +6,8 @@ export function reducer(state: State, action: Action): State { return{ ...state, showEditorLoader: { - isShow: true, - message: action.payload?.showEditorLoader.message || undefined, + isShowing: true, + message: action.payload?.showEditorLoader.message, }, } } @@ -15,11 +15,29 @@ export function reducer(state: State, action: Action): State { return{ ...state, showEditorLoader: { - isShow: false, + isShowing: false, message: state.showEditorLoader.message }, } } + case ACTION_TYPES.SHOW_EDITOR_LOADINGBAR:{ + return{ + ...state, + showEditorLoadingBar: { + ...action.payload?.showEditorLoadingBar, + isShowing: true, + }, + } + } + 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/pages/PageEnigma/reducer/types.tsx b/app/pages/PageEnigma/reducers/appUiReducer/types.tsx similarity index 62% rename from app/pages/PageEnigma/reducer/types.tsx rename to app/pages/PageEnigma/reducers/appUiReducer/types.tsx index e40e32c2e3..8b658fcbb4 100644 --- a/app/pages/PageEnigma/reducer/types.tsx +++ b/app/pages/PageEnigma/reducers/appUiReducer/types.tsx @@ -10,8 +10,15 @@ export type State = { timelineHeight: number; showEditorLoader: { isShowing:boolean; - message:string|undefined; + message?:string; }; + showEditorLoadingBar:{ + isShowing: boolean; + label?: string; + message?: string; + progress?: number; + useFakeTimer?: number; + } }; @@ -20,6 +27,8 @@ 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", + HIDE_EDITOR_LOADINGBAR = "hide_editor_loadingbar", }; export type Action = @@ -32,6 +41,18 @@ export type Action = } } } + | {type: ACTION_TYPES.HIDE_EDITOR_LOADINGBAR,} + | { + type: ACTION_TYPES.SHOW_EDITOR_LOADINGBAR, + payload?:{ + showEditorLoadingBar: { + label?: string; + message?: string; + progress?: number; + useFake?: boolean; + } + } + } | { type: ACTION_TYPES.ON_TIMELINE_RESIZE, payload: { diff --git a/app/pages/PageEnigma/reducers/appUiReducer/values.tsx b/app/pages/PageEnigma/reducers/appUiReducer/values.tsx new file mode 100644 index 0000000000..25aa12acab --- /dev/null +++ b/app/pages/PageEnigma/reducers/appUiReducer/values.tsx @@ -0,0 +1,14 @@ +import {State, VIEW_MODES} from './types'; + +export const initialStateValues : State = { + timelineHeight: 260, + viewMode: VIEW_MODES.EDITOR, + showEditorLoader: { + isShowing:true, + message: 'loading Editor Engine 🦊' + }, + showEditorLoadingBar: { + isShowing:false, + progress:0, + } +} \ No newline at end of file diff --git a/app/pages/PageEnigma/reducers/index.tsx b/app/pages/PageEnigma/reducers/index.tsx new file mode 100644 index 0000000000..c670c51556 --- /dev/null +++ b/app/pages/PageEnigma/reducers/index.tsx @@ -0,0 +1,20 @@ +import { + AppUiState, + AppUiAction, + APPUI_ACTION_TYPES, + APPUI_VIEW_MODES, + appUiInitialStateValues, + appUiReducer, +} from './appUiReducer'; + +export type { + AppUiState, + AppUiAction +}; + +export { + APPUI_VIEW_MODES, + APPUI_ACTION_TYPES, + appUiInitialStateValues, + appUiReducer, +} \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 7eb8a62827..482b42e119 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -47,6 +47,21 @@ export default { "900": "#464762", "950": "#39394c", }, + "brand-tertiary": { + //Aquamarine Blue + DEFAULT: "#1cb6be", //=300 + '50': '#eefdfc', + '100': '#d4f9f8', + '200': '#aef3f3', + '300': '#62e4e6', + '400': '#38d3d8', + '500': '#1cb6be', + '600': '#1a94a0', + '700': '#1c7682', + '800': '#1f616b', + '900': '#1e505b', + '950': '#0e353e', + }, danger: { //copper rust DEFAULT: "#8f4951", //=700