enhance(client): サーバーから切断されたときにダイアログで警告を表示できるように

This commit is contained in:
syuilo 2020-08-19 21:47:18 +09:00
parent 6870262f8d
commit c34f302b1c
5 changed files with 35 additions and 18 deletions

View File

@ -264,6 +264,7 @@ rename: "名前を変更"
avatar: "アイコン"
banner: "バナー"
nsfw: "閲覧注意"
whenServerDisconnected: "サーバーとの接続が失われたとき"
disconnectedFromServer: "サーバーから切断されました"
reload: "リロード"
doNothing: "なにもしない"
@ -364,7 +365,6 @@ unregister: "登録を解除"
passwordLessLogin: "パスワード無しログイン"
resetPassword: "パスワードをリセット"
newPasswordIs: "新しいパスワードは「{password}」です"
autoReloadWhenDisconnected: "サーバー切断時に自動リロード"
autoNoteWatch: "ノートの自動ウォッチ"
autoNoteWatchDescription: "あなたがリアクションしたり返信したりした他のユーザーのノートに関する通知を受け取るようにします。"
reduceUiAnimation: "UIのアニメーションを減らす"
@ -567,6 +567,11 @@ database: "データベース"
channel: "チャンネル"
create: "作成"
_serverDisconnectedBehavior:
reload: "自動でリロード"
dialog: "ダイアログで警告"
quiet: "控えめに警告"
_channel:
create: "チャンネルを作成"
edit: "チャンネルを編集"

View File

@ -1,5 +1,5 @@
<template>
<div class="nsbbhtug" v-if="hasDisconnected" @click="resetDisconnected">
<div class="nsbbhtug" v-if="hasDisconnected && $store.state.device.serverDisconnectedBehavior === 'quiet'" @click="resetDisconnected">
<div>{{ $t('disconnectedFromServer') }}</div>
<div class="command">
<button class="_textButton" @click="reload">{{ $t('reload') }}</button>
@ -23,21 +23,12 @@ export default Vue.extend({
},
},
created() {
this.$root.stream.on('_connected_', this.onConnected);
this.$root.stream.on('_disconnected_', this.onDisconnected);
},
beforeDestroy() {
this.$root.stream.off('_connected_', this.onConnected);
this.$root.stream.off('_disconnected_', this.onDisconnected);
},
methods: {
onConnected() {
if (this.hasDisconnected) {
if (this.$store.state.device.autoReload) {
this.reload();
}
}
},
onDisconnected() {
this.hasDisconnected = true;
},

View File

@ -237,6 +237,26 @@ os.init(async () => {
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true });
let reloadDialogShowing = false;
os.stream.on('_disconnected_', async () => {
if (store.state.device.serverDisconnectedBehavior === 'reload') {
location.reload();
} else if (store.state.device.serverDisconnectedBehavior === 'dialog') {
if (reloadDialogShowing) return;
reloadDialogShowing = true;
const { canceled } = await app.dialog({
type: 'warning',
title: app.$t('disconnectedFromServer'),
text: app.$t('reloadConfirm'),
showCancelButton: true
});
reloadDialogShowing = false;
if (!canceled) {
location.reload();
}
}
});
os.stream.on('emojiAdded', data => {
// TODO
//store.commit('instance/set', );

View File

@ -95,9 +95,10 @@
<section class="_card _vMargin">
<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
<div class="_content">
<mk-switch v-model="autoReload">
{{ $t('autoReloadWhenDisconnected') }}
</mk-switch>
<div>{{ $t('whenServerDisconnected') }}</div>
<mk-radio v-model="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</mk-radio>
<mk-radio v-model="serverDisconnectedBehavior" value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</mk-radio>
<mk-radio v-model="serverDisconnectedBehavior" value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</mk-radio>
</div>
<div class="_content">
<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
@ -186,9 +187,9 @@ export default Vue.extend({
},
computed: {
autoReload: {
get() { return this.$store.state.device.autoReload; },
set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); }
serverDisconnectedBehavior: {
get() { return this.$store.state.device.serverDisconnectedBehavior; },
set(value) { this.$store.commit('device/set', { key: 'serverDisconnectedBehavior', value }); }
},
reduceAnimation: {

View File

@ -60,7 +60,7 @@ export const defaultDeviceSettings = {
loadRawImages: false,
alwaysShowNsfw: false,
useOsNativeEmojis: false,
autoReload: false,
serverDisconnectedBehavior: 'quiet',
accounts: [],
recentEmojis: [],
themes: [],