From 19d531922df3d1dda6d3e887a72e6d39798408a7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 2 Oct 2021 16:36:25 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AB=E3=83=AA=E3=83=AD=E3=83=BC=E3=83=89=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=20(#7835)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* modify page load error page

* add changelog

* サーバーが死んでるエラーを追加

* add MkLoading
---
 CHANGELOG.md                 |  1 +
 locales/ja-JP.yml            |  2 ++
 src/client/pages/_error_.vue | 38 +++++++++++++++++++++++++++++++++---
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db271cdd4..8b6c357c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 ## 12.x.x (unreleased)
 
 ### Improvements
+- ページロードエラーページにリロードボタンを追加
 
 ### Bugfixes
 
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index f5f859b9f..06b10ba27 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -81,6 +81,8 @@ somethingHappened: "問題が発生しました"
 retry: "再試行"
 pageLoadError: "ページの読み込みに失敗しました。"
 pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。"
+serverIsDead: "サーバーの応答がありません。しばらく待ってから再度試してください。"
+youShouldUpgradeClient: "このページを表示するためには、リロードして新しいバージョンのクライアントをご利用ください。"
 enterListName: "リスト名を入力"
 privacy: "プライバシー"
 makeFollowManuallyApprove: "フォローを承認制にする"
diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue
index 1d67d9b14..d1cefad8d 100644
--- a/src/client/pages/_error_.vue
+++ b/src/client/pages/_error_.vue
@@ -1,9 +1,16 @@
 <template>
+<MkLoading v-if="!loaded" />
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjch">
+	<div class="mjndxjch" v-show="loaded">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
-		<p>{{ $ts.pageLoadErrorDescription }}</p>
+		<p v-if="version === meta.version">{{ $ts.pageLoadErrorDescription }}</p>
+		<p v-else-if="serverIsDead">{{ $ts.serverIsDead }}</p>
+		<template v-else>
+			<p>{{ $ts.newVersionOfClientAvailable }}</p>
+			<p>{{ $ts.youShouldUpgradeClient }}</p>
+			<MkButton @click="reload" class="button primary">{{ $ts.reload }}</MkButton>
+		</template>
 		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
 		<p v-if="error" class="error">ERROR: {{ error }}</p>
 	</div>
@@ -14,6 +21,9 @@
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as symbols from '@client/symbols';
+import { version } from '@client/config';
+import * as os from '@client/os';
+import { unisonReload } from '@client/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
@@ -30,8 +40,30 @@ export default defineComponent({
 				title: this.$ts.error,
 				icon: 'fas fa-exclamation-triangle'
 			},
+			loaded: false,
+			serverIsDead: false,
+			meta: {} as any,
+			version,
 		};
 	},
+	created() {
+		os.api('meta', {
+			detail: false
+		}).then(meta => {
+			this.loaded = true;
+			this.serverIsDead = false;
+			this.meta = meta;
+			localStorage.setItem('v', meta.version);
+		}, () => {
+			this.loaded = true;
+			this.serverIsDead = true;
+		});
+	},
+	methods: {
+		reload() {
+			unisonReload();
+		},
+	},
 });
 </script>
 
@@ -45,7 +77,7 @@ export default defineComponent({
 	}
 
 	> .button {
-		margin: 0 auto;
+		margin: 8px auto;
 	}
 
 	> img {