oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

perf(notification): タブがバックグラウンドにある場合、通知のリアルタイム描画を一時停止する (MisskeyIO#948)

Browse source
This commit is contained in:
あわわわとーにゅ 2025-03-31 03:36:26 +09:00 • committed by GitHub
parent 38c4b9d1a4
commit f419eee3f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 18 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/frontend/src/components/MkNotifications.vue
View file

@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onUnmounted, onMounted, computed, shallowRef, onActivated } from 'vue';
import { onUnmounted, onMounted, computed, ref, shallowRef, onActivated } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import XNotification from '@/components/MkNotification.vue';
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@ -43,6 +43,7 @@ const props = defineProps<{
}>();
const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
const hasNewNotificationWhileTabHidden = ref(false);
const pagination = computed(() => defaultStore.reactiveState.useGroupedNotifications.value ? {
endpoint: 'i/notifications-grouped' as const,
@ -64,9 +65,13 @@ function onNotification(notification) {
useStream().send('readNotification');
}
if (!isMuted && filterMutedNotification(notification)) {
if (!document.hidden && !isMuted && filterMutedNotification(notification)) {
pagingComponent.value?.prepend(notification);
}
if (document.hidden && !hasNewNotificationWhileTabHidden.value) {
hasNewNotificationWhileTabHidden.value = true;
}
}
function reload() {
@ -77,12 +82,22 @@ function reload() {
});
}
function onVisibilityChange() {
if (document.visibilityState === 'visible') {
if (hasNewNotificationWhileTabHidden.value) {
hasNewNotificationWhileTabHidden.value = false;
reload();
}
}
}
let connection: Misskey.ChannelConnection<Misskey.Channels['main']>;
onMounted(() => {
connection = useStream().useChannel('main');
connection.on('notification', onNotification);
connection.on('notificationFlushed', reload);
document.addEventListener('visibilitychange', onVisibilityChange);
});
onActivated(() => {
@ -91,6 +106,7 @@ onActivated(() => {
onUnmounted(() => {
if (connection) connection.dispose();
document.removeEventListener('visibilitychange', onVisibilityChange);
});
defineExpose({