Add support for i18n in more places.

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;
+            }
+        })();
     },
 };
 </script>

src/components/Navigation.vue

@@ -32,16 +32,16 @@
                     <router-link to="/preferences">Preferences</router-link>
                 </li>
                 <li v-if="shouldShowLogin">
-                    <router-link to="/login">Login</router-link>
+                    <router-link to="/login" v-t="'titles.login'" />
                 </li>
                 <li v-if="shouldShowLogin">
-                    <router-link to="/register">Register</router-link>
+                    <router-link to="/register" v-t="'titles.register'" />
                 </li>
                 <li v-if="shouldShowHistory">
                     <router-link to="/history">History</router-link>
                 </li>
                 <li v-if="authenticated">
-                    <router-link to="/feed">Feed</router-link>
+                    <router-link to="/feed" v-t="'titles.feed'" />
                 </li>
             </ul>
         </div>

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());
     },
 };
 </script>

src/components/Preferences.vue

@@ -3,7 +3,7 @@
         <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
             <font-awesome-icon icon="chevron-left" /> &nbsp;Back
         </button>
-        <span><h1 class="uk-text-bold uk-text-center">Preferences</h1></span>
+        <span><h1 class="uk-text-bold uk-text-center" v-t="'titles.preferences'"/></span>
         <span />
     </div>
     <hr />
@@ -92,6 +92,12 @@
     <b>Store Watch History</b>
     <br />
     <input class="uk-checkbox" v-model="watchHistory" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Language Selection</b>
+    <br />
+    <select class="uk-select uk-width-auto" v-model="selectedLanguage" @change="onChange($event)">
+        <option :key="language.code" v-for="language in languages" :value="language.code">{{ language.name }}</option>
+    </select>
     <h2>Instances List</h2>
     <table class="uk-table">
         <thead>
@@ -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();
             }

src/components/TrendingPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 class="uk-text-bold uk-text-center">{{ $t("titles.trending") }}</h1>
+    <h1 class="uk-text-bold uk-text-center" v-t="'titles.trending'" />
 
     <hr />
 

src/components/WatchVideo.vue

@@ -42,7 +42,7 @@
                     class="uk-margin-small-left uk-button uk-button-small"
                     style="background: #222"
                 >
-                    <b>Watch on&nbsp;</b>
+                    <b>{{ $t("player.watch_on") }}&nbsp;</b>
                     <font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
                 </a>
                 <a
@@ -51,7 +51,7 @@
                     class="uk-margin-small-left uk-button uk-button-small"
                     style="background: #222"
                 >
-                    <b>Watch on LBRY</b>
+                    <b>{{ $t("player.watch_on") }} LBRY</b>
                 </a>
             </div>
 
@@ -68,7 +68,7 @@
                     style="background: #222"
                     type="button"
                 >
-                    {{ subscribed ? "Unsubscribe" : "Subscribe" }}
+                    {{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
                 </button>
             </div>
 

src/locales/en.json

@@ -5,5 +5,12 @@
         "register": "Register",
         "feed": "Feed",
         "preferences": "Preferences"
+    },
+    "player": {
+        "watch_on": "Watch on"
+    },
+    "actions": {
+        "subscribe": "Subscribe",
+        "unsubscribe": "Unsubscribe"
     }
 }

src/main.js

@@ -107,7 +107,7 @@ const mixin = {
         getPreferenceBoolean(key, defaultVal) {
             var value;
             if (
-                (value = this.$route.query[key]) !== undefined ||
+                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
                 (localStorage && (value = localStorage.getItem(key)) !== null)
             ) {
                 switch (String(value).toLowerCase()) {
@@ -124,7 +124,7 @@ const mixin = {
         getPreferenceString(key, defaultVal) {
             var value;
             if (
-                (value = this.$route.query[key]) !== undefined ||
+                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
                 (localStorage && (value = localStorage.getItem(key)) !== null)
             ) {
                 return value;
@@ -133,7 +133,7 @@ const mixin = {
         getPreferenceNumber(key, defaultVal) {
             var value;
             if (
-                (value = this.$route.query[key]) !== undefined ||
+                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
                 (localStorage && (value = localStorage.getItem(key)) !== null)
             ) {
                 return Number(value);