From b637e5b3d3ab668f0c3aefa461efb52d10a5645b Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Wed, 9 Sep 2020 12:52:14 +0200
Subject: [PATCH] feat(globe): stop spinning globe on play

---
 .../components/layers/time-slider/time-slider.tsx      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/scripts/components/layers/time-slider/time-slider.tsx b/src/scripts/components/layers/time-slider/time-slider.tsx
index fb5f2e47d..3e5ac4a54 100644
--- a/src/scripts/components/layers/time-slider/time-slider.tsx
+++ b/src/scripts/components/layers/time-slider/time-slider.tsx
@@ -25,6 +25,8 @@ import TimePlayback from '../time-playback/time-playback';
 import Button from '../../main/button/button';
 import {PlayCircleIcon} from '../../main/icons/play-circle-icon';
 import {PauseCircleIcon} from '../../main/icons/pause-circle-icon';
+import setGlobeSpinningAction from '../../../actions/set-globe-spinning';
+import {globeSpinningSelector} from '../../../selectors/globe/spinning';
 
 import styles from './time-slider.styl';
 
@@ -47,6 +49,7 @@ const TimeSlider: FunctionComponent = () => {
   const compareLayerDetails = useSelector((state: State) =>
     layerDetailsSelector(state, compareId)
   );
+  const globeSpinning = useSelector(globeSpinningSelector);
 
   const playbackStep = useMemo(
     () => Math.floor(getPlaybackStep(mainLayerDetails, compareLayerDetails)),
@@ -107,6 +110,13 @@ const TimeSlider: FunctionComponent = () => {
     }
   }, [time, globeTime]);
 
+  // stop globe spinning when playing
+  useEffect(() => {
+    if (isPlaying && globeSpinning) {
+      dispatch(setGlobeSpinningAction(false));
+    }
+  }, [dispatch, isPlaying, globeSpinning]);
+
   // return nothing when no timesteps available
   if (combined.timestamps.length === 0) {
     return null;