From 8e6e9a07feab20d092097c4ef9603adfcb893efd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Aug 2020 21:47:18 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=82=B5=E3=83=BC=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=8B=E3=82=89=E5=88=87=E6=96=AD=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=81=9F=E3=81=A8=E3=81=8D=E3=81=AB=E3=83=80=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=81=A7=E8=AD=A6=E5=91=8A=E3=82=92=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                          |  7 ++++++-
 src/client/components/stream-indicator.vue | 11 +----------
 src/client/init.ts                         | 20 ++++++++++++++++++++
 src/client/pages/preferences/index.vue     | 13 +++++++------
 src/client/store.ts                        |  2 +-
 5 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 678f20e8c..870041d67 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -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: "チャンネルを編集"
diff --git a/src/client/components/stream-indicator.vue b/src/client/components/stream-indicator.vue
index ec00f4cbf..9005cb9a8 100644
--- a/src/client/components/stream-indicator.vue
+++ b/src/client/components/stream-indicator.vue
@@ -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;
 		},
diff --git a/src/client/init.ts b/src/client/init.ts
index b80df44c8..3931329aa 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -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', );
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 9d3959fcc..4e171bfcb 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -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: {
diff --git a/src/client/store.ts b/src/client/store.ts
index 7e747a570..07566954a 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -60,7 +60,7 @@ export const defaultDeviceSettings = {
 	loadRawImages: false,
 	alwaysShowNsfw: false,
 	useOsNativeEmojis: false,
-	autoReload: false,
+	serverDisconnectedBehavior: 'quiet',
 	accounts: [],
 	recentEmojis: [],
 	themes: [],