Windowed FullScreen (#829)
* add functionality in fl-video-player and styles in videoJS.css, with the aim of having a full window button in the video player Signed-off-by: CristianMartin <c.knoxville8@gmail.com> * fixed up interposition with full screen Signed-off-by: CristianMartin <c.knoxville8@gmail.com> * incorporation of styles for the full window button, and general refactor of the functional code of the button in the ft-video-player.js class Signed-off-by: CristianMartin <c.knoxville8@gmail.com> * Incorporation of the icons for the full window button in the path src/renderer/assets/img/, incorporation of the icons to the css and style refactor in the code of the functionality window for the complete button Signed-off-by: CristianMartin <c.knoxville8@gmail.com> * final bug fix with npm run lint-fix and test run Signed-off-by: CristianMartin <c.knoxville8@gmail.com> * Update ft-video-player.js Code refactor according to the suggestions of change in the extraction, modification of the position of the buttons of fullscreen and fullwindow as suggested. * lint error repair * Update videoJS.css incorporation of css styles to correctly center the icon of the new fullwindow button
This commit is contained in:
CristianMartin
GitHub
parent
d0aeae381f
commit
ad8ed9fdb0
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="white" width="20px" height="20px"><rect fill="none" height="24" width="24"/><path d="M22,3.41l-5.29,5.29L20,12h-8V4l3.29,3.29L20.59,2L22,3.41z M3.41,22l5.29-5.29L12,20v-8H4l3.29,3.29L2,20.59L3.41,22z"/></svg>
|
||||
|
After Width: | Height: | Size: 309 B |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" fill="white" width="18px" height="18px" data-icon="expand-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M212.686 315.314L120 408l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C10.697 480 0 469.255 0 456V344c0-21.382 25.803-32.09 40.922-16.971L72 360l92.686-92.686c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.249 6.248 6.249 16.378 0 22.627zm22.628-118.628L328 104l-32.922-31.029C279.958 57.851 290.666 32 312.048 32h112C437.303 32 448 42.745 448 56v112c0 21.382-25.803 32.09-40.922 16.971L376 152l-92.686 92.686c-6.248 6.248-16.379 6.248-22.627 0l-25.373-25.373c-6.249-6.248-6.249-16.378 0-22.627z"></path></svg>
|
||||
|
After Width: | Height: | Size: 726 B |
|
|
@ -3,5 +3,5 @@
|
|||
}
|
||||
|
||||
.ftVideoPlayer {
|
||||
max-height: 50vh;
|
||||
}
|
||||
width:100%;
|
||||
}
|
||||
|
|
@ -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($('<div id="fullwindow" class="vjs-icon-fullwindow-enter vjs-button"></div>')
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue