diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx index bec42a789..f769a559a 100644 --- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -24,13 +24,13 @@ import { TimerGrid } from "~/pages/PageEnigma/comps/Timeline/TimerGrid"; 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"; import { Clip, Keyframe } from "~/pages/PageEnigma/models"; import { RowHeaders } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/RowHeaders"; import { pageWidth } from "~/signals"; import { Pages } from "~/pages/PageEnigma/constants/page"; import PremiumLockTimeline from "./PremiumLockTimeline"; import { AssetType, DoNotShow } from "~/enums"; +import { deleteKeyframe } from "~/pages/PageEnigma/signals/timeline"; function getItemType(item: Clip | Keyframe | null) { if (!item) { @@ -50,7 +50,6 @@ function scrollItem(itemId: string) { export const Timeline = () => { useSignals(); const [dialogOpen, setDialogOpen] = useState(false); - const { deleteKeyframe } = useUpdateKeyframe(); const lastSelectedObject = useRef(selectedObject.value); if (selectedObject.value !== lastSelectedObject.current) { @@ -101,7 +100,7 @@ export const Timeline = () => { deleteKeyframe(selectedItem.value as Keyframe); } selectedItem.value = null; - }, [deleteKeyframe]); + }, []); const onDeleteAsk = useCallback( (event: KeyboardEvent) => { @@ -114,7 +113,9 @@ export const Timeline = () => { ) { event.stopPropagation(); event.preventDefault(); - const show = localStorage.getItem("Delete-clip"); + const show = localStorage.getItem( + `Delete-${getItemType(selectedItem.value)}`, + ); if (show === DoNotShow) { onDelete(); return; diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx index cfebbc1b9..e9b4bb744 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx @@ -1,25 +1,11 @@ import { createContext } from "react"; -import { MediaItem, Keyframe, QueueKeyframe } from "~/pages/PageEnigma/models"; +import { MediaItem } from "~/pages/PageEnigma/models"; export const TrackContext = createContext<{ - // keyframes - addKeyframe: (keyframe: QueueKeyframe, offset: number) => void; - deleteKeyframe: (keyframe: Keyframe) => void; - deleteObjectOrCharacter: (item: MediaItem) => void; - - // misc - clearExistingData: () => void; - // drag and drop startDrag: (item: MediaItem) => void; endDrag: () => void; }>({ - addKeyframe: () => {}, - deleteKeyframe: () => {}, - deleteObjectOrCharacter: () => {}, - - clearExistingData: () => {}, - startDrag: () => {}, endDrag: () => {}, }); diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx index 71f07c008..d167527ca 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx @@ -1,24 +1,12 @@ import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { ReactNode, useCallback, useMemo } from "react"; -import { MediaItem } from "~/pages/PageEnigma/models"; import useUpdateDragDrop from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop"; -import { - characterGroup, - cameraGroup, - audioGroup, - objectGroup, - deleteCharacter, -} from "~/pages/PageEnigma/signals"; -import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe"; -import { deleteObject } from "~/pages/PageEnigma/signals/objectGroup/deleteObject"; interface Props { children: ReactNode; } export const TrackProvider = ({ children }: Props) => { - const keyframes = useUpdateKeyframe(); - const { endDrag, ...dragDrop } = useUpdateDragDrop(); // cross group functions @@ -26,48 +14,12 @@ export const TrackProvider = ({ children }: Props) => { endDrag(); }, [endDrag]); - const clearExistingData = useCallback(() => { - characterGroup.value = { - id: "ChG1", - characters: [], - }; - cameraGroup.value = { - id: "CG1", - keyframes: [], - }; - audioGroup.value = { - id: "AG-1", - clips: [], - muted: false, - }; - objectGroup.value = { - id: "OG1", - objects: [], - }; - }, []); - - const deleteObjectOrCharacter = useCallback((item: MediaItem) => { - deleteCharacter(item); - deleteObject(item); - }, []); - const values = useMemo(() => { return { - ...keyframes, - - clearExistingData, - deleteObjectOrCharacter, - ...dragDrop, endDrag: dropClip, }; - }, [ - keyframes, - dragDrop, - dropClip, - clearExistingData, - deleteObjectOrCharacter, - ]); + }, [dragDrop, dropClip]); return ( {children} diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts deleted file mode 100644 index 3e149195c..000000000 --- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { useCallback } from "react"; -import { QueueKeyframe, Keyframe } from "~/pages/PageEnigma/models"; -import { - addCameraKeyframe, - addCharacterKeyframe, - addObjectKeyframe, - deleteCameraKeyframe, - deleteCharacterKeyframe, - deleteObjectKeyframe, -} from "~/pages/PageEnigma/signals"; -import { ClipGroup } from "~/pages/PageEnigma/enums"; - -const ADD_KEYFRAME: Record< - ClipGroup, - (keyframe: QueueKeyframe, offset: number) => void -> = { - [ClipGroup.CAMERA]: addCameraKeyframe, - [ClipGroup.CHARACTER]: addCharacterKeyframe, - [ClipGroup.OBJECT]: addObjectKeyframe, - [ClipGroup.GLOBAL_AUDIO]: () => {}, -}; - -const DELETE_KEYFRAME: Record void> = { - [ClipGroup.CAMERA]: deleteCameraKeyframe, - [ClipGroup.CHARACTER]: deleteCharacterKeyframe, - [ClipGroup.OBJECT]: deleteObjectKeyframe, - [ClipGroup.GLOBAL_AUDIO]: () => {}, -}; - -export default function useUpdateKeyframe() { - const addKeyframe = useCallback((keyframe: QueueKeyframe, offset: number) => { - ADD_KEYFRAME[keyframe.group](keyframe, offset); - }, []); - - const deleteKeyframe = useCallback((keyframe: Keyframe) => { - DELETE_KEYFRAME[keyframe.group](keyframe); - }, []); - - return { - addKeyframe, - deleteKeyframe, - }; -} diff --git a/app/pages/PageEnigma/hooks/useQueueHandler.ts b/app/pages/PageEnigma/hooks/useQueueHandler.ts index 50b486a44..2dd9ff4a9 100644 --- a/app/pages/PageEnigma/hooks/useQueueHandler.ts +++ b/app/pages/PageEnigma/hooks/useQueueHandler.ts @@ -1,44 +1,35 @@ import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions"; import { useSignals } from "@preact/signals-react/runtime"; -import { useCallback, useContext, useEffect } from "react"; +import { useCallback, useEffect } from "react"; import { addNewCharacter, addObjectToTimeline, + clearExistingData, currentTime, + deleteObjectOrCharacter, loadAudioData, loadCameraData, loadCharacterData, loadObjectData, selectedObject, + addKeyframe, } from "~/pages/PageEnigma/signals"; -import Queue, { ToastDataType } from "~/pages/PageEnigma/Queue/Queue"; +import Queue, { + QueueSubscribeType, + ToastDataType, +} from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; -import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; import { MediaItem, - QueueClip, QueueKeyframe, UpdateTime, } from "~/pages/PageEnigma/models"; import { ClipGroup } from "~/pages/PageEnigma/enums"; -import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { addToast } from "~/signals"; import { ToastTypes } from "~/enums"; 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 - | ToastDataType - | null; -} - const LOADING_FUNCTIONS: Record void> = { [ClipGroup.CHARACTER]: loadCharacterData, [ClipGroup.OBJECT]: loadObjectData, @@ -48,11 +39,9 @@ const LOADING_FUNCTIONS: Record void> = { export function useQueueHandler() { useSignals(); - const { addKeyframe, clearExistingData, deleteObjectOrCharacter } = - useContext(TrackContext); const handleFromEngineActions = useCallback( - ({ action, data }: Arguments) => { + ({ action, data }: QueueSubscribeType) => { console.log("FROM ENGINE", action, data); switch (action) { case fromEngineActions.ADD_OBJECT: { @@ -97,11 +86,11 @@ export function useQueueHandler() { throw new Error(`Unknown action ${action}`); } }, - [clearExistingData, deleteObjectOrCharacter], + [deleteObjectOrCharacter], ); const handleToTimelineActions = useCallback( - ({ action, data }: Arguments) => { + ({ action, data }: QueueSubscribeType) => { console.log("TO TIMELINE", action, data); switch (action) { case toTimelineActions.ADD_KEYFRAME: @@ -111,7 +100,7 @@ export function useQueueHandler() { throw new Error(`Unknown action ${action}`); } }, - [addKeyframe], + [], ); useEffect(() => { diff --git a/app/pages/PageEnigma/signals/index.ts b/app/pages/PageEnigma/signals/index.ts index b684eefdc..87319afd8 100644 --- a/app/pages/PageEnigma/signals/index.ts +++ b/app/pages/PageEnigma/signals/index.ts @@ -15,4 +15,5 @@ export * from "./sidePanel"; export * from "./sizing"; export * from "./stylizeTab"; export * from "./timing"; +export * from "./timeline"; export * from "./error"; diff --git a/app/pages/PageEnigma/signals/timeline.ts b/app/pages/PageEnigma/signals/timeline.ts new file mode 100644 index 000000000..b242f13c2 --- /dev/null +++ b/app/pages/PageEnigma/signals/timeline.ts @@ -0,0 +1,67 @@ +import { useCallback } from "react"; +import { QueueKeyframe, Keyframe, MediaItem } from "~/pages/PageEnigma/models"; +import { + addCameraKeyframe, + addCharacterKeyframe, + addObjectKeyframe, + audioGroup, + cameraGroup, + characterGroup, + deleteCameraKeyframe, + deleteCharacter, + deleteCharacterKeyframe, + deleteObjectKeyframe, + objectGroup, +} from "~/pages/PageEnigma/signals"; +import { ClipGroup } from "~/pages/PageEnigma/enums"; +import { deleteObject } from "~/pages/PageEnigma/signals/objectGroup/deleteObject"; + +const ADD_KEYFRAME: Record< + ClipGroup, + (keyframe: QueueKeyframe, offset: number) => void +> = { + [ClipGroup.CAMERA]: addCameraKeyframe, + [ClipGroup.CHARACTER]: addCharacterKeyframe, + [ClipGroup.OBJECT]: addObjectKeyframe, + [ClipGroup.GLOBAL_AUDIO]: () => {}, +}; + +const DELETE_KEYFRAME: Record void> = { + [ClipGroup.CAMERA]: deleteCameraKeyframe, + [ClipGroup.CHARACTER]: deleteCharacterKeyframe, + [ClipGroup.OBJECT]: deleteObjectKeyframe, + [ClipGroup.GLOBAL_AUDIO]: () => {}, +}; + +export function addKeyframe(keyframe: QueueKeyframe, offset: number) { + ADD_KEYFRAME[keyframe.group](keyframe, offset); +} + +export function deleteKeyframe(keyframe: Keyframe) { + DELETE_KEYFRAME[keyframe.group](keyframe); +} + +export function clearExistingData() { + characterGroup.value = { + id: "ChG1", + characters: [], + }; + cameraGroup.value = { + id: "CG1", + keyframes: [], + }; + audioGroup.value = { + id: "AG-1", + clips: [], + muted: false, + }; + objectGroup.value = { + id: "OG1", + objects: [], + }; +} + +export function deleteObjectOrCharacter(item: MediaItem) { + deleteCharacter(item); + deleteObject(item); +}