chore(web): visualizer clock update (#782)

reearth · Nov 8, 2023 · 9c4c84a · 9c4c84a
1 parent f5ab499
commit 9c4c84a
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 11 deletions.
diff --git 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
@@ -26,9 +26,9 @@ const EditPanel: React.FC<Props> = ({ 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<Props> = ({ onChange, onClose, value, setDateTime }) =
         <TextWrapper>
           <Label>{t("Time")}</Label>
 
-          <Input type="time" value={time} onChange={onTimeChange} />
+          <Input type="time" value={time} onChange={handleTimeChange} />
         </TextWrapper>
         <SelectWrapper>
           <Label>{t("Time Zone")}</Label>

diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -42,7 +42,6 @@ const Editor: React.FC<Props> = ({ 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
@@ -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
@@ -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
@@ -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
@@ -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(() => {