Add support for i18n in more places.

This commit is contained in:
FireMasterK 2021-08-25 21:57:30 +05:30
parent 6ce9f38d15
commit 90fb99db71
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
8 changed files with 55 additions and 14 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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();
}

View file

@ -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 />

View file

@ -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>

View file

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

View file

@ -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);