wip

5 files changed, 78 insertions, 58 deletions

diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index 10d09ce65c..e3f105f586 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -11,6 +11,7 @@ import time from './time.vue';
 import images from './images.vue';
 import uploader from './uploader.vue';
 import specialMessage from './special-message.vue';
+import streamIndicator from './stream-indicator.vue';
 
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
@@ -23,3 +24,4 @@ Vue.component('mk-time', time);
 Vue.component('mk-images', images);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-special-message', specialMessage);
+Vue.component('mk-stream-indicator', streamIndicator);
diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue
index 386e705b01..f45f99b535 100644
--- a/src/web/app/common/views/components/messaging.vue
+++ b/src/web/app/common/views/components/messaging.vue
@@ -180,7 +180,7 @@ export default Vue.extend({
 					padding 16px
 
 					> header
-						> mk-time
+						> .mk-time
 							font-size 1em
 
 					> .avatar
@@ -381,7 +381,7 @@ export default Vue.extend({
 						margin 0 0 0 8px
 						color rgba(0, 0, 0, 0.5)
 
-					> mk-time
+					> .mk-time
 						position absolute
 						top 0
 						right 0
diff --git a/src/web/app/common/views/components/reactions-viewer.vue b/src/web/app/common/views/components/reactions-viewer.vue
index 696aef3350..f6a27d9139 100644
--- a/src/web/app/common/views/components/reactions-viewer.vue
+++ b/src/web/app/common/views/components/reactions-viewer.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 	> span
 		margin-right 8px
 
-		> mk-reaction-icon
+		> .mk-reaction-icon
 			font-size 1.4em
 
 		> span
diff --git a/src/web/app/common/views/components/stream-indicator.vue b/src/web/app/common/views/components/stream-indicator.vue
index 564376bba0..00bd58c1f9 100644
--- a/src/web/app/common/views/components/stream-indicator.vue
+++ b/src/web/app/common/views/components/stream-indicator.vue
@@ -1,74 +1,92 @@
 <template>
-	<div>
-		<p v-if=" stream.state == 'initializing' ">
-			%fa:spinner .pulse%
-			<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
-		</p>
-		<p v-if=" stream.state == 'reconnecting' ">
-			%fa:spinner .pulse%
-			<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
-		</p>
-		<p v-if=" stream.state == 'connected' ">
-			%fa:check%
-			<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
-		</p>
-	</div>
+<div class="mk-stream-indicator" v-if="stream">
+	<p v-if=" stream.state == 'initializing' ">
+		%fa:spinner .pulse%
+		<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
+	</p>
+	<p v-if=" stream.state == 'reconnecting' ">
+		%fa:spinner .pulse%
+		<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
+	</p>
+	<p v-if=" stream.state == 'connected' ">
+		%fa:check%
+		<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
+	</p>
+</div>
 </template>
 
-<script lang="typescript">
-	import * as anime from 'animejs';
-	import Ellipsis from './ellipsis.vue';
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
 
-	export default {
-		props: ['stream'],
-		created() {
+export default Vue.extend({
+	data() {
+		return {
+			stream: null
+		};
+	},
+	created() {
+		this.stream = this.$root.$data.os.stream.borrow();
+
+		this.$root.$data.os.stream.on('connected', this.onConnected);
+		this.$root.$data.os.stream.on('disconnected', this.onDisconnected);
+
+		this.$nextTick(() => {
 			if (this.stream.state == 'connected') {
-				this.root.style.opacity = 0;
+				this.$el.style.opacity = '0';
 			}
+		});
+	},
+	beforeDestroy() {
+		this.$root.$data.os.stream.off('connected', this.onConnected);
+		this.$root.$data.os.stream.off('disconnected', this.onDisconnected);
+	},
+	methods: {
+		onConnected() {
+			this.stream = this.$root.$data.os.stream.borrow();
 
-			this.stream.on('_connected_', () => {
-				setTimeout(() => {
-					anime({
-						targets: this.root,
-						opacity: 0,
-						easing: 'linear',
-						duration: 200
-					});
-				}, 1000);
-			});
-
-			this.stream.on('_closed_', () => {
+			setTimeout(() => {
 				anime({
-					targets: this.root,
-					opacity: 1,
+					targets: this.$el,
+					opacity: 0,
 					easing: 'linear',
-					duration: 100
+					duration: 200
 				});
+			}, 1000);
+		},
+		onDisconnected() {
+			this.stream = null;
+
+			anime({
+				targets: this.$el,
+				opacity: 1,
+				easing: 'linear',
+				duration: 100
 			});
 		}
-	};
+	}
+});
 </script>
 
 <style lang="stylus" scoped>
-	> div
+.mk-stream-indicator
+	pointer-events none
+	position fixed
+	z-index 16384
+	bottom 8px
+	right 8px
+	margin 0
+	padding 6px 12px
+	font-size 0.9em
+	color #fff
+	background rgba(0, 0, 0, 0.8)
+	border-radius 4px
+
+	> p
 		display block
-		pointer-events none
-		position fixed
-		z-index 16384
-		bottom 8px
-		right 8px
 		margin 0
-		padding 6px 12px
-		font-size 0.9em
-		color #fff
-		background rgba(0, 0, 0, 0.8)
-		border-radius 4px
-
-		> p
-			display block
-			margin 0
 
-			> [data-fa]
-				margin-right 0.25em
+		> [data-fa]
+			margin-right 0.25em
 
 </style>
diff --git a/src/web/app/common/views/components/widgets/messaging.vue b/src/web/app/common/views/components/widgets/messaging.vue
index 19ef704310..f31acc5c63 100644
--- a/src/web/app/common/views/components/widgets/messaging.vue
+++ b/src/web/app/common/views/components/widgets/messaging.vue
@@ -52,7 +52,7 @@ export default define({
 		> [data-fa]
 			margin-right 4px
 
-	> mk-messaging
+	> .mk-messaging
 		max-height 250px
 		overflow auto