* Update player to hide full window button when in full screen mode (#1222)

This commit is contained in:
PikachuEXE 2021-04-23 02:41:50 +08:00 committed by GitHub
parent c22fd21966
commit 7d93217596
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions

View File

@ -231,6 +231,7 @@ export default Vue.extend({
this.player.controlBar.getChild('volumePanel').on('mousewheel', this.mouseScrollVolume)
this.player.on('fullscreenchange', this.fullscreenOverlay)
this.player.on('fullscreenchange', this.toggleFullscreenClass)
const v = this
@ -651,8 +652,11 @@ export default Vue.extend({
v.toggleFullWindow()
},
createControlTextEl: function (button) {
return $(button).html($('<div id="fullwindow" class="vjs-icon-fullwindow-enter vjs-button"></div>')
.attr('title', 'Fullwindow'))
// Add class name to button to be able to target it with CSS selector
return $(button)
.addClass('vjs-button-fullwindow')
.html($('<div id="fullwindow" class="vjs-icon-fullwindow-enter vjs-button"></div>')
.attr('title', 'Full Window'))
}
})
videojs.registerComponent('fullWindowButton', fullWindowButton)
@ -821,6 +825,14 @@ export default Vue.extend({
}
},
toggleFullscreenClass: function () {
if (this.player.isFullscreen()) {
$('body').addClass('vjs--full-screen-enabled')
} else {
$('body').removeClass('vjs--full-screen-enabled')
}
},
handleTouchStart: function (event) {
const v = this
this.touchPauseTimeout = setTimeout(() => {

View File

@ -448,6 +448,10 @@ body.vjs-full-window {
.vjs-icon-fullwindow-enter:before, .video-js .vjs-fullwindow-control .vjs-icon-placeholder:before {
content: url(assets/img/open_fullwindow.svg);
}
/* Hide button in full screen mode */
.vjs--full-screen-enabled .vjs-button-fullwindow {
display: none;
}
.vjs-icon-fullwindow-exit, .video-js.vjs-fullwindow .vjs-fullwindow-control .vjs-icon-placeholder {
font-family: VideoJS;