feat: ✨ Start on Language Packs

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>
 

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",

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
   },

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>

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);
+};

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"
+  }
+}