From 38d552a7ac9a0ce7d3dc3d6e8f08954dd113f6e4 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Thu, 31 Mar 2022 01:20:00 -0400
Subject: [PATCH] theme fetch fix, startup progress messages, hot rebuild
 timer, disabled multiline linting rule because annoying

---
 NUXT/.eslintrc.js         |  3 +++
 NUXT/pages/index.vue      | 31 +++++++++++++++----------------
 NUXT/pages/mods/theme.vue |  1 -
 NUXT/plugins/vuetube.js   |  4 ++--
 scripts/hot.sh            |  2 +-
 5 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/NUXT/.eslintrc.js b/NUXT/.eslintrc.js
index e7109c8..b51cb5d 100644
--- a/NUXT/.eslintrc.js
+++ b/NUXT/.eslintrc.js
@@ -15,7 +15,10 @@ module.exports = {
   ],
   plugins: ["vue"],
   rules: {
+    // "max-len": "off",
+    // "vue/max-attributes-per-line": "off",
     "vue/multi-word-component-names": 0,
+    "prettier/prettier": "off",
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     // 'prettier/prettier': ['error', { semi: false }],
diff --git a/NUXT/pages/index.vue b/NUXT/pages/index.vue
index 68f3261..5e1da36 100644
--- a/NUXT/pages/index.vue
+++ b/NUXT/pages/index.vue
@@ -9,6 +9,7 @@
     />
     <div style="height: 5rem" />
     <v-progress-linear rounded height="8" indeterminate color="primary" />
+    <div class="pt-2">{{ progressMsg }}...</div>
   </center>
 </template>
 
@@ -17,6 +18,7 @@ export default {
   layout: "empty",
 
   data: () => ({
+    progressMsg: "Theming",
     themeFetched: false,
   }),
 
@@ -31,35 +33,32 @@ export default {
     // Set timeout is required for $vuetify.theme... dont ask me why -Front
     const theming = new Promise((resolve) =>
       setTimeout(() => {
-        const dark = localStorage.getItem("darkTheme");
-        let bg = null;
-        let pr = null;
-        if (dark !== null) {
-          bg = dark
-            ? localStorage.getItem("backgroundDark")
-            : localStorage.getItem("backgroundLight");
-          pr = dark
-            ? localStorage.getItem("primaryDark")
-            : localStorage.getItem("primaryLight");
-          this.$vuetify.theme.dark = dark === "true";
-          if (pr !== null) this.$vuetify.theme.currentTheme.primary = pr;
-          if (bg !== null) this.$vuetify.theme.currentTheme.background = bg;
-        }
+        this.$vuetify.theme.dark = JSON.parse(localStorage.getItem("darkTheme")) === true;
+        if (localStorage.getItem("primaryDark") != null)
+          this.$vuetify.theme.themes.dark.primary = localStorage.getItem("primaryDark");
+        if (localStorage.getItem("primaryLight") != null)
+          this.$vuetify.theme.themes.light.primary = localStorage.getItem("primaryLight");
+        if (localStorage.getItem("backgroundDark") != null)
+          this.$vuetify.theme.themes.dark.background = localStorage.getItem("backgroundDark");
+        if (localStorage.getItem("backgroundLight") != null)
+          this.$vuetify.theme.themes.light.background = localStorage.getItem("backgroundLight");
         this.themeFetched = true;
         this.$vuetube.navigationBar.setTheme(
           this.$vuetify.theme.currentTheme.background,
-          !dark
+          !this.$vuetify.theme.dark
         );
         this.$vuetube.statusBar.setTheme(
           this.$vuetify.theme.currentTheme.background,
-          dark
+          this.$vuetify.theme.dark
         );
         resolve();
       }, 0)
     );
 
     await theming;
+    this.progressMsg = "Fetching the API";
     await this.$youtube.getAPI();
+    this.progressMsg = "Navigating Home";
     this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
   },
 };
diff --git a/NUXT/pages/mods/theme.vue b/NUXT/pages/mods/theme.vue
index 20e434a..7d737db 100644
--- a/NUXT/pages/mods/theme.vue
+++ b/NUXT/pages/mods/theme.vue
@@ -177,7 +177,6 @@ export default {
         this.$vuetify.theme.dark
           ? localStorage.setItem("primaryDark", value)
           : localStorage.setItem("primaryLight", value);
-        console.log(value);
         let tempD = this.experimentalDark;
         let tempL = this.experimentalLight;
         this.$nextTick(() => {
diff --git a/NUXT/plugins/vuetube.js b/NUXT/plugins/vuetube.js
index 0b97189..933c9a0 100644
--- a/NUXT/plugins/vuetube.js
+++ b/NUXT/plugins/vuetube.js
@@ -56,11 +56,11 @@ const module = {
     async setBackground(color) {
       return await StatusBar.setBackgroundColor({ color });
     },
-    setTheme(color, dark) {
-      StatusBar.setBackgroundColor({ color });
+    async setTheme(color, dark) {
       dark
         ? StatusBar.setStyle({ style: Style.Dark })
         : StatusBar.setStyle({ style: Style.Light });
+      StatusBar.setBackgroundColor({ color });
     },
   },
 
diff --git a/scripts/hot.sh b/scripts/hot.sh
index 72c7fd5..51946e9 100755
--- a/scripts/hot.sh
+++ b/scripts/hot.sh
@@ -9,7 +9,7 @@ function hot {
     while true; do
       b=`ls -lahR $* | grep -v 'node_modules'`
       # to avoid confusing myself with nested-if - it is a "short form" of doing a=$b; eval $script if $a != $b.
-      [[ $a != $b ]] && a=$b && eval $script;
+      [[ $a != $b ]] && a=$b && eval time $script;
       sleep .5;
     done
   fi