サーバーとの接続が過去に切断されていたらリロードボタンを出すように

mei23 · Jan 31, 2020 · 2e14898 · 2e14898
1 parent 46eb81e
commit 2e14898
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 16 deletions.
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -652,6 +652,9 @@ common/views/components/stream-indicator.vue:
   connecting: "Connecting"
   reconnecting: "Reconnecting"
   connected: "Connected"
+  has-disconnected: "Connection to server was lost in the past"
+  reload: "Reload"
+  ignore: "Do nothing"
 common/views/components/notification-settings.vue:
   title: "Notifications"
   mark-as-read-all-notifications: "Mark all notifications as read"

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -699,6 +699,9 @@ common/views/components/stream-indicator.vue:
   connecting: "接続中"
   reconnecting: "再接続中"
   connected: "接続完了"
+  has-disconnected: "サーバーから切断されていました"
+  reload: "リロードする"
+  ignore: "なにもしない"
 
 common/views/components/notification-settings.vue:
   title: "通知"

diff --git a/src/client/app/common/views/components/stream-indicator.vue b/src/client/app/common/views/components/stream-indicator.vue
@@ -1,17 +1,26 @@
 <template>
-<div class="mk-stream-indicator">
-	<p v-if="stream.state == 'initializing'">
-		<fa icon="spinner" pulse/>
-		<span>{{ $t('connecting') }}<mk-ellipsis/></span>
-	</p>
-	<p v-if="stream.state == 'reconnecting'">
-		<fa icon="spinner" pulse/>
-		<span>{{ $t('reconnecting') }}<mk-ellipsis/></span>
-	</p>
-	<p v-if="stream.state == 'connected'">
-		<fa icon="check"/>
-		<span>{{ $t('connected') }}</span>
-	</p>
+<div>
+	<div class="disconnect-notify" v-if="stream.state == 'connected' && hasDisconnected" @click="hasDisconnected = false">
+		<div><fa icon="exclamation-triangle"/> {{ $t('has-disconnected') }}</div>
+		<div class="command">
+			<button @click="reload">{{ $t('reload') }}</button>
+			<button>{{ $t('ignore') }}</button>
+		</div>
+	</div>
+	<div class="mk-stream-indicator" ref="indicator">
+		<p v-if="stream.state == 'initializing'">
+			<fa icon="spinner" pulse/>
+			<span>{{ $t('connecting') }}<mk-ellipsis/></span>
+		</p>
+		<p v-if="stream.state == 'reconnecting'">
+			<fa icon="spinner" pulse/>
+			<span>{{ $t('reconnecting') }}<mk-ellipsis/></span>
+		</p>
+		<p v-if="stream.state == 'connected'">
+			<fa icon="check"/>
+			<span>{{ $t('connected') }}</span>
+		</p>
+	</div>
 </div>
 </template>
 
@@ -22,6 +31,11 @@ import anime from 'animejs';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/stream-indicator.vue'),
+	data() {
+		return {
+			hasDisconnected: false,
+		}
+	},
 	computed: {
 		stream() {
 			return this.$root.stream;
@@ -45,26 +59,54 @@ export default Vue.extend({
 		onConnected() {
 			setTimeout(() => {
 				anime({
-					targets: this.$el,
+					targets: this.$refs.indicator,
 					opacity: 0,
 					easing: 'linear',
 					duration: 200
 				});
 			}, 1000);
 		},
 		onDisconnected() {
+			this.hasDisconnected = true;
 			anime({
-				targets: this.$el,
+				targets: this.$refs.indicator,
 				opacity: 1,
 				easing: 'linear',
 				duration: 100
 			});
-		}
+		},
+		reload() {
+			location.reload();
+		},
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
+.disconnect-notify
+	position fixed
+	z-index 16385
+	bottom 8px
+	right 8px
+	margin 0
+	padding 6px 12px
+	font-size 0.9em
+	color #fff
+	background rgba(#000)
+	border-radius 4px
+	max-width 320px
+
+	> .command
+		display flex
+		justify-content space-around
+
+		> button
+			color #aaa
+			padding 0.7em
+
+			&:hover
+				color #ccc
+
 .mk-stream-indicator
 	pointer-events none
 	position fixed