クリップタイムラインの埋め込み
This commit is contained in:
kakkokari-gtyih
parent
5edbe3aace
commit
ed0389bf60
39
packages/frontend/src/pages/embed/_timeline_ui_.vue
Normal file
39
packages/frontend/src/pages/embed/_timeline_ui_.vue
Normal 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>
|
||||
145
packages/frontend/src/pages/embed/clip.vue
Normal file
145
packages/frontend/src/pages/embed/clip.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')),
|
||||
|
|
|
|||
Loading…
Reference in a new issue