From 06c2737694c2d1e5c686430257e63aeb84dd7553 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Thu, 5 May 2022 23:11:28 -0400
Subject: [PATCH] feat: :sparkles: Start on Language Packs

---
 NUXT/components/bottomNavigation.vue |  15 ++-
 NUXT/nuxt.config.js                  |   1 +
 NUXT/pages/index.vue                 |   6 +-
 NUXT/pages/settings.vue              | 143 +++++++++++++++++----------
 NUXT/plugins/language.js             |  12 +++
 NUXT/plugins/languages/english.js    |  26 +++++
 6 files changed, 144 insertions(+), 59 deletions(-)
 create mode 100644 NUXT/plugins/language.js
 create mode 100644 NUXT/plugins/languages/english.js

diff --git a/NUXT/components/bottomNavigation.vue b/NUXT/components/bottomNavigation.vue
index 52c90c5..a126fb9 100644
--- a/NUXT/components/bottomNavigation.vue
+++ b/NUXT/components/bottomNavigation.vue
@@ -35,7 +35,7 @@
         "
         v-text="item.icon"
       />
-      <!-- 
+      <!--
         Add the following to 'v-text- above to make the icons outlined unless active
         + (tabSelection == i ? '' : '-outline')
 
@@ -55,19 +55,26 @@ export default {
       tabSelection: 0,
       tabs: [
         // TODO: pull from Vuex & localStorage for customizations
-        { name: "Home", icon: "mdi-home", link: "/home" },
+        { name: "...", icon: "mdi-home", link: "/home" },
         //{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
         //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
         {
-          name: "Subscriptions",
+          name: "...",
           icon: "mdi-youtube-subscription",
           link: "/subscriptions",
         },
-        { name: "Library", icon: "mdi-view-list", link: "/library" },
+        { name: "...", icon: "mdi-view-list", link: "/library" },
         // { name: "Settings", icon: "mdi-menu", link: "/settings" },
       ],
     };
   },
+
+  mounted() {
+    this.tabs[0].name =  this.$lang('global').home;
+    this.tabs[1].name =  this.$lang('global').subscriptions;
+    this.tabs[2].name =  this.$lang('global').library;
+  }
+
 };
 </script>
 
diff --git a/NUXT/nuxt.config.js b/NUXT/nuxt.config.js
index 8f1026e..2525775 100644
--- a/NUXT/nuxt.config.js
+++ b/NUXT/nuxt.config.js
@@ -17,6 +17,7 @@ export default {
     { src: "~/plugins/vuetube", mode: "client" },
     { src: "~/plugins/ryd", mode: "client" },
     { src: "~/plugins/thirdPartyPluginLoader", mode: "client" },
+    { src: "~/plugins/language", mode: "client" },
   ],
   generate: {
     dir: "../dist",
diff --git a/NUXT/pages/index.vue b/NUXT/pages/index.vue
index 2256726..85b4eb6 100644
--- a/NUXT/pages/index.vue
+++ b/NUXT/pages/index.vue
@@ -18,9 +18,11 @@ export default {
   layout: "empty",
 
   data: () => ({
-    progressMsg: "Connecting",
+    progressMsg: "...",
   }),
   async mounted() {
+    this.progressMsg = this.$lang('index').connecting;
+
     this.$store.commit("tweaks/initTweaks");
     const theming = new Promise((resolve) =>
       // Set timeout is required for $vuetify.theme... dont ask me why -Front
@@ -53,7 +55,7 @@ export default {
 
     await theming;
     await this.$youtube.getAPI();
-    this.progressMsg = "Launching";
+    this.progressMsg = this.$lang('index').launching;
 
     this.$router.replace(`/${localStorage.getItem("startPage") || "home"}`); // Prevent user from navigating back to the splash screen
   },
diff --git a/NUXT/pages/settings.vue b/NUXT/pages/settings.vue
index 7c15fcb..5be936c 100644
--- a/NUXT/pages/settings.vue
+++ b/NUXT/pages/settings.vue
@@ -1,12 +1,7 @@
 <template>
   <div style="padding-top: 1em">
     <v-list-item v-for="(item, index) in settingsItems" :key="index">
-      <v-btn
-        text
-        class="entry text-left text-capitalize"
-        :to="item.to"
-        :disabled="item.disabled"
-      >
+      <v-btn text class="entry text-left text-capitalize" :to="item.to" :disabled="item.disabled">
         <v-icon size="30px" class="icon" v-text="item.icon" />
         {{ item.name }}
       </v-btn>
@@ -18,56 +13,98 @@
 </template>
 
 <style scoped>
-.entry {
-  width: 100%;
-  font-size: 1.2em;
-  justify-content: left !important;
-  padding: 1.5em 0.5em 1.5em 0.5em !important;
-}
-.icon {
-  margin-right: 0.5em;
-}
+  .entry {
+    width: 100%;
+    font-size: 1.2em;
+    justify-content: left !important;
+    padding: 1.5em 0.5em 1.5em 0.5em !important;
+  }
+
+  .icon {
+    margin-right: 0.5em;
+  }
+
 </style>
 
 <script>
-export default {
-  data() {
-    return {
-      devClicks: 0,
+  export default {
+    data() {
+      return {
+        devClicks: 0,
 
-      settingsItems: [
-        { 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: "/mods/tweaks",
-        },
-        { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
-        { name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins", disabled: true },
-        {
-          name: "Updates",
-          icon: "mdi-cloud-download-outline",
-          to: "/mods/updates",
-        },
-        { name: "Logs", icon: "mdi-text-box-outline", to: "/mods/logs" },
-        { name: "About", icon: "mdi-information-outline", to: "/mods/about" },
-      ],
-    };
-  },
-  methods: {
-    dev() {
-      this.devClicks++;
-      if (this.devClicks >= 6) {
-        this.$router.push("/mods/developer");
-      }
+        settingsItems: [{
+            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: "/mods/tweaks",
+          },
+          {
+            name: "Startup Options",
+            icon: "mdi-restart",
+            to: "/mods/startup"
+          },
+          {
+            name: "Plugins",
+            icon: "mdi-puzzle",
+            to: "",
+            to: "/mods/plugins",
+            disabled: true
+          },
+          {
+            name: "Updates",
+            icon: "mdi-cloud-download-outline",
+            to: "/mods/updates",
+          },
+          {
+            name: "Logs",
+            icon: "mdi-text-box-outline",
+            to: "/mods/logs"
+          },
+          {
+            name: "About",
+            icon: "mdi-information-outline",
+            to: "/mods/about"
+          },
+        ],
+      };
     },
-  },
-};
+
+    mounted() {
+      this.settingsItems[0].name = this.$lang('settings').general;
+      this.settingsItems[1].name = this.$lang('settings').theme;
+      this.settingsItems[2].name = this.$lang('settings').player;
+      this.settingsItems[3].name = this.$lang('settings').uitweaker;
+      this.settingsItems[4].name = this.$lang('settings').startupoptions;
+      this.settingsItems[5].name = this.$lang('settings').plugins;
+      this.settingsItems[6].name = this.$lang('settings').updates;
+      this.settingsItems[7].name = this.$lang('settings').logs;
+      this.settingsItems[8].name = this.$lang('settings').about;
+    },
+
+    methods: {
+      dev() {
+        this.devClicks++;
+        if (this.devClicks >= 6) {
+          this.$router.push("/mods/developer");
+        }
+      },
+    },
+  };
+
 </script>
diff --git a/NUXT/plugins/language.js b/NUXT/plugins/language.js
new file mode 100644
index 0000000..2661877
--- /dev/null
+++ b/NUXT/plugins/language.js
@@ -0,0 +1,12 @@
+function module(text) {
+  const selectedLanguage = localStorage.getItem(text) || "english";
+  const languagePack = require('./languages/'+selectedLanguage);
+
+  if (!text) return languagePack;
+  return languagePack[text];
+
+}
+
+export default ({ app }, inject) => {
+  inject("lang", module);
+};
diff --git a/NUXT/plugins/languages/english.js b/NUXT/plugins/languages/english.js
new file mode 100644
index 0000000..47e1669
--- /dev/null
+++ b/NUXT/plugins/languages/english.js
@@ -0,0 +1,26 @@
+module.exports = {
+  name: "English",
+
+  global: {
+    home: "Home",
+    subscriptions: "Subscriptions",
+    library: "Libraary"
+  },
+
+  index: {
+    connecting: "Connecting",
+    launching: "Launching"
+  },
+
+  settings: {
+    general: "General",
+    theme: "Theme",
+    player: "Player",
+    uitweaker: "UI Tweaker",
+    startupoptions: "Startup Options",
+    plugins: "Plugins",
+    updates: "Updates",
+    logs: "Logs",
+    about: "About"
+  }
+}