top and bottom bar refinements, custom backgroud color picker, theming cleanup, tweaks cleanup, video card radius style adjustment

NUXT/components/UtilRenderers/baseVideoRenderer.vue

@@ -2,8 +2,15 @@
   <v-card
     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.5}rem`,
+      borderRadius: `${roundTweak / 2}rem`,
       margin:
         $store.state.tweaks.roundTweak > 0
           ? '0 1rem 1rem 1rem'
@@ -16,7 +23,7 @@
         :aspect-ratio="16 / 9"
         :src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
         :style="{
-          borderRadius: `${roundTweak / 2.5}rem`,
+          borderRadius: `${roundTweak / 4}rem`,
         }"
       />
       <div

NUXT/components/bottomNavigation.vue

@@ -1,52 +1,50 @@
 <template>
-  <!-- hide-on-scroll -->
+  <div class="bottomNav background">
-  <v-bottom-navigation
+    <v-divider v-if="$store.state.tweaks.roundTweak < 1" />
-    v-model="tabSelection"
+    <v-bottom-navigation
-    shift
+      v-model="tabSelection"
-    class="bottomNav py-4 background"
+      style="padding: 0 !important; box-shadow: none !important"
-    :style="
+      class="transparent"
-      $vuetify.theme.dark
+      shift
-        ? 'border-top: 1px solid var(--v-background-lighten1) !important;'
-        : 'border-top: 1px solid var(--v-background-darken1) !important;'
-    "
-  >
-    <v-btn
-      v-for="(item, i) in tabs"
-      :key="i"
-      v-ripple="false"
-      class="navButton"
-      :to="item.link"
-      plain
     >
-      <span v-text="item.name" />
+      <v-btn
-      <v-icon
+        v-for="(item, i) in tabs"
-        :color="
+        :key="i"
-          tabSelection == i
+        v-ripple="false"
-            ? 'primary'
+        class="navButton"
-            : $vuetify.theme.dark
+        :to="item.link"
-            ? 'background lighten-4'
+        plain
-            : 'background darken-4'
+      >
-        "
+        <span v-text="item.name" />
-        :class="
+        <v-icon
-          tabSelection == i
+          :color="
-            ? $vuetify.theme.dark
+            tabSelection == i
-              ? 'tab primary darken-4'
+              ? 'primary'
-              : 'tab primary lighten-4'
+              : $vuetify.theme.dark
-            : ''
+              ? 'background lighten-4'
-        "
+              : 'background darken-4'
-        v-text="item.icon"
+          "
-      />
+          :class="
-      <!-- 
+            tabSelection == i
+              ? $vuetify.theme.dark
+                ? 'tab primary darken-4'
+                : 'tab primary lighten-4'
+              : ''
+          "
+          v-text="item.icon"
+        />
+        <!-- 
         Add the following to 'v-text- above to make the icons outlined unless active
         + (tabSelection == i ? '' : '-outline')
 
 
        -->
-    </v-btn>
+      </v-btn>
-    <!-- <v-btn text class="navButton mr-2 fill-height" color="white" @click="searchBtn()"
+      <!-- <v-btn text class="navButton mr-2 fill-height" color="white" @click="searchBtn()"
       ><v-icon>mdi-magnify</v-icon></v-btn
     > -->
-  </v-bottom-navigation>
+    </v-bottom-navigation>
+  </div>
 </template>
 
 <script>
@@ -74,13 +72,13 @@ export default {
 
 <style scoped>
 .bottomNav {
-  /* box-shadow: inset 0 1rem 10rem var(--v-background-base) !important; */
+  /* box-shadow: inset 0 0 10rem var(--v-background-base) !important; */
+  height: calc(4rem + env(safe-area-inset-bottom)) !important;
+  padding-bottom: env(safe-area-inset-bottom) !important;
   box-shadow: none !important;
-  /* ios gesture nav */
-  bottom: env(safe-area-inset-bottom) !important;
-  height: 4rem !important;
-  padding: 0 !important;
   position: fixed;
+  width: 100%;
+  bottom: 0;
 }
 .navButton {
   width: 25vw !important;

NUXT/components/topNavigation.vue

@@ -1,14 +1,5 @@
 <template>
-  <v-card
+  <v-card style="display: flex" class="rounded-0 pa-3 topNav background">
-    scroll-off-screen
-    style="height: 4rem !important; display: flex"
-    class="rounded-0 pa-3 topNav background"
-  >
-    <!-- :style="
-      $vuetify.theme.dark
-        ? 'border-bottom: 1px solid var(--v-background-lighten1) !important;'
-        : 'border-bottom: 1px solid var(--v-background-darken1) !important;'
-    " -->
     <h3 v-show="!search" class="my-auto ml-4" v-text="page" />
 
     <v-btn
@@ -114,11 +105,12 @@ export default {
 <style scoped>
 .topNav {
   /* box-shadow: inset 0 1rem 10rem var(--v-background-base) !important; */
+  height: calc(4rem + env(safe-area-inset-top)) !important;
+  padding-top: env(safe-area-inset-top) !important;
   box-shadow: none !important;
-  /* ios notch */
-  top: env(safe-area-inset-top) !important;
   position: fixed;
   width: 100%;
+  top: 0;
 }
 
 .topNavSearch {

NUXT/layouts/default.vue

@@ -9,6 +9,8 @@
       @text-changed="textChanged"
       @scroll-to-top="$refs.pgscroll.scrollTop = 0"
     />
+
+    <!-- channel-tabs -->
     <v-tabs
       v-if="$route.path.includes('/channel')"
       mobile-breakpoint="0"
@@ -31,9 +33,14 @@
     </v-tabs>
 
     <div
-      style="height: 100%; padding-bottom: 4rem"
+      style="
+        height: 100%;
+        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
+      "
       :style="{
-        marginTop: $route.path.includes('/channel') ? '7rem' : '4rem',
+        paddingTop: $route.path.includes('/channel')
+          ? 'calc(7rem + env(safe-area-inset-top))'
+          : 'calc(4rem + env(safe-area-inset-top))',
       }"
     >
       <div v-show="!search">
@@ -226,7 +233,13 @@ export default {
 .v-slide-group__next {
   display: none !important;
 }
+.v-input--selection-controls__input {
+  margin-right: 0 !important;
+}
 
+.border-primary {
+  border: 2px solid var(--v-primary-base) !important;
+}
 .glassy {
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);

NUXT/pages/mods/theme.vue

@@ -1,10 +1,13 @@
 <template>
   <client-only>
+    <!-- !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)"
+      style="
+        min-height: calc(100vh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
+      "
     >
-      <!-- ----------------------------------------------Background Colors------------------------ -->
+      <!-- ----Background Colors---- -->
       <v-radio-group v-model="$vuetify.theme.currentTheme.background">
         <div
           class="d-flex flex-row px-6 no-wrap"
@@ -43,16 +46,28 @@
                   ? '2px solid var(--v-primary-darken4)'
                   : '2px solid var(--v-primary-lighten4)',
               }"
-              class="py-4 px-4 ma-2 rounded-lg"
+              class="pa-4 ma-2 rounded-lg"
-              :value="
+              :value="$vuetify.theme.dark ? adaptiveDark : adaptiveLight"
-                $vuetify.theme.dark ? experimentalDark : experimentalLight
-              "
             />
             Adaptive
           </div>
+          <div class="text-center">
+            <!-- Custom Background -->
+            <v-btn
+              icon
+              class="ma-2 rounded-lg background border-primary"
+              style="height: 3.75rem; width: 3.75rem"
+              :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
+              @click="(pickerState = true), (pickerMode = 'background')"
+            >
+              <v-icon>mdi-plus</v-icon>
+            </v-btn>
+            <br />
+            Custom
+          </div>
         </div>
       </v-radio-group>
-      <!-- ----------------------------------------------Primary Colors------------------------ -->
+      <!-- ----Primary Colors---- -->
       <v-radio-group v-model="$vuetify.theme.currentTheme.primary" class="mx-2">
         <div
           class="d-flex flex-row px-6 py-2 no-wrap align-center"
@@ -74,40 +89,59 @@
             class="mr-2 my-auto rounded-xl"
             :value="color"
           />
-          <v-dialog
+          <!-- Custom Primary -->
-            v-model="dialog"
+          <v-btn
-            width="300"
+            icon
-            content-class="background rounded-lg"
+            class="background"
+            style="height: 1.75rem; width: 1.75rem"
+            :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
+            v-bind="attrs"
+            v-on="on"
+            @click="(pickerState = true), (pickerMode = 'primary')"
           >
-            <template #activator="{ on, attrs }">
+            <v-icon>mdi-plus</v-icon>
-              <v-btn
+          </v-btn>
-                icon
-                class="background"
-                style="height: 1.75rem; width: 1.75rem"
-                :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
-                v-bind="attrs"
-                v-on="on"
-              >
-                <v-icon>mdi-plus</v-icon>
-              </v-btn>
-            </template>
-            <v-color-picker
-              v-model="$vuetify.theme.currentTheme.primary"
-              style="min-width: 100%"
-              class="background"
-              hide-mode-switch
-              dot-size="50"
-              mode="hexa"
-              flat
-            />
-          </v-dialog>
         </div>
       </v-radio-group>
-      <!-- ----------------------------------------------Mode Switch------------------------ -->
+      <!-- ----Color Picker---- -->
+      <v-dialog
+        v-model="pickerState"
+        width="300"
+        content-class="background"
+        :style="{
+          borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+        }"
+      >
+        <v-color-picker
+          v-model="$vuetify.theme.currentTheme[pickerMode]"
+          style="min-width: 100%"
+          :style="{
+            borderRadius: `${$store.state.tweaks.roundTweak / 2}rem !important`,
+          }"
+          class="background"
+          hide-mode-switch
+          dot-size="50"
+          mode="hexa"
+          flat
+        />
+      </v-dialog>
+      <!-- ----Mode Switch---- -->
+      <v-divider v-if="$store.state.tweaks.roundTweak < 1" />
       <v-card
         flat
-        class="d-flex flex-row justify-between mx-8 mb-8 px-4 background rounded-lg"
+        class="d-flex flex-row justify-between mx-8 mb-8 px-4 background"
-        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+        :class="
+          $store.state.tweaks.roundTweak > 0
+            ? $vuetify.theme.dark
+              ? 'lighten-1'
+              : 'darken-1'
+            : ''
+        "
+        :style="{
+          borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+          padding: $store.state.tweaks.roundTweak < 1 ? '2rem !important' : '',
+          margin: $store.state.tweaks.roundTweak < 1 ? '0 !important' : '',
+        }"
         @click="
           ($vuetify.theme.dark = !$vuetify.theme.dark),
             $vuetube.haptics.hapticsImpactLight(1)
@@ -153,9 +187,10 @@ export default {
         { name: "Black", color: "#000000" },
       ],
       backgroundsLight: [{ name: "Normal", color: "#ffffff" }],
-      experimentalLight: "",
+      adaptiveLight: "",
-      experimentalDark: "",
+      adaptiveDark: "",
-      dialog: false,
+      pickerState: false,
+      pickerMode: "bg",
     };
   },
   watch: {
@@ -169,19 +204,30 @@ export default {
         : localStorage.setItem("backgroundLight", value);
       this.$vuetube.statusBar.setTheme(value, this.$vuetify.theme.dark);
       this.$vuetube.navigationBar.setTheme(value, !this.$vuetify.theme.dark);
+      // WIP: luma-based light-dark auto-switching
+      // let bg = this.$vuetify.theme.currentTheme.background;
+      // console.log(this.$vuetube.hexToRgb(bg));
+      // let luma =
+      //   0.2126 * this.$vuetube.hexToRgb(bg).r +
+      //   0.7152 * this.$vuetube.hexToRgb(bg).g +
+      //   0.0722 * this.$vuetube.hexToRgb(bg).b;
+      // if (luma < 40) {
+      //   this.$vuetify.theme.dark = true;
+      //   this.vuetify.theme.currentTheme.background = bg;
+      // }
     },
     "$vuetify.theme.currentTheme.primary"(value) {
       if (value != undefined) {
         this.$vuetify.theme.dark
           ? localStorage.setItem("primaryDark", value)
           : localStorage.setItem("primaryLight", value);
-        let tempD = this.experimentalDark;
+        let tempD = this.adaptiveDark;
-        let tempL = this.experimentalLight;
+        let tempL = this.adaptiveLight;
         this.adapt();
         if (this.$vuetify.theme.currentTheme.background === tempD)
-          this.$vuetify.theme.currentTheme.background = this.experimentalDark;
+          this.$vuetify.theme.currentTheme.background = this.adaptiveDark;
         if (this.$vuetify.theme.currentTheme.background === tempL)
-          this.$vuetify.theme.currentTheme.background = this.experimentalLight;
+          this.$vuetify.theme.currentTheme.background = this.adaptiveLight;
       }
     },
   },
@@ -198,30 +244,21 @@ export default {
       );
       // the menace above returns a hex string with A SPACE " " in front of it, that's why substring(1)
       // the SPACE " " is stored as part of the CSS variable itself to be used for chaining
-      this.experimentalDark = hexD.substring(1).toUpperCase();
+      this.adaptiveDark = hexD.substring(1).toUpperCase();
-      this.experimentalLight = hexL.substring(1).toUpperCase();
+      this.adaptiveLight = hexL.substring(1).toUpperCase();
       setTimeout(() => {
         if (
           this.$vuetify.theme.currentTheme.background ==
           hexD.substring(1).toUpperCase()
         )
-          this.$vuetify.theme.currentTheme.background = this.experimentalDark;
+          this.$vuetify.theme.currentTheme.background = this.adaptiveDark;
         if (
           this.$vuetify.theme.currentTheme.background ==
           hexL.substring(1).toUpperCase()
         )
-          this.$vuetify.theme.currentTheme.background = this.experimentalLight;
+          this.$vuetify.theme.currentTheme.background = this.adaptiveLight;
       }, 0);
     },
   },
 };
 </script>
-
-<style>
-.border-primary {
-  border: 2px solid var(--v-primary-base) !important;
-}
-.v-input--selection-controls__input {
-  margin-right: 0 !important;
-}
-</style>

NUXT/pages/mods/tweaks.vue

@@ -1,64 +1,29 @@
 <template>
+  <!-- !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)"
+    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="mb-4 background"
+      class="ma-4 px-6 background"
-      style="
+      style="transition-duration: 0.3s; transition-property: border-radius"
-        transition-duration: 0.3s;
+      :class="
-        transition-property: border-radius;
+        roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
-        overflow: hidden;
       "
       :style="{
         borderRadius: `${roundTweak / 2}rem`,
-        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
       }"
     >
-      <div
-        v-for="item in list"
-        :key="item"
-        class="pa-4 mb-1 background text-center rounded-sm"
-        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-        @click="list.pop(item)"
-      >
-        {{ item }}
-      </div>
-      <v-card-title
-        v-ripple
-        class="pa-4 background primary--text text--lighten-2 rounded-sm"
-        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-        @click="list.push('x')"
-      >
-        +++++++++++++++++++++++++++++
-      </v-card-title>
-    </v-card>
-    <v-card
-      flat
-      class="px-6 background"
-      style="transition-duration: 0.3s; transition-property: border-radius"
-      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-      :style="{
-        borderRadius: `${roundTweak / 2}rem`,
-      }"
-    >
-      <!-- margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0', -->
       <h3 class="mt-5">Rounded Corners</h3>
-      <div
-        class="background--text"
-        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-      >
-        applies to only a few elements for now
-      </div>
-      <!-- TODO: outer radius -->
-      <!-- TODO: Dense Navbar -->
-      <!-- TODO: Disable Top Bar -->
-      <!-- TODO: Top and Bottom bar color selection -->
       <v-slider
         v-model="roundTweak"
         class="mr-2 mt-5"
-        label="Inner"
         :max="4"
         step="1"
         thumb-size="64"
@@ -77,9 +42,6 @@
 
 <script>
 export default {
-  data: () => ({
-    list: ["x", "x"],
-  }),
   computed: {
     roundTweak: {
       get() {

NUXT/plugins/utils.js

@@ -85,5 +85,5 @@ module.exports = {
   getMutationByKey,
   linkParser,
   delay,
-  parseEmoji
+  parseEmoji,
 };

android/.idea/deploymentTargetDropDown.xml

@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="deploymentTargetDropDown">
-    <runningDeviceTargetSelectedWithDropDown>
+    <targetSelectedWithDropDown>
       <Target>
-        <type value="RUNNING_DEVICE_TARGET" />
+        <type value="QUICK_BOOT_TARGET" />
         <deviceKey>
           <Key>
-            <type value="SERIAL_NUMBER" />
+            <type value="VIRTUAL_DEVICE_PATH" />
-            <value value="adb-97QAY11P1S-NELaqI._adb-tls-connect._tcp." />
+            <value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
           </Key>
         </deviceKey>
       </Target>
-    </runningDeviceTargetSelectedWithDropDown>
+    </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2022-05-05T23:23:16.786886Z" />
+    <timeTargetWasSelectedWithDropDown value="2022-05-13T01:27:37.098564Z" />
   </component>
 </project>