fullscreen bug in safari, fixes #121.

This commit is contained in:
Miroslav Šedivý 2021-12-12 19:26:21 +01:00
parent 5be8319d8a
commit e3d3911832
2 changed files with 42 additions and 15 deletions

View File

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

View File

@ -20,6 +20,10 @@ export function elementRequestFullscreen(el: HTMLElement) {
//@ts-ignore //@ts-ignore
el.webkitEnterFullscreen() el.webkitEnterFullscreen()
//@ts-ignore //@ts-ignore
} else if (typeof el.mozRequestFullScreen === 'function') {
//@ts-ignore
el.mozRequestFullScreen()
//@ts-ignore
} else if (typeof el.msRequestFullScreen === 'function') { } else if (typeof el.msRequestFullScreen === 'function') {
//@ts-ignore //@ts-ignore
el.msRequestFullScreen() el.msRequestFullScreen()
@ -28,3 +32,33 @@ export function elementRequestFullscreen(el: HTMLElement) {
} }
return true 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
}
}