feat: border tweak affects video

NUXT/components/CompactRenderers/compactChannelRenderer.vue

@@ -2,6 +2,17 @@
   <v-card
     class="entry gridVideoRenderer background"
     :to="`/watch?v=${video.videoId}`"
+    :class="
+      $store.state.tweaks.roundTweak > 0
+        ? $vuetify.theme.dark
+          ? 'lighten-1'
+          : 'darken-1'
+        : ''
+    "
+    :style="{
+      borderRadius: `${roundTweak / 2}rem`,
+      margin: $store.state.tweaks.roundTweak > 0 ? '0.5rem 1rem' : '0',
+    }"
     flat
   >
     <div id="details">

NUXT/components/ListRenderers/horizontalListRenderer.vue

@@ -3,7 +3,7 @@
     <v-list-item
       v-for="(video, index) in render.items"
       :key="index"
-      class="pa-0"
+      class="pa-0 min-height-0"
     >
       <component
         v-if="getComponents()[Object.keys(video)[0]]"

NUXT/components/ListRenderers/sectionListRenderer.vue

@@ -3,7 +3,7 @@
     <v-list-item
       v-for="(renderer, index) in render.contents"
       :key="index"
-      class="pa-0"
+      class="pa-0 min-height-0"
     >
       <component
         v-if="getComponents()[Object.keys(renderer)[0]]"

NUXT/components/ListRenderers/verticalListRenderer.vue

@@ -3,7 +3,7 @@
     <v-list-item
       v-for="(video, index) in render.items"
       :key="index"
-      class="pa-0"
+      class="pa-0 min-height-0"
     >
       <component
         v-if="getComponents()[Object.keys(video)[0]]"

NUXT/components/SectionRenderers/itemSectionRenderer.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div class="fill-width">
-    <div
+    <v-list-item
       v-for="(video, index) in render.contents"
       :key="index"
-      class="pa-0 fill-screen"
+      class="pa-0 min-height-0"
     >
       <component
         v-if="getComponents()[Object.keys(video)[0]]"
@@ -11,13 +11,13 @@
         :key="video[Object.keys(video)[0]].videoId"
         :video="video[Object.keys(video)[0]]"
       ></component>
-    </div>
+    </v-list-item>
     <div
       v-if="
         render.separatorDetails && render.separatorDetails.hasBottomSeparator
       "
       class="separator-bottom background"
-      :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{ height: render.separatorDetails.height + 'px' }"
     ></div>
   </div>
@@ -28,10 +28,6 @@
   width: 100%; /* Prevent Loading Weirdness */
   padding: 10px;
 }
-
-.fill-screen {
-  width: 100vw; /* Very Hacky */
-}
 </style>
 
 <script>

NUXT/components/SectionRenderers/shelfRenderer.vue

@@ -1,20 +1,22 @@
 <template>
-  <div>
+  <div class="fill-width">
     <h4 v-if="render.headerRenderer" class="font-weight-bold shelf-header">
       {{
         render.headerRenderer.elementRenderer.newElement.type.componentType
           .model.shelfHeaderModel.shelfHeaderData.title
       }}
     </h4>
-    <component
+    <v-list-item class="pa-0 min-height-0">
-      v-if="render.content && getComponents()[Object.keys(render.content)[0]]"
+      <component
-      :is="Object.keys(render.content)[0]"
+        v-if="render.content && getComponents()[Object.keys(render.content)[0]]"
-      :render="render.content[Object.keys(render.content)[0]]"
+        :is="Object.keys(render.content)[0]"
-    ></component>
+        :render="render.content[Object.keys(render.content)[0]]"
+      ></component
+    ></v-list-item>
     <div
       v-if="render.separator && render.separator.hasBottomSeparator"
       class="separator-bottom background"
-      :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{ height: render.separator.height + 'px' }"
     ></div>
   </div>

NUXT/components/UtilRenderers/baseVideoRenderer.vue

@@ -1,6 +1,21 @@
 <template>
-  <v-card class="entry videoRenderer background" :to="`/watch?v=${vidId}`" flat>
+  <v-card
-    <div style="position: relative" class="thumbnail-container">
+    class="entry videoRenderer background"
+    :to="`/watch?v=${vidId}`"
+    :class="
+      $store.state.tweaks.roundTweak > 0
+        ? $vuetify.theme.dark
+          ? 'lighten-1'
+          : 'darken-1'
+        : ''
+    "
+    :style="{
+      borderRadius: `${roundTweak / 2}rem`,
+      margin: $store.state.tweaks.roundTweak > 0 ? '0.5rem 1rem' : '0',
+    }"
+    flat
+  >
+    <div style="position: relative" class="thumbnail-container overflow-hidden">
       <v-img
         :aspect-ratio="16 / 9"
         :src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
@@ -108,6 +123,12 @@
 
 <script>
 export default {
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    },
+  },
+
   props: {
     vidId: {
       type: String,

NUXT/layouts/default.vue

@@ -231,6 +231,14 @@ div {
   vertical-align: -0.1em;
   margin: 0 2px;
 }
+
+.min-height-0 {
+  min-height: 0 !important;
+}
+
+.fill-width {
+  width: 100% !important;
+}
 </style>
 
 <style scoped>