v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

src/client/components/timeline.vue

@@ -0,0 +1,118 @@
+<template>
+<x-notes ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './notes.vue';
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+		list: {
+			required: false
+		},
+		antenna: {
+			required: false
+		}
+	},
+
+	data() {
+		return {
+			connection: null,
+			pagination: null,
+			baseQuery: {
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			},
+			query: {},
+		};
+	},
+
+	created() {
+		this.$once('hook:beforeDestroy', () => {
+			this.connection.dispose();
+		});
+
+		const prepend = note => {
+			(this.$refs.tl as any).prepend(note);
+		};
+
+		const onUserAdded = () => {
+			(this.$refs.tl as any).reload();
+		};
+
+		const onUserRemoved = () => {
+			(this.$refs.tl as any).reload();
+		};
+
+		let endpoint;
+
+		if (this.src == 'antenna') {
+			endpoint = 'antennas/notes';
+			this.query = {
+				antennaId: this.antenna.id
+			};
+			this.connection = this.$root.stream.connectToChannel('antenna', {
+				antennaId: this.antenna.id
+			});
+			this.connection.on('note', prepend);
+		} else if (this.src == 'home') {
+			endpoint = 'notes/timeline';
+			const onChangeFollowing = () => {
+				this.fetch();
+			};
+			this.connection = this.$root.stream.useSharedConnection('homeTimeline');
+			this.connection.on('note', prepend);
+			this.connection.on('follow', onChangeFollowing);
+			this.connection.on('unfollow', onChangeFollowing);
+		} else if (this.src == 'local') {
+			endpoint = 'notes/local-timeline';
+			this.connection = this.$root.stream.useSharedConnection('localTimeline');
+			this.connection.on('note', prepend);
+		} else if (this.src == 'social') {
+			endpoint = 'notes/hybrid-timeline';
+			this.connection = this.$root.stream.useSharedConnection('hybridTimeline');
+			this.connection.on('note', prepend);
+		} else if (this.src == 'global') {
+			endpoint = 'notes/global-timeline';
+			this.connection = this.$root.stream.useSharedConnection('globalTimeline');
+			this.connection.on('note', prepend);
+		} else if (this.src == 'list') {
+			endpoint = 'notes/user-list-timeline';
+			this.query = {
+				listId: this.list.id
+			};
+			this.connection = this.$root.stream.connectToChannel('userList', {
+				listId: this.list.id
+			});
+			this.connection.on('note', prepend);
+			this.connection.on('userAdded', onUserAdded);
+			this.connection.on('userRemoved', onUserRemoved);
+		}
+
+		this.pagination = {
+			endpoint: endpoint,
+			limit: 10,
+			params: init => ({
+				untilDate: init ? undefined : (this.date ? this.date.getTime() : undefined),
+				...this.baseQuery, ...this.query
+			})
+		};
+	},
+
+	methods: {
+		focus() {
+			this.$refs.tl.focus();
+		}
+	}
+});
+</script>