WIP: feat(client): タブがバックグラウンド（非表示）のときにタイムラインを更新しないように

src/client/scripts/page-visibility.ts

@@ -0,0 +1,13 @@
+export function onBecomeVisible(cb) {
+	const onVisible = (ev) => {
+		if (document.visibilityState !== 'visible') return;
+		document.removeEventListener('visibilitychange', onVisible);
+		cb();
+	};
+
+	document.addEventListener('visibilitychange', onVisible);
+
+	return {
+		remove: () => document.removeEventListener('visibilitychange', onVisible)
+	};
+}

src/client/scripts/paging.ts

@@ -1,4 +1,5 @@
 import { onScrollTop, isTopVisible } from './scroll';
+import { onBecomeVisible } from './page-visibility';
 
 const SECOND_FETCH_LIMIT = 30;
 
@@ -147,9 +148,10 @@ export default (opts) => ({
 		},
 
 		prepend(item) {
-			const isTop = this.isBackTop || (document.body.contains(this.$el) && isTopVisible(this.$el));
+			const isTop = () => this.isBackTop || (document.body.contains(this.$el) && isTopVisible(this.$el));
+			const isTabVisible = () => document.visibilityState === 'visible';
 
-			if (isTop) {
+			if (isTop() && isTabVisible()) {
 				// Prepend the item
 				this.items.unshift(item);
 
@@ -160,12 +162,24 @@ export default (opts) => ({
 				}
 			} else {
 				this.queue.push(item);
-				onScrollTop(this.$el, () => {
+
+				let scrollListener;
+				let visibleListener;
+
+				const comeback = () => {
+					if (!(isTop() && isTabVisible())) return;
+
 					for (const item of this.queue) {
 						this.prepend(item);
 					}
 					this.queue = [];
-				});
+
+					scrollListener.remove();
+					visibleListener.remove();
+				};
+
+				scrollListener = onScrollTop(this.$el, comeback);
+				visibleListener = onBecomeVisible(comeback);
 			}
 		},
 

src/client/scripts/scroll.ts

@@ -42,7 +42,12 @@ export function onScrollBottom(el: Element, cb) {
 			container.removeEventListener('scroll', onScroll);
 		}
 	};
+
 	container.addEventListener('scroll', onScroll, { passive: true });
+
+	return {
+		remove: () => container.removeEventListener('scroll', onscroll)
+	};
 }
 
 export function scroll(el: Element, top: number) {