Merge pull request #416 from charlielee/415-seek-buttons

Wires up the first/previous/next/last frame buttons
charlielee · Aug 13, 2022 · 5106185 · 5106185
2 parents 1321ba2 + 47f29a9
commit 5106185
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 6 deletions.
diff --git a/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.tsx b/src/renderer/components/animator/AnimationToolbar/AnimationToolbar.tsx
@@ -12,11 +12,19 @@ import "./AnimationToolbar.css";
 interface AnimationToolbarProps {
   startPlayback: () => void;
   stopPlayback: () => void;
+  displayFirstFrame: () => void;
+  displayPreviousFrame: () => void;
+  displayNextFrame: () => void;
+  displayLastFrame: () => void;
 }
 
 const AnimationToolbar = ({
   startPlayback,
   stopPlayback,
+  displayFirstFrame,
+  displayPreviousFrame,
+  displayNextFrame,
+  displayLastFrame,
 }: AnimationToolbarProps): JSX.Element => {
   const [onionSkinAmount, setOnionSkinAmount] = useState(0);
   const [loopPlayback, setLoopPlayback] = useState(false);
@@ -49,14 +57,13 @@ const AnimationToolbar = ({
         <IconButton
           title="First Frame"
           icon={IconName.PLAY_FIRST}
-          onClick={() => undefined}
+          onClick={() => displayFirstFrame()}
         />
         <IconButton
           title="Previous Frame"
           icon={IconName.PLAY_PREVIOUS}
-          onClick={() => undefined}
+          onClick={() => displayPreviousFrame()}
         />
-
         <IconButton
           title="Playback Frames"
           icon={IconName.PLAY}
@@ -70,12 +77,12 @@ const AnimationToolbar = ({
         <IconButton
           title="Next Frame"
           icon={IconName.PLAY_NEXT}
-          onClick={() => undefined}
+          onClick={() => displayNextFrame()}
         />
         <IconButton
           title="Last Frame"
           icon={IconName.PLAY_LAST}
-          onClick={() => undefined}
+          onClick={() => displayLastFrame()}
         />
       </ToolbarItem>
 

diff --git a/src/renderer/components/animator/Timeline/TimelineLiveView/TimelineLiveView.tsx b/src/renderer/components/animator/Timeline/TimelineLiveView/TimelineLiveView.tsx
@@ -19,7 +19,7 @@ const TimelineLiveView = ({ highlighted, onClick }: TimelineLiveViewProps) => {
         iconContainerClassName="timeline-live-view__button-icon-container"
         title="Live View"
         onClick={onClick}
-        active
+        active={highlighted}
       />
     </div>
   );

diff --git a/src/renderer/context/PlaybackContext/PlaybackContext.tsx b/src/renderer/context/PlaybackContext/PlaybackContext.tsx
@@ -5,6 +5,10 @@ export interface PlaybackContextProps {
   startPlayback: () => void;
   stopPlayback: () => void;
   displayFrame: (i: TimelineIndex | undefined) => void;
+  displayFirstFrame: () => void;
+  displayPreviousFrame: () => void;
+  displayNextFrame: () => void;
+  displayLastFrame: () => void;
   timelineIndex: TimelineIndex | undefined;
   liveViewVisible: boolean;
 }
@@ -13,6 +17,10 @@ const defaultValue: PlaybackContextProps = {
   startPlayback: () => undefined,
   stopPlayback: () => undefined,
   displayFrame: () => undefined,
+  displayFirstFrame: () => undefined,
+  displayPreviousFrame: () => undefined,
+  displayNextFrame: () => undefined,
+  displayLastFrame: () => undefined,
   timelineIndex: undefined,
   liveViewVisible: true,
 };

diff --git a/src/renderer/context/PlaybackContext/PlaybackContextProvider.tsx b/src/renderer/context/PlaybackContext/PlaybackContextProvider.tsx
@@ -69,11 +69,50 @@ const PlaybackContextProvider = ({
     if (i === undefined) {
       stopPlayback();
     } else {
+      stop();
       _updateFrameIndex(i);
       setLiveViewVisible(false);
     }
   };
 
+  const displayFirstFrame = () => {
+    _logPlayback("playback.displayFirstFrame");
+    displayFrame(0);
+  };
+
+  const displayPreviousFrame = () => {
+    _logPlayback("playback.displayPreviousFrame");
+
+    if (timelineIndex === undefined) {
+      return displayFrame(playForDuration - 1);
+    }
+    if (timelineIndex > 0) {
+      return displayFrame(timelineIndex - 1);
+    }
+  };
+
+  const displayNextFrame = () => {
+    _logPlayback("playback.displayNextFrame");
+
+    if (timelineIndex === playForDuration - 1) {
+      return displayFrame(undefined);
+    }
+    if (timelineIndex !== undefined) {
+      return displayFrame(timelineIndex + 1);
+    }
+  };
+
+  const displayLastFrame = () => {
+    _logPlayback("playback.displayLastFrame");
+
+    if (timelineIndex === playForDuration - 1) {
+      return displayFrame(undefined);
+    }
+    if (timelineIndex !== undefined) {
+      return displayFrame(playForDuration - 1);
+    }
+  };
+
   const _updateFrameIndex = (i: TimelineIndex | undefined) => {
     animationFrameIndex.current = i;
     setTimelineIndex(i);
@@ -90,6 +129,10 @@ const PlaybackContextProvider = ({
     startPlayback,
     stopPlayback,
     displayFrame,
+    displayFirstFrame,
+    displayPreviousFrame,
+    displayNextFrame,
+    displayLastFrame,
     timelineIndex,
     liveViewVisible,
   };