wip

src/web/app/common/tags/core-error.tag

@@ -1,8 +1,7 @@
 <mk-core-error>
-	<!--i: i.fa.fa-times-circle--><img src="/_/resources/error.jpg" alt=""/>
-	<h1>
-		<mk-ripple-string>サーバーに接続できません</mk-ripple-string>
-	</h1>
+	<!--i: i.fa.fa-times-circle-->
+	<img src="/_/resources/error.jpg" alt=""/>
+	<h1>サーバーに接続できません</h1>
 	<p class="text">インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから<a onclick={ retry }>再度お試し</a>ください。</p>
 	<p class="thanks">いつもMisskeyをご利用いただきありがとうございます。</p>
 	<style>

src/web/app/common/tags/index.js

@@ -1,7 +1,6 @@
 require('./core-error.tag');
 require('./url.tag');
 require('./url-preview.tag');
-require('./ripple-string.tag');
 require('./time.tag');
 require('./file-type-icon.tag');
 require('./uploader.tag');
@@ -24,3 +23,4 @@ require('./messaging/room.tag');
 require('./messaging/message.tag');
 require('./messaging/index.tag');
 require('./messaging/form.tag');
+require('./stream-indicator.tag');

src/web/app/common/tags/ripple-string.tag

@@ -1,26 +0,0 @@
-<mk-ripple-string><yield/>
-	<style>
-		:scope
-			display inline
-
-			> span
-				animation ripple-string 5s infinite ease-in-out both
-
-			@keyframes ripple-string
-				0%, 50%, 100%
-					opacity 1
-				25%
-					opacity 0.5
-
-	</style>
-	<script>
-		this.on('mount', () => {
-			text = this.root.innerHTML
-			this.root.innerHTML = ''
-			(text.split '').forEach (c, i) =>
-				ce = document.createElement 'span' 
-				ce.innerHTML = c
-				ce.style.animationDelay = (i / 10) + 's'
-				this.root.appendChild ce
-	</script>
-</mk-ripple-string>

src/web/app/common/tags/stream-indicator.tag

@@ -0,0 +1,65 @@
+<mk-stream-indicator>
+	<p if={ state == 'initializing' }>
+		<i class="fa fa-spinner fa-spin"></i>
+		<span>接続中<mk-ellipsis></mk-ellipsis></span>
+	</p>
+	<p if={ state == 'reconnecting' }>
+		<i class="fa fa-spinner fa-spin"></i>
+		<span>切断されました 接続中<mk-ellipsis></mk-ellipsis></span>
+	</p>
+	<p if={ state == 'connected' }>
+		<i class="fa fa-check"></i>
+		<span>接続完了</span>
+	</p>
+	<style>
+		:scope
+			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)
+
+			> p
+				display block
+				margin 0
+
+				> i
+					margin-right 0.25em
+
+	</style>
+	<script>
+		this.mixin('stream');
+
+		this.on('before-mount', () => {
+			this.state = this.getStreamState();
+
+			if (this.state == 'connected') {
+				this.root.style.opacity = 0;
+			}
+		});
+
+		this.streamStateEv.on('connected', () => {
+			this.state = this.getStreamState();
+			this.update();
+			setTimeout(() => {
+				Velocity(this.root, {
+					opacity: 0
+				}, 200, 'linear');
+			}, 1000);
+		});
+
+		this.streamStateEv.on('closed', () => {
+			this.state = this.getStreamState();
+			this.update();
+			Velocity(this.root, {
+				opacity: 1
+			}, 0);
+		});
+	</script>
+</mk-stream-indicator>