Sidebar fixes (#916)

* Correctly bind theatre mode options

Theatre mode is now bound to both "recommended videos" and "live chat"
distraction settings, rather than just "recommended videos".

The settings switch, the button, and the layout have all been updated
to reflect this.

Most likely closes: https://github.com/FreeTubeApp/FreeTube/issues/910

* Fix watch layout when no sidebar

If there's nothing to display in the sidebar according to the
distraction settings and live status, the watch page will adopt a
single column layout. If the sidebar still exists due to faulty logic,
it will be placed at the very bottom of the page.

Most likely closes: https://github.com/FreeTubeApp/FreeTube/issues/909

* Unlink default theatre mode switch

* Normalise theatre calculation, consider playlists

src/renderer/components/distraction-settings/distraction-settings.js

@@ -48,7 +48,6 @@ export default Vue.extend({
     handleHideRecommendedVideos: function (value) {
       if (value) {
         this.updatePlayNextVideo(false)
-        this.updateDefaultTheatreMode(true)
       }
 
       this.updateHideRecommendedVideos(value)

src/renderer/components/player-settings/player-settings.vue

@@ -34,7 +34,6 @@
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Enable Theatre Mode by Default')"
           :compact="true"
-          :disabled="hideRecommendedVideos"
           :default-value="defaultTheatreMode"
           @change="updateDefaultTheatreMode"
         />

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

@@ -78,6 +78,14 @@ export default Vue.extend({
     downloadLinks: {
       type: Array,
       required: true
+    },
+    watchingPlaylist: {
+      type: Boolean,
+      required: true
+    },
+    theatrePossible: {
+      type: Boolean,
+      required: true
     }
   },
   data: function () {
@@ -111,6 +119,10 @@ export default Vue.extend({
       return this.$store.getters.getHideRecommendedVideos
     },
 
+    hideLiveChat: function () {
+      return this.$store.getters.getHideLiveChat
+    },
+
     hideVideoLikesAndDislikes: function () {
       return this.$store.getters.getHideVideoLikesAndDislikes
     },

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

@@ -63,7 +63,7 @@
       </div>
       <div class="videoOptions">
         <ft-icon-button
-          v-if="!hideRecommendedVideos"
+          v-if="theatrePossible"
           :title="$t('Toggle Theatre Mode')"
           class="theatreModeButton option"
           icon="expand-alt"

src/renderer/views/Watch/Watch.js

@@ -119,6 +119,12 @@ export default Vue.extend({
     playNextVideo: function () {
       return this.$store.getters.getPlayNextVideo
     },
+    hideRecommendedVideos: function () {
+      return this.$store.getters.getHideRecommendedVideos
+    },
+    hideLiveChat: function () {
+      return this.$store.getters.getHideLiveChat
+    },
 
     youtubeNoCookieEmbeddedFrame: function () {
       return `<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/${this.videoId}?rel=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>`
@@ -128,6 +134,9 @@ export default Vue.extend({
     },
     hideVideoLikesAndDislikes: function () {
       return this.$store.getters.getHideVideoLikesAndDislikes
+    },
+    theatrePossible: function() {
+      return !this.hideRecommendedVideos || (!this.hideLiveChat && this.isLive) || this.watchingPlaylist
     }
   },
   watch: {

src/renderer/views/Watch/Watch.sass

@@ -22,7 +22,7 @@
   @media only screen and (max-width: 900px)
     +single-column-template
 
-  &.isLoading
+  &.isLoading, &.noSidebar
     +single-column-template
 
   .videoArea
@@ -73,6 +73,9 @@
     @media only screen and (min-width: 901px)
       min-width: 380px
 
+    @at-root .noSidebar#{&}
+      grid-area: auto
+
   .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
     margin: 0 8px 16px
 

src/renderer/views/Watch/Watch.vue

@@ -3,7 +3,8 @@
     class="videoLayout"
     :class="{
       isLoading,
-      useTheatreMode
+      useTheatreMode,
+      noSidebar: !theatrePossible
     }"
   >
     <ft-loader
@@ -78,6 +79,8 @@
         :is-live="isLive"
         :is-upcoming="isUpcoming"
         :download-links="downloadLinks"
+        :watching-playlist="watchingPlaylist"
+        :theatre-possible="theatrePossible"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
         @theatre-mode="toggleTheatreMode"