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

View file

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

View file

@ -237,6 +237,26 @@ os.init(async () => {
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true }); }, { 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 => { os.stream.on('emojiAdded', data => {
// TODO // TODO
//store.commit('instance/set', ); //store.commit('instance/set', );

View file

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

View file

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