160 lines
No EOL
3.9 KiB
Vue
160 lines
No EOL
3.9 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-main>
|
|
<router-view />
|
|
|
|
<!-- Loading indicator -->
|
|
<v-container
|
|
fluid
|
|
fill-height
|
|
style="
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
"
|
|
v-if="loading"
|
|
>
|
|
<v-row align="center" justify="center">
|
|
<v-col class="text-center">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="primary"
|
|
></v-progress-circular>
|
|
<div>{{ $t("menu.loading", { appName: appName }) }}</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
import stickers from "./plugins/stickers";
|
|
|
|
export default {
|
|
name: "App",
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
};
|
|
},
|
|
beforeMount() {
|
|
if (!this.$store.state.language) {
|
|
// No language set, default to browser language?
|
|
var browserLang = (
|
|
navigator.language ||
|
|
navigator.userLanguage ||
|
|
""
|
|
).toLowerCase();
|
|
if (this.$i18n.messages[browserLang]) {
|
|
this.$store.commit("setLanguage", browserLang);
|
|
} else if (browserLang.includes("-")) {
|
|
// Try with language name only.
|
|
let lang = browserLang.split("-")[0];
|
|
if (this.$i18n.messages[lang]) {
|
|
this.$store.commit("setLanguage", lang);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Set language
|
|
this.$i18n.locale = this.$store.state.language || "en";
|
|
},
|
|
mounted() {
|
|
if (
|
|
window.location.protocol == "http" &&
|
|
!window.location.hostname.endsWith(".onion")
|
|
) {
|
|
// Redirect to HTTPS
|
|
window.location.href = window.location.href.replace("http:", "https:");
|
|
return;
|
|
}
|
|
if (this.currentUser) {
|
|
this.$matrix
|
|
.login(this.currentUser)
|
|
.then(() => {
|
|
console.log("Matrix client ready");
|
|
})
|
|
.catch((error) => {
|
|
console.log("Error creating client", error);
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
} else {
|
|
this.loading = false;
|
|
}
|
|
this.$config.promise.then(this.onConfigLoaded);
|
|
},
|
|
methods: {
|
|
onConfigLoaded(config) {
|
|
if (config.shortCodeStickers) {
|
|
stickers.loadStickersFromConfig(config);
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
currentUser() {
|
|
return this.$store.state.auth.user;
|
|
},
|
|
appName() {
|
|
var translated = undefined;
|
|
if (this.$config.appNames) {
|
|
translated = this.$config.appNames[this.$i18n.locale];
|
|
}
|
|
return translated || this.$config.appName;
|
|
},
|
|
title() {
|
|
var title = this.appName;
|
|
if (this.$matrix.notificationCount > 0) {
|
|
title += " [" + this.$matrix.notificationCount + "]";
|
|
}
|
|
if (this.$route.meta.title) {
|
|
title += " - " + this.$route.meta.title;
|
|
}
|
|
if (this.$route.meta.includeRoom) {
|
|
if (this.$matrix.currentRoom) {
|
|
title +=
|
|
" - " +
|
|
(this.$matrix.currentRoom.name || this.$matrix.currentRoom.roomId);
|
|
} else if (this.$matrix.currentRoomId) {
|
|
title += " - " + this.$matrix.currentRoomId;
|
|
}
|
|
}
|
|
return title;
|
|
},
|
|
},
|
|
watch: {
|
|
"$i18n.locale": {
|
|
handler(val) {
|
|
// Locale changed, check file if RTL
|
|
var isRTL = this.$i18n.messages[val].language_is_rtl || false;
|
|
if (isRTL) {
|
|
this.$vuetify.rtl = true;
|
|
document.documentElement.setAttribute("dir", "rtl");
|
|
} else {
|
|
this.$vuetify.rtl = false;
|
|
document.documentElement.removeAttribute("dir");
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
title: {
|
|
handler(title) {
|
|
document.title = title;
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.copyright {
|
|
font-size: 10px;
|
|
}
|
|
</style> |