mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Add i18n translations. (#381)
* Initial prototype. * Add support for i18n in more places.
This commit is contained in:
Kavin
GitHub
parent
45f132e2b4
commit
4ae77badd8
12 changed files with 169 additions and 22 deletions
13
src/App.vue
13
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>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default {
|
|||
}
|
||||
},
|
||||
activated() {
|
||||
document.title = "Login - Piped";
|
||||
document.title = this.$t("titles.login") + " - Piped";
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
|
||||
<font-awesome-icon icon="chevron-left" /> 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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<h1 class="uk-text-bold uk-text-center">Trending</h1>
|
||||
<h1 class="uk-text-bold uk-text-center" v-t="'titles.trending'" />
|
||||
|
||||
<hr />
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
});
|
||||
},
|
||||
activated() {
|
||||
document.title = "Trending - Piped";
|
||||
document.title = this.$t("titles.trending") + " - Piped";
|
||||
if (this.videos.length > 0) this.updateWatched(this.videos);
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
class="uk-margin-small-left uk-button uk-button-small"
|
||||
style="background: #222"
|
||||
>
|
||||
<b>Watch on </b>
|
||||
<b>{{ $t("player.watch_on") }} </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>
|
||||
|
||||
|
|
|
|||
16
src/locales/en.json
Normal file
16
src/locales/en.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"titles": {
|
||||
"trending": "Trending",
|
||||
"login": "Login",
|
||||
"register": "Register",
|
||||
"feed": "Feed",
|
||||
"preferences": "Preferences"
|
||||
},
|
||||
"player": {
|
||||
"watch_on": "Watch on"
|
||||
},
|
||||
"actions": {
|
||||
"subscribe": "Subscribe",
|
||||
"unsubscribe": "Unsubscribe"
|
||||
}
|
||||
}
|
||||
9
src/locales/fr.json
Normal file
9
src/locales/fr.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"titles": {
|
||||
"trending": "Tendances",
|
||||
"login": "Connexion",
|
||||
"register": "S'inscrire",
|
||||
"feed": "Abonnements",
|
||||
"preferences": "Préférences"
|
||||
}
|
||||
}
|
||||
24
src/main.js
24
src/main.js
|
|
@ -42,6 +42,9 @@ import en from "javascript-time-ago/locale/en";
|
|||
|
||||
TimeAgo.addDefaultLocale(en);
|
||||
|
||||
import { createI18n } from "vue-i18n";
|
||||
import enLocale from "@/locales/en.json";
|
||||
|
||||
const timeAgo = new TimeAgo("en-US");
|
||||
|
||||
import("./registerServiceWorker");
|
||||
|
|
@ -104,10 +107,10 @@ 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)) {
|
||||
switch (String(value).toLowerCase()) {
|
||||
case "true":
|
||||
case "1":
|
||||
case "on":
|
||||
|
|
@ -121,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;
|
||||
|
|
@ -130,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);
|
||||
|
|
@ -202,7 +205,20 @@ const mixin = {
|
|||
},
|
||||
};
|
||||
|
||||
const i18n = createI18n({
|
||||
globalInjection: true,
|
||||
legacy: false,
|
||||
locale: "en",
|
||||
fallbackLocale: "en",
|
||||
messages: {
|
||||
en: enLocale,
|
||||
},
|
||||
});
|
||||
|
||||
window.i18n = i18n;
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(i18n);
|
||||
app.use(router);
|
||||
app.mixin(mixin);
|
||||
app.component("font-awesome-icon", FontAwesomeIcon);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue