From 75261f4fa0beb1d4c16cf024dd93abbdfee25d6b Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Wed, 10 Apr 2024 15:16:24 -0400 Subject: [PATCH] Add stylizations page --- app/components/ButtonLink.tsx | 4 +- .../PageEnigma => }/contexts/AppUiContext.tsx | 0 .../contexts/EngineContext.tsx | 0 app/contexts/EngineProvider.tsx | 29 +++++ .../contexts/ToasterContext.tsx | 0 app/contexts/TopBarInner.tsx | 2 +- app/modules/LowerPanel/LowerPanel.tsx | 20 +-- app/modules/TopBar/TopBar.tsx | 25 ++-- app/modules/TopBarHelmet/TopBarHelmet.tsx | 28 ++-- app/pages/PageEnigma/PageEnigma.tsx | 44 ++----- app/pages/PageEnigma/PageEnigmaComponent.tsx | 30 +---- .../ControlPanelSceneObject.tsx | 6 +- .../comps/Controls3D/Controls3D.tsx | 18 ++- .../ControlsTopButtons/ControlsTopButtons.tsx | 12 +- .../comps/ControlsVideo/ControlsVideo.tsx | 2 +- .../comps/PreviewEngineCamera/index.tsx | 5 +- .../comps/SidePanelTabs/TabStylization.tsx | 7 +- .../comps/Timeline/TrackKeyFrame.tsx | 2 +- .../Timeline/utils/useMouseEventsScrubber.ts | 2 - .../Timeline/utils/useMouseEventsTimeline.ts | 7 +- .../PageEnigma/comps/ViewSideBySide/index.tsx | 31 +++-- .../PageEnigma/contexts/EngineProvider.tsx | 47 ------- .../TrackContext/utils/useUpdateKeyframe.ts | 2 +- app/pages/PageEnigma/js/editor.ts | 2 +- app/pages/PageEnigma/store/sidePanel.ts | 3 +- app/pages/PageEnigma/store/sizing.ts | 3 - app/pages/PageStylization/PageStylization.tsx | 23 ++++ .../PageStylizationComponent.tsx | 50 +++++++ .../PageStylization/comps/PreviewImages.tsx | 44 +++++++ .../PageStylization/comps/StyleSelection.tsx | 123 ++++++++++++++++++ app/pages/PageStylization/index.tsx | 1 + app/pages/PageStylization/styleList.ts | 84 ++++++++++++ .../reducers/appUiReducer/index.tsx | 0 .../reducers/appUiReducer/reducer.tsx | 0 .../reducers/appUiReducer/types.tsx | 4 +- .../reducers/appUiReducer/values.tsx | 0 app/{pages/PageEnigma => }/reducers/index.tsx | 0 app/root.tsx | 46 +++++-- app/routes/Stylization.tsx | 11 ++ app/routes/_index.tsx | 11 +- app/store/global.ts | 6 + app/store/index.ts | 1 + 42 files changed, 519 insertions(+), 216 deletions(-) rename app/{pages/PageEnigma => }/contexts/AppUiContext.tsx (100%) rename app/{pages/PageEnigma => }/contexts/EngineContext.tsx (100%) create mode 100644 app/contexts/EngineProvider.tsx rename app/{pages/PageEnigma => }/contexts/ToasterContext.tsx (100%) delete mode 100644 app/pages/PageEnigma/contexts/EngineProvider.tsx create mode 100644 app/pages/PageStylization/PageStylization.tsx create mode 100644 app/pages/PageStylization/PageStylizationComponent.tsx create mode 100644 app/pages/PageStylization/comps/PreviewImages.tsx create mode 100644 app/pages/PageStylization/comps/StyleSelection.tsx create mode 100644 app/pages/PageStylization/index.tsx create mode 100644 app/pages/PageStylization/styleList.ts rename app/{pages/PageEnigma => }/reducers/appUiReducer/index.tsx (100%) rename app/{pages/PageEnigma => }/reducers/appUiReducer/reducer.tsx (100%) rename app/{pages/PageEnigma => }/reducers/appUiReducer/types.tsx (94%) rename app/{pages/PageEnigma => }/reducers/appUiReducer/values.tsx (100%) rename app/{pages/PageEnigma => }/reducers/index.tsx (100%) create mode 100644 app/routes/Stylization.tsx create mode 100644 app/store/global.ts create mode 100644 app/store/index.ts diff --git a/app/components/ButtonLink.tsx b/app/components/ButtonLink.tsx index c213470375..5d96f64879 100644 --- a/app/components/ButtonLink.tsx +++ b/app/components/ButtonLink.tsx @@ -28,7 +28,7 @@ export const ButtonLink = ({ } } const baseClassName = - "text-sm font-medium rounded-lg px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150"; + "text-sm font-medium whitespace-nowrap rounded-lg px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150"; const variantClassNames = getVariantClassNames(variant); const className = twMerge(baseClassName, variantClassNames, propsClassName); // END TODO @@ -36,7 +36,7 @@ export const ButtonLink = ({ return ( diff --git a/app/pages/PageEnigma/contexts/AppUiContext.tsx b/app/contexts/AppUiContext.tsx similarity index 100% rename from app/pages/PageEnigma/contexts/AppUiContext.tsx rename to app/contexts/AppUiContext.tsx diff --git a/app/pages/PageEnigma/contexts/EngineContext.tsx b/app/contexts/EngineContext.tsx similarity index 100% rename from app/pages/PageEnigma/contexts/EngineContext.tsx rename to app/contexts/EngineContext.tsx diff --git a/app/contexts/EngineProvider.tsx b/app/contexts/EngineProvider.tsx new file mode 100644 index 0000000000..2394554bba --- /dev/null +++ b/app/contexts/EngineProvider.tsx @@ -0,0 +1,29 @@ +import { ReactNode, useEffect, useState } from "react"; + +import Editor from "~/pages/PageEnigma/js/editor"; + +import { EngineContext } from "./EngineContext"; + +interface Props { + children: ReactNode; +} + +export const EngineProvider = ({ children }: Props) => { + const [editor, setEditor] = useState(null); + + useEffect(() => { + setEditor((curr) => { + if (curr !== null) { + console.warn("Editor Engine already exist"); + return curr; + } else { + return new Editor(); + } + }); + // } + }, []); + + return ( + {children} + ); +}; diff --git a/app/pages/PageEnigma/contexts/ToasterContext.tsx b/app/contexts/ToasterContext.tsx similarity index 100% rename from app/pages/PageEnigma/contexts/ToasterContext.tsx rename to app/contexts/ToasterContext.tsx diff --git a/app/contexts/TopBarInner.tsx b/app/contexts/TopBarInner.tsx index 7e6653dba0..751ac6e4b7 100644 --- a/app/contexts/TopBarInner.tsx +++ b/app/contexts/TopBarInner.tsx @@ -9,4 +9,4 @@ export const TopBarInnerContext = createContext<{ location: string, node: React.ReactNode, } | null)=>void; -} | null>(null); \ No newline at end of file +} | null>(null); diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx index f5bab28550..33b641b823 100644 --- a/app/modules/LowerPanel/LowerPanel.tsx +++ b/app/modules/LowerPanel/LowerPanel.tsx @@ -14,9 +14,10 @@ import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; interface LowerPanelPropsI { children: React.ReactNode; + onStyle?: boolean; } -export const LowerPanel = ({ children }: LowerPanelPropsI) => { +export const LowerPanel = ({ children, onStyle }: LowerPanelPropsI) => { const { onPointerDown } = useMouseEventsTimeline(); const displayHeight = @@ -50,18 +51,21 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => { return ( <> -
+ {!onStyle && ( +
+ )}
{ overTimeline.value = true; }} diff --git a/app/modules/TopBar/TopBar.tsx b/app/modules/TopBar/TopBar.tsx index 40632259ef..29e40a9657 100644 --- a/app/modules/TopBar/TopBar.tsx +++ b/app/modules/TopBar/TopBar.tsx @@ -1,14 +1,17 @@ -import { useContext, } from "react"; import { useLocation } from "@remix-run/react"; import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons"; -import { TopBarInnerContext } from "~/contexts/TopBarInner"; import { ButtonLink } from "~/components"; import { AuthButtons } from "./AuthButtons"; +import { sceneTitle } from "~/store"; -export const TopBar = () => { +interface Props { + pageName: string; +} + +export const TopBar = ({ pageName }: Props) => { const currentLocation = useLocation().pathname; return ( @@ -30,15 +33,16 @@ export const TopBar = () => { alt="Logo FakeYou StoryTeller.ai" /> - {currentLocation !== "/" && + {currentLocation !== "/" && ( Back to Dashboard - } + )}
- + {pageName} /  + {sceneTitle.value}
@@ -49,12 +53,3 @@ export const TopBar = () => { ); }; - -const TopBarInner = ({currentLocation}:{currentLocation:string}) => { - const { TopBarInner } = useContext(TopBarInnerContext) || {}; - if(!TopBarInner || TopBarInner.location !== currentLocation){ - return null; - } - return TopBarInner.node; -}; - diff --git a/app/modules/TopBarHelmet/TopBarHelmet.tsx b/app/modules/TopBarHelmet/TopBarHelmet.tsx index b73b655f39..2bd01a41f5 100644 --- a/app/modules/TopBarHelmet/TopBarHelmet.tsx +++ b/app/modules/TopBarHelmet/TopBarHelmet.tsx @@ -1,17 +1,9 @@ import { useLocation } from "@remix-run/react"; -import { - useContext, - useEffect, - useLayoutEffect, - useState, -} from 'react'; +import { useContext, useEffect, useLayoutEffect, useState } from "react"; import { TopBarInnerContext } from "~/contexts/TopBarInner"; - -export const TopBarHelmet = (props:{ - children: React.ReactNode | null; -})=>{ +export const TopBarHelmet = (props: { children: React.ReactNode | null }) => { const [showChild, setShowChild] = useState(false); // Wait until after client-side hydration to show useEffect(() => { @@ -23,22 +15,22 @@ export const TopBarHelmet = (props:{ } return ; -} +}; -const LazyLoadTopBarInnerContent = (props:{ +const LazyLoadTopBarInnerContent = (props: { children: React.ReactNode | null; -})=>{ +}) => { const { setTopBarInner } = useContext(TopBarInnerContext) || {}; const location = useLocation().pathname; - useLayoutEffect(()=>{ - if(setTopBarInner){ + useLayoutEffect(() => { + if (setTopBarInner) { setTopBarInner({ location: location, - node: props.children + node: props.children, }); } - },[setTopBarInner]); + }, [setTopBarInner]); return null; -} +}; diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 613becceb5..499ad12433 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -1,44 +1,26 @@ import { PageEnigmaComponent } from "./PageEnigmaComponent"; import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackProvider"; -import { AppUIProvider } from "~/pages/PageEnigma/contexts/AppUiContext"; -import { EngineProvider } from "~/pages/PageEnigma/contexts/EngineProvider"; import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent"; -import { useEffect } from "react"; -import { useSignals } from "@preact/signals-react/runtime"; -import { - pageHeight, - pageWidth, - sidePanelWidth, - timelineHeight, -} from "~/pages/PageEnigma/store"; +import { useContext, useEffect } from "react"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { EngineContext } from "~/contexts/EngineContext"; export const PageEnigma = () => { - useSignals(); + const [_, dispatchAppUiState] = useContext(AppUiContext); + const editor = useContext(EngineContext); + useEffect(() => { - function setPage() { - // TODO address this issue with zooming - pageHeight.value = window.innerHeight; - pageWidth.value = window.innerWidth; + if (editor && editor.can_initialize && dispatchAppUiState !== null) { + console.log("initializing Editor"); + editor.initialize({ + dispatchAppUiState, + }); } - timelineHeight.value = window.innerHeight * 0.25; - sidePanelWidth.value = 443; - - setPage(); - - window.addEventListener("resize", setPage); - - return () => { - window.removeEventListener("resize", setPage); - }; - }, []); + }, [editor, dispatchAppUiState]); return ( - - - - - + ); diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index e635b36557..0b4ef4fbdc 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -1,8 +1,6 @@ -import { useContext, useState } from "react"; -import { faSparkles } from "@fortawesome/pro-solid-svg-icons"; +import React, { useContext } from "react"; -import { Button, LoadingBar, LoadingDots } from "~/components"; -import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet"; +import { LoadingBar, LoadingDots } from "~/components"; import { SidePanel } from "~/modules/SidePanel"; import { Controls3D } from "./comps/Controls3D"; @@ -13,24 +11,22 @@ import { PreviewEngineCamera } from "./comps/PreviewEngineCamera"; import { ViewSideBySide } from "./comps/ViewSideBySide"; import { Timeline } from "./comps/Timeline"; -import { APPUI_VIEW_MODES } from "./reducers"; +import { APPUI_VIEW_MODES } from "../../reducers"; import { timelineHeight, sidePanelWidth, - pageWidth, sidePanelVisible, - pageHeight, dndSidePanelWidth, dndTimelineHeight, } from "~/pages/PageEnigma/store"; import { useSignals } from "@preact/signals-react/runtime"; -import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext"; -import { EngineContext } from "./contexts/EngineContext"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { pageHeight, pageWidth } from "~/store"; +import { TopBar } from "~/modules/TopBar"; export const PageEnigmaComponent = () => { useSignals(); - const editorEngine = useContext(EngineContext); const [appUiState] = useContext(AppUiContext); //To prevent the click event from propagating to the canvas: TODO: HANDLE THIS BETTER? @@ -38,14 +34,6 @@ export const PageEnigmaComponent = () => { event.stopPropagation(); }; - const handleGenerateMovieClick = () => { - if (editorEngine != null) { - editorEngine?.generateVideo(); - } else { - console.log("Tried to generate movie but editor was null"); - } - }; - const dndWidth = dndSidePanelWidth.value > -1 ? dndSidePanelWidth.value @@ -60,11 +48,7 @@ export const PageEnigmaComponent = () => { return (
- - - +
{ const editorEngine = useContext(EngineContext); @@ -66,14 +68,18 @@ export const Controls3D = () => {
- - - - + + + + + +
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx index 84b3edf4d2..bfcd9785d1 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx @@ -1,9 +1,9 @@ import { useContext, useState } from "react"; import { Button, Input } from "~/components"; import { ButtonDialogue } from "~/modules/ButtonDialogue"; -import { EngineContext } from "../../contexts/EngineContext"; -import { ToasterContext } from "~/pages/PageEnigma/contexts/ToasterContext"; -import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers"; +import { EngineContext } from "../../../../contexts/EngineContext"; +import { ToasterContext } from "~/contexts/ToasterContext"; +import { APPUI_ACTION_TYPES } from "app/reducers"; export const ControlsTopButtons = () => { const editorEngine = useContext(EngineContext); @@ -17,7 +17,7 @@ export const ControlsTopButtons = () => { const handleButtonSave = async () => { console.log(`SceneName is ${sceneName}`); const sceneMediaToken = await editorEngine?.saveScene(sceneName); - if(sceneMediaToken){ + if (sceneMediaToken) { addToast("success", sceneMediaToken); } }; @@ -129,9 +129,7 @@ export const ControlsTopButtons = () => {
-
- -
+
{/* */} diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx index dd3ce0c84a..86cc4d8fb2 100644 --- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx +++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx @@ -7,7 +7,7 @@ import { faPlay, } from "@fortawesome/pro-solid-svg-icons"; import { ButtonIcon } from "~/components"; -import { EngineContext } from "../../contexts/EngineContext"; +import { EngineContext } from "../../../../contexts/EngineContext"; export const ControlsVideo = () => { const editorEngine = useContext(EngineContext); diff --git a/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx index babadfe83f..a68523d513 100644 --- a/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx +++ b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx @@ -1,7 +1,6 @@ import { useContext, useEffect, useState } from "react"; -import { EngineContext } from "../../contexts/EngineContext"; -import { Button, Input } from "~/components"; -import { LoadingDotsTyping } from "~/components"; +import { EngineContext } from "../../../../contexts/EngineContext"; +import { Button, Input, LoadingDotsTyping } from "~/components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCameraViewfinder } from "@fortawesome/pro-solid-svg-icons"; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx index f2b61ed00d..816fc0dda9 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx @@ -2,11 +2,10 @@ import { useContext, useState } from "react"; import { Button, ItemPicker, Label, Textarea } from "~/components"; -import { AppUiContext } from "../../contexts/AppUiContext"; -import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers"; -import { EngineContext } from "../../contexts/EngineContext"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "~/reducers"; +import { EngineContext } from "~/contexts/EngineContext"; import { ArtStyle } from "../../js/api_manager"; -import { ignoreDelete } from "~/pages/PageEnigma/store"; export const TabStylization = () => { const [appUiState, dispatchAppUiState] = useContext(AppUiContext); diff --git a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx index 600f99c9f5..a194f09adf 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx @@ -3,7 +3,7 @@ import { filmLength, scale, selectedItem } from "~/pages/PageEnigma/store"; import { useMouseEventsKeyframe } from "~/pages/PageEnigma/comps/Timeline/utils/useMouseEventsKeyframe"; import { useSignals } from "@preact/signals-react/runtime"; import { useContext } from "react"; -import { ToasterContext } from "~/pages/PageEnigma/contexts/ToasterContext"; +import { ToasterContext } from "~/contexts/ToasterContext"; interface Props { keyframe: Keyframe; diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts index d8ca0c1edf..7a066836d4 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsScrubber.ts @@ -31,8 +31,6 @@ export const useMouseEventsScrubber = () => { } }; - console.log("scroll", currentScroll.value); - const onMouseMove = (event: MouseEvent) => { const delta = Math.round( (event.clientX - clientX) / 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 31aa752cf4..5c53a71b00 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsTimeline.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsTimeline.ts @@ -1,9 +1,6 @@ import React, { useCallback, useEffect, useState } from "react"; -import { - dndTimelineHeight, - pageHeight, - timelineHeight, -} from "~/pages/PageEnigma/store"; +import { dndTimelineHeight, timelineHeight } from "~/pages/PageEnigma/store"; +import { pageHeight } from "~/store"; export const useMouseEventsTimeline = () => { const [isActive, setIsActive] = useState(false); diff --git a/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx b/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx index 2006974a60..17a2f65770 100644 --- a/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx +++ b/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx @@ -1,42 +1,45 @@ import { useEffect, useState, useContext } from "react"; import { LoadingDotsBricks } from "~/components"; -import { EngineContext } from "../../contexts/EngineContext"; +import { EngineContext } from "../../../../contexts/EngineContext"; -export const ViewSideBySide = ()=>{ +export const ViewSideBySide = () => { const [showLoader, setShowLoader] = useState(true); const editorEngine = useContext(EngineContext); - useEffect(()=>{ + useEffect(() => { editorEngine?.generateFrame(); - setTimeout(()=>setShowLoader(false), 200); - },[ ]); + setTimeout(() => setShowLoader(false), 200); + }, []); return (
-
+
- +
-
+
- +
-
- +
+
- ) -} \ No newline at end of file + ); +}; diff --git a/app/pages/PageEnigma/contexts/EngineProvider.tsx b/app/pages/PageEnigma/contexts/EngineProvider.tsx deleted file mode 100644 index 2428a5a529..0000000000 --- a/app/pages/PageEnigma/contexts/EngineProvider.tsx +++ /dev/null @@ -1,47 +0,0 @@ -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); - // To talk to react land. - - useEffect(() => { - //componentDidMount - if (document.getElementById("video-scene") === null) { - console.error( - 'Editor Engine need a target canvas with the id "video-scene"', - ); - } else { - setEditor((curr) => { - if (curr !== null) { - console.warn("Editor Engine already exist"); - return curr; - } else { - return new Editor(); - } - }); - } - }, []); - - useEffect(() => { - if (editor && editor.can_initialize && dispatchAppUiState !== null) { - console.log("initializing Editor"); - editor.initialize({ - dispatchAppUiState, - }); - } - }, [editor, dispatchAppUiState]); - - return ( - {children} - ); -}; diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts index 0a3b3b8d90..0f779acaf7 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts +++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts @@ -13,7 +13,7 @@ import { deleteCharacterKeyframe, deleteObjectKeyframe, } from "~/pages/PageEnigma/store"; -import { ToasterContext } from "~/pages/PageEnigma/contexts/ToasterContext"; +import { ToasterContext } from "~/contexts/ToasterContext"; const ADD_KEYFRAME: Record< ClipGroup, diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index a33026252c..b002132afd 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -21,7 +21,7 @@ import { LipSyncEngine } from "./lip_sync_engine.js"; import { AnimationEngine } from "./animation_engine.js"; import { PointerLockControls } from "three/addons/controls/PointerLockControls.js"; -import { APPUI_ACTION_TYPES } from "../reducers"; +import { APPUI_ACTION_TYPES } from "../../../reducers"; import { ClipGroup } from "~/pages/PageEnigma/models/track"; import { XYZ } from "../datastructures/common"; diff --git a/app/pages/PageEnigma/store/sidePanel.ts b/app/pages/PageEnigma/store/sidePanel.ts index 7da980497e..f416771ce0 100644 --- a/app/pages/PageEnigma/store/sidePanel.ts +++ b/app/pages/PageEnigma/store/sidePanel.ts @@ -1,6 +1,7 @@ import { computed, signal } from "@preact/signals-core"; import { AssetFilterOption, Tab } from "~/pages/PageEnigma/models"; -import { pageHeight, timelineHeight } from "~/pages/PageEnigma/store/sizing"; +import { timelineHeight } from "~/pages/PageEnigma/store/sizing"; +import { pageHeight } from "~/store"; export const sidePanelVisible = signal(true); diff --git a/app/pages/PageEnigma/store/sizing.ts b/app/pages/PageEnigma/store/sizing.ts index f838c049c6..052685850f 100644 --- a/app/pages/PageEnigma/store/sizing.ts +++ b/app/pages/PageEnigma/store/sizing.ts @@ -2,9 +2,6 @@ import { signal, computed } from "@preact/signals-core"; import { characterGroups } from "~/pages/PageEnigma/store/characterGroups"; import { objectGroup } from "~/pages/PageEnigma/store/objectGroup"; -export const pageHeight = signal(0); -export const pageWidth = signal(0); - // timeline export const scale = signal(1); export const filmLength = signal(12); diff --git a/app/pages/PageStylization/PageStylization.tsx b/app/pages/PageStylization/PageStylization.tsx new file mode 100644 index 0000000000..c2a338639c --- /dev/null +++ b/app/pages/PageStylization/PageStylization.tsx @@ -0,0 +1,23 @@ +import { useSignals } from "@preact/signals-react/runtime"; +import { PageStylizationComponent } from "~/pages/PageStylization/PageStylizationComponent"; +import { useContext, useEffect } from "react"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { EngineContext } from "~/contexts/EngineContext"; + +export const PageStylization = () => { + useSignals(); + + const [, dispatchAppUiState] = useContext(AppUiContext); + const editor = useContext(EngineContext); + + useEffect(() => { + if (editor && editor.can_initialize && dispatchAppUiState !== null) { + console.log("initializing Editor"); + editor.initialize({ + dispatchAppUiState, + }); + } + }, [editor, dispatchAppUiState]); + + return ; +}; diff --git a/app/pages/PageStylization/PageStylizationComponent.tsx b/app/pages/PageStylization/PageStylizationComponent.tsx new file mode 100644 index 0000000000..58ea48b1ca --- /dev/null +++ b/app/pages/PageStylization/PageStylizationComponent.tsx @@ -0,0 +1,50 @@ +import { useSignals } from "@preact/signals-react/runtime"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faAngleLeft } from "@fortawesome/pro-solid-svg-icons"; +import { Button, Link } from "~/components"; +import { StyleSelection } from "~/pages/PageStylization/comps/StyleSelection"; +import { LowerPanel } from "~/modules/LowerPanel"; +import { TimerGrid } from "~/pages/PageEnigma/comps/TimerGrid/TimerGrid"; +import { Scrubber } from "~/pages/PageEnigma/comps/Timeline/Scrubber"; +import { PreviewImages } from "~/pages/PageStylization/comps/PreviewImages"; +import { TopBar } from "~/modules/TopBar"; + +export const PageStylizationComponent = () => { + useSignals(); + + return ( +
+ +
+
+ + + +
+
+
+ + +
+
+
+
+ +
+
+ +
+
+
+ + + + +
+
+
+ ); +}; diff --git a/app/pages/PageStylization/comps/PreviewImages.tsx b/app/pages/PageStylization/comps/PreviewImages.tsx new file mode 100644 index 0000000000..c7e95254b5 --- /dev/null +++ b/app/pages/PageStylization/comps/PreviewImages.tsx @@ -0,0 +1,44 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { useSignals } from "@preact/signals-react/runtime"; +import { pageHeight, pageWidth } from "~/store"; + +export const PreviewImages = () => { + useSignals(); + + const imageWidth1 = pageWidth.value > 1340 ? 630 : (pageWidth.value - 80) / 2; + const imageHeight1 = imageWidth1 * 0.56; + const imageHeight2 = pageHeight.value > 1138 ? 354 : pageHeight.value - 620; + const imageWidth2 = imageHeight2 / 0.56; + + const imageWidth = imageHeight1 < imageHeight2 ? imageWidth1 : imageWidth2; + const imageHeight = imageHeight1 < imageHeight2 ? imageHeight1 : imageHeight2; + + const textClasses = [ + "flex items-center justify-center", + "w-full rounded-t-lg bg-ui-controls h-[34px]", + "text-sm font-semibold", + ].join(" "); + + return ( +
+
+
Raw Preview
+
+
+
+ +
+
+
Styled Preview
+
+
+
+ ); +}; diff --git a/app/pages/PageStylization/comps/StyleSelection.tsx b/app/pages/PageStylization/comps/StyleSelection.tsx new file mode 100644 index 0000000000..d8d8c9ebbb --- /dev/null +++ b/app/pages/PageStylization/comps/StyleSelection.tsx @@ -0,0 +1,123 @@ +import { useContext, useState } from "react"; + +import { ButtonIcon, ItemPicker, Label, Textarea } from "~/components"; + +import { EngineContext } from "~/contexts/EngineContext"; +import { ArtStyle } from "~/pages/PageEnigma/js/api_manager"; +import { faAngleLeft, faAngleRight } from "@fortawesome/pro-solid-svg-icons"; +import { styleList } from "~/pages/PageStylization/styleList"; + +export const StyleSelection = () => { + const [selection, setSelection] = useState(styleList[0].type); + const [scrollPosition, setScrollPosition] = useState(0); + + const editorEngine = useContext(EngineContext); + + const handlePickingStylizer = (picked: ArtStyle) => { + console.log(`Picked style: ${picked}`); + setSelection(picked); + if (editorEngine === null) { + console.log("Editor is null"); + return; + } + editorEngine.art_style = picked; + }; + + const onChangeHandlerNegative = ( + e: React.ChangeEvent, + ) => { + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.negative_prompt = e.target.value; + console.log(e.target.value); + }; + + const onChangeHandlerPositive = ( + e: React.ChangeEvent, + ) => { + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.positive_prompt = e.target.value; + console.log(e.target.value); + }; + + return ( +
+
+ +
+
+ {styleList.map((style) => ( + + ))} +
+ {scrollPosition > 0 && ( +
+ + setScrollPosition(Math.max(scrollPosition - 6, 0)) + } + /> +
+ )} + {scrollPosition < styleList.length - 9 && ( +
+ + setScrollPosition( + Math.min(scrollPosition + 6, styleList.length - 9), + ) + } + fill + /> +
+ )} +
+
+ +
+