From 8177b235572b93940d941e652ff95a888f65814a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Mon, 24 May 2021 23:56:01 +0200
Subject: [PATCH] fullscreen fallback to video #62.

---
 README.md                       |  2 +-
 client/src/components/video.vue | 36 ++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index c38de5d..8cb6820 100644
--- a/README.md
+++ b/README.md
@@ -62,7 +62,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
 - Disable debug mode by default.
 - Remove HTML tags from user name.
 - Upgraded `pion/webrtc` to v3 (by @mbattista).
-- Added `requestFullscreen` compatibility for older browsers.
+- Added `requestFullscreen` compatibility for older browsersn and iOS devices.
 - Fixed small lags in video and improved video UX (by @mbattista).
 - Added `m1k1o/neko:vncviewer` tag, use `NEKO_VNC_URL` to specify VNC target and use n.eko as a bridge.
 - Abiltiy to include neko as a component in another Vue.Js project (by @gbrian).
diff --git a/client/src/components/video.vue b/client/src/components/video.vue
index 641477c..c302331 100644
--- a/client/src/components/video.vue
+++ b/client/src/components/video.vue
@@ -478,24 +478,40 @@
       this.$accessor.remote.toggle()
     }
 
-    requestFullscreen() {
-      if (typeof this._player.requestFullscreen === 'function') {
-        this._player.requestFullscreen()
+    _elementRequestFullscreen(el: HTMLElement) {
+      if (typeof el.requestFullscreen === 'function') {
+        el.requestFullscreen()
         //@ts-ignore
-      } else if (typeof this._player.webkitRequestFullscreen === 'function') {
+      } else if (typeof el.webkitRequestFullscreen === 'function') {
         //@ts-ignore
-        this._player.webkitRequestFullscreen()
+        el.webkitRequestFullscreen()
         //@ts-ignore
-      } else if (typeof this._player.webkitEnterFullscreen === 'function') {
+      } else if (typeof el.webkitEnterFullscreen === 'function') {
         //@ts-ignore
-        this._player.webkitEnterFullscreen()
+        el.webkitEnterFullscreen()
         //@ts-ignore
-      } else if (typeof this._player.msRequestFullScreen === 'function') {
+      } else if (typeof el.msRequestFullScreen === 'function') {
         //@ts-ignore
-        this._player.msRequestFullScreen()
+        el.msRequestFullScreen()
+      } else {
+        return false
       }
 
-      this.onResise()
+      return true
+    }
+
+    requestFullscreen() {
+      // try to fullscreen player element
+      if (this._elementRequestFullscreen(this._player)) {
+        this.onResise()
+        return
+      }
+
+      // fallback to fullscreen video itself (on mobile devices)
+      if (this._elementRequestFullscreen(this._video)) {
+        this.onResise()
+        return
+      }
     }
 
     requestPictureInPicture() {