perf(embed): improve embed performance (#14613)
* wip * wip * wip * refactor * refactor --------- Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
This commit is contained in:
syuilo
GitHub
parent
2aebdb8cc5
commit
3f0aaaa41e
12 changed files with 190 additions and 73 deletions
|
|
@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<EmLoading v-if="loading"/>
|
||||
<EmTimelineContainer v-else-if="clip" :showHeader="embedParams.header">
|
||||
<EmTimelineContainer v-if="clip" :showHeader="embedParams.header">
|
||||
<template #header>
|
||||
<div :class="$style.clipHeader">
|
||||
<div :class="$style.headerClipIconRoot">
|
||||
|
|
@ -39,20 +38,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, shallowRef, inject } from 'vue';
|
||||
import { ref, computed, inject, useTemplateRef } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { scrollToTop } from '@@/js/scroll.js';
|
||||
import { url, instanceName } from '@@/js/config.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { defaultEmbedParams } from '@@/js/embed-page.js';
|
||||
import type { Paging } from '@/components/EmPagination.vue';
|
||||
import EmLoading from '@/components/EmLoading.vue';
|
||||
import EmNotes from '@/components/EmNotes.vue';
|
||||
import XNotFound from '@/pages/not-found.vue';
|
||||
import EmTimelineContainer from '@/components/EmTimelineContainer.vue';
|
||||
import { misskeyApi } from '@/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { serverMetadata } from '@/server-metadata.js';
|
||||
import { url, instanceName } from '@@/js/config.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { defaultEmbedParams } from '@@/js/embed-page.js';
|
||||
import { assertServerContext } from '@/server-context.js';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -61,16 +59,30 @@ const props = defineProps<{
|
|||
|
||||
const embedParams = inject(DI.embedParams, defaultEmbedParams);
|
||||
|
||||
const clip = ref<Misskey.entities.Clip | null>(null);
|
||||
const serverMetadata = inject(DI.serverMetadata)!;
|
||||
|
||||
const serverContext = inject(DI.serverContext)!;
|
||||
|
||||
const clip = ref<Misskey.entities.Clip | null>();
|
||||
|
||||
if (assertServerContext(serverContext, 'clip')) {
|
||||
clip.value = serverContext.clip;
|
||||
} else {
|
||||
clip.value = await misskeyApi('clips/show', {
|
||||
clipId: props.clipId,
|
||||
}).catch(() => {
|
||||
return null;
|
||||
});
|
||||
}
|
||||
|
||||
const pagination = computed(() => ({
|
||||
endpoint: 'clips/notes',
|
||||
params: {
|
||||
clipId: props.clipId,
|
||||
},
|
||||
} as Paging));
|
||||
const loading = ref(true);
|
||||
|
||||
const notesEl = shallowRef<InstanceType<typeof EmNotes> | null>(null);
|
||||
const notesEl = useTemplateRef('notesEl');
|
||||
|
||||
function top(ev: MouseEvent) {
|
||||
const target = ev.target as HTMLElement | null;
|
||||
|
|
@ -80,16 +92,6 @@ function top(ev: MouseEvent) {
|
|||
scrollToTop(notesEl.value.$el as HTMLElement, { behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
misskeyApi('clips/show', {
|
||||
clipId: props.clipId,
|
||||
}).then(res => {
|
||||
clip.value = res;
|
||||
loading.value = false;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
loading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
|
|
@ -5,40 +5,37 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<div :class="$style.noteEmbedRoot">
|
||||
<EmLoading v-if="loading"/>
|
||||
<EmNoteDetailed v-else-if="note" :note="note"/>
|
||||
<EmNoteDetailed v-if="note" :note="note"/>
|
||||
<XNotFound v-else/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import EmNoteDetailed from '@/components/EmNoteDetailed.vue';
|
||||
import EmLoading from '@/components/EmLoading.vue';
|
||||
import XNotFound from '@/pages/not-found.vue';
|
||||
import { DI } from '@/di.js';
|
||||
import { misskeyApi } from '@/misskey-api.js';
|
||||
import { assertServerContext } from '@/server-context';
|
||||
|
||||
const props = defineProps<{
|
||||
noteId: string;
|
||||
}>();
|
||||
|
||||
const note = ref<Misskey.entities.Note | null>(null);
|
||||
const loading = ref(true);
|
||||
const serverContext = inject(DI.serverContext)!;
|
||||
|
||||
// TODO: クライアント側でAPIを叩くのは二度手間なので予めHTMLに埋め込んでおく
|
||||
misskeyApi('notes/show', {
|
||||
noteId: props.noteId,
|
||||
}).then(res => {
|
||||
// リモートのノートは埋め込ませない
|
||||
if (res.url == null && res.uri == null) {
|
||||
note.value = res;
|
||||
}
|
||||
loading.value = false;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
loading.value = false;
|
||||
});
|
||||
const note = ref<Misskey.entities.Note | null>(null);
|
||||
|
||||
if (assertServerContext(serverContext, 'note')) {
|
||||
note.value = serverContext.note;
|
||||
} else {
|
||||
note.value = await misskeyApi('notes/show', {
|
||||
noteId: props.noteId,
|
||||
}).catch(() => {
|
||||
return null;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
|
|
@ -38,14 +38,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, shallowRef, inject } from 'vue';
|
||||
import { computed, inject, useTemplateRef } from 'vue';
|
||||
import { scrollToTop } from '@@/js/scroll.js';
|
||||
import type { Paging } from '@/components/EmPagination.vue';
|
||||
import EmNotes from '@/components/EmNotes.vue';
|
||||
import XNotFound from '@/pages/not-found.vue';
|
||||
import EmTimelineContainer from '@/components/EmTimelineContainer.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { serverMetadata } from '@/server-metadata.js';
|
||||
import { url, instanceName } from '@@/js/config.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { DI } from '@/di.js';
|
||||
|
|
@ -55,6 +54,8 @@ const props = defineProps<{
|
|||
tag: string;
|
||||
}>();
|
||||
|
||||
const serverMetadata = inject(DI.serverMetadata)!;
|
||||
|
||||
const embedParams = inject(DI.embedParams, defaultEmbedParams);
|
||||
|
||||
const pagination = computed(() => ({
|
||||
|
|
@ -64,7 +65,7 @@ const pagination = computed(() => ({
|
|||
},
|
||||
} as Paging));
|
||||
|
||||
const notesEl = shallowRef<InstanceType<typeof EmNotes> | null>(null);
|
||||
const notesEl = useTemplateRef('notesEl');
|
||||
|
||||
function top(ev: MouseEvent) {
|
||||
const target = ev.target as HTMLElement | null;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<EmLoading v-if="loading"/>
|
||||
<EmTimelineContainer v-else-if="user" :showHeader="embedParams.header">
|
||||
<EmTimelineContainer v-if="user && !prohibited" :showHeader="embedParams.header">
|
||||
<template #header>
|
||||
<div :class="$style.userHeader">
|
||||
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
|
||||
|
|
@ -46,21 +45,20 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, shallowRef, inject } from 'vue';
|
||||
import { ref, computed, inject, useTemplateRef } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { url, instanceName } from '@@/js/config.js';
|
||||
import { defaultEmbedParams } from '@@/js/embed-page.js';
|
||||
import type { Paging } from '@/components/EmPagination.vue';
|
||||
import EmNotes from '@/components/EmNotes.vue';
|
||||
import EmAvatar from '@/components/EmAvatar.vue';
|
||||
import EmLoading from '@/components/EmLoading.vue';
|
||||
import EmUserName from '@/components/EmUserName.vue';
|
||||
import I18n from '@/components/I18n.vue';
|
||||
import XNotFound from '@/pages/not-found.vue';
|
||||
import EmTimelineContainer from '@/components/EmTimelineContainer.vue';
|
||||
import { misskeyApi } from '@/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { serverMetadata } from '@/server-metadata.js';
|
||||
import { url, instanceName } from '@@/js/config.js';
|
||||
import { defaultEmbedParams } from '@@/js/embed-page.js';
|
||||
import { assertServerContext } from '@/server-context.js';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -69,26 +67,37 @@ const props = defineProps<{
|
|||
|
||||
const embedParams = inject(DI.embedParams, defaultEmbedParams);
|
||||
|
||||
const user = ref<Misskey.entities.UserLite | null>(null);
|
||||
const serverMetadata = inject(DI.serverMetadata)!;
|
||||
|
||||
const serverContext = inject(DI.serverContext)!;
|
||||
|
||||
const user = ref<Misskey.entities.UserLite | null>();
|
||||
|
||||
const prohibited = ref(false);
|
||||
|
||||
if (assertServerContext(serverContext, 'user')) {
|
||||
user.value = serverContext.user;
|
||||
} else {
|
||||
user.value = await misskeyApi('users/show', {
|
||||
userId: props.userId,
|
||||
}).catch(() => {
|
||||
return null;
|
||||
});
|
||||
}
|
||||
|
||||
if (user.value?.host != null) {
|
||||
// リモートサーバーのユーザーは弾く
|
||||
prohibited.value = true;
|
||||
}
|
||||
|
||||
const pagination = computed(() => ({
|
||||
endpoint: 'users/notes',
|
||||
params: {
|
||||
userId: user.value?.id,
|
||||
},
|
||||
} as Paging));
|
||||
const loading = ref(true);
|
||||
|
||||
const notesEl = shallowRef<InstanceType<typeof EmNotes> | null>(null);
|
||||
|
||||
misskeyApi('users/show', {
|
||||
userId: props.userId,
|
||||
}).then(res => {
|
||||
user.value = res;
|
||||
loading.value = false;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
loading.value = false;
|
||||
});
|
||||
const notesEl = useTemplateRef('notesEl');
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue