Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-08-06 10:44:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add i18n translations. (#381)

Browse Source 
* Initial prototype.

* Add support for i18n in more places.
This commit is contained in:
Kavin
2021-08-25 22:00:21 +05:30
committed by GitHub
parent 45f132e2b4
commit 4ae77badd8
12 changed files with 169 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.vue
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>

2
src/components/LoginPage.vue
View File

@@ -46,7 +46,7 @@ export default {
}
},
activated() {
document.title = "Login - Piped";
document.title = this.$t("titles.login") + " - Piped";
},
methods: {
login() {

6
src/components/Navigation.vue
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>

2
src/components/Player.vue
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>

27
src/components/Preferences.vue
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();
}

4
src/components/TrendingPage.vue
View File

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

6
src/components/WatchVideo.vue
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>

16
src/locales/en.json Normal file
View 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
View File

@@ -0,0 +1,9 @@
{
"titles": {
"trending": "Tendances",
"login": "Connexion",
"register": "S'inscrire",
"feed": "Abonnements",
"preferences": "Préférences"
}
}

24
src/main.js
View File

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