new navbar settings

NUXT/components/bottomNavigation.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="bottomNav background" v-if="!$route.path.includes('/mods')">
+  <div
+    v-if="!$route.path.includes('/mods') || $route.path.includes('/tweaks')"
+    class="bottomNav background"
+  >
     <v-divider v-if="!$store.state.tweaks.roundTweak" />
     <v-bottom-navigation
       v-model="tabSelection"
       style="padding: 0 !important; box-shadow: none !important"
       class="transparent"
-      shift
+      :shift="$store.state.tweaks.navigationShift"
     >
       <v-btn
         v-for="(item, i) in tabs"
@@ -15,7 +18,8 @@
         :to="item.link"
         plain
       >
-        <span v-text="item.name" />
+        <span v-if="$store.state.tweaks.navigationText" v-text="item.name" />
+        <!-- v-if="$store.state.tweaks.navigationIcons === 0" -->
         <v-icon
           :color="
             tabSelection == i
@@ -33,28 +37,13 @@
           "
           v-text="item.icon"
         />
-        <!-- 
-      <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')
-       -->
+        <!-- + (tabSelection == i ? '' : '-outline') -->
+        <!-- <v-img
+          v-if="$store.state.tweaks.navigationIcons === 1"
+          :src="`/${item.img}.svg`"
+          :height="24"
+          :width="24"
+        /> -->
       </v-btn>
       <!-- <v-btn
         text
@@ -74,15 +63,26 @@ export default {
       tabSelection: 0,
       tabs: [
         // TODO: pull from Vuex & localStorage for customizations
-        { name: "", icon: "mdi-home", link: "/home" },
-        //{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
-        //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
+        {
+          name: "",
+          icon: "mdi-home",
+          img: "home",
+          link: "/home",
+        },
+        // { name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
+        // { name: "Upload", icon: "mdi-plus", link: "/upload" },
         {
           name: "",
           icon: "mdi-youtube-subscription",
+          img: "subs",
           link: "/subscriptions",
         },
-        { name: "", icon: "mdi-view-list", link: "/library" },
+        {
+          name: "",
+          icon: "mdi-view-list",
+          img: "list",
+          link: "/library",
+        },
         // { name: "Settings", icon: "mdi-menu", link: "/settings" },
       ],
     };

NUXT/pages/mods/player.vue

@@ -188,7 +188,7 @@
       </v-card>
     </v-card>
 
-    <!-- <v-divider v-if="!$store.state.tweaks.roundTweak" />
+    <v-divider v-if="!$store.state.tweaks.roundTweak" />
 
     <h3 class="ml-8 mt-8">
       <v-icon class="mb-1 mr-1">mdi-play-network-outline</v-icon>
@@ -284,7 +284,7 @@
           </div>
         </div>
       </v-card>
-    </v-card> -->
+    </v-card>
 
     <v-divider v-if="!$store.state.tweaks.roundTweak" />
 
@@ -312,7 +312,7 @@
             ? $vuetify.theme.dark
               ? 'lighten-1'
               : 'darken-1'
-            : ''
+            : 'background'
         "
         :style="{
           borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
@@ -342,7 +342,7 @@
               : loop
               ? 'primary lighten-4'
               : 'background darken-1'
-            : ''
+            : 'background'
         "
         :style="{
           borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,

NUXT/pages/mods/theme.vue

@@ -69,6 +69,7 @@
               : backgroundsLight"
             :key="background.color"
             class="text-center"
+            style="font-size: 0.75rem"
           >
             <v-radio
               color="primary"
@@ -84,7 +85,7 @@
             />
             {{ background.name }}
           </div>
-          <div class="text-center">
+          <div class="text-center" style="font-size: 0.75rem">
             <v-radio
               color="primary"
               active-class="px-6 border-primary primary"
@@ -103,7 +104,7 @@
             />
             {{ lang.adaptive }}
           </div>
-          <div class="text-center">
+          <div class="text-center" style="font-size: 0.75rem">
             <!-- Custom Background -->
             <v-btn
               icon
@@ -170,7 +171,14 @@
 export default {
   data() {
     return {
-      primaryLight: ["#6b0406","#E57373", "#34495E", "#6e0ba3","#016a49", "#8b5f37"],
+      primaryLight: [
+        "#6b0406",
+        "#E57373",
+        "#34495E",
+        "#6e0ba3",
+        "#016a49",
+        "#8b5f37",
+      ],
       primaryDark: [
         "#dc2626",
         "#FFBBFF",
@@ -180,12 +188,12 @@ export default {
         "#FEC89B",
       ],
       backgroundsDark: [
-        { name: "Dark", color: "#181818" },
+        { name: this.$lang("mods").theme.dark, color: "#181818" },
         { name: "Warm", color: "#1c1917" },
-        { name: "Black", color: "#000000" },
+        { name: this.$lang("mods").theme.black, color: "#000000" },
       ],
       backgroundsLight: [
-        { name: "Normal", color: "#ffffff" },
+        { name: this.$lang("mods").theme.normal, color: "#ffffff" },
         { name: "Cold", color: "#e2e8f0" },
         { name: "Warm", color: "#e7e5e4" },
       ],
@@ -236,10 +244,11 @@ export default {
   },
   mounted() {
     this.lang = this.$lang("mods").theme;
-    // TODO: loop, and fill the missing colors, otherwise it breaks
-    // this.backgroundsLight[0].name = this.lang.normal;
-    // this.backgroundsDark[0].name = this.lang.dark;
-    // this.backgroundsDark[1].name = this.lang.black;
+    if (this.lang.cold) this.backgroundsLight[1].name = this.lang.cold;
+    if (this.lang.warm) {
+      this.backgroundsDark[1].name = this.lang.warm;
+      this.backgroundsLight[2].name = this.lang.warm;
+    }
   },
   beforeMount() {
     this.adapt();

NUXT/pages/mods/tweaks.vue

@@ -90,10 +90,7 @@
           (roundThumb = !roundThumb), $vuetube.haptics.hapticsImpactLight(1)
         "
       >
-        <div
-          class="my-auto background--text"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-        >
+        <div class="my-auto" :class="roundThumb ? 'primary--text' : ''">
           {{ lang.roundthumbnails }}
         </div>
         <v-spacer />
@@ -118,10 +115,7 @@
           (roundWatch = !roundWatch), $vuetube.haptics.hapticsImpactLight(1)
         "
       >
-        <div
-          class="my-auto background--text"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-        >
+        <div class="my-auto" :class="roundThumb ? 'primary--text' : ''">
           {{ lang.roundwatchpagecomponents }}
         </div>
         <v-spacer />
@@ -161,16 +155,7 @@
 
     <!-- TODO: translate below -->
 
-    <h3 class="ml-8 mt-8">
-      <!-- <v-img
-        src="/icon.svg"
-        width="1rem"
-        height="1rem"
-        style="display: inline-block; margin-right: 0.5rem"
-        :class="$vuetify.theme.dark ? '' : 'invert'"
-      /> -->
-      Launch Screen
-    </h3>
+    <h3 class="ml-8 mt-8">Launch Screen</h3>
 
     <v-card
       flat
@@ -180,51 +165,6 @@
         borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
       }"
     >
-      <v-card
-        flat
-        class="mr-1 pa-4 pt-6 d-flex flex-column align-center justify-space-between"
-        style="width: calc(100% / 3) !important"
-        :class="
-          $store.state.tweaks.roundTweak > 0
-            ? $vuetify.theme.dark
-              ? launchIconTheme
-                ? 'primary darken-4'
-                : 'background lighten-1'
-              : launchIconTheme
-              ? 'primary lighten-4'
-              : 'background darken-1'
-            : 'background'
-        "
-        :style="{
-          borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
-        }"
-        @click="launchIconTheme = !launchIconTheme"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="1.5rem"
-          height="1.5rem"
-          xml:space="preserve"
-          viewBox="0 0 512 512"
-          class="iconsvgstuff"
-          style="transition: scale 0.25s"
-          :style="{
-            scale: launchIconTheme ? 1.25 : 1,
-            color: launchIconTheme ? $vuetify.theme.currentTheme.primary : '',
-          }"
-        >
-          <g>
-            <path
-              d="M157.768,142.391C168.454,136.236 168.454,120.814 157.766,114.66L157.761,114.658L121.527,93.811L161.399,75.218L175.714,83.453L175.736,83.466L216.392,106.857C233.102,116.471 233.102,140.582 216.392,150.196L175.743,173.582L175.714,173.599L158.778,183.343L118.905,164.75L157.761,142.395L157.768,142.391ZM36,163.605L36,184.79C36.005,197.092 49.314,204.788 59.979,198.652L82.89,185.471L122.763,204.063L77.932,229.856L77.903,229.873L37.467,253.137C20.801,262.726 0,250.695 0,231.467L0,146.818L36,163.605ZM125.384,54.497L85.512,73.09L59.979,58.4L59.964,58.392C49.3,52.27 36,59.968 36,72.269L36,96.178L0,112.965L0,25.585C0,6.357 20.801,-5.673 37.467,3.916L77.917,27.187L77.932,27.196L125.384,54.497Z"
-              transform="matrix(1.99234,0,0,1.99234,52.4337,-0.543689)"
-              style="fill: currentColor"
-            />
-          </g>
-        </svg>
-        <span class="mt-3 text-center" style="font-size: 0.8rem">
-          Themed Icon
-        </span>
-      </v-card>
       <v-card
         flat
         class="mr-1 pa-4 d-flex flex-column align-center justify-space-between"
@@ -274,7 +214,11 @@
             : 'background'
         "
         :style="{
-          borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
+          borderRadius: `${$store.state.tweaks.roundTweak / 12}rem ${
+            $store.state.tweaks.roundTweak / 2
+          }rem ${$store.state.tweaks.roundTweak / 2}rem  ${
+            $store.state.tweaks.roundTweak / 12
+          }rem `,
         }"
         @click="launchTheme = 1"
       >
@@ -291,6 +235,193 @@
           Fullscreen Layout
         </span>
       </v-card>
+      <v-card
+        flat
+        class="ml-4 pa-4 pt-6 d-flex flex-column align-center justify-space-between"
+        style="width: calc(100% / 3) !important"
+        :class="
+          $store.state.tweaks.roundTweak > 0
+            ? $vuetify.theme.dark
+              ? launchIconTheme
+                ? 'primary darken-4'
+                : 'background lighten-1'
+              : launchIconTheme
+              ? 'primary lighten-4'
+              : 'background darken-1'
+            : 'background'
+        "
+        :style="{
+          borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+        }"
+        @click="launchIconTheme = !launchIconTheme"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.5rem"
+          height="1.5rem"
+          xml:space="preserve"
+          viewBox="0 0 512 512"
+          class="iconsvgstuff"
+          style="transition: scale 0.25s; border-radius: 0 !important"
+          :style="{
+            scale: launchIconTheme ? 1.25 : 1,
+            color: launchIconTheme ? $vuetify.theme.currentTheme.primary : '',
+          }"
+        >
+          <g>
+            <path
+              d="M157.768,142.391C168.454,136.236 168.454,120.814 157.766,114.66L157.761,114.658L121.527,93.811L161.399,75.218L175.714,83.453L175.736,83.466L216.392,106.857C233.102,116.471 233.102,140.582 216.392,150.196L175.743,173.582L175.714,173.599L158.778,183.343L118.905,164.75L157.761,142.395L157.768,142.391ZM36,163.605L36,184.79C36.005,197.092 49.314,204.788 59.979,198.652L82.89,185.471L122.763,204.063L77.932,229.856L77.903,229.873L37.467,253.137C20.801,262.726 0,250.695 0,231.467L0,146.818L36,163.605ZM125.384,54.497L85.512,73.09L59.979,58.4L59.964,58.392C49.3,52.27 36,59.968 36,72.269L36,96.178L0,112.965L0,25.585C0,6.357 20.801,-5.673 37.467,3.916L77.917,27.187L77.932,27.196L125.384,54.497Z"
+              transform="matrix(1.99234,0,0,1.99234,52.4337,-0.543689)"
+              style="fill: currentColor"
+            />
+          </g>
+        </svg>
+        <span class="mt-3 text-center" style="font-size: 0.8rem">
+          Themed Icon
+        </span>
+      </v-card>
+    </v-card>
+
+    <v-divider v-if="!$store.state.tweaks.roundTweak" />
+
+    <!-- TODO: translate below -->
+
+    <h3 class="ml-8 mt-8">Bottom Navigation</h3>
+    <v-card
+      flat
+      class="mx-4 mt-2 mb-6 background d-flex flex-column"
+      style="overflow: hidden"
+      :style="{
+        borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+      }"
+    >
+      <v-card
+        flat
+        class="mb-1 px-4 py-2 d-flex flex-row background"
+        :class="
+          roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
+        "
+        :style="{
+          borderRadius: `${roundTweak / 12}rem`,
+        }"
+        @click="
+          (navigationShift = !navigationShift),
+            $vuetube.haptics.hapticsImpactLight(1)
+        "
+      >
+        <div class="my-auto" :class="navigationText ? 'primary--text' : ''">
+          Shift
+        </div>
+        <v-spacer />
+        <v-switch
+          v-model="navigationShift"
+          style="pointer-events: none"
+          persistent-hint
+          class="mt-2"
+          inset
+        />
+      </v-card>
+      <v-card
+        flat
+        class="mb-1 px-4 py-2 d-flex flex-row background"
+        :class="
+          roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
+        "
+        :style="{
+          borderRadius: `${roundTweak / 12}rem`,
+        }"
+        @click="
+          (navigationText = !navigationText),
+            $vuetube.haptics.hapticsImpactLight(1)
+        "
+      >
+        <div class="my-auto" :class="navigationText ? 'primary--text' : ''">
+          Show Labels
+        </div>
+        <v-spacer />
+        <v-switch
+          v-model="navigationText"
+          style="pointer-events: none"
+          persistent-hint
+          class="mt-2"
+          inset
+        />
+      </v-card>
+      <div
+        style="width: 100%; font-weight: bold"
+        class="primary my-1 background--text text-center"
+        :style="{
+          borderRadius: `${roundTweak / 12}rem`,
+        }"
+      >
+        icon sets coming soon
+      </div>
+      <div class="d-flex flex-row">
+        <v-card
+          flat
+          class="mr-1 pa-4 d-flex flex-row align-center background"
+          :class="
+            roundTweak > 0
+              ? $vuetify.theme.dark
+                ? 'lighten-2'
+                : 'darken-2'
+              : ''
+          "
+          style="width: 100%"
+          :style="{
+            color: navigationIcons === 0 ? 'var(--v-primary-base)' : '',
+            borderRadius: `${roundTweak / 12}rem`,
+          }"
+        >
+          <!-- @click="(navigationIcons = 0), $vuetube.haptics.hapticsImpactLight(1)" -->
+          <div>MDI</div>
+          <v-spacer />
+          <v-icon class="ma-2">mdi-home</v-icon>
+          <v-icon class="ma-2">mdi-youtube-subscription</v-icon>
+          <v-icon class="ma-2">mdi-view-list</v-icon>
+        </v-card>
+        <v-card
+          flat
+          class="pa-4 d-flex flex-row align-center background"
+          :class="
+            roundTweak > 0
+              ? $vuetify.theme.dark
+                ? 'lighten-2'
+                : 'darken-2'
+              : ''
+          "
+          style="width: 100%"
+          :style="{
+            color: navigationIcons === 1 ? 'var(--v-primary-base)' : '',
+            borderRadius: `${roundTweak / 12}rem`,
+          }"
+        >
+          <!-- @click="(navigationIcons = 1), $vuetube.haptics.hapticsImpactLight(1)" -->
+          <div>Material Symbols</div>
+          <v-spacer />
+          <v-img
+            :class="$vuetify.theme.dark ? 'invert' : ''"
+            class="ma-2"
+            src="/home.svg"
+            height="22"
+            width="22"
+          />
+          <v-img
+            :class="$vuetify.theme.dark ? 'invert' : ''"
+            class="ma-2"
+            src="/subs.svg"
+            height="22"
+            width="22"
+          />
+          <v-img
+            :class="$vuetify.theme.dark ? 'invert' : ''"
+            class="ma-2"
+            src="/list.svg"
+            height="22"
+            width="22"
+          />
+        </v-card>
+      </div>
     </v-card>
   </div>
 </template>
@@ -343,6 +474,30 @@ export default {
         this.$store.commit("tweaks/setLaunchIconTheme", value);
       },
     },
+    navigationText: {
+      get() {
+        return this.$store.state.tweaks.navigationText;
+      },
+      set(value) {
+        this.$store.commit("tweaks/setNavigationText", value);
+      },
+    },
+    navigationShift: {
+      get() {
+        return this.$store.state.tweaks.navigationShift;
+      },
+      set(value) {
+        this.$store.commit("tweaks/setNavigationShift", value);
+      },
+    },
+    navigationIcons: {
+      get() {
+        return this.$store.state.tweaks.navigationIcons;
+      },
+      set(value) {
+        this.$store.commit("tweaks/setNavigationIcons", value);
+      },
+    },
   },
   mounted() {
     this.lang = this.$lang("mods").tweaks;

NUXT/plugins/languages/english.js

@@ -28,7 +28,7 @@ module.exports = {
     startup: "Startup",
     theme: "Theme",
     tweaks: "Tweaks",
-    updates: "Updates"
+    updates: "Updates",
   },
 
   index: {
@@ -55,7 +55,7 @@ module.exports = {
       language: "Language",
       backup: "Backup",
       backupinfo: "Backup or restore your application settings",
-      restore: "Restore"
+      restore: "Restore",
     },
     theme: {
       normal: "Normal",

NUXT/plugins/vuetube.js

@@ -18,10 +18,9 @@ Vue.directive("emoji", {
 let backActions;
 
 const module = {
-
   //---   Open External / Open In Browser   ---//
   openExternal(url) {
-    window.open(url, '_blank');
+    window.open(url, "_blank");
   },
 
   //---   Get GitHub Commits   ---//
@@ -130,10 +129,13 @@ const module = {
       Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), //Minutes
       Math.floor((((seconds % 31536000) % 86400) % 3600) % 60), //Seconds
     ];
-    levels = levels.filter((level, levelIndex) => level !== null || (levelIndex > 0 && levels[levelIndex - 1]));
+    levels = levels.filter(
+      (level, levelIndex) =>
+        level !== null || (levelIndex > 0 && levels[levelIndex - 1])
+    );
 
     for (let i = 1; i < levels.length; i++) {
-      if (!levels[i]) levels[i] = 0
+      if (!levels[i]) levels[i] = 0;
       levels[i] = levels[i].toString().padStart(2, "0");
     }
     // join the array into a string with : as a sepatrator
@@ -142,7 +144,6 @@ const module = {
     return returntext;
   },
   //---   End Convert Time To Human Readable String   ---//
-
 };
 
 //---   Start   ---//

NUXT/static/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 42q-1.25 0-2.125-.875T8 39V19.5q0-.7.325-1.35.325-.65.875-1.05l13-9.75q.4-.3.85-.45.45-.15.95-.15.5 0 .95.15.45.15.85.45l13 9.75q.55.4.875 1.05.325.65.325 1.35V39q0 1.25-.875 2.125T37 42h-9V28h-8v14Z"/></svg>

NUXT/static/list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M9 22.5q-1.25 0-2.125-.875T6 19.5V13q0-1.25.875-2.125T9 10h30q1.25 0 2.125.875T42 13v6.5q0 1.25-.875 2.125T39 22.5ZM9 38q-1.25 0-2.125-.875T6 35v-6.5q0-1.25.875-2.125T9 25.5h30q1.25 0 2.125.875T42 28.5V35q0 1.25-.875 2.125T39 38Z"/></svg>

NUXT/static/subs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M15.5 7q-.65 0-1.075-.425Q14 6.15 14 5.5q0-.65.425-1.075Q14.85 4 15.5 4h17q.65 0 1.075.425Q34 4.85 34 5.5q0 .65-.425 1.075Q33.15 7 32.5 7Zm-6.55 6q-.65 0-1.075-.425-.425-.425-.425-1.075 0-.65.425-1.075Q8.3 10 8.95 10h30.1q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075Q39.7 13 39.05 13ZM7 44q-1.2 0-2.1-.9Q4 42.2 4 41V19q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.2-.9 2.1-.9.9-2.1.9Zm15.7-8.15 6.85-4.6q.7-.45.7-1.25t-.7-1.25l-6.85-4.6q-.75-.5-1.55-.075t-.8 1.325v9.25q0 .9.8 1.325.8.425 1.55-.125Z"/></svg>

NUXT/store/tweaks/index.js

@@ -1,9 +1,12 @@
 export const state = () => ({
-  roundTweak: 0,
+  roundTweak: null,
   roundThumb: null,
   roundWatch: null,
   launchTheme: null,
   launchIconTheme: null,
+  navigationText: null,
+  navigationShift: null,
+  navigationIcons: null,
 });
 export const mutations = {
   initTweaks(state) {
@@ -17,6 +20,17 @@ export const mutations = {
     state.launchTheme = JSON.parse(localStorage.getItem("launchTheme")) || 0; // defaults to 0
     state.launchIconTheme =
       JSON.parse(localStorage.getItem("launchIconTheme")) === true; // defaults to false
+
+    state.navigationText = !(
+      // false if false, defaults to true
+      (JSON.parse(localStorage.getItem("navigationText")) === false)
+    );
+    state.navigationShift = !(
+      // false if false, defaults to true
+      (JSON.parse(localStorage.getItem("navigationShift")) === false)
+    );
+    state.navigationIcons =
+      JSON.parse(localStorage.getItem("navigationIcons")) || 0; // defaults to 0
   },
   setRoundTweak(state, payload) {
     if (!isNaN(payload)) {
@@ -40,4 +54,16 @@ export const mutations = {
     state.launchIconTheme = payload;
     localStorage.setItem("launchIconTheme", payload);
   },
+  setNavigationText(state, payload) {
+    state.navigationText = payload;
+    localStorage.setItem("navigationText", payload);
+  },
+  setNavigationShift(state, payload) {
+    state.navigationShift = payload;
+    localStorage.setItem("navigationShift", payload);
+  },
+  setNavigationIcons(state, payload) {
+    state.navigationIcons = payload;
+    localStorage.setItem("navigationIcons", payload);
+  },
 };