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>

src/renderer/assets/img/close_theatre.svg

@@ -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>

src/renderer/assets/img/open_theatre.svg

@@ -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>

src/renderer/components/ft-video-player/ft-video-player.js

@@ -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(() => {

src/renderer/components/watch-video-info/watch-video-info.sass

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

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -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')"

src/renderer/videoJS.css

@@ -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%);
 }

src/renderer/views/Watch/Watch.vue

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