Merge pull request #148 from PickleNik/main

looks good 👍 
A lot of refactoring but overall good improvements such as VueX

NUXT/.gitignore

@@ -1,3 +1,5 @@
+#IDEs
+.vscode
 # Logs
 logs
 *.log

NUXT/components/bottomNavigation.vue

@@ -1,32 +1,47 @@
 <template>
-
   <v-bottom-navigation v-model="tabSelection" shift class="bottomNav py-4 accent2">
-    <v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link" plain v-ripple="false">
+    <v-btn
-
+      v-for="(item, i) in tabs"
+      :key="i"
+      class="navButton"
+      :to="item.link"
+      plain
+      v-ripple="false"
+    >
       <span v-text="item.name" />
-      <v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" :class="tabSelection == i ? 'tab primaryAlt' : ''" />
+      <v-icon
-
+        v-text="item.icon"
+        :color="tabSelection == i ? 'primary' : 'grey'"
+        :class="tabSelection == i ? 'tab primaryAlt' : ''"
+      />
     </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>
-
 </template>
 
-
 <script>
 export default {
   data() {
     return {
       tabSelection: 0,
       tabs: [
+        // TODO: pull from Vuex & localStorage for customizations
         { name: "Home", icon: "mdi-home", link: "/home" },
         //{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
         //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
-        { name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subscriptions" },
+        {
+          name: "Subscriptions",
+          icon: "mdi-youtube-subscription",
+          link: "/subscriptions",
+        },
         { name: "Library", icon: "mdi-view-list", link: "/library" },
+        // { name: "Settings", icon: "mdi-menu", link: "/settings" },
       ],
-    }
+    };
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
@@ -39,9 +54,7 @@ export default {
   z-index: 99999;
 }
 .navButton {
-  width: 25vw !important;
+  font-size: 0.66rem !important;
-  font-size: .66rem !important;
-  /*border-radius: 2rem !important;*/
 }
 .tab {
   padding: 0.1em 0.5em 0.1em 0.5em;

NUXT/components/topNavigation.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-card
+    style="height: 4rem !important; display: flex; box-shadow: none !important"
+    color="accent2"
+    class="topNav rounded-0 pa-3"
+  >
+    <h3 class="my-auto ml-4" v-text="page" v-show="!search" />
+
+    <v-btn icon v-if="search" class="mr-3 my-auto" @click="$emit('close-search')">
+      <v-icon>mdi-close</v-icon>
+    </v-btn>
+
+    <v-text-field
+      solo
+      dense
+      flat
+      label="Search"
+      v-model="text"
+      @input="$emit('text-changed', text)"
+      class="searchBar"
+      v-if="search"
+      v-on:keyup.enter="$emit('search-btn', text)"
+    />
+
+    <v-spacer v-if="!search" />
+
+    <v-btn
+      icon
+      tile
+      class="ml-3 my-auto fill-height"
+      style="border-radius: 0.25rem !important"
+      @click="$emit('search-btn', text)"
+      ><v-icon>mdi-magnify</v-icon></v-btn
+    >
+    <v-btn
+      icon
+      tile
+      class="ml-4 mr-2 my-auto fill-height"
+      style="border-radius: 0.25rem !important"
+      v-show="!search"
+      to="/settings"
+      ><v-icon>mdi-dots-vertical</v-icon></v-btn
+    >
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: ["search", "page"],
+  events: ["searchBtn", "textChanged", "closeSearch"],
+  data: () => ({
+    text: "",
+  }),
+};
+</script>
+
+<style scoped>
+.topNav {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 999;
+  /*border-radius: 0 0 1em 1em !important;*/
+}
+.topNavSearch {
+  margin-bottom: -10em;
+  margin-left: 2em;
+  /*transform: translateY(-2.5%);*/
+}
+.searchBar {
+  margin: 0;
+}
+.searchButton {
+  width: 100%;
+  justify-content: left !important;
+}
+</style>

NUXT/layouts/default.vue

@@ -1,68 +1,92 @@
 <template>
-  <v-app style="background: black !important;">
+  <v-app v-show="stateLoaded" style="background: black !important">
-    <v-card
+    <topNavigation
-      style="height: 4rem !important; display: flex; box-shadow: none !important;"
+      @close-search="search = !search"
-      color="accent white--text"
+      @search-btn="searchBtn"
-      class="topNav rounded-0"
+      @text-changed="textChanged"
-      >
+      :search="search"
-      <h2 v-text="page" v-show="!search" />
+      :page="page"
-
-      <v-text-field
-        label="Search"
-        v-model="text"
-        @input="textChanged"
-        class="searchBar"
-        color="white"
-        v-if="search"
-        v-on:keyup.enter="searchBtn"
     />
 
-      <v-spacer />
-
-
-      <v-btn text class="toolbarAction mr-2 fill-height" color="white" @click="searchBtn()"><v-icon>mdi-magnify</v-icon></v-btn>
-      <v-btn text class="toolbarAction fill-height" color="white" v-show="!search" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn>
-
-    </v-card>
-
-
-    <div style="height: calc(100% - 1rem); margin-top: 1rem; padding-top: 3rem; background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%); border-radius: 1rem;">
     <div
-        class="background scroll-y"
+      style="
-        style="padding: 0; height: calc(100vh - 8rem); overflow-x: hidden;"
+        height: 100%;
+        margin-top: 4rem;
+        background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%);
+      "
     >
-
+      <div
+        v-show="!search"
+        class="background"
+        style="
+          overflow: hidden;
+          height: calc(100vh - 8rem);
+          transition-duration: 0.3s;
+          transition-property: border-radius;
+        "
+        :style="{
+          borderRadius: `${roundTweak / 2}rem`,
+        }"
+      >
+        <!-- element above removes artifacting from things like v-ripple by -->
+        <!-- scrollbox below must be a standalone div -->
+        <div class="scroll-y" style="height: 100%">
           <nuxt v-show="!search" />
-        <div style="min-width: 180px;" v-if="search">
+        </div>
-          <v-list-item v-for="(item, index) in response" :key="index">
-            <v-btn text dense class="info--text searchButton text-left text-capitalize" @click="youtubeSearch(item)" v-text="item[0]" />
-          </v-list-item>
       </div>
 
+      <div
+        v-show="search"
+        class="accent2"
+        style="
+          padding: 0;
+          overflow: hidden;
+          height: calc(100vh - 4rem);
+          transition-duration: 0.3s;
+          transition-property: border-radius;
+        "
+      >
+        <div class="scroll-y" style="height: 100%">
+          <div style="min-width: 180px" v-if="search">
+            <v-list-item v-for="(item, index) in response" :key="index">
+              <v-icon>mdi-magnify</v-icon>
+              <v-btn
+                text
+                dense
+                class="info--text searchButton text-left text-capitalize"
+                @click="youtubeSearch(item)"
+                v-text="item[0]"
+              />
+            </v-list-item>
+          </div>
+        </div>
       </div>
     </div>
 
     <bottomNavigation v-if="!search" />
 
     <updateChecker />
-
   </v-app>
 </template>
 
 <style>
 * {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 .scroll-y {
   overflow-y: scroll !important; /* has to be scroll, not auto */
   -webkit-overflow-scrolling: touch !important;
 }
-html, body {
+html,
+body {
   background: black;
   overflow: hidden;
 }
 
-p, span, div {
+p,
+span,
+div {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
@@ -70,53 +94,23 @@ p, span, div {
 }
 </style>
 
-<style scoped>
-.toolbarAction {
-  min-width: 40px !important;
-}
-.topNav {
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 999;
-  /*border-radius: 0 0 1em 1em !important;*/
-}
-.topNavSearch {
-  margin-bottom: -10em;
-  margin-left: 2em;
-  /*transform: translateY(-2.5%);*/
-}
-.background {
-  height: 100%;
-  padding: 4em 0 4em 0; /* Account for Top/Bottom Novigation */
-}
-.searchBar {
-  margin: 0;
-  position: absolute;
-  transform: translateY(-10%);
-  width: 75%
-}
-.searchButton {
-  width: 100%;
-  justify-content: left !important;
-}
-</style>
-
 <script>
-import { App as CapacitorApp } from '@capacitor/app';
+import { App as CapacitorApp } from "@capacitor/app";
+import { mapState } from "vuex";
 export default {
   data: () => ({
     search: false,
-
-    text: null,
     response: [],
+    stateLoaded: false,
   }),
-
+  beforeCreate() {
+    // initializes UI tweaks to the saved state
+    this.$store.commit("tweaks/initTweaks");
+  },
   mounted() {
+    this.stateLoaded = true;
     //---   Back Button Listener   ---//
-    CapacitorApp.addListener('backButton', ({canGoBack}) => {
+    CapacitorApp.addListener("backButton", ({ canGoBack }) => {
-
       //---   Back Closes Search   ---//
       if (this.search) {
         this.search = false;
@@ -130,19 +124,22 @@ export default {
     });
   },
   computed: {
+    ...mapState({
+      roundTweak: (state) => state.tweaks.roundTweak,
+    }),
     page: function () {
       const splitPath = this.$route.path.split("/");
       let pageName = splitPath[splitPath.length - 1];
       pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
       return pageName || "Home";
-    }
+    },
   },
 
   methods: {
-    textChanged() {
+    textChanged(text) {
-      this.$youtube.autoComplete(this.text, (res) => {
+      this.$youtube.autoComplete(text, (res) => {
-        const data = res.replace(/^.*?\(/,'').replace(/\)$/,''); //Format Response
+        const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
-        this.response = JSON.parse(data)[1]
+        this.response = JSON.parse(data)[1];
       });
     },
 
@@ -151,8 +148,8 @@ export default {
       this.search = false;
     },
 
-    searchBtn() {
+    searchBtn(text) {
-      const query = this.text;
+      const query = text;
 
       if (this.search === true) {
         if (query) {
@@ -162,8 +159,7 @@ export default {
       } else {
         this.search = true;
       }
-    }
+    },
-
+  },
-  }
+};
-}
 </script>

NUXT/nuxt.config.js

@@ -69,9 +69,9 @@ export default {
         dark: {
           primary: colors.red.darken2, //colors.blue.darken2
           primaryAlt: "#533",
-          accent: "#333333",
+          accent: "#222",
-          accent2: "#33333",
+          accent2: "#222",
-          background: "#222",
+          background: "#333",
           info: "#fff",
         }
       }

NUXT/pages/mods/tweaks.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="py-1">
+    <v-card class="px-8 py-6 ma-4">
+      <h3>Layout</h3>
+      <v-switch class="mt-6" disabled label="Dense Navbars" />
+      <v-switch disabled label="Disable Top Bar" />
+      <!-- <v-switch class="mt-6" disabled label="Reverse (disabled)" /> -->
+    </v-card>
+    <v-card class="px-8 pt-6 ma-4">
+      <h3>Rounded Corners</h3>
+      <v-switch class="mt-6" disabled label="Reverse (disabled)" />
+      <v-slider
+        disabled
+        class="mr-2"
+        label="Outer (disabled)"
+        :max="4"
+        step="1"
+        thumb-size="64"
+      ></v-slider>
+      <v-slider
+        class="mr-2"
+        label="Inner"
+        v-model="roundTweak"
+        :max="4"
+        step="1"
+        thumb-size="64"
+      >
+        <template v-slot:thumb-label="{ value }">
+          <div
+            class="pa-4 white text-red red-text red--text"
+            :style="{ borderRadius: value * 3 + 'px !important' }"
+          ></div>
+        </template>
+      </v-slider>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    roundTweak: {
+      get() {
+        return this.$store.state.tweaks.roundTweak;
+      },
+      set(value) {
+        this.$store.commit("tweaks/setRoundTweak", value);
+      },
+    },
+  },
+};
+</script>

NUXT/pages/search.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="py-1">
+  <div>
-
     <center v-if="videos.length == 0">
       <v-skeleton-loader type="card-avatar, article, actions" />
       <v-skeleton-loader type="card-avatar, article, actions" />
@@ -9,11 +8,11 @@
     <v-list-item v-for="(video, index) in videos" :key="index">
       <v-card class="entry" :to="`/watch?v=${video.id}`">
         <v-card-text>
-          <div style="position: relative;">
+          <div style="position: relative">
             <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
-            <div v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff;" />
+            <div v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff" />
           </div>
-          <div v-text="video.title" style="margin-top: 0.5em;" />
+          <div v-text="video.title" style="margin-top: 0.5em" />
           <div v-text="`${video.views} • ${video.uploaded}`" />
         </v-card-text>
       </v-card>
@@ -40,15 +39,15 @@
 export default {
   data() {
     return {
-      videos: []
+      videos: [],
-    }
+    };
   },
   mounted() {
-    const searchQuestion = this.$route.query.q
+    const searchQuestion = this.$route.query.q;
     const vm = this;
     this.$youtube.search(searchQuestion, (data) => {
       vm.videos = data;
-    })
+    });
-  }
+  },
-}
+};
 </script>

NUXT/pages/settings.vue

@@ -31,7 +31,7 @@ export default {
         { name: "General", icon: "mdi-cog", to: "", disabled: true },
         { name: "Theme", icon: "mdi-brush-variant", to: "/mods/theme" },
         { name: "Player", icon: "mdi-motion-play-outline", to: "", disabled: true },
-        { name: "UI Tweaker", icon: "mdi-television-guide", to: "", disabled: true },
+        { name: "UI Tweaker", icon: "mdi-television-guide", to: "/mods/tweaks" },
         { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
         { name: "Plugins", icon: "mdi-puzzle", to: "", disabled: true},
         { name: "Updates", icon: "mdi-cloud-download-outline", to: "/mods/updates" },

NUXT/store/tweaks/index.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+    roundTweak: 0
+})
+export const mutations = {
+    initTweaks(state) {
+        // NOTE: localStorage is not reactive, so it will only be used on first load
+        // currently called beforeCreate() in pages/default.vue
+        if (process.client) {
+            state.roundTweak = localStorage.getItem("roundTweak") || 0
+        }
+    },
+    setRoundTweak (state, payload) {
+        if (!isNaN(payload)) {
+            state.roundTweak = payload
+            localStorage.setItem("roundTweak", payload)
+        }
+    }
+}

android/.idea/deploymentTargetDropDown.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetDropDown">
+    <targetSelectedWithDropDown>
+      <Target>
+        <type value="QUICK_BOOT_TARGET" />
+        <deviceKey>
+          <Key>
+            <type value="VIRTUAL_DEVICE_PATH" />
+            <value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
+          </Key>
+        </deviceKey>
+      </Target>
+    </targetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2022-03-21T20:35:21.068578Z" />
+  </component>
+</project>