Player improvements (#2099)

* Focus scene player on ready
* Change file info hotkey
* Add hide/show sidebar hotkey
* Add hotkey to hide scrubber
* Update keybinds manual page

ui/v2.5/src/components/Changelog/versions/v0120.md

@@ -5,6 +5,7 @@
 * Add forward jump 10 second button to video player. ([#1973](https://github.com/stashapp/stash/pull/1973))
 
 ### 🎨 Improvements
+* Added keyboard shortcuts to hide scene page sidebar and scene scrubber. ([#2099](https://github.com/stashapp/stash/pull/2099))
 * Overhauled, restructured and added auto-save to the settings pages. ([#2086](https://github.com/stashapp/stash/pull/2086))
 * Include path and hashes in destroy scene/image/gallery post hook input. ([#2102](https://github.com/stashapp/stash/pull/2102/files))
 * Rollback operation if files fail to be deleted. ([#1954](https://github.com/stashapp/stash/pull/1954))

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -218,6 +218,8 @@ export class ScenePlayerImpl extends React.Component<
         this.props.scene.paths.funscript || ""
       );
     }
+
+    this.player.getContainer().focus();
   }
 
   private onSeeked() {

ui/v2.5/src/components/ScenePlayer/styles.scss

@@ -34,6 +34,10 @@ $sceneTabWidth: 450px;
   &.portrait .video-wrapper {
     height: 177.78vw;
   }
+
+  .jwplayer {
+    outline: none;
+  }
 }
 
 .scene-tabs,
@@ -115,6 +119,10 @@ $sceneTabWidth: 450px;
   position: relative;
 }
 
+.hide-scrubber .scrubber-wrapper {
+  display: none;
+}
+
 /* hide scrubber when height is < 450px or width < 576 */
 @media (max-height: 449px), (max-width: 575px) {
   .scrubber-wrapper {

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -53,6 +53,7 @@ const ScenePage: React.FC<IProps> = ({ scene, refetch }) => {
   const [generateScreenshot] = useSceneGenerateScreenshot();
   const [timestamp, setTimestamp] = useState<number>(getInitialTimestamp());
   const [collapsed, setCollapsed] = useState(false);
+  const [showScrubber, setShowScrubber] = useState(true);
 
   const {
     data: sceneStreams,
@@ -549,22 +550,26 @@ const ScenePage: React.FC<IProps> = ({ scene, refetch }) => {
     Mousetrap.bind("q", () => setActiveTabKey("scene-queue-panel"));
     Mousetrap.bind("e", () => setActiveTabKey("scene-edit-panel"));
     Mousetrap.bind("k", () => setActiveTabKey("scene-markers-panel"));
-    Mousetrap.bind("f", () => setActiveTabKey("scene-file-info-panel"));
+    Mousetrap.bind("i", () => setActiveTabKey("scene-file-info-panel"));
     Mousetrap.bind("o", () => onIncrementClick());
     Mousetrap.bind("p n", () => onQueueNext());
     Mousetrap.bind("p p", () => onQueuePrevious());
     Mousetrap.bind("p r", () => onQueueRandom());
+    Mousetrap.bind(",", () => setCollapsed(!collapsed));
+    Mousetrap.bind(".", () => setShowScrubber(!showScrubber));
 
     return () => {
       Mousetrap.unbind("a");
       Mousetrap.unbind("q");
       Mousetrap.unbind("e");
       Mousetrap.unbind("k");
-      Mousetrap.unbind("f");
+      Mousetrap.unbind("i");
       Mousetrap.unbind("o");
       Mousetrap.unbind("p n");
       Mousetrap.unbind("p p");
       Mousetrap.unbind("p r");
+      Mousetrap.unbind(",");
+      Mousetrap.unbind(".");
     };
   });
 
@@ -617,7 +622,9 @@ const ScenePage: React.FC<IProps> = ({ scene, refetch }) => {
       <div className={`scene-player-container ${collapsed ? "expanded" : ""}`}>
         {!rerenderPlayer ? (
           <ScenePlayer
-            className="w-100 m-sm-auto no-gutter"
+            className={`w-100 m-sm-auto no-gutter ${
+              !showScrubber ? "hide-scrubber" : ""
+            }`}
             scene={scene}
             timestamp={timestamp}
             autoplay={autoplay}

ui/v2.5/src/docs/en/KeyboardShortcuts.md

@@ -56,8 +56,10 @@
 | `a` | Details tab |
 | `q` | Queue tab |
 | `k` | Markers tab |
-| `f` | File info tab |
+| `i` | File info tab |
 | `e` | Edit tab |
+| `,` | Hide/Show sidebar |
+| `.` | Hide/Show scene scrubber |
 | `o` | Increment O-Counter |
 | `p n` | Play next scene in queue |
 | `p p` | Play previous scene in queue |