* Update player to hide full window button when in full screen mode (#1222)
This commit is contained in:
parent
c22fd21966
commit
7d93217596
|
@ -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(() => {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue