Integrate theater mode into mediaplayer (#1589)

* Moves theatre mode button to mediaplayer

* Accounts for 'Enable Theatre Mode by Default'

* Removes unnecessary comment

* Removes unnecessary newlines

* Rename variable for toggle theatre mode button

* Fix issue caused by missing change in rename

Co-authored-by: Preston <freetubeapp@protonmail.com>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
This commit is contained in:
Jason 2021-08-24 07:36:10 +00:00 committed by GitHub
parent 1ceb21f424
commit f801ea4b05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 68 additions and 16 deletions

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" fill="white" width="20px" height="19px" data-prefix="fas" data-icon="desktop" class="svg-inline--fa fa-desktop fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"></path></svg>

After

Width:  |  Height:  |  Size: 483 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" fill="white" width="20px" height="19px" data-icon="tv" class="svg-inline--fa fa-tv fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M592 0H48A48 48 0 0 0 0 48v320a48 48 0 0 0 48 48h240v32H112a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H352v-32h240a48 48 0 0 0 48-48V48a48 48 0 0 0-48-48zm-16 352H64V64h512z"></path></svg>

After

Width:  |  Height:  |  Size: 458 B

View File

@ -112,6 +112,7 @@ export default Vue.extend({
'subsCapsButton',
'audioTrackButton',
'pictureInPictureToggle',
'toggleTheatreModeButton',
'fullWindowButton',
'qualitySelector',
'fullscreenToggle'
@ -164,6 +165,10 @@ export default Vue.extend({
return this.$store.getters.getDefaultVideoFormat
},
defaultTheatreMode: function () {
return this.$store.getters.getDefaultTheatreMode
},
autoplayVideos: function () {
return this.$store.getters.getAutoplayVideos
},
@ -195,6 +200,7 @@ export default Vue.extend({
this.createFullWindowButton()
this.createLoopButton()
this.createToggleTheatreModeButton()
this.determineFormatType()
this.determineMaxFramerate()
},
@ -966,6 +972,45 @@ export default Vue.extend({
videojs.registerComponent('fullWindowButton', fullWindowButton)
},
createToggleTheatreModeButton: function() {
if (!this.$parent.theatrePossible) {
return
}
const theatreModeActive = this.defaultTheatreModeActive ? ' vjs-icon-theatre-active' : ''
const VjsButton = videojs.getComponent('Button')
const toggleTheatreModeButton = videojs.extend(VjsButton, {
constructor: function(player, options) {
VjsButton.call(this, player, options)
},
handleClick: () => {
this.toggleTheatreMode()
},
createControlTextEl: function (button) {
return $(button)
.addClass('vjs-button-theatre')
.html($(`<div id="toggleTheatreModeButton" class="vjs-icon-theatre-inactive${theatreModeActive} vjs-button"></div>`))
.attr('title', 'Toggle Theatre Mode')
}
})
videojs.registerComponent('toggleTheatreModeButton', toggleTheatreModeButton)
},
toggleTheatreMode: function() {
if (!this.player.isFullscreen_) {
const toggleTheatreModeButton = $('#toggleTheatreModeButton')
if (!this.$parent.useTheatreMode) {
toggleTheatreModeButton.addClass('vjs-icon-theatre-active')
} else {
toggleTheatreModeButton.removeClass('vjs-icon-theatre-active')
}
}
this.$parent.toggleTheatreMode()
},
createDashQualitySelector: function (levels) {
if (levels.levels_.length === 0) {
setTimeout(() => {

View File

@ -86,7 +86,3 @@
::v-deep .iconDropdown
left: calc(50% - 20px)
right: auto
@media only screen and (max-width: 1350px)
.theatreModeButton
display: none

View File

@ -78,14 +78,6 @@
theme="secondary"
@click="handleExternalPlayer"
/>
<ft-icon-button
v-if="theatrePossible"
:title="$t('Toggle Theatre Mode')"
class="theatreModeButton option"
icon="tv"
theme="secondary"
@click="$emit('theatre-mode')"
/>
<ft-icon-button
v-if="!isUpcoming && downloadLinks.length > 0"
:title="$t('Video.Download Video')"

View File

@ -437,7 +437,7 @@ body.vjs-full-window {
cursor: none;
}
.vjs-icon-fullwindow-enter, .video-js .vjs-fullwindow-control .vjs-icon-placeholder {
.vjs-icon-fullwindow-enter, .vjs-icon-theatre-inactive, .video-js .vjs-fullwindow-control .vjs-icon-placeholder {
color: white !important;
margin-top: 10px !important;
cursor:pointer;
@ -449,11 +449,11 @@ body.vjs-full-window {
content: url(assets/img/open_fullwindow.svg);
}
/* Hide button in full screen mode */
.vjs--full-screen-enabled .vjs-button-fullwindow {
.vjs--full-screen-enabled .vjs-button-fullwindow, .vjs--full-screen-enabled .vjs-button-theatre, .vjs-full-window .vjs-button-theatre {
display: none;
}
.vjs-icon-fullwindow-exit, .video-js.vjs-fullwindow .vjs-fullwindow-control .vjs-icon-placeholder {
.vjs-icon-fullwindow-exit, .vjs-icon-theatre-active, .video-js.vjs-fullwindow .vjs-fullwindow-control .vjs-icon-placeholder {
font-family: VideoJS;
font-weight: normal;
font-style: normal;
@ -469,6 +469,10 @@ body.vjs-full-window {
cursor: pointer;
}
.vjs-icon-theatre-inactive, .vjs-icon-theatre-active {
margin-top: 10px !important;
}
.vjs-icon-loop-active {
background-color: var(--primary-color);
}
@ -478,6 +482,20 @@ body.vjs-full-window {
/* filter: invert(1) drop-shadow(1px 0px 0px var(--primary-color)); */
}
.vjs-icon-theatre-inactive:before {
content: url(assets/img/open_theatre.svg)
}
.vjs-icon-theatre-active:before {
content: url(assets/img/close_theatre.svg)
}
@media only screen and (max-width: 1350px) {
.videoPlayer .vjs-button-theatre {
display: none
}
}
.loop-black:before {
filter: brightness(0%);
}

View File

@ -93,7 +93,6 @@
:video-thumbnail="thumbnail"
class="watchVideo"
:class="{ theatreWatchVideo: useTheatreMode }"
@theatre-mode="toggleTheatreMode"
@pause-player="pausePlayer"
/>
<watch-video-description