add mobile player and fullscreen support for iOS

web/package-lock.json

@@ -11933,6 +11933,15 @@
       "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
       "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
     },
+    "videojs-mobile-ui": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/videojs-mobile-ui/-/videojs-mobile-ui-0.5.3.tgz",
+      "integrity": "sha512-rY+JFLUq2edqoWB4CHVxPLYQEYhSNdGylGe44MEdfxzqYaEgkf/qyDlmmpdN9BFIQ6vJ7eaQBxgTOHha8UpOGA==",
+      "requires": {
+        "global": "^4.3.2",
+        "video.js": "^5.19.2 || ^6.6.0 || ^7.0.0"
+      }
+    },
     "videojs-playlist": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/videojs-playlist/-/videojs-playlist-4.3.1.tgz",

web/package.json

@@ -18,6 +18,7 @@
     "preact-async-route": "^2.2.1",
     "preact-router": "^3.2.1",
     "video.js": "^7.11.8",
+    "videojs-mobile-ui": "^0.5.3",
     "videojs-playlist": "^4.3.1",
     "videojs-seek-buttons": "^2.0.0"
   },

web/src/components/VideoPlayer.jsx

@@ -1,5 +1,6 @@
 import { h, Component } from 'preact';
 import videojs from 'video.js';
+import 'videojs-mobile-ui';
 import 'videojs-playlist';
 import 'videojs-seek-buttons';
 import 'video.js/dist/video-js.css';
@@ -25,6 +26,11 @@ export default class VideoPlayer extends Component {
       forward: 30,
       back: 10,
     });
+    this.player.mobileUi({
+      fullscreen: {
+        iOS: true,
+      },
+    });
   }
 
   componentWillUnmount() {

web/src/index.css

@@ -25,3 +25,7 @@
     transform: rotate(360deg);
   }
 }
+
+.video-js.vjs-has-started .vjs-touch-overlay {
+  display: none;
+}