feat: add frame scrubbing controls

src/components/playback/playbackmanager.js

@@ -27,6 +27,7 @@ import { PlayerEvent } from 'apps/stable/features/playback/constants/playerEvent
 import { bindMediaSegmentManager } from 'apps/stable/features/playback/utils/mediaSegmentManager';
 import { bindMediaSessionSubscriber } from 'apps/stable/features/playback/utils/mediaSessionSubscriber';
 import { AppFeature } from 'constants/appFeature';
+import { TICKS_PER_SECOND } from 'constants/time';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { MediaError } from 'types/mediaError';
 import { getMediaError } from 'utils/mediaError';
@@ -1345,6 +1346,10 @@ export class PlaybackManager {
             }
         };
 
+        self.getFps = function (player) {
+            return self.currentMediaSource(player).MediaStreams.find(s => s.Type === 'Video')?.RealFrameRate;
+        };
+
         function getSavedMaxStreamingBitrate(apiClient, mediaType) {
             if (!apiClient) {
                 // This should hopefully never happen
@@ -3875,6 +3880,20 @@ export class PlaybackManager {
         this.seekRelative(offsetTicks, player);
     }
 
+    nextFrame(player = this._currentPlayer) {
+        const fps = this.getFps(player);
+        if (fps != null) {
+            this.seekRelative(TICKS_PER_SECOND / fps, player);
+        }
+    }
+
+    previousFrame(player = this._currentPlayer) {
+        const fps = this.getFps(player);
+        if (fps != null) {
+            this.seekRelative(-TICKS_PER_SECOND / 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':