Improve Margins and add Theater Mode

src/App.vue

@@ -63,6 +63,21 @@ export default {
             }
         })();
     },
+    watch: {
+        $route: {
+            handler(to) {
+                console.log(to.name);
+                // Pages that should be displayed without margin at the sides
+                if (
+                    ["Trending", "SearchResults", "Playlist", "Channel", "Feed", "Watch History", "Playlists"].includes(
+                        to.name,
+                    )
+                )
+                    document.body.classList.add("wide");
+                else document.body.classList.remove("wide");
+            },
+        },
+    },
 };
 </script>
 
@@ -207,4 +222,9 @@ h2 {
 .auto .link-secondary {
     @apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
 }
+
+body:not(.wide) {
+    max-width: 1250px;
+    margin: 0 auto;
+}
 </style>

src/components/CommentItem.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="comment flex mt-1.5">
+    <div class="comment flex mb-5">
         <img
             :src="comment.thumbnail"
-            class="comment-avatar rounded-full w-12 h-12"
+            class="comment-avatar rounded-full w-12 h-12 mr-1 lg:mr-3"
             height="48"
             width="48"
             loading="lazy"
@@ -36,7 +36,7 @@
                 </div>
             </template>
             <template v-if="showingReplies">
-                <div @click="hideReplies" class="cursor-pointer">
+                <div @click="hideReplies" class="cursor-pointer mb-3">
                     <a v-t="'actions.hide_replies'" />
                     <font-awesome-icon class="ml-1.5" icon="level-up-alt" />
                 </div>

src/components/PreferencesPage.vue

@@ -124,6 +124,16 @@
         @change="onChange($event)"
     />
     <br />
+    <label for="chkDefaultTheaterMode"><strong v-t="'actions.default_theater_mode'" /></label>
+    <br />
+    <input
+        id="chkDefaultTheaterMode"
+        v-model="defaultTheaterMode"
+        class="checkbox"
+        type="checkbox"
+        @change="onChange($event)"
+    />
+    <br />
     <label for="chkStoreWatchHistory"><strong v-t="'actions.store_watch_history'" /></label>
     <br />
     <input
@@ -227,6 +237,7 @@ export default {
             defaultHomepage: "trending",
             showComments: true,
             minimizeDescription: false,
+            defaultTheaterMode: false,
             watchHistory: false,
             selectedLanguage: "en",
             languages: [
@@ -356,6 +367,7 @@ export default {
             this.defaultHomepage = this.getPreferenceString("homepage", "trending");
             this.showComments = this.getPreferenceBoolean("comments", true);
             this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
+            this.defaultTheaterMode = this.getPreferenceBoolean("defaultTheaterMode", false);
             this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
             this.selectedLanguage = this.getPreferenceString("hl", this.defaultLangage);
             this.enabledCodecs = this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
@@ -410,6 +422,7 @@ export default {
                 localStorage.setItem("homepage", this.defaultHomepage);
                 localStorage.setItem("comments", this.showComments);
                 localStorage.setItem("minimizeDescription", this.minimizeDescription);
+                localStorage.setItem("defaultTheaterMode", this.defaultTheaterMode);
                 localStorage.setItem("watchHistory", this.watchHistory);
                 localStorage.setItem("hl", this.selectedLanguage);
                 localStorage.setItem("enabledCodecs", this.enabledCodecs.join(","));

src/components/VideoItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="mb-6">
         <router-link
             :to="{
                 path: '/watch',
@@ -26,7 +26,7 @@
             <div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                    class="my-2 overflow-hidden flex link"
+                    class="my-1 overflow-hidden flex link"
                     :title="video.title"
                     v-text="video.title"
                 />

src/components/WatchVideo.vue

@@ -63,6 +63,15 @@
                     >
                         <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
                     </router-link>
+                    <button
+                        class="btn"
+                        :title="
+                            theaterMode ? this.$t('actions.exit_theater_mode') : this.$t('actions.enter_theater_mode')
+                        "
+                        v-on:click="theaterMode = !theaterMode"
+                    >
+                        <font-awesome-icon icon="panorama" />
+                    </button>
                 </div>
             </div>
 
@@ -117,14 +126,14 @@
 
         <hr />
 
-        <div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
+        <div class="grid sm:grid-cols-4 grid-cols-1 gap-6">
-            <div v-if="!comments" class="xl:col-span-4 sm:col-span-3">
+            <div v-if="!comments" class="col-span-3">
                 <p class="text-center mt-8">Comments are loading...</p>
             </div>
-            <div v-else-if="comments.disabled" class="xl:col-span-4 sm:col-span-3">
+            <div v-else-if="comments.disabled" class="col-span-3">
                 <p class="text-center mt-8">Comments are turned off.</p>
             </div>
-            <div v-else ref="comments" class="xl:col-span-4 sm:col-span-3">
+            <div v-else ref="comments" class="col-span-3">
                 <CommentItem
                     v-for="comment in comments.comments"
                     :key="comment.commentId"
@@ -203,6 +212,7 @@ export default {
             smallViewQuery: smallViewQuery,
             smallView: smallViewQuery.matches,
             showModal: false,
+            theaterMode: false,
         };
     },
     computed: {
@@ -268,6 +278,7 @@ export default {
         this.active = true;
         this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", false);
         this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
+        this.theaterMode = this.getPreferenceBoolean("defaultTheaterMode", false);
         if (this.video.duration) {
             document.title = this.video.title + " - Piped";
             this.$refs.videoPlayer.loadVideo();
@@ -276,6 +287,7 @@ export default {
     },
     deactivated() {
         this.active = false;
+        document.body.classList.remove("theater-mode");
         window.removeEventListener("scroll", this.handleScroll);
     },
     unmounted() {
@@ -415,5 +427,11 @@ export default {
             this.$refs.videoPlayer.seek(time);
         },
     },
+    watch: {
+        theaterMode() {
+            if (this.theaterMode) document.body.classList.add("wide");
+            else document.body.classList.remove("wide");
+        },
+    },
 };
 </script>

src/locales/en.json

@@ -80,7 +80,10 @@
         "delete_playlist": "Delete Playlist",
         "select_playlist": "Select a Playlist",
         "delete_playlist_confirm": "Are you sure you want to delete this playlist?",
-        "please_select_playlist": "Please select a playlist"
+        "please_select_playlist": "Please select a playlist",
+        "enter_theater_mode": "Enter Theater Mode",
+        "exit_theater_mode": "Exit Theater Mode",
+        "default_theater_mode": "Use the Theater Mode by default"
     },
     "comment": {
         "pinned_by": "Pinned by"

src/main.js

@@ -17,6 +17,7 @@ import {
     faCirclePlus,
     faCircleMinus,
     faXmark,
+    faPanorama,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -40,6 +41,7 @@ library.add(
     faCirclePlus,
     faCircleMinus,
     faXmark,
+    faPanorama,
 );
 
 import router from "@/router/router.js";