From 88ed7501a7ea093ea82630df99e184451b6b523b Mon Sep 17 00:00:00 2001
From: Jason Hunter <hunterjm@gmail.com>
Date: Fri, 4 Jun 2021 16:49:28 -0400
Subject: [PATCH] add mobile player and fullscreen support for iOS

---
 web/package-lock.json              | 9 +++++++++
 web/package.json                   | 1 +
 web/src/components/VideoPlayer.jsx | 6 ++++++
 web/src/index.css                  | 4 ++++
 4 files changed, 20 insertions(+)

diff --git a/web/package-lock.json b/web/package-lock.json
index 75939d86b..c124f1640 100644
--- a/web/package-lock.json
+++ b/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",
diff --git a/web/package.json b/web/package.json
index 27d1125f4..19f3026f7 100644
--- a/web/package.json
+++ b/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"
   },
diff --git a/web/src/components/VideoPlayer.jsx b/web/src/components/VideoPlayer.jsx
index 9d44ad55d..d4d6eb34b 100644
--- a/web/src/components/VideoPlayer.jsx
+++ b/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() {
diff --git a/web/src/index.css b/web/src/index.css
index d55a9aabc..a9490f0d9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -25,3 +25,7 @@
     transform: rotate(360deg);
   }
 }
+
+.video-js.vjs-has-started .vjs-touch-overlay {
+  display: none;
+}