feat: ✨ First Time Setup Screen

NUXT/components/Settings/language.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-select v-model="selectedLang" background-color="background" :items="langs" label="App Language" solo></v-select>
+</template>
+
+<script>
+  export default {
+
+    data() {
+      return {
+        langs: [],
+        lang: { mods: { general: { language: "" } } },
+        selectedLang: null
+      };
+    },
+
+    watch: {
+      //---   Update Stored Language Value   ---//
+      selectedLang: function (newVal) {
+        const langs = this.$lang(null, true);
+        let lang = new String();
+        for (const i in langs) {
+          if (langs[i].name == newVal) {
+            lang = i;
+            console.log(lang)
+          }
+        }
+        localStorage.setItem("language", lang);
+      },
+      //---   End Update Stored Language Value   ---//
+    },
+
+    mounted() {
+      const lang = this.$lang(); this.lang = lang.mods.general;
+      const langs = this.$lang(null, true);
+      for (const i in langs) {
+        this.langs.push(langs[i].name);
+      }
+
+      this.selectedLang = this.$lang().name;
+    }
+  };
+
+</script>

NUXT/pages/activities/install.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="container">
-    <center>
+<div>
+    <center class="container" ref="stage0">
         <v-img
             src="/icon.svg"
             width="10rem"
@@ -9,22 +9,79 @@
         />
         <h1>{{ lang.welcome }}</h1>
         <p>{{ lang.tagline }}</p>
-        <v-btn class="rounded-xl primary">{{ lang.next }} <v-icon style="margin-left: 0.5em;">mdi-arrow-right</v-icon></v-btn>
     </center>
+
+    <center class="container hidden" ref="stage1">
+        <h1>{{ lang.langsetup }}</h1>
+        <language style="width: 80%;" />
+    </center>
+
+    <center class="container hidden" ref="stage2">
+        <h1>{{ lang.featuresetup }}</h1>
+        <v-checkbox disabled v-model="ryd" :label="lang.enableryd" />
+        <v-checkbox disabled v-model="sponsorBlock" :label="lang.enablespb" />
+    </center>
+
+    <center class="container hidden" ref="stage3">
+        <h1>{{ lang.thanks }}</h1>
+        <h3>{{ lang.enjoy }}</h3>
+    </center>
+
+    <v-btn @click="next()" class="rounded-xl primary nextButton">{{ lang.next }} <v-icon style="margin-left: 0.5em;">mdi-arrow-right</v-icon></v-btn>
 </div>
 </template>
 
-<script>
-export default {
-    layout: "empty",
+<style scoped>
+.nextButton {
+    position: absolute;
+    bottom: 1em;
+    right: 2em;
+}
 
+.hidden {
+    display: none;
+}
+
+.fullWidth {
+    width: 100%;
+}
+
+.container {
+    width: 100%;
+}
+</style>
+
+<script>
+import language from '~/components/Settings/language.vue';
+  export default {
+    layout: "empty",
+    components: {
+      language
+    },
     data() {
         return {
-            lang: {}
+            lang: {},
+            stage: 0,
+
+            ryd: true,
+            sponsorBlock: true,
         }
     },
     mounted() {
         this.lang = this.$lang("events");
+    },
+    methods: {
+        next() {
+            this.$refs["stage"+this.stage].style.display = "none";
+            this.stage++;
+
+            if (!this.$refs["stage"+this.stage]) {
+                localStorage.setItem("firstTimeSetupComplete", true)
+                this.$router.replace('/');
+            }
+
+            this.$refs["stage"+this.stage].style.display = "block";
+        }
     }
 }
 </script>

NUXT/pages/index.vue

@@ -30,7 +30,12 @@ export default {
     await this.$vuetube.launchBackHandling();
     this.progressMsg = this.$lang("index").launching;
 
-    this.$router.replace('/'+ (localStorage.getItem("startPage") || "home") ); // Prevent user from navigating back to the splash screen
+    if (localStorage.getItem("firstTimeSetupComplete")) {
+      this.$router.replace('/'+ (localStorage.getItem("startPage") || "home") ); // Normal Load
+    } else {
+      this.$router.replace('/activities/install'); // Load Into Setup
+    }
+    
   },
   methods: {
     theming() { return new Promise((resolve) =>

NUXT/pages/mods/general.vue

@@ -3,15 +3,18 @@
     <v-card flat class="pb-5 background" :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
       <v-card-title>{{ lang.language }}</v-card-title>
       <v-card-text>
-        <v-select v-model="selectedLang" background-color="background" :items="langs" label="App Language" solo></v-select>
+        <language />
       </v-card-text>
     </v-card>
   </div>
 </template>
 
 <script>
+import language from '~/components/Settings/language.vue';
   export default {
-
+    components: {
+      language
+    },
     computed: {
       roundTweak() {
         return this.$store.state.tweaks.roundTweak;
@@ -20,39 +23,12 @@
 
     data() {
       return {
-        langs: [],
         lang: { mods: { general: { language: "" } } },
-        selectedLang: null
       };
     },
 
-    watch: {
-      //---   Update Stored Language Value   ---//
-      selectedLang: function (newVal) {
-        const langs = this.$lang(null, true);
-        let lang = new String();
-        for (const i in langs) {
-          if (langs[i].name == newVal) {
-            lang = i;
-            console.log(lang)
-          }
-        }
-        localStorage.setItem("language", lang);
-      },
-      //---   End Update Stored Language Value   ---//
-    },
-
     mounted() {
       const lang = this.$lang(); this.lang = lang.mods.general;
-      const langs = this.$lang(null, true);
-      for (const i in langs) {
-        this.langs.push(langs[i].name);
-      }
-
-      this.selectedLang = this.$lang().name;
-
-
-      
     }
   };
 
@@ -66,5 +42,4 @@
   section {
     padding: 0 1em 1em 1em;
   }
-
 </style>

NUXT/plugins/languages/english.js

@@ -9,6 +9,7 @@ module.exports = {
 
   index: {
     connecting: "Connecting",
+    plugins: "Loading Plugins",
     launching: "Launching"
   },
 
@@ -77,7 +78,13 @@ module.exports = {
     tagline: "The future of video streaming",
     next: "Next",
     updated: "VueTube Was Updated!",
-    awesome: "Awesome!"
+    awesome: "Awesome!",
+    langsetup: "Let's Pick a Language!",
+    featuresetup: "Let's Pick Some Features!",
+    enableryd: "Enable Return YouTube Dislike",
+    enablespb: "Enable SponsorBlock",
+    thanks: "Thanks for Using VueTube",
+    enjoy: "We hope you have an amazing experience"
   }