#302

4 files changed, 80 insertions, 31 deletions

diff --git a/src/web/app/common/scripts/stream.js b/src/web/app/common/scripts/stream.js
index d6e6bf8aa5..cbdde8d2f2 100644
--- a/src/web/app/common/scripts/stream.js
+++ b/src/web/app/common/scripts/stream.js
@@ -44,6 +44,10 @@ class Connection {
 		}
 	}
 
+	send(message) {
+		this.socket.send(JSON.stringify(message));
+	}
+
 	close() {
 		this.socket.removeEventListener('open', this.onOpen);
 		this.socket.removeEventListener('message', this.onMessage);
diff --git a/src/web/app/common/tags/poll.tag b/src/web/app/common/tags/poll.tag
index ce6460bce9..ce006e5e02 100644
--- a/src/web/app/common/tags/poll.tag
+++ b/src/web/app/common/tags/poll.tag
@@ -70,11 +70,16 @@
 	<script>
 		this.mixin('api');
 
-		this.post = this.opts.post;
-		this.poll = this.post.poll;
-		this.total = this.poll.choices.reduce((a, b) => a + b.votes, 0);
-		this.isVoted = this.poll.choices.some(c => c.is_voted);
-		this.result = this.isVoted;
+		this.init = post => {
+			this.post = post;
+			this.poll = this.post.poll;
+			this.total = this.poll.choices.reduce((a, b) => a + b.votes, 0);
+			this.isVoted = this.poll.choices.some(c => c.is_voted);
+			this.result = this.isVoted;
+			this.update();
+		};
+
+		this.init(this.opts.post);
 
 		this.toggleResult = () => {
 			this.result = !this.result;
diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag
index 8c3b7c9be1..07cc665674 100644
--- a/src/web/app/desktop/tags/timeline-post.tag
+++ b/src/web/app/desktop/tags/timeline-post.tag
@@ -40,7 +40,7 @@
 				<div class="media" if={ p.media }>
 					<mk-images-viewer images={ p.media }></mk-images-viewer>
 				</div>
-				<mk-poll if={ p.poll } post={ p }></mk-poll>
+				<mk-poll if={ p.poll } post={ p } ref="pollViewer"></mk-poll>
 				<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i>
 					<mk-post-preview class="repost" post={ p.repost }></mk-post-preview>
 				</div>
@@ -332,6 +332,7 @@
 		import dateStringify from '../../common/scripts/date-stringify';
 
 		this.mixin('api');
+		this.mixin('stream');
 		this.mixin('user-preview');
 
 		this.isDetailOpened = false;
@@ -347,19 +348,30 @@
 
 		this.set(this.opts.post);
 
-		this.refresh = () => {
-			this.api('posts/show', {
-				post_id: this.post.id
-			}).then(post => {
-				this.set(post);
-				this.update();
-				if (this.refs.reactionsViewer) this.refs.reactionsViewer.update({
-					post
-				});
+		this.refresh = post => {
+			this.set(post);
+			this.update();
+			if (this.refs.reactionsViewer) this.refs.reactionsViewer.update({
+				post
 			});
+			if (this.refs.pollViewer) this.refs.pollViewer.init(post);
+		};
+
+		this.onStreamPostUpdated = data => {
+			const post = data.post;
+			if (post.id == this.p.id) {
+				this.refresh(post);
+			}
 		};
 
 		this.on('mount', () => {
+			this.stream.send({
+				type: 'capture',
+				id: this.p.id
+			});
+
+			this.stream.event.on('post-updated', this.onStreamPostUpdated);
+
 			if (this.p.text) {
 				const tokens = this.p.ast;
 
@@ -380,6 +392,15 @@
 			}
 		});
 
+		this.on('unmount', () => {
+			this.stream.send({
+				type: 'decapture',
+				id: this.p.id
+			});
+
+			this.stream.event.off('post-updated', this.onStreamPostUpdated);
+		});
+
 		this.reply = () => {
 			riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
 				reply: this.p
@@ -395,8 +416,7 @@
 		this.react = () => {
 			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
 				source: this.refs.reactButton,
-				post: this.p,
-				cb: this.refresh
+				post: this.p
 			});
 		};
 
diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag
index 71d00128b4..e0cffb62de 100644
--- a/src/web/app/mobile/tags/timeline-post.tag
+++ b/src/web/app/mobile/tags/timeline-post.tag
@@ -36,7 +36,7 @@
 				<div class="media" if={ p.media }>
 					<mk-images-viewer images={ p.media }></mk-images-viewer>
 				</div>
-				<mk-poll if={ p.poll } post={ p }></mk-poll>
+				<mk-poll if={ p.poll } post={ p } ref="pollViewer"></mk-poll>
 				<span class="app" if={ p.app }>via <b>{ p.app.name }</b></span>
 				<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i>
 					<mk-post-preview class="repost" post={ p.repost }></mk-post-preview>
@@ -306,12 +306,13 @@
 
 	</style>
 	<script>
-		this.mixin('api');
-
 		import compile from '../../common/scripts/text-compiler';
 		import getPostSummary from '../../common/scripts/get-post-summary';
 		import openPostForm from '../scripts/open-post-form';
 
+		this.mixin('api');
+		this.mixin('stream');
+
 		this.set = post => {
 			this.post = post;
 			this.isRepost = this.post.repost != null && this.post.text == null;
@@ -323,19 +324,30 @@
 
 		this.set(this.opts.post);
 
-		this.refresh = () => {
-			this.api('posts/show', {
-				post_id: this.post.id
-			}).then(post => {
-				this.set(post);
-				this.update();
-				if (this.refs.reactionsViewer) this.refs.reactionsViewer.update({
-					post
-				});
+		this.refresh = post => {
+			this.set(post);
+			this.update();
+			if (this.refs.reactionsViewer) this.refs.reactionsViewer.update({
+				post
 			});
+			if (this.refs.pollViewer) this.refs.pollViewer.init(post);
+		};
+
+		this.onStreamPostUpdated = data => {
+			const post = data.post;
+			if (post.id == this.p.id) {
+				this.refresh(post);
+			}
 		};
 
 		this.on('mount', () => {
+			this.stream.send({
+				type: 'capture',
+				id: this.p.id
+			});
+
+			this.stream.event.on('post-updated', this.onStreamPostUpdated);
+
 			if (this.p.text) {
 				const tokens = this.p.ast;
 
@@ -356,6 +368,15 @@
 			}
 		});
 
+		this.on('unmount', () => {
+			this.stream.send({
+				type: 'decapture',
+				id: this.p.id
+			});
+
+			this.stream.event.off('post-updated', this.onStreamPostUpdated);
+		});
+
 		this.reply = () => {
 			openPostForm({
 				reply: this.p
@@ -374,8 +395,7 @@
 		this.react = () => {
 			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
 				source: this.refs.reactButton,
-				post: this.p,
-				cb: this.refresh
+				post: this.p
 			});
 		};
 	</script>