fix(web): timeline block speed (#1233)

web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/hooks.tsx

@@ -35,7 +35,7 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
       config: {
         data: {
           url: sourceType === "value" ? encodeUrl : value || undefined,
-          type: "czml",
+          type: "czml"
         }
       }
     });

web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/hooks.tsx

@@ -35,7 +35,7 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
       config: {
         data: {
           url: sourceType === "value" ? encodeUrl : value || undefined,
-          type: "kml",
+          type: "kml"
         }
       }
     });

web/src/beta/features/Editor/Map/DataSourceLayerCreator/util.ts

@@ -1,13 +1,13 @@
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
 
-const  isValidUrl = (string: string): boolean => {
+const isValidUrl = (string: string): boolean => {
   try {
     new URL(string);
     return true;
   } catch (_) {
     return false;
   }
-}
+};
 
 export const generateTitle = (url: string, layerName?: string): string => {
   if (layerName && layerName.trim() !== "") return layerName;

web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts

@@ -130,40 +130,6 @@ export const formatDateToSting = (d: number) => {
   return date.toISOString();
 };
 
-const timeStringToSeconds = (timeString: string) => {
-  const parts = timeString.split("/");
-  const valueUnit = parts[0].trim();
-  const value = parseFloat(valueUnit);
-  const unit = valueUnit.substr(value.toString().length).trim().toLowerCase();
-
-  switch (unit) {
-    case "sec":
-    case "secs":
-      return value;
-    case "min":
-    case "mins":
-      return value * 60;
-    case "hr":
-    case "hrs":
-      return value * 3600;
-    default:
-      return NaN;
-  }
-};
-
-export const convertOptionToSeconds = (data: string[]) => {
-  const objectsArray = [];
-
-  for (const timeString of data) {
-    const seconds = timeStringToSeconds(timeString);
-    if (!isNaN(seconds)) {
-      objectsArray.push({ timeString, seconds });
-    }
-  }
-
-  return objectsArray;
-};
-
 export const formatRangeDateAndTime = (data: string) => {
   const lastIdx = data.lastIndexOf(" ");
   const date = data.slice(0, lastIdx);

web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts

@@ -8,7 +8,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { TimelineValues } from "../../Crust/StoryPanel/Block/builtin/Timeline";
 import {
-  convertOptionToSeconds,
   formatDateToSting,
   formatISO8601,
   formatTimezone
@@ -25,6 +24,17 @@ const calculateMidTime = (startTime: number, stopTime: number) => {
   return (startTime + stopTime) / 2;
 };
 
+const playSpeedOptions = [
+  { timeString: "1sec/sec", seconds: 1 },
+  { timeString: "0.5min/sec", seconds: 30 },
+  { timeString: "1min/sec", seconds: 60 },
+  { timeString: "0.1hr/sec", seconds: 360 },
+  { timeString: "0.5hr/sec", seconds: 1800 },
+  { timeString: "1hr/sec", seconds: 3600 }
+];
+
+const TRANSITION_SPEED = 0;
+
 const timeRange = (startTime?: number, stopTime?: number) => {
   // To avoid out of range error in Cesium, we need to turn back a hour.
   const now = Date.now() - 3600000;
@@ -41,18 +51,6 @@ const timeRange = (startTime?: number, stopTime?: number) => {
 export default (timelineValues?: TimelineValues) => {
   const visualizerContext = useVisualizer();
 
-  const playSpeedOptions = useMemo(() => {
-    const speedOpt = [
-      "1sec/sec",
-      "0.5min/sec",
-      "1min/sec",
-      "0.1hr/sec",
-      "0.5hr/sec",
-      "1hr/sec"
-    ];
-    return convertOptionToSeconds(speedOpt);
-  }, []);
-
   const [speed, setSpeed] = useState(playSpeedOptions[0].seconds);
 
   const [currentTime, setCurrentTime] = useState(
@@ -152,10 +150,19 @@ export default (timelineValues?: TimelineValues) => {
       visualizerContext?.current?.timeline?.current?.onCommit(cb),
     [visualizerContext]
   );
+
   const handleOnSpeedChange = useCallback(
     (speed: number, committerId?: string) => {
-      onSpeedChange?.(speed, committerId);
-      setSpeed(speed);
+      try {
+        onSpeedChange(TRANSITION_SPEED, committerId);
+        setTimeout(() => {
+          onSpeedChange(speed, committerId);
+          setSpeed(speed);
+        }, 0);
+      } catch (error) {
+        setSpeed(playSpeedOptions[0].seconds);
+        throw error;
+      }
     },
     [onSpeedChange]
   );

web/vite.config.ts

@@ -57,7 +57,9 @@ export default defineConfig({
   define: {
     "process.env.QTS_DEBUG": "false", // quickjs-emscripten
     __APP_VERSION__: JSON.stringify(pkg.version),
-    __REEARTH_COMMIT_HASH__: JSON.stringify(process.env.GITHUB_SHA || commitHash)
+    __REEARTH_COMMIT_HASH__: JSON.stringify(
+      process.env.GITHUB_SHA || commitHash
+    )
   },
   mode: NO_MINIFY ? "development" : undefined,
   server: {