From 71b0025e5aca03a592eac9c87fb08fea628200d6 Mon Sep 17 00:00:00 2001
From: Aifeilong <2993607249@qq.com>
Date: Fri, 3 Nov 2023 15:12:27 +0800
Subject: [PATCH] fix ReplayButton

---
 src/components/domain/One/CustomFlyTo.jsx             | 7 +++++--
 src/components/domain/One/ReplayButton.jsx            | 7 +++++--
 src/components/domain/Three/SceneTwo/CustomFlyTo.jsx  | 6 +++++-
 src/components/domain/Three/SceneTwo/ReplayButton.jsx | 7 +++++--
 src/components/domain/Two/CustomFlyTo.jsx             | 6 +++++-
 src/components/domain/Two/ReplayButton.jsx            | 7 +++++--
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/domain/One/CustomFlyTo.jsx b/src/components/domain/One/CustomFlyTo.jsx
index cd42781..9ae9887 100644
--- a/src/components/domain/One/CustomFlyTo.jsx
+++ b/src/components/domain/One/CustomFlyTo.jsx
@@ -31,7 +31,11 @@ function CustomFlyTo() {
     const barotorpic = {
       destination: Cartesian3.fromDegrees(60, 15, 15000000),
       duration: 7,
-      complete: () => {},
+      complete: () => {
+        setTimeout(() => {
+          viewer.clock.shouldAnimate = false;
+        }, 3000);
+      },
       easingFunction: EasingFunction.LINEAR_NONE,
       orientation: {
         heading: 6.283,
@@ -69,7 +73,6 @@ function CustomFlyTo() {
   cameraFlyToLine();
 
   useEffect(() => {
-    viewer.clock.shouldAnimate = false;
     viewer.clock.currentTime = viewer.clock.startTime.clone();
     cameraFlyToLine();
   }, [replayVersion]);
diff --git a/src/components/domain/One/ReplayButton.jsx b/src/components/domain/One/ReplayButton.jsx
index 7252b69..8e0219c 100644
--- a/src/components/domain/One/ReplayButton.jsx
+++ b/src/components/domain/One/ReplayButton.jsx
@@ -1,14 +1,17 @@
 import { useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { Button } from "antd";
+import { useCesium } from "resium";
 import styles from "./index.module.less";
 
 export default function ReplayButton() {
   const dispatch = useDispatch();
+  const { viewer } = useCesium();
 
   const playHandler = useCallback(() => {
-    dispatch.data.update({ replayVersion: Date.now() });
-  }, []);
+    if (!viewer.clock.shouldAnimate)
+      dispatch.data.update({ replayVersion: Date.now() });
+  }, [viewer]);
 
   return (
     <div className={styles.replayButton}>
diff --git a/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx b/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx
index 42dd6fb..a33e11c 100644
--- a/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx
+++ b/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx
@@ -87,6 +87,11 @@ export default function CustomFlyTo() {
         pitch: -1.3,
         roll: 0,
       },
+      complete: () => {
+        setTimeout(() => {
+          viewer.clock.shouldAnimate = false;
+        }, 3000);
+      },
       easingFunction: EasingFunction.LINEAR_NONE,
     };
 
@@ -95,7 +100,6 @@ export default function CustomFlyTo() {
   cameraFlyToLine();
 
   useEffect(() => {
-    viewer.clock.shouldAnimate = false;
     viewer.clock.currentTime = viewer.clock.startTime.clone();
     cameraFlyToLine();
   }, [replayVersion]);
diff --git a/src/components/domain/Three/SceneTwo/ReplayButton.jsx b/src/components/domain/Three/SceneTwo/ReplayButton.jsx
index 7252b69..8e0219c 100644
--- a/src/components/domain/Three/SceneTwo/ReplayButton.jsx
+++ b/src/components/domain/Three/SceneTwo/ReplayButton.jsx
@@ -1,14 +1,17 @@
 import { useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { Button } from "antd";
+import { useCesium } from "resium";
 import styles from "./index.module.less";
 
 export default function ReplayButton() {
   const dispatch = useDispatch();
+  const { viewer } = useCesium();
 
   const playHandler = useCallback(() => {
-    dispatch.data.update({ replayVersion: Date.now() });
-  }, []);
+    if (!viewer.clock.shouldAnimate)
+      dispatch.data.update({ replayVersion: Date.now() });
+  }, [viewer]);
 
   return (
     <div className={styles.replayButton}>
diff --git a/src/components/domain/Two/CustomFlyTo.jsx b/src/components/domain/Two/CustomFlyTo.jsx
index 143e5b5..42e945d 100644
--- a/src/components/domain/Two/CustomFlyTo.jsx
+++ b/src/components/domain/Two/CustomFlyTo.jsx
@@ -114,6 +114,11 @@ function CustomFlyTo() {
         roll: -6,
       },
       easingFunction: EasingFunction.LINEAR_NONE,
+      complete: () => {
+        setTimeout(() => {
+          viewer.clock.shouldAnimate = false;
+        }, 3000);
+      },
     };
 
     camera.flyTo(area1Options);
@@ -121,7 +126,6 @@ function CustomFlyTo() {
   cameraFlyToLine();
 
   useEffect(() => {
-    viewer.clock.shouldAnimate = false;
     viewer.clock.currentTime = viewer.clock.startTime.clone();
     cameraFlyToLine();
   }, [replayVersion]);
diff --git a/src/components/domain/Two/ReplayButton.jsx b/src/components/domain/Two/ReplayButton.jsx
index 7252b69..8e0219c 100644
--- a/src/components/domain/Two/ReplayButton.jsx
+++ b/src/components/domain/Two/ReplayButton.jsx
@@ -1,14 +1,17 @@
 import { useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { Button } from "antd";
+import { useCesium } from "resium";
 import styles from "./index.module.less";
 
 export default function ReplayButton() {
   const dispatch = useDispatch();
+  const { viewer } = useCesium();
 
   const playHandler = useCallback(() => {
-    dispatch.data.update({ replayVersion: Date.now() });
-  }, []);
+    if (!viewer.clock.shouldAnimate)
+      dispatch.data.update({ replayVersion: Date.now() });
+  }, [viewer]);
 
   return (
     <div className={styles.replayButton}>