OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2024-12-29 18:09:05 +01:00
Code Issues Projects Releases Packages Wiki Activity

preview AP objects as quotes - fix #595

Browse source
This commit is contained in:
dakkar 2024-12-18 12:19:02 +00:00
parent 38d7faffdb
commit fb833d13cd
5 changed files with 43 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/MkNote.vue
View file

@ -102,7 +102,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" @click.stop/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview" @click.stop/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :showAsQuote="true" :class="$style.urlPreview" @click.stop/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">

2
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -117,7 +117,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll"/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" style="margin-top: 6px;"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="true" style="margin-top: 6px;"/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
</div>

40
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -43,6 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkButton>
</div>
</template>
<div v-else-if="theNote" :class="$style.quote"><XNoteSimple :note="theNote" :class="$style.quoteNote"/></div>
<div v-else>
<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substring(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail && !sensitive" :class="$style.thumbnail" :style="defaultStore.state.dataSaver.urlPreview ? '' : `background-image: url('${thumbnail}')`">
@ -83,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
import { defineAsyncComponent, onDeactivated, onUnmounted, ref, watch } from 'vue';
import { url as local } from '@@/js/config.js';
import { versatileLang } from '@@/js/intl-const.js';
import type { summaly } from '@misskey-dev/summaly';
@ -93,6 +94,14 @@ import { deviceKind } from '@/scripts/device-kind.js';
import MkButton from '@/components/MkButton.vue';
import { transformPlayerUrl } from '@/scripts/player-url-transform.js';
import { defaultStore } from '@/store.js';
import * as Misskey from 'misskey-js';
import { misskeyApi } from '@/scripts/misskey-api.js';
const XNoteSimple = defineAsyncComponent(() =>
(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNoteSimple.vue') :
(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNoteSimple.vue') :
null
);
type SummalyResult = Awaited<ReturnType<typeof summaly>>;
@ -100,10 +109,12 @@ const props = withDefaults(defineProps<{
url: string;
detail?: boolean;
compact?: boolean;
showAsQuote?: boolean;
showActions?: boolean;
}>(), {
detail: false,
compact: false,
showAsQuote: false,
showActions: true,
});
@ -120,6 +131,7 @@ const thumbnail = ref<string | null>(null);
const icon = ref<string | null>(null);
const sitename = ref<string | null>(null);
const sensitive = ref<boolean>(false);
const activityPub = ref<string | null>(null);
const player = ref({
url: null,
width: null,
@ -131,11 +143,24 @@ const tweetExpanded = ref(props.detail);
const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
const tweetHeight = ref(150);
const unknownUrl = ref(false);
const theNote = ref<Misskey.entities.Note | null>(null);
onDeactivated(() => {
playerEnabled.value = false;
});
watch(activityPub, async (uri) => {
if (!props.showAsQuote) return;
if (!uri) return;
try {
const response = await misskeyApi('ap/show', { uri });
if (response.type !== 'Note') return;
theNote.value = response['object'];
} catch (err) {
console.error(err);
}
});
const requestUrl = new URL(props.url);
if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid url');
@ -178,6 +203,7 @@ window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLa
sitename.value = info.sitename;
player.value = info.player;
sensitive.value = info.sensitive ?? false;
activityPub.value = info.activityPub;
});
function adjustTweetHeight(message: MessageEvent) {
@ -393,4 +419,16 @@ onUnmounted(() => {
height: 12px;
}
}
.quote {
padding: 8px 0;
}
.quoteNote {
padding: 16px;
// Made border solid, stylistic choice
border: solid 1px var(--MI_THEME-renote);
border-radius: var(--MI-radius-sm);
overflow: clip;
}
</style>

2
packages/frontend/src/components/SkNote.vue
View file

@ -104,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" @click.stop/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview" @click.stop/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :showAsQuote="true" :class="$style.urlPreview" @click.stop/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">

2
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -125,7 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll"/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" style="margin-top: 6px;"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="true" style="margin-top: 6px;"/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
</div>