クリップタイムラインの埋め込み

This commit is contained in:
kakkokari-gtyih 2024-06-06 19:26:05 +09:00
parent 5edbe3aace
commit ed0389bf60
4 changed files with 227 additions and 46 deletions

View File

@ -0,0 +1,39 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.timelineRoot">
<div v-if="showHeader" :class="$style.header"><slot name="header"></slot></div>
<div :class="$style.body"><slot name="body"></slot></div>
</div>
</template>
<script setup lang="ts">
withDefaults(defineProps<{
showHeader?: boolean;
}>(), {
showHeader: true,
});
</script>
<style module lang="scss">
.timelineRoot {
background-color: var(--panel);
height: 100%;
max-height: var(--embedMaxHeight, none);
display: flex;
flex-direction: column;
}
.header {
flex-shrink: 0;
border-bottom: 1px solid var(--divider);
}
.body {
flex-grow: 1;
overflow-y: auto;
}
</style>

View File

@ -0,0 +1,145 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkLoading v-if="loading"/>
<XEmbedTimelineUI v-else-if="clip" :showHeader="normalizedShowHeader">
<template #header>
<div :class="$style.clipHeader">
<div :class="$style.headerClipIconRoot">
<i class="ti ti-paperclip"></i>
</div>
<div :class="$style.headerTitle" @click="top">
<div class="_nowrap"><a :href="`/clips/${clip.id}`" target="_blank" rel="noopener">{{ clip.name }}</a></div>
<div :class="$style.sub">{{ i18n.tsx.fromX({ x: instanceName }) }}</div>
</div>
<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
<img
:class="$style.instanceIcon"
:src="instance.iconUrl || '/favicon.ico'"
/>
</a>
</div>
</template>
<template #body>
<MkNotes
ref="notesEl"
:class="$style.userTimelineNotes"
:pagination="pagination"
:disableAutoLoad="!normalizedEnableAutoLoad"
:noGap="true"
:ad="false"
/>
</template>
</XEmbedTimelineUI>
<XNotFound v-else/>
</div>
</template>
<script setup lang="ts">
import { ref, computed, shallowRef } from 'vue';
import * as Misskey from 'misskey-js';
import MkNotes from '@/components/MkNotes.vue';
import XNotFound from '@/pages/not-found.vue';
import XEmbedTimelineUI from '@/pages/embed/_timeline_ui_.vue';
import type { Paging } from '@/components/MkPagination.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { url, instanceName } from '@/config.js';
import { scrollToTop } from '@/scripts/scroll.js';
import { isLink } from '@/scripts/is-link.js';
const props = defineProps<{
clipId: string;
showHeader?: string;
enableAutoLoad?: string;
}>();
// : true
const normalizedShowHeader = computed(() => props.showHeader !== 'false');
// : false
const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
const clip = ref<Misskey.entities.Clip | null>(null);
const pagination = computed(() => ({
endpoint: 'clips/notes',
params: {
clipId: props.clipId,
},
} as Paging));
const loading = ref(true);
const notesEl = shallowRef<InstanceType<typeof MkNotes> | null>(null);
function top(ev: MouseEvent) {
const target = ev.target as HTMLElement | null;
if (target && isLink(target)) return;
if (notesEl.value) {
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>
.clipHeader {
padding: 8px 16px;
display: flex;
min-width: 0;
align-items: center;
gap: var(--margin);
overflow: hidden;
.headerClipIconRoot {
flex-shrink: 0;
width: 32px;
height: 32px;
line-height: 32px;
font-size: 14px;
text-align: center;
background-color: var(--accentedBg);
color: var(--accent);
border-radius: 50%;
}
.headerTitle {
flex-grow: 1;
font-weight: 700;
line-height: 1.1;
min-width: 0;
.sub {
font-size: 0.8em;
font-weight: 400;
opacity: 0.7;
}
}
.instanceIconLink {
flex-shrink: 0;
display: block;
margin-left: auto;
height: 24px;
}
.instanceIcon {
height: 24px;
border-radius: 4px;
}
}
</style>

View File

@ -4,39 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.userTimelineRoot">
<div>
<MkLoading v-if="loading"/>
<template v-else-if="user">
<div v-if="normalizedShowHeader" :class="$style.userHeader">
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
<MkAvatar :class="$style.avatar" :user="user"/>
</a>
<div :class="$style.headerTitle" @click="top">
<I18n :src="i18n.ts.noteOf" tag="div" class="_nowrap">
<template #user>
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
<MkUserName :user="user"/>
</a>
</template>
</I18n>
<div :class="$style.sub">{{ i18n.tsx.fromX({ x: instanceName }) }}</div>
<XEmbedTimelineUI v-else-if="user" :showHeader="normalizedShowHeader">
<template #header>
<div :class="$style.userHeader">
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
<MkAvatar :class="$style.avatar" :user="user"/>
</a>
<div :class="$style.headerTitle" @click="top">
<I18n :src="i18n.ts.noteOf" tag="div" class="_nowrap">
<template #user>
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
<MkUserName :user="user"/>
</a>
</template>
</I18n>
<div :class="$style.sub">{{ i18n.tsx.fromX({ x: instanceName }) }}</div>
</div>
<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
<img
:class="$style.instanceIcon"
:src="instance.iconUrl || '/favicon.ico'"
/>
</a>
</div>
<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
<img
:class="$style.instanceIcon"
:src="instance.iconUrl || '/favicon.ico'"
/>
</a>
</div>
<MkNotes
ref="notesEl"
:class="$style.userTimelineNotes"
:pagination="pagination"
:disableAutoLoad="!normalizedEnableAutoLoad"
:noGap="true"
:ad="false"
/>
</template>
</template>
<template #body>
<MkNotes
ref="notesEl"
:class="$style.userTimelineNotes"
:pagination="pagination"
:disableAutoLoad="!normalizedEnableAutoLoad"
:noGap="true"
:ad="false"
/>
</template>
</XEmbedTimelineUI>
<XNotFound v-else/>
</div>
</template>
@ -46,6 +50,7 @@ import { ref, computed, shallowRef } from 'vue';
import * as Misskey from 'misskey-js';
import MkNotes from '@/components/MkNotes.vue';
import XNotFound from '@/pages/not-found.vue';
import XEmbedTimelineUI from '@/pages/embed/_timeline_ui_.vue';
import type { Paging } from '@/components/MkPagination.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
@ -98,22 +103,12 @@ misskeyApi('users/show', {
</script>
<style lang="scss" module>
.userTimelineRoot {
background-color: var(--panel);
height: 100%;
max-height: var(--embedMaxHeight, none);
display: flex;
flex-direction: column;
}
.userHeader {
flex-shrink: 0;
padding: 8px 16px;
display: flex;
min-width: 0;
align-items: center;
gap: var(--margin);
border-bottom: 1px solid var(--divider);
overflow: hidden;
.avatarLink {
@ -151,9 +146,4 @@ misskeyApi('users/show', {
border-radius: 4px;
}
}
.userTimelineNotes {
flex: 1;
overflow-y: auto;
}
</style>

View File

@ -565,6 +565,13 @@ const routes: RouteDef[] = [{
header: 'showHeader',
autoload: 'enableAutoLoad',
}
}, {
path: '/embed/clips/:clipId',
component: page(() => import('@/pages/embed/clip.vue')),
query: {
header: 'showHeader',
autoload: 'enableAutoLoad',
}
}, {
path: '/timeline',
component: page(() => import('@/pages/timeline.vue')),