* 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.controlBar.getChild('volumePanel').on('mousewheel', this.mouseScrollVolume)
this.player.on('fullscreenchange', this.fullscreenOverlay) this.player.on('fullscreenchange', this.fullscreenOverlay)
this.player.on('fullscreenchange', this.toggleFullscreenClass)
const v = this const v = this
@ -651,8 +652,11 @@ export default Vue.extend({
v.toggleFullWindow() v.toggleFullWindow()
}, },
createControlTextEl: function (button) { createControlTextEl: function (button) {
return $(button).html($('<div id="fullwindow" class="vjs-icon-fullwindow-enter vjs-button"></div>') // Add class name to button to be able to target it with CSS selector
.attr('title', 'Fullwindow')) 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) 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) { handleTouchStart: function (event) {
const v = this const v = this
this.touchPauseTimeout = setTimeout(() => { 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 { .vjs-icon-fullwindow-enter:before, .video-js .vjs-fullwindow-control .vjs-icon-placeholder:before {
content: url(assets/img/open_fullwindow.svg); 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 { .vjs-icon-fullwindow-exit, .video-js.vjs-fullwindow .vjs-fullwindow-control .vjs-icon-placeholder {
font-family: VideoJS; font-family: VideoJS;