fullscreen bug in safari, fixes #121.

client/src/components/video.vue

@@ -68,6 +68,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      background: #000;
 
       .video-menu {
         position: absolute;
@@ -186,7 +187,7 @@
 <script lang="ts">
   import { Component, Ref, Watch, Vue, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
-  import { elementRequestFullscreen } from '~/utils'
+  import { elementRequestFullscreen, onFullscreenChange, isFullscreen } from '~/utils'
 
   import Emote from './emote.vue'
   import Resolution from './resolution.vue'
@@ -407,8 +408,8 @@
 
       this.observer.observe(this._component)
 
-      this._player.addEventListener('fullscreenchange', () => {
+      onFullscreenChange(this._player, () => {
-        this.fullscreen = document.fullscreenElement !== null
+        this.fullscreen = isFullscreen()
         this.onResize()
       })
 
@@ -717,18 +718,10 @@
     }
 
     onResize() {
-      let height = 0
+      const { offsetWidth, offsetHeight } = !this.fullscreen ? this._component : document.body
-      if (!this.fullscreen) {
+      this._player.style.width = `${offsetWidth}px`
-        const { offsetWidth, offsetHeight } = this._component
+      this._player.style.height = `${offsetHeight}px`
-        this._player.style.width = `${offsetWidth}px`
+      this._container.style.maxWidth = `${(this.horizontal / this.vertical) * offsetHeight}px`
-        this._player.style.height = `${offsetHeight}px`
-        height = offsetHeight
-      } else {
-        const { offsetWidth, offsetHeight } = this._player
-        height = offsetHeight
-      }
-
-      this._container.style.maxWidth = `${(this.horizontal / this.vertical) * height}px`
       this._aspect.style.paddingBottom = `${(this.vertical / this.horizontal) * 100}%`
     }
   }

client/src/utils/index.ts

@@ -20,6 +20,10 @@ export function elementRequestFullscreen(el: HTMLElement) {
     //@ts-ignore
     el.webkitEnterFullscreen()
     //@ts-ignore
+  } else if (typeof el.mozRequestFullScreen === 'function') {
+    //@ts-ignore
+    el.mozRequestFullScreen()
+    //@ts-ignore
   } else if (typeof el.msRequestFullScreen === 'function') {
     //@ts-ignore
     el.msRequestFullScreen()
@@ -28,3 +32,33 @@ export function elementRequestFullscreen(el: HTMLElement) {
   }
   return true
 }
+
+export function isFullscreen(): boolean {
+  return (
+    document.fullscreenElement ||
+    //@ts-ignore
+    document.msFullscreenElement ||
+    //@ts-ignore
+    document.mozFullScreenElement ||
+    //@ts-ignore
+    document.webkitFullscreenElement
+  )
+}
+
+export function onFullscreenChange(el: HTMLElement, fn: () => void) {
+  if (el.onfullscreenchange === null) {
+    el.onfullscreenchange = fn
+    //@ts-ignore
+  } else if (el.onmsfullscreenchange === null) {
+    //@ts-ignore
+    el.onmsfullscreenchange = fn
+    //@ts-ignore
+  } else if (el.onmozfullscreenchange === null) {
+    //@ts-ignore
+    el.onmozfullscreenchange = fn
+    //@ts-ignore
+  } else if (el.onwebkitfullscreenchange === null) {
+    //@ts-ignore
+    el.onwebkitfullscreenchange = fn
+  }
+}