From 9c4c84a23d57cb888ecb16ed2a3fea9da5ccd42b Mon Sep 17 00:00:00 2001 From: Beatrice Mkumbo Date: Wed, 8 Nov 2023 11:25:51 +0300 Subject: [PATCH] chore(web): visualizer clock update (#782) --- .../fields/DateTimeField/EditPanel/hooks.ts | 4 +-- .../fields/DateTimeField/EditPanel/index.tsx | 4 +-- web/src/beta/features/Editor/index.tsx | 1 - .../beta/features/Editor/useRightPanel.tsx | 2 +- .../beta/features/Editor/useStorytelling.ts | 3 +- .../beta/lib/core/Map/useTimelineManager.ts | 3 +- web/src/beta/lib/core/StoryPanel/hooks.ts | 32 +++++++++++++++++-- 7 files changed, 38 insertions(+), 11 deletions(-) diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts b/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts index 58c642a873..9806be50ce 100644 --- a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts +++ b/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts @@ -45,7 +45,7 @@ export default ({ value, onChange, setDateTime }: Props) => { setDateTime?.(formattedDateTime); onChange?.(formattedDateTime); } - }, [offsetFromUTC, selectedTimezone, date, time, setDateTime, onChange]); + }, [offsetFromUTC, selectedTimezone.timezone, date, time, setDateTime, onChange]); const handleTimezoneSelect = useCallback( (newValue: string) => { @@ -81,7 +81,7 @@ export default ({ value, onChange, setDateTime }: Props) => { time, selectedTimezone, offsetFromUTC, - onTimeChange: handleTimeChange, + handleTimeChange, onTimezoneSelect: handleTimezoneSelect, onDateChange: handleDateChange, onDateTimeApply: handleApplyChange, diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx b/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx index 02585f9644..8b4dc6da24 100644 --- a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx +++ b/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx @@ -26,9 +26,9 @@ const EditPanel: React.FC = ({ onChange, onClose, value, setDateTime }) = selectedTimezone, offsetFromUTC, onDateChange, - onTimeChange, onTimezoneSelect, onDateTimeApply, + handleTimeChange, } = useHooks({ value, onChange, setDateTime }); const isButtonDisabled = useMemo(() => { @@ -45,7 +45,7 @@ const EditPanel: React.FC = ({ onChange, onClose, value, setDateTime }) = - + diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx index 12f5f3339c..65467726b9 100644 --- a/web/src/beta/features/Editor/index.tsx +++ b/web/src/beta/features/Editor/index.tsx @@ -42,7 +42,6 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab }) => { handleFlyTo, handleCameraUpdate, } = useHooks({ sceneId, tab }); - const { selectedStory, storyPanelRef, diff --git a/web/src/beta/features/Editor/useRightPanel.tsx b/web/src/beta/features/Editor/useRightPanel.tsx index d27d22910b..e19cecffdd 100644 --- a/web/src/beta/features/Editor/useRightPanel.tsx +++ b/web/src/beta/features/Editor/useRightPanel.tsx @@ -88,13 +88,13 @@ export default ({ scene, tab, layerStyles, + nlsLayers, sceneId, currentCamera, selectedLayerStyleId, selectedSceneSetting, sceneSettings, currentPage, - nlsLayers, onFlyTo, onLayerStyleValueUpdate, onLayerConfigUpdate, diff --git a/web/src/beta/features/Editor/useStorytelling.ts b/web/src/beta/features/Editor/useStorytelling.ts index 711d387642..d4c5e29b1e 100644 --- a/web/src/beta/features/Editor/useStorytelling.ts +++ b/web/src/beta/features/Editor/useStorytelling.ts @@ -32,7 +32,6 @@ export default function ({ sceneId }: Props) { } = useStorytellingAPI(); const { stories } = useStoriesQuery({ sceneId }); - const { installableStoryBlocks } = useInstallableStoryBlocksQuery({ sceneId }); const selectedStory = useMemo(() => (stories?.length ? stories[0] : undefined), [stories]); @@ -50,7 +49,7 @@ export default function ({ sceneId }: Props) { storyPanelRef?.current?.handleCurrentPageChange(pageId); } }, - [selectedStoryPageId, selectedStory?.pages, storyPanelRef], + [selectedStoryPageId, selectedStory?.pages], ); const handlePageDuplicate = useCallback(async (pageId: string) => { diff --git a/web/src/beta/lib/core/Map/useTimelineManager.ts b/web/src/beta/lib/core/Map/useTimelineManager.ts index faf0f02f08..5e176cb3fe 100644 --- a/web/src/beta/lib/core/Map/useTimelineManager.ts +++ b/web/src/beta/lib/core/Map/useTimelineManager.ts @@ -66,7 +66,8 @@ export type TimelineCommitter = { | "widgetContext" | "pluginAPI" | "featureResource" - | "storyTimelineBlock"; + | "storyTimelineBlock" + | "storyPage"; id?: string; }; diff --git a/web/src/beta/lib/core/StoryPanel/hooks.ts b/web/src/beta/lib/core/StoryPanel/hooks.ts index 6b5875e393..97003586a3 100644 --- a/web/src/beta/lib/core/StoryPanel/hooks.ts +++ b/web/src/beta/lib/core/StoryPanel/hooks.ts @@ -61,6 +61,34 @@ export default ( [selectedPageId, isEditable], ); + const onTimeChange = useCallback( + (time: Date) => { + return visualizer?.current?.timeline?.current?.commit({ + cmd: "SET_TIME", + payload: { + start: visualizer?.current?.timeline?.current?.computedTimeline?.start, + current: time, + stop: visualizer?.current?.timeline?.current?.computedTimeline?.stop, + }, + committer: { source: "storyPage", id: currentPageId }, + }); + }, + [currentPageId, visualizer], + ); + + const handlePageTime = useCallback( + (page: StoryPage) => { + const timePointField = page.property?.timePoint; + const currentTime = timePointField?.timePoint?.value; + if (!currentTime) onTimeChange?.(new Date()); + else { + const getNewDate = new Date(currentTime.substring(0, 19)).getTime(); + return onTimeChange?.(new Date(getNewDate)); + } + }, + [onTimeChange], + ); + const handleCurrentPageChange = useCallback( (pageId: string, disableScrollIntoView?: boolean) => { if (pageId === currentPageId) return; @@ -76,7 +104,7 @@ export default ( isAutoScrolling.current = true; element?.scrollIntoView({ behavior: "smooth" }); } - + handlePageTime(newPage); const cameraAnimation = newPage.property?.cameraAnimation; const destination = cameraAnimation?.cameraPosition?.value; @@ -86,7 +114,7 @@ export default ( visualizer.current?.engine.flyTo({ ...destination }, { duration }); }, - [selectedStory?.pages, currentPageId, visualizer, onCurrentPageChange], + [currentPageId, selectedStory?.pages, onCurrentPageChange, handlePageTime, visualizer], ); const pageInfo = useMemo(() => {