Resolve #2935

src/client/app/desktop/views/components/notes.vue

@@ -38,7 +38,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as config from '../../../config';
-import getNoteSummary from '../../../../../misc/get-note-summary';
 
 import XNote from './note.vue';
 
@@ -61,7 +60,6 @@ export default Vue.extend({
 			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
-			unreadCount: 0,
 			fetching: true,
 			moreFetching: false
 		};
@@ -80,12 +78,10 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 		window.addEventListener('scroll', this.onScroll, { passive: true });
 	},
 
 	beforeDestroy() {
-		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 		window.removeEventListener('scroll', this.onScroll);
 	},
 
@@ -147,10 +143,9 @@ export default Vue.extend({
 			}
 			//#endregion
 
-			// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
+			// タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
-			if ((document.hidden || !this.isScrollTop()) && note.userId !== this.$store.state.i.id) {
+			if (document.hidden || !this.isScrollTop()) {
-				this.unreadCount++;
+				this.$store.commit('pushBehindNote', note);
-				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 			}
 
 			if (this.isScrollTop()) {
@@ -195,21 +190,9 @@ export default Vue.extend({
 			this.moreFetching = false;
 		},
 
-		clearNotification() {
-			this.unreadCount = 0;
-			document.title = (this as any).os.instanceName;
-		},
-
-		onVisibilitychange() {
-			if (!document.hidden) {
-				this.clearNotification();
-			}
-		},
-
 		onScroll() {
 			if (this.isScrollTop()) {
 				this.releaseQueue();
-				this.clearNotification();
 			}
 
 			if (this.$store.state.settings.fetchOnScroll !== false) {

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -154,6 +154,11 @@ export default Vue.extend({
 			}
 			//#endregion
 
+			// タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
+			if (document.hidden || !this.isScrollTop()) {
+				this.$store.commit('pushBehindNote', note);
+			}
+
 			if (this.isScrollTop()) {
 				// Prepend the note
 				this.notes.unshift(note);

src/client/app/init.ts

@@ -161,6 +161,12 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 				}
 			});
 
+			document.addEventListener('visibilitychange', () => {
+				if (!document.hidden) {
+					os.store.commit('clearBehindNotes');
+				}
+			}, false);
+
 			Vue.mixin({
 				data() {
 					return {

src/client/app/mobile/views/components/notes.vue

@@ -37,7 +37,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getNoteSummary from '../../../../../misc/get-note-summary';
 
 const displayLimit = 30;
 
@@ -54,7 +53,6 @@ export default Vue.extend({
 			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
-			unreadCount: 0,
 			fetching: true,
 			moreFetching: false
 		};
@@ -83,12 +81,10 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 		window.addEventListener('scroll', this.onScroll, { passive: true });
 	},
 
 	beforeDestroy() {
-		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 		window.removeEventListener('scroll', this.onScroll);
 	},
 
@@ -146,10 +142,9 @@ export default Vue.extend({
 			}
 			//#endregion
 
-			// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
+			// タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
-			if ((document.hidden || !this.isScrollTop()) && note.userId !== this.$store.state.i.id) {
+			if (document.hidden || !this.isScrollTop()) {
-				this.unreadCount++;
+				this.$store.commit('pushBehindNote', note);
-				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 			}
 
 			if (this.isScrollTop()) {
@@ -187,21 +182,9 @@ export default Vue.extend({
 			this.moreFetching = false;
 		},
 
-		clearNotification() {
-			this.unreadCount = 0;
-			document.title = (this as any).os.instanceName;
-		},
-
-		onVisibilitychange() {
-			if (!document.hidden) {
-				this.clearNotification();
-			}
-		},
-
 		onScroll() {
 			if (this.isScrollTop()) {
 				this.releaseQueue();
-				this.clearNotification();
 			}
 
 			if (this.$store.state.settings.fetchOnScroll !== false) {

src/client/app/store.ts

@@ -5,6 +5,7 @@ import * as nestedProperty from 'nested-property';
 import MiOS from './mios';
 import { hostname } from './config';
 import { erase } from '../../prelude/array';
+import getNoteSummary from '../../misc/get-note-summary';
 
 const defaultSettings = {
 	home: null,
@@ -73,7 +74,8 @@ export default (os: MiOS) => new Vuex.Store({
 		i: null,
 		indicate: false,
 		uiHeaderHeight: 0,
-		navHook: null
+		navHook: null,
+		behindNotes: []
 	},
 
 	getters: {
@@ -99,6 +101,18 @@ export default (os: MiOS) => new Vuex.Store({
 
 		navHook(state, callback) {
 			state.navHook = callback;
+		},
+
+		pushBehindNote(state, note) {
+			if (note.userId === state.i.id) return;
+			if (state.behindNotes.some(n => n.id === note.id)) return;
+			state.behindNotes.push(note);
+			document.title = `(${state.behindNotes.length}) ${getNoteSummary(note)}`;
+		},
+
+		clearBehindNotes(state) {
+			state.behindNotes = [];
+			document.title = os.instanceName;
 		}
 	},