From c1d25d2394ff400afd93c2256641cea867e7e366 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Thu, 20 Feb 2020 03:42:36 +0900
Subject: 切断時ダイアログのタイミングの変更など (#6014)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 再接続時インジケーター

* Update ja-JP.yml

* Update stream-indicator.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 src/client/components/index.ts             |  2 +
 src/client/components/stream-indicator.vue | 80 ++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 src/client/components/stream-indicator.vue

(limited to 'src/client/components')

diff --git a/src/client/components/index.ts b/src/client/components/index.ts
index 9385c2af73..9e95fba873 100644
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -11,6 +11,7 @@ import url from './url.vue';
 import loading from './loading.vue';
 import SequentialEntrance from './sequential-entrance.vue';
 import error from './error.vue';
+import streamIndicator from './stream-indicator.vue';
 
 Vue.component('mfm', mfm);
 Vue.component('mk-acct', acct);
@@ -23,3 +24,4 @@ Vue.component('mk-url', url);
 Vue.component('mk-loading', loading);
 Vue.component('mk-error', error);
 Vue.component('sequential-entrance', SequentialEntrance);
+Vue.component('stream-indicator', streamIndicator);
diff --git a/src/client/components/stream-indicator.vue b/src/client/components/stream-indicator.vue
new file mode 100644
index 0000000000..dd7a5d07c1
--- /dev/null
+++ b/src/client/components/stream-indicator.vue
@@ -0,0 +1,80 @@
+<template>
+<div class="nsbbhtug" v-if="hasDisconnected" @click="resetDisconnected">
+	<div>{{ $t('disconnectedFromServer') }}</div>
+	<div class="command">
+		<button class="_textButton" @click="reload">{{ $t('reload') }}</button>
+		<button class="_textButton">{{ $t('doNothing') }}</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../i18n';
+
+export default Vue.extend({
+	i18n,
+	data() {
+		return {
+			hasDisconnected: false,
+		}
+	},
+	computed: {
+		stream() {
+			return this.$root.stream;
+		},
+	},
+	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;
+		},
+		resetDisconnected() {
+			this.hasDisconnected = false;
+		},
+		reload() {
+			location.reload();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nsbbhtug {
+	position: fixed;
+	z-index: 16385;
+	bottom: 8px;
+	right: 8px;
+	margin: 0;
+	padding: 6px 12px;
+	font-size: 0.9em;
+	color: #fff;
+	background: #000;
+	opacity: 0.8;
+	border-radius: 4px;
+	max-width: 320px;
+
+	> .command {
+		display: flex;
+		justify-content: space-around;
+
+		> button {
+			padding: 0.7em;
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3-freya