Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): timeline block speed #1233

Merged
merged 12 commits into from
Nov 13, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
config: {
data: {
url: sourceType === "value" ? encodeUrl : value || undefined,
type: "czml",
type: "czml"
}
}
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
config: {
data: {
url: sourceType === "value" ? encodeUrl : value || undefined,
type: "kml",
type: "kml"
}
}
});
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
34 changes: 0 additions & 34 deletions web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
37 changes: 22 additions & 15 deletions web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";

import { TimelineValues } from "../../Crust/StoryPanel/Block/builtin/Timeline";
import {
convertOptionToSeconds,
formatDateToSting,
formatISO8601,
formatTimezone
Expand All @@ -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 }
];
mkumbobeaty marked this conversation as resolved.
Show resolved Hide resolved

const TRANSITION_SPEED = 0;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Revise transition speed value and name.

The TRANSITION_SPEED constant:

  1. Should not be 0 as it could conflict with "Not set" option
  2. Name should reflect its purpose as an intermediate value
-const TRANSITION_SPEED = 0;
+// Intermediate speed value used to ensure speed changes are registered
+const INTERMEDIATE_SPEED = 100;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const TRANSITION_SPEED = 0;
// Intermediate speed value used to ensure speed changes are registered
const INTERMEDIATE_SPEED = 100;


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;
Expand All @@ -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(
Expand Down Expand Up @@ -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);
mkumbobeaty marked this conversation as resolved.
Show resolved Hide resolved
throw error;
}
Comment on lines 155 to +165
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Simplify speed change handling and respect "Not set" option.

The current implementation has several issues:

  1. Uses unnecessary setTimeout
  2. Error handling resets speed inappropriately
  3. Doesn't handle "Not set" option correctly
 const handleOnSpeedChange = useCallback(
   (speed: number, committerId?: string) => {
     try {
+      // Don't override speed when "Not set" (0) is selected
+      if (speed === 0) return;
+
-      onSpeedChange(TRANSITION_SPEED, committerId);
-      setTimeout(() => {
-        onSpeedChange(speed, committerId);
-        setSpeed(speed);
-      }, 0);
+      onSpeedChange(INTERMEDIATE_SPEED, committerId);
+      onSpeedChange(speed, committerId);
+      setSpeed(speed);
     } catch (error) {
       console.error("Error during speed change:", error);
-      setSpeed(playSpeedOptions[0].seconds);
       throw error;
     }
   },
   [onSpeedChange]
 );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
(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;
}
(speed: number, committerId?: string) => {
try {
// Don't override speed when "Not set" (0) is selected
if (speed === 0) return;
onSpeedChange(INTERMEDIATE_SPEED, committerId);
onSpeedChange(speed, committerId);
setSpeed(speed);
} catch (error) {
console.error("Error during speed change:", error);
throw error;
}

},
[onSpeedChange]
);
Expand Down
4 changes: 3 additions & 1 deletion web/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Loading