diff --git a/src/renderer/assets/img/close_fullwindow.svg b/src/renderer/assets/img/close_fullwindow.svg new file mode 100644 index 00000000..fc5a936b --- /dev/null +++ b/src/renderer/assets/img/close_fullwindow.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/assets/img/open_fullwindow.svg b/src/renderer/assets/img/open_fullwindow.svg new file mode 100644 index 00000000..7195028d --- /dev/null +++ b/src/renderer/assets/img/open_fullwindow.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css index 0bd28f8f..d198f625 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.css +++ b/src/renderer/components/ft-video-player/ft-video-player.css @@ -3,5 +3,5 @@ } .ftVideoPlayer { - max-height: 50vh; -} + width:100%; +} \ No newline at end of file diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index 97e17d85..b28d6780 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -87,9 +87,8 @@ export default Vue.extend({ 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', - 'QualitySelector', - 'pictureInPictureToggle', - 'fullscreenToggle' + 'qualitySelector', + 'pictureInPictureToggle' ] }, playbackRates: [ @@ -171,7 +170,8 @@ export default Vue.extend({ } } }) - + this.createFullWindowButton() + this.player.controlBar.addChild('fullscreenToggle') this.player.volume(this.volume) this.player.playbackRate(this.defaultPlayback) @@ -200,7 +200,7 @@ export default Vue.extend({ }, 200) } - $(document).on('keydown', this.keyboardShortcutHandler) + $(document).on('keyup', this.keyboardShortcutHandler) this.player.on('mousemove', this.hideMouseTimeout) this.player.on('mouseleave', this.removeMouseTimeout) @@ -489,14 +489,6 @@ export default Vue.extend({ } }, - toggleFullscreen: function () { - if (this.player.isFullscreen()) { - this.player.exitFullscreen() - } else { - this.player.requestFullscreen() - } - }, - toggleCaptions: function () { const tracks = this.player.textTracks().tracks_ @@ -509,6 +501,66 @@ export default Vue.extend({ } }, + createFullWindowButton: function() { + const v = this + const VjsButton = videojs.getComponent('Button') + const fullWindowButton = videojs.extend(VjsButton, { + constructor: function(player, options) { + VjsButton.call(this, player, options) + }, + handleClick: function() { + v.toggleFullWindow() + }, + createControlTextEl: function (button) { + return $(button).html($('
') + .attr('title', 'Fullwindow')) + } + }) + videojs.registerComponent('fullWindowButton', fullWindowButton) + v.player.controlBar.addChild('fullWindowButton', {}) + }, + + toggleFullWindow: function() { + if (!this.player.isFullscreen_) { + if (this.player.isFullWindow) { + this.player.removeClass('vjs-full-screen') + this.player.isFullWindow = false + document.documentElement.style.overflow = this.player.docOrigOverflow + $('body').removeClass('vjs-full-window') + $('#fullwindow').removeClass('vjs-icon-fullwindow-exit') + this.player.trigger('exitFullWindow') + } else { + this.player.addClass('vjs-full-screen') + this.player.isFullscreen_ = false + this.player.isFullWindow = true + this.player.docOrigOverflow = document.documentElement.style.overflow + document.documentElement.style.overflow = 'hidden' + $('body').addClass('vjs-full-window') + $('#fullwindow').addClass('vjs-icon-fullwindow-exit') + this.player.trigger('enterFullWindow') + } + } + }, + + exitFullWindow: function() { + if (this.player.isFullWindow) { + this.player.isFullWindow = false + document.documentElement.style.overflow = this.player.docOrigOverflow + this.player.removeClass('vjs-full-screen') + $('body').removeClass('vjs-full-window') + $('#fullwindow').removeClass('vjs-icon-fullwindow-exit') + this.player.trigger('exitFullWindow') + } + }, + + toggleFullscreen: function () { + if (this.player.isFullscreen()) { + this.player.exitFullscreen() + } else { + this.player.requestFullscreen() + } + }, + hideMouseTimeout: function () { if (this.id === '') { return @@ -718,6 +770,12 @@ export default Vue.extend({ // Advance to next frame this.framebyframe(1) break + case 27: + // esc Key + // Exit full window + event.preventDefault() + this.exitFullWindow() + break } } } diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css index 85e82a25..f7d8d33a 100644 --- a/src/renderer/videoJS.css +++ b/src/renderer/videoJS.css @@ -413,9 +413,52 @@ body.vjs-full-window { padding: 0; margin: 0; + width: 100%; height: 100%; } +.vjs-full-window .video-js.vjs-full-screen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; +} + +.video-js.vjs-full-screen { + width: 100% !important; + height: 100% !important; + padding-top: 0 !important; +} + +.video-js.vjs-full-screen.vjs-user-inactive { + cursor: none; +} + +.vjs-icon-fullwindow-enter, .video-js .vjs-fullwindow-control .vjs-icon-placeholder { + color: white !important; + margin-top: 10px !important; + cursor:pointer; + font-family: VideoJS; + font-weight: normal; + font-style: normal; +} +.vjs-icon-fullwindow-enter:before, .video-js .vjs-fullwindow-control .vjs-icon-placeholder:before { + content: url(assets/img/open_fullwindow.svg); +} + + +.vjs-icon-fullwindow-exit, .video-js.vjs-fullwindow .vjs-fullwindow-control .vjs-icon-placeholder { + font-family: VideoJS; + font-weight: normal; + font-style: normal; +} +.vjs-icon-fullwindow-exit:before, .video-js.vjs-fullwindow .vjs-fullwindow-control .vjs-icon-placeholder:before { + content: url(assets/img/close_fullwindow.svg); +} + .vjs-full-window .video-js.vjs-fullscreen { position: fixed; overflow: hidden;