fix(frontend): タブが不可視なあいだのpaginationのアップデートを停止するように (#16243)
* fix(frontend): タブが不可視なあいだのpaginationのアップデートを停止するように * fix lint * 待たない
This commit is contained in:
parent
7c44881ca8
commit
179d990c39
|
@ -59,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { computed, watch, onUnmounted, provide, useTemplateRef, TransitionGroup, onMounted, shallowRef, ref, markRaw } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { useDocumentVisibility } from '@@/js/use-document-visibility.js';
|
||||
import { getScrollContainer, scrollToTop } from '@@/js/scroll.js';
|
||||
import type { BasicTimelineType } from '@/timelines.js';
|
||||
import type { SoundStore } from '@/preferences/def.js';
|
||||
|
@ -224,6 +225,20 @@ onUnmounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
const visibility = useDocumentVisibility();
|
||||
let isPausingUpdate = false;
|
||||
|
||||
watch(visibility, () => {
|
||||
if (visibility.value === 'hidden') {
|
||||
isPausingUpdate = true;
|
||||
} else { // 'visible'
|
||||
isPausingUpdate = false;
|
||||
if (isTop()) {
|
||||
releaseQueue();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let adInsertionCounter = 0;
|
||||
|
||||
const MIN_POLLING_INTERVAL = 1000 * 10;
|
||||
|
@ -237,7 +252,7 @@ if (!store.s.realtimeMode) {
|
|||
// TODO: 先頭のノートの作成日時が1日以上前であれば流速が遅いTLと見做してインターバルを通常より延ばす
|
||||
useInterval(async () => {
|
||||
paginator.fetchNewer({
|
||||
toQueue: !isTop(),
|
||||
toQueue: !isTop() || isPausingUpdate,
|
||||
});
|
||||
}, POLLING_INTERVAL, {
|
||||
immediate: false,
|
||||
|
@ -246,7 +261,7 @@ if (!store.s.realtimeMode) {
|
|||
|
||||
useGlobalEvent('notePosted', (note) => {
|
||||
paginator.fetchNewer({
|
||||
toQueue: !isTop(),
|
||||
toQueue: !isTop() || isPausingUpdate,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -257,7 +272,7 @@ useGlobalEvent('noteDeleted', (noteId) => {
|
|||
|
||||
function releaseQueue() {
|
||||
paginator.releaseQueue();
|
||||
scrollToTop(rootEl.value);
|
||||
scrollToTop(rootEl.value!);
|
||||
}
|
||||
|
||||
function prepend(note: Misskey.entities.Note & MisskeyEntity) {
|
||||
|
@ -267,7 +282,7 @@ function prepend(note: Misskey.entities.Note & MisskeyEntity) {
|
|||
note._shouldInsertAd_ = true;
|
||||
}
|
||||
|
||||
if (isTop()) {
|
||||
if (isTop() && !isPausingUpdate) {
|
||||
paginator.prepend(note);
|
||||
} else {
|
||||
paginator.enqueue(note);
|
||||
|
|
|
@ -45,7 +45,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { onUnmounted, onMounted, computed, useTemplateRef, TransitionGroup, markRaw, watch } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { useDocumentVisibility } from '@@/js/use-document-visibility.js';
|
||||
import type { notificationTypes } from '@@/js/const.js';
|
||||
import { getScrollContainer, scrollToTop } from '@@/js/scroll.js';
|
||||
import XNotification from '@/components/MkNotification.vue';
|
||||
import MkNote from '@/components/MkNote.vue';
|
||||
import { useStream } from '@/stream.js';
|
||||
|
@ -92,6 +94,49 @@ if (!store.s.realtimeMode) {
|
|||
});
|
||||
}
|
||||
|
||||
function isTop() {
|
||||
if (scrollContainer == null) return true;
|
||||
if (rootEl.value == null) return true;
|
||||
const scrollTop = scrollContainer.scrollTop;
|
||||
const tlTop = rootEl.value.offsetTop - scrollContainer.offsetTop;
|
||||
return scrollTop <= tlTop;
|
||||
}
|
||||
|
||||
function releaseQueue() {
|
||||
paginator.releaseQueue();
|
||||
scrollToTop(rootEl.value!);
|
||||
}
|
||||
|
||||
let scrollContainer: HTMLElement | null = null;
|
||||
|
||||
function onScrollContainerScroll() {
|
||||
if (isTop()) {
|
||||
paginator.releaseQueue();
|
||||
}
|
||||
}
|
||||
|
||||
watch(rootEl, (el) => {
|
||||
if (el && scrollContainer == null) {
|
||||
scrollContainer = getScrollContainer(el);
|
||||
if (scrollContainer == null) return;
|
||||
scrollContainer.addEventListener('scroll', onScrollContainerScroll, { passive: true }); // ほんとはscrollendにしたいけどiosが非対応
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const visibility = useDocumentVisibility();
|
||||
let isPausingUpdate = false;
|
||||
|
||||
watch(visibility, () => {
|
||||
if (visibility.value === 'hidden') {
|
||||
isPausingUpdate = true;
|
||||
} else { // 'visible'
|
||||
isPausingUpdate = false;
|
||||
if (isTop()) {
|
||||
releaseQueue();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function onNotification(notification) {
|
||||
const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
|
||||
if (isMuted || window.document.visibilityState === 'visible') {
|
||||
|
@ -101,7 +146,11 @@ function onNotification(notification) {
|
|||
}
|
||||
|
||||
if (!isMuted) {
|
||||
paginator.prepend(notification);
|
||||
if (isTop() && !isPausingUpdate) {
|
||||
paginator.prepend(notification);
|
||||
} else {
|
||||
paginator.enqueue(notification);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue