wip

src/web/app/desktop/views/components/timeline-post.vue

@@ -70,75 +70,47 @@
 </div>
 </template>
 
-<script lang="typescript">
+<script lang="ts">
+import Vue from 'vue';
 import compile from '../../common/scripts/text-compiler';
 import dateStringify from '../../common/scripts/date-stringify';
 
-this.mixin('i');
-this.mixin('api');
-this.mixin('user-preview');
-
-this.mixin('stream');
-this.connection = this.stream.getConnection();
-this.connectionId = this.stream.use();
-
-this.isDetailOpened = false;
-
-this.set = post => {
-	this.post = post;
-	this.isRepost = this.post.repost && this.post.text == null && this.post.media_ids == null && this.post.poll == null;
-	this.p = this.isRepost ? this.post.repost : this.post;
-	this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
-	this.title = dateStringify(this.p.created_at);
-	this.url = `/${this.p.user.username}/${this.p.id}`;
+export default Vue.extend({
+	props: ['post'],
+	data() {
+		return {
+			connection: null,
+			connectionId: null
 		};
-
-this.set(this.opts.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.post.id) {
-		this.refresh(post);
+	},
+	computed: {
+		isRepost(): boolean {
+			return (this.post.repost &&
+				this.post.text == null &&
+				this.post.media_ids == null &&
+				this.post.poll == null);
+		},
+		p(): any {
+			return this.isRepost ? this.post.repost : this.post;
+		},
+		reactionsCount(): number {
+			return this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;			
+		},
+		title(): string {
+			return dateStringify(this.p.created_at);
+		},
+		url(): string {
+			return `/${this.p.user.username}/${this.p.id}`;
 		}
-};
-
-this.onStreamConnected = () => {
-	this.capture();
-};
-
-this.capture = withHandler => {
-	if (this.SIGNIN) {
-		this.connection.send({
-			type: 'capture',
-			id: this.post.id
-		});
-		if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
-	}
-};
-
-this.decapture = withHandler => {
-	if (this.SIGNIN) {
-		this.connection.send({
-			type: 'decapture',
-			id: this.post.id
-		});
-		if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
-	}
-};
-
-this.on('mount', () => {
+	},
+	created() {
+		this.connection = this.$root.$data.os.stream.getConnection();
+		this.connectionId = this.$root.$data.os.stream.use();
+	},
+	mounted() {
 		this.capture(true);
 
-	if (this.SIGNIN) {
+		if (this.$root.$data.os.isSignedIn) {
 			this.connection.on('_connected_', this.onStreamConnected);
 		}
 
@@ -160,13 +132,48 @@ this.on('mount', () => {
 				});
 			});
 		}
-});
-
-this.on('unmount', () => {
+	},
+	beforeDestroy() {
 		this.decapture(true);
 		this.connection.off('_connected_', this.onStreamConnected);
-	this.stream.dispose(this.connectionId);
+		this.$root.$data.os.stream.dispose(this.connectionId);
+	},
+	methods: {
+		capture(withHandler = false) {
+			if (this.$root.$data.os.isSignedIn) {
+				this.connection.send({
+					type: 'capture',
+					id: this.post.id
 				});
+				if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
+			}
+		},
+		decapture(withHandler = false) {
+			if (this.$root.$data.os.isSignedIn) {
+				this.connection.send({
+					type: 'decapture',
+					id: this.post.id
+				});
+				if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
+			}
+		},
+		onStreamConnected() {
+			this.capture();
+		},
+		onStreamPostUpdated(data) {
+			const post = data.post;
+			if (post.id == this.post.id) {
+				this.$emit('update:post', post);
+			}
+		}
+	}
+});
+</script>
+
+<script lang="typescript">
+
+
+this.isDetailOpened = false;
 
 this.reply = () => {
 	riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {

src/web/app/desktop/views/components/timeline.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-timeline" ref="root">
 	<template v-for="(post, i) in _posts">
-		<mk-timeline-post :post="post" :key="post.id"/>
+		<mk-timeline-post :post.sync="post" :key="post.id"/>
 		<p class="date" :key="post.id + '-time'" v-if="i != _posts.length - 1 && _post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
 	</template>
 	<footer data-yield="footer">