ハッシュタグタイムラインを実装

src/client/app/mobile/views/pages/home.timeline.vue

@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { HashtagStream } from '../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -21,6 +22,9 @@ export default Vue.extend({
 		src: {
 			type: String,
 			required: true
+		},
+		tagTl: {
+			required: false
 		}
 	},
 
@@ -29,6 +33,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
+			streamManager: null,
 			connection: null,
 			connectionId: null,
 			unreadCount: 0,
@@ -41,16 +46,6 @@ export default Vue.extend({
 			return this.$store.state.i.followingCount == 0;
 		},
 
-		stream(): any {
-			switch (this.src) {
-				case 'home': return (this as any).os.stream;
-				case 'local': return (this as any).os.streams.localTimelineStream;
-				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
-				case 'global': return (this as any).os.streams.globalTimelineStream;
-				case 'mentions': return (this as any).os.stream;
-			}
-		},
-
 		endpoint(): string {
 			switch (this.src) {
 				case 'home': return 'notes/timeline';
@@ -58,6 +53,7 @@ export default Vue.extend({
 				case 'hybrid': return 'notes/hybrid-timeline';
 				case 'global': return 'notes/global-timeline';
 				case 'mentions': return 'notes/mentions';
+				case 'tag': return 'notes/search_by_tag';
 			}
 		},
 
@@ -67,25 +63,63 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.connection.on(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
+		if (this.src == 'tag') {
+			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'home') {
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
 			this.connection.on('follow', this.onChangeFollowing);
 			this.connection.on('unfollow', this.onChangeFollowing);
+		} else if (this.src == 'local') {
+			this.streamManager = (this as any).os.streams.localTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'hybrid') {
+			this.streamManager = (this as any).os.streams.hybridTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'global') {
+			this.streamManager = (this as any).os.streams.globalTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'mentions') {
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', this.onNote);
 		}
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.connection.off(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
+		if (this.src == 'tag') {
+			this.connection.off('note', this.onNote);
+			this.connection.close();
+		} else if (this.src == 'home') {
+			this.connection.off('note', this.onNote);
 			this.connection.off('follow', this.onChangeFollowing);
 			this.connection.off('unfollow', this.onChangeFollowing);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'local') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'hybrid') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'global') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'mentions') {
+			this.connection.off('mention', this.onNote);
+			this.streamManager.dispose(this.connectionId);
 		}
-		this.stream.dispose(this.connectionId);
 	},
 
 	methods: {
@@ -98,7 +132,8 @@ export default Vue.extend({
 					untilDate: this.date ? this.date.getTime() : undefined,
 					includeMyRenotes: this.$store.state.settings.showMyRenotes,
 					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					query: this.tagTl ? this.tagTl.query : undefined
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -121,7 +156,8 @@ export default Vue.extend({
 				untilId: (this.$refs.timeline as any).tail().id,
 				includeMyRenotes: this.$store.state.settings.showMyRenotes,
 				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				query: this.tagTl ? this.tagTl.query : undefined
 			});
 
 			promise.then(notes => {

src/client/app/mobile/views/pages/home.vue

@@ -8,6 +8,7 @@
 			<span v-if="src == 'global'">%fa:globe%%i18n:@global%</span>
 			<span v-if="src == 'mentions'">%fa:at%%i18n:@mentions%</span>
 			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
+			<span v-if="src == 'tag'">%fa:hashtag%{{ tagTl.title }}</span>
 		</span>
 		<span style="margin-left:8px">
 			<template v-if="!showNav">%fa:angle-down%</template>
@@ -32,6 +33,7 @@
 					<template v-if="lists">
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
 					</template>
+					<span v-for="tl in $store.state.settings.tagTimelines" :data-active="src == 'tag' && tagTl == tl" @click="src = 'tag'; tagTl = tl" :key="tl.id">%fa:hashtag% {{ tl.title }}</span>
 				</div>
 			</div>
 		</div>
@@ -42,6 +44,7 @@
 			<x-tl v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
 			<x-tl v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+			<x-tl v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
@@ -63,6 +66,7 @@ export default Vue.extend({
 			src: 'home',
 			list: null,
 			lists: null,
+			tagTl: null,
 			showNav: false,
 			enableLocalTimeline: false
 		};
@@ -74,9 +78,16 @@ export default Vue.extend({
 			this.saveSrc();
 		},
 
-		list() {
+		list(x) {
 			this.showNav = false;
 			this.saveSrc();
+			if (x != null) this.tagTl = null;
+		},
+
+		tagTl(x) {
+			this.showNav = false;
+			this.saveSrc();
+			if (x != null) this.list = null;
 		},
 
 		showNav(v) {
@@ -97,6 +108,8 @@ export default Vue.extend({
 			this.src = this.$store.state.device.tl.src;
 			if (this.src == 'list') {
 				this.list = this.$store.state.device.tl.arg;
+			} else if (this.src == 'tag') {
+				this.tagTl = this.$store.state.device.tl.arg;
 			}
 		} else if (this.$store.state.i.followingCount == 0) {
 			this.src = 'hybrid';
@@ -121,7 +134,7 @@ export default Vue.extend({
 		saveSrc() {
 			this.$store.commit('device/setTl', {
 				src: this.src,
-				arg: this.list
+				arg: this.src == 'list' ? this.list : this.tagTl
 			});
 		},