feat: Shortcut keys for Next/Previous Visited Frame

README.md

@@ -259,6 +259,8 @@ When the video playback bar is present, it allows the following shortcuts to sel
 * D or ArrowRight - Next Frame
 * Q - Previous Tagged Frame
 * E - Next Tagged Frame
+* H - Previous Visited Frame
+* L - Next Visited Frame
 
 #### Mouse Controls
 

src/common/localization/en-us.ts

@@ -241,6 +241,12 @@ export const english: IAppStrings = {
             nextTaggedFrame: {
                 tooltip: "Next Tagged Frame",
             },
+            previousVisitedFrame: {
+                tooltip: "Previous Visited Frame",
+            },
+            nextVisitedFrame: {
+                tooltip: "Next Visited Frame",
+            },
             previousExpectedFrame: {
                 tooltip: "Previous Frame",
             },

src/common/localization/es-cl.ts

@@ -243,6 +243,12 @@ export const spanish: IAppStrings = {
             nextTaggedFrame: {
                 tooltip: "Siguiente marco etiquetado",
             },
+            previousVisitedFrame: {
+                tooltip: "Fotograma visitado anterior",
+            },
+            nextVisitedFrame: {
+                tooltip: "Siguiente marco visitado",
+            },
             previousExpectedFrame: {
                 tooltip: "Fotograma anterior",
             },

src/common/strings.ts

@@ -246,6 +246,12 @@ export interface IAppStrings {
             previousExpectedFrame: {
                 tooltip: string,
             },
+            nextVisitedFrame: {
+                tooltip: string,
+            },
+            previousVisitedFrame: {
+                tooltip: string,
+            },
         }
         help: {
             title: string;

src/react/components/common/assetPreview/videoAsset.tsx

@@ -9,6 +9,7 @@ import { IAssetProps } from "./assetPreview";
 import { IAsset, AssetType, AssetState } from "../../../../models/applicationState";
 import { AssetService } from "../../../../services/assetService";
 import { CustomVideoPlayerButton } from "../../common/videoPlayer/customVideoPlayerButton";
+import { CustomVideoPlayerKeyBinding } from "../../common/videoPlayer/customVideoPlayerButton";
 import { strings } from "../../../../common/strings";
 
 /**
@@ -119,6 +120,20 @@ export class VideoAsset extends React.Component<IVideoAssetProps> {
                         >
                             <i className="fas fa-step-forward"></i>
                         </CustomVideoPlayerButton>
+                        <CustomVideoPlayerKeyBinding order={8.3}
+                            accelerators={["H", "h"]}
+                            tooltip={strings.editorPage.videoPlayer.previousVisitedFrame.tooltip}
+                            onClick={this.movePreviousVisitedFrame}
+                            icon={"fas fa-step-backward"}
+                        >
+                        </CustomVideoPlayerKeyBinding>
+                        <CustomVideoPlayerKeyBinding order={8.4}
+                            accelerators={["L", "l"]}
+                            tooltip={strings.editorPage.videoPlayer.nextVisitedFrame.tooltip}
+                            onClick={this.moveNextVisitedFrame}
+                            icon={"fas fa-step-forward"}
+                        >
+                        </CustomVideoPlayerKeyBinding>
                     </ControlBar>
                 }
             </Player >
@@ -177,6 +192,35 @@ export class VideoAsset extends React.Component<IVideoAssetProps> {
         }
     }
 
+    /**
+     * Bound to the "Previous Visited Frame" button
+     * Seeks the user to the previous visited video frame
+     */
+    private movePreviousVisitedFrame = () => {
+        const currentTime = this.getVideoPlayerState().currentTime;
+        const previousFrame = _
+            .reverse(this.props.childAssets)
+            .find((asset) => asset.state === AssetState.Visited && asset.timestamp < currentTime);
+
+        if (previousFrame) {
+            this.seekToTime(previousFrame.timestamp);
+        }
+    }
+
+    /**
+     * Bound to the "Next Visited Frame" button
+     * Seeks the user to the next visited video frame
+     */
+    private moveNextVisitedFrame = () => {
+        const currentTime = this.getVideoPlayerState().currentTime;
+        const nextFrame = this.props.childAssets
+            .find((asset) => asset.state === AssetState.Visited && asset.timestamp > currentTime);
+
+        if (nextFrame) {
+            this.seekToTime(nextFrame.timestamp);
+        }
+    }
+
     /**
      * Moves the videos current position forward one frame based on the current
      * project settings for frame rate extraction

src/react/components/common/videoPlayer/customVideoPlayerButton.tsx

@@ -34,3 +34,19 @@ export class CustomVideoPlayerButton extends React.Component<ICustomVideoPlayerB
         );
     }
 }
+
+export class CustomVideoPlayerKeyBinding extends React.Component<ICustomVideoPlayerButtonProps> {
+    public render() {
+        return (
+            <Fragment>
+                {this.props.accelerators &&
+                    <KeyboardBinding keyEventType={KeyEventType.KeyDown}
+                        displayName={this.props.tooltip}
+                        accelerators={this.props.accelerators}
+                        handler={this.props.onClick}
+                        icon={this.props.icon}/>
+                }
+            </Fragment>
+        );
+    }
+}