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

feat(timeline): バックグラウンドに行った際、{noteId}.jsonの取得を休止し、復帰した際に直近10件を取得するように (MisskeyIO#944)

Browse source
This commit is contained in:
まっちゃてぃー。 2025-03-29 02:31:35 +09:00 • committed by GitHub
parent 1d6ea09aac
commit 38c4b9d1a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 64 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

75
packages/frontend/src/components/MkTimeline.vue
View file

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, watch, onUnmounted, provide, shallowRef } from 'vue';
import { computed, watch, onUnmounted, provide, shallowRef, onMounted } from 'vue';
import * as Misskey from 'misskey-js';
import MkNotes from '@/components/MkNotes.vue';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
@ -69,35 +69,44 @@ const prComponent = shallowRef<InstanceType<typeof MkPullToRefresh>>();
const tlComponent = shallowRef<InstanceType<typeof MkNotes>>();
let tlNotesCount = 0;
const notVisibleNoteData = new Array<object>();
async function prepend(data) {
if (tlComponent.value == null) return;
let note = data;
// チェックするプロパティはなんでも良い
// minimizeが有効でid以外が存在しない場合は取得する
if (!data.visibility) {
const res = await window.fetch(`/notes/${data.id}.json`, {
method: 'GET',
credentials: 'omit',
headers: {
'Authorization': 'anonymous',
'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
},
});
if (!res.ok) return;
note = deepMerge(data, await res.json());
if (!document.hidden) {
// チェックするプロパティはなんでも良い
// minimizeが有効でid以外が存在しない場合は取得する
if (!data.visibility) {
const res = await window.fetch(`/notes/${data.id}.json`, {
method: 'GET',
credentials: 'omit',
headers: {
'Authorization': 'anonymous',
'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
},
});
if (!res.ok) return;
note = deepMerge(data, await res.json());
}
tlNotesCount++;
if (instance.notesPerOneAd > 0 && tlNotesCount % instance.notesPerOneAd === 0) {
note._shouldInsertAd_ = true;
}
tlComponent.value.pagingComponent?.prepend(note);
} else {
notVisibleNoteData.push(data);
if (notVisibleNoteData.length > 10) {
notVisibleNoteData.shift();
}
}
tlNotesCount++;
if (instance.notesPerOneAd > 0 && tlNotesCount % instance.notesPerOneAd === 0) {
note._shouldInsertAd_ = true;
}
tlComponent.value.pagingComponent?.prepend(note);
emit('note');
if (props.sound) {
@ -105,6 +114,23 @@ async function prepend(data) {
}
}
async function loadUnloadedNotes() {
if (document.hidden) return;
if (tlComponent.value == null) return;
if (notVisibleNoteData.length === 0) return;
if (notVisibleNoteData.length >= 10) {
tlComponent.value.pagingComponent?.deleteItem();
tlComponent.value.pagingComponent?.stopFetch();
}
while (notVisibleNoteData.length > 0) {
await prepend(notVisibleNoteData.shift());
}
tlComponent.value.pagingComponent?.startFetch();
}
let connection: Misskey.ChannelConnection | null = null;
let connection2: Misskey.ChannelConnection | null = null;
let paginationQuery: Paging | null = null;
@ -291,8 +317,13 @@ watch(() => [props.list, props.antenna, props.channel, props.role, props.withRen
// 初回表示用
refreshEndpointAndChannel();
onMounted(() => {
document.addEventListener('visibilitychange', loadUnloadedNotes);
});
onUnmounted(() => {
disconnectChannel();
document.removeEventListener('visibilitychange', loadUnloadedNotes);
});
function reloadTimeline() {