create AnimationScrubber sub component

andreduvoisin · Jul 3, 2020 · 1370399 · 1370399
1 parent bc59e01
commit 1370399
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/ui/web/src/components/AnimationControls/AnimationControls.jsx b/ui/web/src/components/AnimationControls/AnimationControls.jsx
@@ -69,6 +69,23 @@ const StopButton = ({
   );
 };
 
+const AnimationScrubber = ({
+  onChange
+}) => {
+  const duration = useSelector(state => state.animationState.duration);
+  const currentTime = useSelector(state => state.animationState.currentTime);
+  return (
+    <Slider
+      step={0.0000000001}
+      min={0}
+      max={duration}
+      value={currentTime}
+      readOnly={true}
+      onChange={onChange}
+    />
+  );
+};
+
 const AnimationControls = ({
   setAnimationTime,
   setRenderMode,
@@ -99,8 +116,6 @@ const AnimationControls = ({
   ];
 
   const animationStatus = useSelector(state => state.animationState.animationStatus);
-  const duration = useSelector(state => state.animationState.duration);
-  const currentTime = useSelector(state => state.animationState.currentTime);
 
   return (
     <AnimationControlsList
@@ -116,14 +131,7 @@ const AnimationControls = ({
         <StopButton onClick={toggleAnimation} />
       </AnimationControlsListItem>
       <AnimationControlsListItem>
-        <Slider
-          step={0.0000000001}
-          min={0}
-          max={duration}
-          value={currentTime}
-          readOnly={true}
-          onChange={setAnimationTime}
-        />
+        <AnimationScrubber onChange={setAnimationTime} />
       </AnimationControlsListItem>
       <AnimationControlsListItem>
         <Dropdown