add mobile player and fullscreen support for iOS

LordNex · Jun 5, 2021 · 88ed750 · 88ed750
1 parent c73aeba
commit 88ed750
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 0 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git 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
@@ -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
@@ -25,3 +25,7 @@
  transform: rotate(360deg);
  }
 }
+
+.video-js.vjs-has-started .vjs-touch-overlay {
+ display: none;
+}