[Bug Fix] Disable float-on-scroll JWPlayer feature on mobile (#1721)

* Disable video float on mobile

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

@@ -12,4 +12,5 @@
 * Added sv-SE language option. ([#1691](https://github.com/stashapp/stash/pull/1691))
 
 ### 🐛 Bug fixes
+* Disabled float-on-scroll player on mobile devices. ([#1721](https://github.com/stashapp/stash/pull/1721))
 * Fix Create Marker form on small devices. ([#1718](https://github.com/stashapp/stash/pull/1718))

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

@@ -3,7 +3,7 @@ import React from "react";
 import ReactJWPlayer from "react-jw-player";
 import * as GQL from "src/core/generated-graphql";
 import { useConfiguration } from "src/core/StashService";
-import { JWUtils } from "src/utils";
+import { JWUtils, ScreenUtils } from "src/utils";
 import { ScenePlayerScrubber } from "./ScenePlayerScrubber";
 import { Interactive } from "../../utils/interactive";
 
@@ -294,14 +294,20 @@ export class ScenePlayerImpl extends React.Component<
 
     this.playlist = this.makePlaylist();
 
+    // TODO: leverage the floating.mode option after upgrading JWPlayer
+    const extras: any = {};
+
+    if (!ScreenUtils.isMobile()) {
+      extras.floating = {
+        dismissible: true,
+      };
+    }
+
     const ret = {
       playlist: this.playlist,
       image: scene.paths.screenshot,
       width: "100%",
       height: "100%",
-      floating: {
-        dismissible: true,
-      },
       cast: {},
       primary: "html5",
       autostart:
@@ -314,6 +320,7 @@ export class ScenePlayerImpl extends React.Component<
       getDurationHook,
       seekHook,
       getCurrentTimeHook,
+      ...extras,
     };
 
     return ret;

ui/v2.5/src/utils/index.ts

@@ -1,3 +1,4 @@
+export { default as ScreenUtils } from "./screen";
 export { default as ImageUtils } from "./image";
 export { default as NavUtils } from "./navigation";
 export { default as TableUtils } from "./table";

ui/v2.5/src/utils/screen.ts

@@ -0,0 +1,6 @@
+const isMobile = () =>
+  window.matchMedia("only screen and (max-width: 767px)").matches;
+
+export default {
+  isMobile,
+};