Revert "feat: improve tl performance"

This commit is contained in:
Mar0xy 2023-10-03 20:21:26 +02:00
parent 38e35e1472
commit bf3d493d04
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
84 changed files with 960 additions and 2072 deletions

View file

@ -128,7 +128,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
<template v-if="narrow">
<XFiles :key="user.id" :user="user"/>
<XPhotos :key="user.id" :user="user"/>
<XActivity :key="user.id" :user="user"/>
</template>
<MkStickyContainer>
@ -144,7 +144,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
<XFiles :key="user.id" :user="user"/>
<XPhotos :key="user.id" :user="user"/>
<XActivity :key="user.id" :user="user"/>
<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user"/>
</div>
@ -193,7 +193,7 @@ function calcAge(birthdate: string): number {
return yearDiff;
}
const XFiles = defineAsyncComponent(() => import('./index.files.vue'));
const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
const XListenBrainz = defineAsyncComponent(() => import("./index.listenbrainz.vue"));

View file

@ -9,18 +9,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header>{{ i18n.ts.images }}</template>
<div :class="$style.root">
<MkLoading v-if="fetching"/>
<div v-if="!fetching && files.length > 0" :class="$style.stream">
<div v-if="!fetching && images.length > 0" :class="$style.stream">
<MkA
v-for="file in files"
:key="file.note.id + file.file.id"
v-for="image in images"
:key="image.note.id + image.file.id"
:class="$style.img"
:to="notePage(file.note)"
:to="notePage(image.note)"
>
<!-- TODO: 画像以外のファイルに対応 -->
<ImgWithBlurhash :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name"/>
<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
</MkA>
</div>
<p v-if="!fetching && files.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
<p v-if="!fetching && images.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
</div>
</MkContainer>
</template>
@ -41,7 +40,7 @@ const props = defineProps<{
}>();
let fetching = $ref(true);
let files = $ref<{
let images = $ref<{
note: Misskey.entities.Note;
file: Misskey.entities.DriveFile;
}[]>([]);
@ -53,15 +52,24 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
}
onMounted(() => {
const image = [
'image/jpeg',
'image/webp',
'image/avif',
'image/png',
'image/gif',
'image/apng',
'image/vnd.mozilla.apng',
];
os.api('users/notes', {
userId: props.user.id,
withFiles: true,
fileType: image,
excludeNsfw: defaultStore.state.nsfw !== 'ignore',
limit: 15,
limit: 10,
}).then(notes => {
for (const note of notes) {
for (const file of note.files) {
files.push({
images.push({
note,
file,
});