diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/index.ts | 2 | ||||
| -rw-r--r-- | src/client/components/stream-indicator.vue | 80 |
2 files changed, 82 insertions, 0 deletions
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> |