From 9424a90fe1de49b7d8c85a64c3dcfd126e192f5d Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Wed, 13 Jan 2021 17:13:36 +1300
Subject: [PATCH] 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
---
 .../distraction-settings/distraction-settings.js     |  1 -
 .../components/player-settings/player-settings.vue   |  1 -
 .../components/watch-video-info/watch-video-info.js  | 12 ++++++++++++
 .../components/watch-video-info/watch-video-info.vue |  2 +-
 src/renderer/views/Watch/Watch.js                    |  9 +++++++++
 src/renderer/views/Watch/Watch.sass                  |  5 ++++-
 src/renderer/views/Watch/Watch.vue                   |  5 ++++-
 7 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index e00a68a7..fc74c37c 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/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)
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index f4b98287..8b7ff1ec 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/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"
         />
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 89c62bcf..fa6385b7 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/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
     },
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index fe0317d5..05e7ec76 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/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"
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index ba05d5be..1155c7c1 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/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: {
diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
index b444a8f5..48bfd5db 100644
--- a/src/renderer/views/Watch/Watch.sass
+++ b/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
 
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 0a026c90..b2247a34 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/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"