Use big-buttons instead of videojs-mobile-ui touch controls (#3650)

* Use big-buttons instead of videojs-mobile-ui touch controls
* Update @types/videojs-mobile-ui to 0.8.0

ui/v2.5/package.json

@@ -90,7 +90,7 @@
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-hash-link": "^2.4.5",
     "@types/video.js": "^7.3.51",
-    "@types/videojs-mobile-ui": "^0.5.0",
+    "@types/videojs-mobile-ui": "^0.8.0",
     "@types/videojs-seek-buttons": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",

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

@@ -16,6 +16,7 @@ import "./source-selector";
 import "./persist-volume";
 import "./markers";
 import "./vtt-thumbnails";
+import "./big-buttons";
 import "./track-activity";
 import cx from "classnames";
 import {
@@ -303,6 +304,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
         markers: {},
         sourceSelector: {},
         persistVolume: {},
+        bigButtons: {},
         seekButtons: {
           forward: 10,
           back: 10,
@@ -469,9 +471,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
         lockToLandscapeOnEnter: isLandscape,
       },
       touchControls: {
-        seekSeconds: 10,
+        disabled: true,
-        tapTimeout: 500,
-        disableOnEnd: false,
       },
     };
     player.mobileUi(mobileUiOptions);

ui/v2.5/src/components/ScenePlayer/big-buttons.ts

@@ -0,0 +1,69 @@
+import videojs, { VideoJsPlayer } from "video.js";
+
+// prettier-ignore
+const BigPlayButton = videojs.getComponent("BigPlayButton") as unknown as typeof videojs.BigPlayButton;
+
+class BigPlayPauseButton extends BigPlayButton {
+  handleClick(event: videojs.EventTarget.Event) {
+    if (this.player().paused()) {
+      super.handleClick(event);
+    } else {
+      this.player().pause();
+    }
+  }
+
+  buildCSSClass() {
+    return "vjs-control vjs-button vjs-big-play-pause-button";
+  }
+}
+
+class BigButtonGroup extends videojs.getComponent("Component") {
+  constructor(player: VideoJsPlayer) {
+    super(player);
+
+    this.addChild("seekButton", {
+      direction: "back",
+      seconds: 10,
+    });
+
+    this.addChild("BigPlayPauseButton");
+
+    this.addChild("seekButton", {
+      direction: "forward",
+      seconds: 10,
+    });
+  }
+
+  createEl() {
+    return super.createEl("div", {
+      className: "vjs-big-button-group",
+    });
+  }
+}
+
+class BigButtonsPlugin extends videojs.getPlugin("plugin") {
+  constructor(player: VideoJsPlayer) {
+    super(player);
+
+    player.ready(() => {
+      player.addChild("BigButtonGroup");
+    });
+  }
+}
+
+// Register the plugin with video.js.
+videojs.registerComponent("BigButtonGroup", BigButtonGroup);
+videojs.registerComponent("BigPlayPauseButton", BigPlayPauseButton);
+videojs.registerPlugin("bigButtons", BigButtonsPlugin);
+
+/* eslint-disable @typescript-eslint/naming-convention */
+declare module "video.js" {
+  interface VideoJsPlayer {
+    bigButtons: () => BigButtonsPlugin;
+  }
+  interface VideoJsPlayerPluginOptions {
+    bigButtons?: {};
+  }
+}
+
+export default BigButtonsPlugin;

ui/v2.5/yarn.lock

@@ -2440,10 +2440,10 @@
   resolved "https://registry.yarnpkg.com/@types/video.js/-/video.js-7.3.51.tgz#ce69e02681ed6ed8abe61bb3802dd032a74d63e8"
   integrity sha512-xLlt/ZfCuWYBvG2MRn018RvaEplcK6dI63aOiVUeeAWFyjx3Br1hL749ndFgbrvNdY4m9FoHG1FQ/PB6IpfSAQ==
 
-"@types/videojs-mobile-ui@^0.5.0":
+"@types/videojs-mobile-ui@^0.8.0":
-  version "0.5.0"
+  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@types/videojs-mobile-ui/-/videojs-mobile-ui-0.5.0.tgz#66934b140fd437fda361986f8e7e87b01dc39138"
+  resolved "https://registry.yarnpkg.com/@types/videojs-mobile-ui/-/videojs-mobile-ui-0.8.0.tgz#0fb82810155f3dee9620ea411c8b9bd17e1ac645"
-  integrity sha512-wqeapTB35qpLfERxvL5mZGoexf5bA2TreDpFgc3zyCdr7Acf86VItvo9oTclFeUc11wOo7W7/4ueZZAEYmlTaA==
+  integrity sha512-Q8p7ezQLZzf8pnvYd8GZ/6tcg2oX0269Q94dDoqNnq2QMmqWp1sj8npU3gGnTaLkYvvdrO8UjBOIzX68RkQLew==
   dependencies:
     "@types/video.js" "*"