more granular rounding controls, cuter comment spacing

NUXT/components/Comments/commentThreadRenderer.vue

@@ -11,7 +11,7 @@
           commentRenderer.authorEndpoint
         )
       "
-      class="avatar-link"
+      class="avatar-link pr-2"
     >
       <v-img
         class="avatar-thumbnail"
@@ -23,50 +23,42 @@
       />
     </a>
     <div class="comment-content">
-      <div class="comment-content--header subtitle-2">
+      <div class="comment-content--header subtitle-2 mb-2">
         <div
           class="author-badge-name mr-1"
           :class="
             commentRenderer.authorIsChannelOwner
               ? $vuetify.theme.dark
                 ? 'owner background lighten-2'
-                : 'owner primary lighten-3'
+                : 'owner background darken-2'
               : ''
           "
         >
           <div class="author-name--wrapper">
-            <span class="font-weight-bold author-name" v-emoji>
+            <span class="font-weight-bold author-name mr-1" v-emoji>
               {{ commentRenderer.authorText.simpleText }}
             </span>
           </div>
           <template
             v-for="(badge, index) in commentRenderer.authorCommentBadge"
           >
-            <author-comment-badge-renderer
+            <author-comment-badge-renderer :metadata="badge" :key="index" />
-              :metadata="badge"
-              :key="index"
-              class="ml-1"
-            />
           </template>
           <template
             v-for="(badge, index) in commentRenderer.sponsorCommentBadge"
           >
-            <sponsor-comment-badge-renderer
+            <sponsor-comment-badge-renderer :metadata="badge" :key="index" />
-              :metadata="badge"
-              :key="index"
-              class="ml-1"
-            />
           </template>
         </div>
         <span
           :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          class="background--text comment-timestamp"
+          class="background--text comment-timestamp ml-2"
         >
           {{ commentRenderer.publishedTimeText.runs[0].text }}
         </span>
       </div>
       <collapsable-text
-        :lines="4"
+        :lines="3"
         :expandText="
           commentRenderer.expandButton.buttonRenderer.text.runs[0].text
         "
@@ -77,33 +69,23 @@
         <yt-text-formatter :textRuns="commentRenderer.contentText.runs">
         </yt-text-formatter>
       </collapsable-text>
-      <div class="toolbar">
+      <div class="toolbar mt-2">
         <v-btn-toggle v-model="voteStatus" group>
           <div class="toolbar--item mr-1">
-            <v-btn class="toolbar--button like" disabled icon x-small plain>
+            <v-icon small>mdi-thumb-up-outline</v-icon>
-              <v-icon small>mdi-thumb-up</v-icon>
-            </v-btn>
             <span
               v-if="commentRenderer.voteCount"
               v-text="commentRenderer.voteCount.simpleText"
-              class="like-count subtitle-2"
+              class="like-count caption"
             ></span>
-          </div>
+            <v-icon class="ml-2" small>mdi-thumb-down-outline</v-icon>
-          <div class="toolbar--item">
-            <v-btn class="toolbar--button dislike" disabled icon x-small plain>
-              <v-icon small>mdi-thumb-down</v-icon>
-            </v-btn>
           </div>
         </v-btn-toggle>
-        <div class="toolbar--item">
+        <div class="toolbar--item ml-2" v-if="commentRenderer.replyCount">
-          <v-btn class="toolbar--button reply ml-2" disabled icon x-small plain>
+          <v-icon small>mdi-comment-outline</v-icon>
-            <v-icon small>mdi-comment</v-icon>
-          </v-btn>
-        </div>
-        <div class="toolbar--item" v-if="commentRenderer.replyCount">
           <span
             v-text="commentRenderer.replyCount"
-            class="like-count mr-1 subtitle-2"
+            class="like-count caption"
           ></span>
         </div>
       </div>
@@ -168,13 +150,8 @@
 }
 
 .owner {
-  color: var(--v-primary-base);
   border-radius: 1em;
   padding: 0 0.3em 0 0.6em;
-
-  &::v-deep .author-badge {
-    color: var(--v-primary-base);
-  }
 }
 
 .toolbar--button::v-deep.v-btn--active .v-btn__content {

NUXT/components/Comments/commentsHeaderRenderer.vue

@@ -59,4 +59,3 @@ export default {
   width: 100%;
 }
 </style>
-

NUXT/components/Comments/mainCommentRenderer.vue

@@ -20,7 +20,6 @@
       :key="index"
       class="commentElement"
     >
-      <v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
       <v-list-item class="px-0">
         <component
           :is="Object.keys(comment)[0]"
@@ -30,6 +29,7 @@
           @showReplies="openReply"
         ></component>
       </v-list-item>
+      <v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
     </div>
 
     <div class="loading" v-if="loading">

NUXT/components/UtilRenderers/baseVideoRenderer.vue

@@ -3,18 +3,16 @@
     class="entry videoRenderer background"
     :to="`/watch?v=${vidId}`"
     :class="
-      $store.state.tweaks.roundTweak > 0
+      roundThumb && roundTweak > 0
         ? $vuetify.theme.dark
           ? 'lighten-1'
           : 'darken-1'
         : ''
     "
     :style="{
-      borderRadius: `${roundTweak / 2}rem`,
+      borderRadius: roundThumb ? `${roundTweak / 2}rem` : '0',
       margin:
-        $store.state.tweaks.roundTweak > 0
+        roundThumb && roundTweak > 0 ? '0 1rem 1rem 1rem' : '0 0 0.25rem 0',
-          ? '0 1rem 1rem 1rem'
-          : '0 0 0.25rem 0',
     }"
     flat
   >
@@ -23,7 +21,7 @@
         :aspect-ratio="16 / 9"
         :src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
         :style="{
-          borderRadius: `${roundTweak / 4}rem`,
+          borderRadius: roundThumb ? `${roundTweak / 4}rem` : '0',
         }"
       />
       <div
@@ -58,6 +56,52 @@
   </v-card>
 </template>
 
+<script>
+export default {
+  props: {
+    vidId: {
+      type: String,
+      required: true,
+    },
+    thumbnails: {
+      type: Array,
+      required: true,
+    },
+    channelUrl: {
+      type: String,
+      required: true,
+    },
+    channelIcon: {
+      type: String,
+      required: true,
+    },
+    titles: {
+      type: Array,
+      required: true,
+    },
+    bottomText: {
+      type: String,
+      required: true,
+    },
+    thumbnailOverlayText: {
+      type: String,
+    },
+    thumbnailOverlayStyle: {
+      type: String,
+    },
+  },
+
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    },
+    roundThumb() {
+      return this.$store.state.tweaks.roundThumb;
+    },
+  },
+};
+</script>
+
 <style scoped>
 .entry {
   width: 100%; /* Prevent Loading Weirdness */
@@ -126,46 +170,3 @@
   }
 }
 </style>
-
-<script>
-export default {
-  computed: {
-    roundTweak() {
-      return this.$store.state.tweaks.roundTweak;
-    },
-  },
-
-  props: {
-    vidId: {
-      type: String,
-      required: true,
-    },
-    thumbnails: {
-      type: Array,
-      required: true,
-    },
-    channelUrl: {
-      type: String,
-      required: true,
-    },
-    channelIcon: {
-      type: String,
-      required: true,
-    },
-    titles: {
-      type: Array,
-      required: true,
-    },
-    bottomText: {
-      type: String,
-      required: true,
-    },
-    thumbnailOverlayText: {
-      type: String,
-    },
-    thumbnailOverlayStyle: {
-      type: String,
-    },
-  },
-};
-</script>

NUXT/components/bottomNavigation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bottomNav background">
-    <v-divider v-if="$store.state.tweaks.roundTweak < 1" />
+    <v-divider v-if="!$store.state.tweaks.roundTweak" />
     <v-bottom-navigation
       v-model="tabSelection"
       style="padding: 0 !important; box-shadow: none !important"

NUXT/components/dialogBase.vue

@@ -1,10 +1,13 @@
 <template>
-  <v-card class="dialog-base">
+  <v-card flat class="dialog-base background">
-    <div class="toolbar-container">
+    <div
+      class="toolbar-container d-flex flex-column background"
+      style="flex-direction: column !important"
+    >
       <v-toolbar color="background" flat>
         <slot name="header"></slot>
       </v-toolbar>
-      <!-- <v-divider></v-divider> -->
+      <v-divider></v-divider>
     </div>
     <div class="dialog-body background">
       <slot></slot>

NUXT/components/topNavigation.vue

@@ -40,7 +40,7 @@
       <v-icon>mdi-refresh</v-icon>
     </v-btn>
     <v-btn
-      v-if="$route.name !== 'settings'"
+      v-if="$route.name !== 'settings' && !$route.path.includes('/mods')"
       icon
       tile
       class="ml-3 my-auto fill-height"

NUXT/pages/mods/theme.vue

@@ -126,7 +126,7 @@
         />
       </v-dialog>
       <!-- ----Mode Switch---- -->
-      <v-divider v-if="$store.state.tweaks.roundTweak < 1" />
+      <v-divider v-if="!$store.state.tweaks.roundTweak" />
       <v-card
         flat
         class="d-flex flex-row justify-between mx-8 mb-8 px-4 background"
@@ -139,8 +139,8 @@
         "
         :style="{
           borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
-          padding: $store.state.tweaks.roundTweak < 1 ? '2rem !important' : '',
+          padding: !$store.state.tweaks.roundTweak ? '2rem !important' : '',
-          margin: $store.state.tweaks.roundTweak < 1 ? '0 !important' : '',
+          margin: !$store.state.tweaks.roundTweak ? '0 !important' : '',
         }"
         @click="
           ($vuetify.theme.dark = !$vuetify.theme.dark),

NUXT/pages/mods/tweaks.vue

@@ -2,16 +2,17 @@
   <!-- !IMPORTANT: don't let autoformatter format this style to multiline or else it breaks ¯\_(ツ)_/¯ -->
   <div
     class="d-flex flex-column justify-end"
-    style="min-height: calc(100vh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important"
+    style="
+      min-height: calc(100vh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
+    "
   >
     <!-- TODO: outer radius -->
     <!-- TODO: Dense Navbar -->
     <!-- TODO: Disable Top Bar -->
     <!-- TODO: Top and Bottom bar color selection -->
-    <v-divider v-if="roundTweak < 1" />
     <v-card
       flat
-      class="ma-4 px-6 background"
+      class="mx-4 my-2 px-4 d-flex flex-row justify-between background"
       style="transition-duration: 0.3s; transition-property: border-radius"
       :class="
         roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
@@ -20,12 +21,94 @@
         borderRadius: `${roundTweak / 2}rem`,
       }"
     >
-      <h3 class="mt-5">Rounded Corners</h3>
+      <h3
+        class="ml-2 my-auto background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
+      >
+        Fullscreen (Soon™)
+      </h3>
+      <v-spacer />
+      <v-switch disabled style="pointer-events: none" persistent-hint inset />
+    </v-card>
+
+    <v-divider v-if="!roundTweak" />
+
+    <v-card
+      flat
+      class="mx-4 my-2 px-4 d-flex flex-row justify-between background"
+      style="transition-duration: 0.3s; transition-property: border-radius"
+      :class="
+        roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
+      "
+      :style="{
+        borderRadius: `${roundTweak / 2}rem`,
+      }"
+    >
+      <h3
+        class="ml-2 my-auto background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
+      >
+        Navbar Blur (Soon™)
+      </h3>
+      <v-spacer />
+      <v-switch disabled style="pointer-events: none" persistent-hint inset />
+    </v-card>
+
+    <v-divider v-if="!roundTweak" />
+
+    <v-card
+      flat
+      class="mx-4 my-2 background"
+      style="transition-duration: 0.3s; transition-property: border-radius"
+      :class="
+        roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
+      "
+      :style="{
+        borderRadius: `${roundTweak / 2}rem`,
+      }"
+    >
+      <h3 class="my-5 mx-6">Rounded Corners</h3>
+      <v-card
+        flat
+        class="px-4 d-flex flex-row justify-between transparent background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+        @click="
+          (roundThumb = !roundThumb), $vuetube.haptics.hapticsImpactLight(1)
+        "
+      >
+        <div class="ml-2">Round Thumbnails</div>
+        <v-spacer />
+        <v-switch
+          v-model="roundThumb"
+          style="pointer-events: none"
+          persistent-hint
+          class="ma-0"
+          inset
+        />
+      </v-card>
+      <v-card
+        flat
+        class="px-4 d-flex flex-row justify-between transparent background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+        @click="
+          (roundWatch = !roundWatch), $vuetube.haptics.hapticsImpactLight(1)
+        "
+      >
+        <div class="ml-2">Round Watch Page Components</div>
+        <v-spacer />
+        <v-switch
+          v-model="roundWatch"
+          style="pointer-events: none"
+          persistent-hint
+          class="ma-0"
+          inset
+        />
+      </v-card>
       <v-slider
         v-model="roundTweak"
-        class="mr-2 mt-5"
+        class="mr-8 ml-6"
         :max="4"
-        step="1"
+        step=".25"
         thumb-size="64"
         @input="$vuetube.haptics.hapticsImpactLight(0)"
       >
@@ -51,6 +134,22 @@ export default {
         this.$store.commit("tweaks/setRoundTweak", value);
       },
     },
+    roundThumb: {
+      get() {
+        return this.$store.state.tweaks.roundThumb;
+      },
+      set(value) {
+        this.$store.commit("tweaks/setRoundThumb", value);
+      },
+    },
+    roundWatch: {
+      get() {
+        return this.$store.state.tweaks.roundWatch;
+      },
+      set(value) {
+        this.$store.commit("tweaks/setRoundWatch", value);
+      },
+    },
   },
 };
 </script>

NUXT/store/tweaks/index.js

@@ -1,5 +1,7 @@
 export const state = () => ({
   roundTweak: 0,
+  roundThumb: true,
+  roundWatch: true,
 });
 export const mutations = {
   initTweaks(state) {
@@ -7,6 +9,8 @@ export const mutations = {
     // currently called beforeCreate() in pages/default.vue
     if (process.client) {
       state.roundTweak = localStorage.getItem("roundTweak") || 0;
+      state.roundThumb = localStorage.getItem("roundThumb") || true;
+      state.roundWatch = localStorage.getItem("roundWatch") || true;
     }
   },
   setRoundTweak(state, payload) {
@@ -15,4 +19,12 @@ export const mutations = {
       localStorage.setItem("roundTweak", payload);
     }
   },
+  setRoundThumb(state, payload) {
+    state.roundThumb = payload;
+    localStorage.setItem("roundThumb", payload);
+  },
+  setRoundWatch(state, payload) {
+    state.roundWatch = payload;
+    localStorage.setItem("roundWatch", payload);
+  },
 };