From 4ae77badd8c2ae0f46191cf3620cc96fbf026a4c Mon Sep 17 00:00:00 2001 From: Kavin <20838718+FireMasterK@users.noreply.github.com> Date: Wed, 25 Aug 2021 22:00:21 +0530 Subject: [PATCH] Add i18n translations. (#381) * Initial prototype. * Add support for i18n in more places. --- package.json | 1 + src/App.vue | 13 ++++++ src/components/LoginPage.vue | 2 +- src/components/Navigation.vue | 6 +-- src/components/Player.vue | 2 +- src/components/Preferences.vue | 27 +++++++++-- src/components/TrendingPage.vue | 4 +- src/components/WatchVideo.vue | 6 +-- src/locales/en.json | 16 +++++++ src/locales/fr.json | 9 ++++ src/main.js | 24 ++++++++-- yarn.lock | 81 +++++++++++++++++++++++++++++++-- 12 files changed, 169 insertions(+), 22 deletions(-) create mode 100644 src/locales/en.json create mode 100644 src/locales/fr.json diff --git a/package.json b/package.json index 92c82d3f..c37f73a8 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "shaka-player": "3.2.0", "uikit": "3.7.2", "vue": "^3.1.5", + "vue-i18n": "^9.1.7", "vue-router": "^4.0.11", "xml-js": "^1.6.11" }, diff --git a/src/App.vue b/src/App.vue index 66a70eb1..8f026b62 100644 --- a/src/App.vue +++ b/src/App.vue @@ -58,6 +58,19 @@ export default { window.db = e.target.result; }; } else console.log("This browser doesn't support IndexedDB"); + + const App = this; + + (async function() { + const locale = App.getPreferenceString("hl", "en"); + if (window.i18n.global.locale.value !== locale) { + if (!window.i18n.global.availableLocales.includes(locale)) { + const messages = await import("@/locales/" + locale + ".json").then(module => module.default); + window.i18n.global.setLocaleMessage(locale, messages); + } + window.i18n.global.locale.value = locale; + } + })(); }, }; diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue index 66862fb6..795a63a1 100644 --- a/src/components/LoginPage.vue +++ b/src/components/LoginPage.vue @@ -46,7 +46,7 @@ export default { } }, activated() { - document.title = "Login - Piped"; + document.title = this.$t("titles.login") + " - Piped"; }, methods: { login() { diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue index 7e0a7edb..686f2a28 100644 --- a/src/components/Navigation.vue +++ b/src/components/Navigation.vue @@ -32,16 +32,16 @@ Preferences
  • - Login +
  • - Register +
  • History
  • - Feed +
    • diff --git a/src/components/Player.vue b/src/components/Player.vue index e92cec74..40af2be2 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -307,7 +307,7 @@ export default { this.player = undefined; } if (this.hotkeys) this.hotkeys.unbind(); - this.$refs.container.querySelectorAll("div").forEach(node => node.remove()); + if (this.$refs.container) this.$refs.container.querySelectorAll("div").forEach(node => node.remove()); }, }; diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue index c15b1da1..501550c5 100644 --- a/src/components/Preferences.vue +++ b/src/components/Preferences.vue @@ -3,7 +3,7 @@ -

    Preferences

     +

    @@ -92,6 +92,12 @@ Store Watch History
    +
    + Language Selection +
    +

    Instances List

    @@ -152,10 +158,15 @@ export default { showComments: true, minimizeDescription: false, watchHistory: false, + selectedLanguage: "en", + languages: [ + { code: "en", name: "English" }, + { code: "fr", name: "French" }, + ], }; }, activated() { - document.title = "Preferences - Piped"; + document.title = this.$t("titles.preferences") + " - Piped"; }, mounted() { if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} }); @@ -179,6 +190,13 @@ export default { cdn: split[3].trim(), }); } + if (this.instances.filter(instance => instance.apiurl == this.apiUrl()).length > 0) + this.instances.push({ + name: "Custom Instance", + apiurl: this.apiUrl(), + locations: "Unknown", + cdn: "Unknown", + }); }); }); @@ -229,6 +247,7 @@ export default { this.showComments = this.getPreferenceBoolean("comments", true); this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false); this.watchHistory = this.getPreferenceBoolean("watchHistory", false); + this.selectedLanguage = this.getPreferenceString("hl", "en"); } }, methods: { @@ -238,7 +257,8 @@ export default { if ( this.getPreferenceString("theme", "dark") !== this.selectedTheme || - this.getPreferenceBoolean("watchHistory", false) != this.watchHistory + this.getPreferenceBoolean("watchHistory", false) != this.watchHistory || + this.getPreferenceString("hl", "en") !== this.selectedLanguage ) shouldReload = true; @@ -265,6 +285,7 @@ export default { localStorage.setItem("comments", this.showComments); localStorage.setItem("minimizeDescription", this.minimizeDescription); localStorage.setItem("watchHistory", this.watchHistory); + localStorage.setItem("hl", this.selectedLanguage); if (shouldReload) window.location.reload(); } diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue index 77d16e14..5f0b939e 100644 --- a/src/components/TrendingPage.vue +++ b/src/components/TrendingPage.vue @@ -1,5 +1,5 @@