feat: add frame scrubbing controls

src/components/playback/playbackmanager.js

@@ -1345,6 +1345,10 @@
             }
         };
 
+        self.getFps = function (player) {
+            self.currentMediaSource(player).MediaStreams.find(s => s.Type === "Video")?.RealFrameRate
+        }
+
         function getSavedMaxStreamingBitrate(apiClient, mediaType) {
             if (!apiClient) {
                 // This should hopefully never happen
@@ -3885,6 +3889,20 @@
         this.seekRelative(offsetTicks, player);
     }
 
+    nextFrame(player = this._currentPlayer) {
+        const fps = this.getFps(player);
+        if (fps != null) {
+            this.seekRelative(1e6 / fps, player);
+        }
+    }
+
+    previousFrame(player = this._currentPlayer) {
+        const fps = this.getFps(player);
+        if (fps != null) {
+            this.seekRelative(-1e6 / fps, player);
+        }
+    }
+
     seekPercent(percent, player = this._currentPlayer) {
         let ticks = this.duration(player) || 0;
 

src/controllers/playback/video/index.js

@@ -1310,6 +1310,18 @@ export default function (view) {
                     showOsd(btnFastForward);
                 }
                 break;
+            case ',':
+                if (!e.shiftKey) {
+                    e.preventDefault();
+                    playbackManager.previousFrame(currentPlayer);
+                }
+                break;
+            case '.':
+                if (!e.shiftKey) {
+                    e.preventDefault();
+                    playbackManager.nextFrame(currentPlayer);
+                }
+                break;
             case 'j':
             case 'J':
             case 'ArrowLeft':