Merge branch 'main' of https://github.com/Frontesque/VueTube into dev

NUXT/components/bottomNavigation.vue

@@ -36,7 +36,7 @@
         "
         v-text="item.icon"
       />
-      <!-- 
+      <!--
         Add the following to 'v-text- above to make the icons outlined unless active
         + (tabSelection == i ? '' : '-outline')
 
@@ -56,19 +56,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
@@ -56,9 +58,7 @@ export default {
 
     await theming;
     await this.$youtube.getAPI();
-    this.progressMsg = "Launching";
-    await this.$vuetube.launchBackHandling();
-    this.progressMsg = "Navigating";
+    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

@@ -17,6 +17,19 @@
   </div>
 </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;
+}
+</style>
+
 <script>
 export default {
   data() {
@@ -24,8 +37,17 @@ export default {
       devClicks: 0,
 
       settingsItems: [
-        { name: "General", icon: "mdi-cog", to: "", disabled: true },
-        { name: "Theme", icon: "mdi-brush-variant", to: "/mods/theme" },
+        {
+          name: "General",
+          icon: "mdi-cog",
+          to: "",
+          disabled: true,
+        },
+        {
+          name: "Theme",
+          icon: "mdi-brush-variant",
+          to: "/mods/theme",
+        },
         {
           name: "Player",
           icon: "mdi-motion-play-outline",
@@ -37,10 +59,15 @@ export default {
           icon: "mdi-television-guide",
           to: "/mods/tweaks",
         },
-        { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
+        {
+          name: "Startup Options",
+          icon: "mdi-restart",
+          to: "/mods/startup",
+        },
         {
           name: "Plugins",
           icon: "mdi-puzzle",
+          to: "",
           to: "/mods/plugins",
           disabled: true,
         },
@@ -49,11 +76,32 @@ export default {
           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" },
+        {
+          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++;

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