diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index da3f729918..ac686b480f 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -3,12 +3,65 @@ import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackPro import { AppUIProvider } from "~/pages/PageEnigma/contexts/AppUiContext"; import { EngineProvider } from "~/pages/PageEnigma/contexts/EngineProvider"; import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent"; +import { toast, ToastBar, Toaster } from "react-hot-toast"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faTriangleExclamation, + faXmark, +} from "@fortawesome/pro-solid-svg-icons"; export const PageEnigma = () => { return ( + + {(thisToast) => ( + + {({ message }) => { + return ( +
+
+ {thisToast.type === "error" && ( +
+ +
+ Warning! +
+
+ )} +
+ {message} +
+
+ +
+ ); + }} + + )} + diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index b8416749c1..160c9ca07e 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -1,5 +1,4 @@ import { useContext } from "react"; - import { faSparkles } from "@fortawesome/pro-solid-svg-icons"; import { Button, LoadingBar, LoadingDots } from "~/components"; @@ -19,9 +18,12 @@ import { APPUI_VIEW_MODES } from "./reducers"; import { timelineHeight } from "~/pages/PageEnigma/store"; import { useSignals } from "@preact/signals-react/runtime"; import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext"; +import { EngineContext } from "./contexts/EngineContext"; 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? @@ -29,13 +31,20 @@ export const PageEnigmaComponent = () => { event.stopPropagation(); }; + const handleGenerateMovieClick=()=> { + if ( editorEngine != null) { + editorEngine?.generateVideo() + } else { + console.log("Tried to generate movie but editor was null") + } + }; + const lowerHeight = timelineHeight.value; return (
- + -
{/* Engine section/side panel */}
{ const handleButtonTest = () => { editorEngine?.testStylizeRequest(); - - // if(appUiState?.showEditorLoadingBar.isShowing){ - //TO GO TO A HUNDRED AND DISAPPER - // dispatchAppUiState({ - // type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR, - // payload:{ - // showEditorLoadingBar: { - // progress: 100, - // } - // } - // }); - // setTimeout(() => { - // dispatchAppUiState({ - // type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADINGBAR, - // }); - // }, 1000); - //END :TO GO TO A HUNDRED AND DISAPPER - - //EAMPLE OF CHANING LOADING MESSAGE - // dispatchAppUiState({ - // type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR, - // payload:{ - // showEditorLoadingBar: { - // message: "new message", - // } - // } - // }); - // }else{ - // dispatchAppUiState({ - // type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADINGBAR, - // payload:{ - // showEditorLoadingBar: { - // message: 'display of LoadingBar triggered by Test Button', - // progress: 10, - // } - // } - - // }); - //} }; - const handleObjectPanelTest = () => { - if (appUiState?.controlPanel.isShowing) { - dispatchAppUiState({ - type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT, - }); - } else { - dispatchAppUiState({ - type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT, - payload: { - group: ClipGroup.OBJECT, - object_name: "TEST BUTTON", - object_uuid: "", - version: "1", - objectVectors: { - position: { x: 1, y: 2, z: 3 }, - rotation: { x: 4, y: 5, z: 6 }, - scale: { x: 7, y: 8, z: 9 }, - }, - }, - }); - } + const handleTestButton2 = () => { + console.log("Test Button 2") }; const handleButtonCameraView = () => { @@ -94,18 +36,9 @@ export const ControlsTopButtons = () => { const handleButtonPlayBack = () => { editorEngine?.startPlayback(); }; - const handleButtonRender = () => { - editorEngine?.generateVideo(); - }; - const handleButtonTakeFrame = () => { editorEngine?.take_timeline_cam_clip(); }; - - const handleButtonLoad = () => { - console.log("LOADING"); - }; - const handleButtonSingleFrame = () => { editorEngine?.generateFrame(); }; @@ -172,18 +105,15 @@ export const ControlsTopButtons = () => { Toggle Camera View
- - {/* - */}
diff --git a/app/pages/PageEnigma/comps/Timeline/ObjectGroups.tsx b/app/pages/PageEnigma/comps/Timeline/ObjectGroups.tsx index c32387d043..3e9e634c5d 100644 --- a/app/pages/PageEnigma/comps/Timeline/ObjectGroups.tsx +++ b/app/pages/PageEnigma/comps/Timeline/ObjectGroups.tsx @@ -4,6 +4,7 @@ import { ObjectTrack } from "~/pages/PageEnigma/comps/Timeline/ObjectTrack"; export const ObjectGroups = () => { useSignals(); + return ( <> {objectGroup.value.objects.length > 0 && ( diff --git a/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx b/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx index a63c6f4e2d..11ca18c6c0 100644 --- a/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx +++ b/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx @@ -1,10 +1,11 @@ import { fullWidth, objectGroup, updateObject } from "~/pages/PageEnigma/store"; import { TrackKeyFrames } from "~/pages/PageEnigma/comps/Timeline/TrackKeyFrames"; +import { ClipGroup } from "~/pages/PageEnigma/models/track"; export const ObjectTrack = () => { return (
@@ -17,7 +18,7 @@ export const ObjectTrack = () => { keyframes={object.keyframes} title={`${object.name} Position/Rotation`} updateKeyframe={updateObject} - style="objects" + group={ClipGroup.OBJECT} />
))} diff --git a/app/pages/PageEnigma/comps/Scrubber/Scrubber.tsx b/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx similarity index 100% rename from app/pages/PageEnigma/comps/Scrubber/Scrubber.tsx rename to app/pages/PageEnigma/comps/Timeline/Scrubber.tsx diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx index 3de3cb7155..5ceb0ae6db 100644 --- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -13,7 +13,7 @@ import { import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler"; import { useSignals } from "@preact/signals-react/runtime"; import { TimerGrid } from "~/pages/PageEnigma/comps/TimerGrid/TimerGrid"; -import { Scrubber } from "~/pages/PageEnigma/comps/Scrubber/Scrubber"; +import { Scrubber } from "~/pages/PageEnigma/comps/Timeline/Scrubber"; import { Characters } from "~/pages/PageEnigma/comps/Timeline/Characters"; import { ObjectGroups } from "~/pages/PageEnigma/comps/Timeline/ObjectGroups"; import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe"; diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx index d12685ac28..64532b0e2e 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx @@ -1,17 +1,17 @@ import { useMouseEventsClip } from "./utils/useMouseEventsClip"; import { useState } from "react"; import { scale, selectedItem } from "~/pages/PageEnigma/store"; -import { Clip } from "~/pages/PageEnigma/models/track"; +import { Clip, ClipGroup } from "~/pages/PageEnigma/models/track"; interface Props { min: number; max: number; - style: "character" | "camera" | "audio" | "objects"; + group: ClipGroup; clip: Clip; updateClip: (options: { id: string; offset: number; length: number }) => void; } -export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => { +export const TrackClip = ({ clip, min, max, group, updateClip }: Props) => { const [state, setState] = useState({ length: clip.length, offset: clip.offset, @@ -31,8 +31,8 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => { const classes = [ "absolute", clip.clip_uuid === selectedClipId - ? `bg-${style}-selected` - : `bg-${style}-clip`, + ? `bg-${group}-selected` + : `bg-${group}-clip`, ]; return ( diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx index 565944df23..6d45a2f9c6 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx @@ -1,7 +1,7 @@ import { TrackClip } from "~/pages/PageEnigma/comps/Timeline/TrackClip"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faVolume, faVolumeSlash } from "@fortawesome/pro-solid-svg-icons"; -import { Clip } from "~/pages/PageEnigma/models/track"; +import { Clip, ClipGroup, ClipType } from "~/pages/PageEnigma/models/track"; import { PointerEvent } from "react"; import { canDrop, @@ -17,13 +17,38 @@ interface Props { id: string; clips: Clip[]; title: string; - style: "character" | "audio" | "camera" | "objects"; - type?: "animations" | "positions" | "lipSync"; + group: ClipGroup; + type?: ClipType; toggleMute?: () => void; muted?: boolean; updateClip: (options: { id: string; length: number; offset: number }) => void; } +function getCanBuild({ + dragType, + type, + group, +}: { + dragType: ClipType | null; + type?: ClipType; + group: ClipGroup; +}) { + if (dragType === ClipType.ANIMATION) { + if (dragType === type) { + return true; + } + } + if (dragType === ClipType.AUDIO) { + if (group === ClipGroup.CHARACTER && type === ClipType.AUDIO) { + return true; + } + if (group === ClipGroup.GLOBAL_AUDIO) { + return true; + } + } + return false; +} + export const TrackClips = ({ id, clips, @@ -31,36 +56,22 @@ export const TrackClips = ({ updateClip, muted, title, - style, + group, type, }: Props) => { - const trackType = type ?? style; + const trackType = (type ?? group) as ClipType; function onPointerOver() { - if (dragType.value === "animations") { - if (dragType.value !== trackType) { - return; - } + if (getCanBuild({ dragType: dragType.value, type, group })) { + dropId.value = id; } - if (dragType.value === "audio") { - if (["lipSync", "audio"].indexOf(trackType) === -1) { - return; - } - } - dropId.value = id; } function onPointerMove(event: PointerEvent) { - if (dragType.value === "animations") { - if (dragType.value !== trackType) { - return; - } - } - if (dragType.value === "audio") { - if (["lipSync", "audio"].indexOf(trackType) === -1) { - return; - } + if (!getCanBuild({ dragType: dragType.value, type, group })) { + return; } + const track = document.getElementById(`track-${trackType}-${id}`); if (!track) { return; @@ -101,7 +112,7 @@ export const TrackClips = ({
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx index c828baebc0..71c7045eb6 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx @@ -1,44 +1,40 @@ import { Keyframe } from "~/pages/PageEnigma/models/track"; -import { useState } from "react"; -import { scale, selectedItem } from "~/pages/PageEnigma/store"; +import { filmLength, scale, selectedItem } from "~/pages/PageEnigma/store"; import { useMouseEventsKeyframe } from "~/pages/PageEnigma/comps/Timeline/utils/useMouseEventsKeyframe"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faSortUpDown } from "@fortawesome/pro-solid-svg-icons"; +import { useSignals } from "@preact/signals-react/runtime"; interface Props { - min: number; - max: number; keyframe: Keyframe; updateKeyframe: (options: { id: string; offset: number }) => void; } -export const TrackKeyFrame = ({ - keyframe, - min, - max, - updateKeyframe, -}: Props) => { - const [offset, setOffset] = useState(keyframe.offset); - const { onPointerDown } = useMouseEventsKeyframe({ +export const TrackKeyFrame = ({ keyframe, updateKeyframe }: Props) => { + useSignals(); + const { onPointerDown, offset } = useMouseEventsKeyframe({ keyframe, - max, - min, + max: filmLength.value * 60, + min: 0, updateKeyframe, - setOffset, }); + const displayOffset = offset > -1 ? offset : keyframe.offset; + const selectedKeyframeId = (selectedItem.value as Keyframe | null)?.keyframe_uuid ?? ""; return (