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() {