chore(web): timeline block (#750)

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

Hide file tree

Showing 27 changed files with 1,075 additions and 32 deletions.
diff --git a/web/src/beta/components/Icon/Icons/pause.svg b/web/src/beta/components/Icon/Icons/pause.svg
diff --git a/web/src/beta/components/Icon/Icons/set.svg b/web/src/beta/components/Icon/Icons/set.svg
diff --git a/web/src/beta/components/Icon/Icons/slider.svg b/web/src/beta/components/Icon/Icons/slider.svg
diff --git a/web/src/beta/components/Icon/Icons/timeline-play-left.svg b/web/src/beta/components/Icon/Icons/timeline-play-left.svg
diff --git a/web/src/beta/components/Icon/Icons/timeline-play-right.svg b/web/src/beta/components/Icon/Icons/timeline-play-right.svg
diff --git a/web/src/beta/components/Icon/Icons/timelineStoryBlock.svg b/web/src/beta/components/Icon/Icons/timelineStoryBlock.svg
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
@@ -56,6 +56,11 @@ import Timeline from "./Icons/timeline.svg";
 import PlayRight from "./Icons/play-right.svg";
 import PlayLeft from "./Icons/play-left.svg";
 import Ellipse from "./Icons/ellipse.svg";
+import TimelinePlayRight from "./Icons/timeline-play-right.svg";
+import TimelinePlayLeft from "./Icons/timeline-play-left.svg";
+import Pause from "./Icons/pause.svg";
+import Slider from "./Icons/slider.svg";
+import Set from "./Icons/set.svg";
 
 // Dashboard
 import Dashboard from "./Icons/dashboard.svg";
@@ -85,6 +90,7 @@ import VideoStoryBlock from "./Icons/videoStoryBlock.svg";
 import ImageStoryBlock from "./Icons/imageStoryBlock.svg";
 import MdTextStoryBlock from "./Icons/mdTextStoryBlock.svg";
 import CameraButtonStoryBlock from "./Icons/cameraButtonStoryBlock.svg";
+import TimelineStoryBlock from "./Icons/timelineStoryBlock.svg";
 
 // Widget tab
 import Desktop from "./Icons/desktop.svg";
@@ -141,6 +147,11 @@ export default {
   ellipse: Ellipse,
   playRight: PlayRight,
   playLeft: PlayLeft,
+  timelinePlayLeft: TimelinePlayLeft,
+  timelinePlayRight: TimelinePlayRight,
+  pause: Pause,
+  slider: Slider,
+  set: Set,
   storyPage: StoryPage,
   square: Square,
   swiper: Swiper,
@@ -176,6 +187,7 @@ export default {
   imageStoryBlock: ImageStoryBlock,
   mdTextStoryBlock: MdTextStoryBlock,
   cameraButtonStoryBlock: CameraButtonStoryBlock,
+  timelineStoryBlock: TimelineStoryBlock,
   widget: Widgets,
   widgets: Widgets,
   menu: WidgetMenu,

diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts b/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
@@ -21,24 +21,28 @@ export default ({ timelineValues, onChange, onClose, setTimelineValues }: Props)
         endTime: timelineValues?.endTime || "",
       };
 
-      const endTime = new Date(updatedData?.endTime?.substring(0, 19) || new Date());
-
       switch (fieldId) {
         case "startTime":
-          updatedData.startTime = newValue;
-          break;
-        case "endTime":
-          updatedData.endTime = newValue;
+          updatedData.startTime = newValue || "";
           break;
         case "currentTime":
           updatedData.currentTime = newValue;
-
           if (
-            (updatedData.startTime &&
-              updatedData.endTime &&
-              new Date(updatedData.currentTime.substring(0, 19)) <
-                new Date(updatedData.startTime.substring(0, 19))) ||
-            new Date(updatedData.currentTime.substring(0, 19)) > endTime
+            updatedData.startTime &&
+            new Date(updatedData.currentTime.substring(0, 19)) <
+              new Date(updatedData.startTime.substring(0, 19))
+          ) {
+            setWarning(true);
+          } else {
+            setWarning(false);
+          }
+          break;
+        case "endTime":
+          updatedData.endTime = newValue;
+          if (
+            updatedData.endTime &&
+            new Date(updatedData.currentTime.substring(0, 19)) >
+              new Date(updatedData?.endTime?.substring(0, 19))
           ) {
             setWarning(true);
           } else {

diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
@@ -25,7 +25,7 @@ const EditPanel = ({
   onChange,
 }: EditPanelProps) => {
   const t = useT();
-  const { warning, handleOnChange, onAppyChange } = useHooks({
+  const { isDisabled, warning, handleOnChange, onAppyChange } = useHooks({
     timelineValues,
     onChange,
     onClose,
@@ -43,7 +43,7 @@ const EditPanel = ({
           <Button
             text={t("Apply")}
             buttonType="primary"
-            disabled={warning}
+            disabled={!isDisabled || warning}
             onClick={onAppyChange}
           />
         }>
@@ -54,18 +54,18 @@ const EditPanel = ({
             onChange={newValue => handleOnChange(newValue || "", "startTime")}
             value={timelineValues?.startTime}
           />
-          <CustomDateTimeField
-            name={t("* End Time")}
-            onChange={newValue => handleOnChange(newValue || "", "endTime")}
-            description={t("End time for the timeline")}
-            value={timelineValues?.endTime}
-          />
           <CustomDateTimeField
             name={t("* Current Time")}
             description={t("Current time should be between start and end time")}
             onChange={newValue => handleOnChange(newValue || "", "currentTime")}
             value={timelineValues?.currentTime}
           />
+          <CustomDateTimeField
+            name={t("* End Time")}
+            onChange={newValue => handleOnChange(newValue || "", "endTime")}
+            description={t("End time for the timeline")}
+            value={timelineValues?.endTime}
+          />
           {warning && (
             <DangerItem>
               <Icon icon="alert" size={30} />

diff --git a/web/src/beta/components/fields/TimelineField/index.tsx b/web/src/beta/components/fields/TimelineField/index.tsx
@@ -31,13 +31,13 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })
 
   const handleTimelineModalOpen = useCallback(() => setOpenModal(true), []);
 
+  const [timelineValues, setTimelineValues] = useState(value);
+
   const handleRemoveSetting = useCallback(() => {
     if (!value) return;
     onChange?.();
   }, [value, onChange]);
 
-  const [timelineValues, setTimelineValues] = useState(value);
-
   useEffect(() => {
     setTimelineValues(value);
   }, [value]);
@@ -52,10 +52,10 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })
                 {timelineValues?.startTime ?? t("not set")}
               </TextWrapper>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.endTime ?? t("not set")}
+                {timelineValues?.currentTime ?? t("not set")}
               </TextWrapper>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.currentTime ?? t("not set")}
+                {timelineValues?.endTime ?? t("not set")}
               </TextWrapper>
             </Timeline>
             <DeleteIcon
@@ -68,7 +68,7 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })
           <TriggerButton
             buttonType="secondary"
             text={t("set")}
-            icon="clock"
+            icon="set"
             size="small"
             iconPosition="left"
             onClick={() => handleTimelineModalOpen()}
@@ -92,6 +92,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
+  padding-bottom: 12px;
 `;
 
 const InputWrapper = styled.div<{ disabled?: boolean }>`
@@ -129,7 +130,7 @@ const Timeline = styled.div`
     bottom: 10px;
     left: 15px;
   }
-  &:nth-child(2) {
+  &:nth-of-type(2n) {
     &:before {
       display: none;
     }

diff --git a/web/src/beta/components/fields/common/TextInput/index.tsx b/web/src/beta/components/fields/common/TextInput/index.tsx
@@ -92,6 +92,7 @@ const StyledInput = styled.input`
   border-radius: 4px;
   padding: 4px 8px;
   transition: all 0.3s;
+  flex: 1;
   opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
   pointer-events: ${({ disabled }) => (disabled ? "none" : "inherit")};
   :focus {

diff --git a/web/src/beta/features/Editor/Visualizer/convert-story.ts b/web/src/beta/features/Editor/Visualizer/convert-story.ts
@@ -149,6 +149,7 @@ const processPropertyGroups = (
         ui: toUi(schema.ui) || undefined,
         title: schema.translatedTitle || undefined,
         description: schema.translatedDescription || undefined,
+        choices: schema.choices || undefined,
       };
 
       if (!used) {

diff --git a/web/src/beta/lib/core/Map/useTimelineManager.ts b/web/src/beta/lib/core/Map/useTimelineManager.ts
@@ -25,7 +25,7 @@ export type Timeline = {
   stop: Date;
 };
 
-type EngineClock = {
+export type EngineClock = {
   current: Date | undefined;
   start: Date | undefined;
   stop: Date | undefined;
@@ -56,7 +56,7 @@ type SetOptionsCommand = {
   cmd: "SET_OPTIONS";
   payload: Partial<Pick<TimelineOptions, "multiplier" | "rangeType" | "stepType">>;
 };
-type TimelineCommit = (PlayCommand | PauseCommand | SetTimeCommand | SetOptionsCommand) & {
+export type TimelineCommit = (PlayCommand | PauseCommand | SetTimeCommand | SetOptionsCommand) & {
   committer: TimelineCommitter;
 };