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

2022-05-13 02:20:15 -04:00 · 2022-05-13 02:20:15 -04:00 · 11b520991f
parent d7952575ad
commit 11b520991f
8 changed files with 182 additions and 173 deletions
--- a/NUXT/components/UtilRenderers/baseVideoRenderer.vue
+++ b/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
--- a/NUXT/components/bottomNavigation.vue
+++ b/NUXT/components/bottomNavigation.vue
@ -1,52 +1,50 @@
 <template>
-  <!-- hide-on-scroll -->
-  <v-bottom-navigation
-    v-model="tabSelection"
-    shift
-    class="bottomNav py-4 background"
-    :style="
-      $vuetify.theme.dark
-        ? '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
+  <div class="bottomNav background">
+    <v-divider v-if="$store.state.tweaks.roundTweak < 1" />
+    <v-bottom-navigation
+      v-model="tabSelection"
+      style="padding: 0 !important; box-shadow: none !important"
+      class="transparent"
+      shift
    >
-      <span v-text="item.name" />
-      <v-icon
-        :color="
-          tabSelection == i
-            ? 'primary'
-            : $vuetify.theme.dark
-            ? 'background lighten-4'
-            : 'background darken-4'
-        "
-        :class="
-          tabSelection == i
-            ? $vuetify.theme.dark
-              ? 'tab primary darken-4'
-              : 'tab primary lighten-4'
-            : ''
-        "
-        v-text="item.icon"
-      />
-      <!-- 
+      <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-icon
+          :color="
+            tabSelection == i
+              ? 'primary'
+              : $vuetify.theme.dark
+              ? 'background lighten-4'
+              : 'background darken-4'
+          "
+          :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 text class="navButton mr-2 fill-height" color="white" @click="searchBtn()"
+      </v-btn>
+      <!-- <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;
--- a/NUXT/components/topNavigation.vue
+++ b/NUXT/components/topNavigation.vue
@ -1,14 +1,5 @@
 <template>
-  <v-card
-    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;'
-    " -->
+  <v-card style="display: flex" class="rounded-0 pa-3 topNav background">
    <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 {
--- a/NUXT/layouts/default.vue
+++ b/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);
--- a/NUXT/pages/mods/theme.vue
+++ b/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"
-              :value="
-                $vuetify.theme.dark ? experimentalDark : experimentalLight
-              "
+              class="pa-4 ma-2 rounded-lg"
+              :value="$vuetify.theme.dark ? adaptiveDark : adaptiveLight"
            />
            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
-            v-model="dialog"
-            width="300"
-            content-class="background rounded-lg"
+          <!-- Custom Primary -->
+          <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"
+            @click="(pickerState = true), (pickerMode = 'primary')"
          >
-            <template #activator="{ on, attrs }">
-              <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>
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
        </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="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+        class="d-flex flex-row justify-between mx-8 mb-8 px-4 background"
+        :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: "",
-      experimentalDark: "",
-      dialog: false,
+      adaptiveLight: "",
+      adaptiveDark: "",
+      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 tempL = this.experimentalLight;
+        let tempD = this.adaptiveDark;
+        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.experimentalLight = hexL.substring(1).toUpperCase();
+      this.adaptiveDark = hexD.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>
--- a/NUXT/pages/mods/tweaks.vue
+++ b/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"
-      style="
-        transition-duration: 0.3s;
-        transition-property: border-radius;
-        overflow: hidden;
+      class="ma-4 px-6 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`,
-        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() {
--- a/NUXT/plugins/utils.js
+++ b/NUXT/plugins/utils.js
@ -85,5 +85,5 @@ module.exports = {
  getMutationByKey,
  linkParser,
  delay,
-  parseEmoji
+  parseEmoji,
 };
--- a/android/.idea/deploymentTargetDropDown.xml
+++ b/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" />
-            <value value="adb-97QAY11P1S-NELaqI._adb-tls-connect._tcp." />
+            <type value="VIRTUAL_DEVICE_PATH" />
+            <value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
          </Key>
        </deviceKey>
      </Target>
-    </runningDeviceTargetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2022-05-05T23:23:16.786886Z" />
+    </targetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2022-05-13T01:27:37.098564Z" />
  </component>
 </project>