pixelfed/resources/assets/components/admin/partial/AdminModalPost.vue
2024-02-29 03:24:33 -07:00

140 lines
5.7 KiB
Vue

<template>
<div class="mb-3">
<div v-if="status.media_attachments && status.media_attachments.length" class="list-group-item" style="gap:1rem;overflow:hidden;">
<div class="text-center text-muted small font-weight-bold mb-3">Reported Post Media</div>
<div v-if="status.media_attachments && status.media_attachments.length" class="d-flex flex-grow-1" style="gap: 1rem;overflow-x:auto;">
<template
v-for="media in status.media_attachments">
<img
v-if="media.type === 'image'"
:src="media.url"
width="70"
height="70"
class="rounded"
style="object-fit: cover;"
@click="toggleLightbox"
onerror="this.src='/storage/no-preview.png';this.error=null;" />
<video
v-else-if="media.type === 'video'"
width="140"
height="90"
playsinline
@click.prevent="toggleVideoLightbox($event, media.url)"
class="rounded"
>
<source :src="media.url" :type="media.mime">
</video>
</template>
</div>
</div>
<div class="list-group-item d-flex flex-row flex-grow-1" style="gap:1rem;">
<div class="flex-grow-1">
<div v-if="status && status.in_reply_to_id && status.parent && status.parent.account" class="mb-3">
<template v-if="showInReplyTo">
<div class="mt-n1 text-center text-muted small font-weight-bold mb-1">Reply to</div>
<div class="media" style="gap: 1rem;">
<img
:src="status.parent.account.avatar"
width="40"
height="40"
class="rounded-lg"
onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
<div class="d-flex flex-column">
<p class="font-weight-bold mb-0" style="font-size: 11px;">
<a :href="`/i/web/profile/${status.parent.account.id}`" target="_blank">{{ status.parent.account.acct }}</a>
</p>
<admin-read-more :content="status.parent.content_text" />
<p class="mb-1">
<a :href="`/i/web/post/${status.parent.id}`" target="_blank" class="text-muted" style="font-size: 11px;">
<i class="far fa-link mr-1"></i> {{ formatDate(status.parent.created_at)}}
</a>
</p>
</div>
</div>
<hr class="my-1">
</template>
<a v-else class="btn btn-dark font-weight-bold btn-block btn-sm" href="#" @click.prevent="showInReplyTo = true">Show parent post</a>
</div>
<div>
<div class="mt-n1 text-center text-muted small font-weight-bold mb-1">Reported Post</div>
<div class="media" style="gap: 1rem;">
<img
:src="status.account.avatar"
width="40"
height="40"
class="rounded-lg"
onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
<div class="d-flex flex-column">
<p class="font-weight-bold mb-0" style="font-size: 11px;">
<a :href="`/i/web/profile/${status.account.id}`" target="_blank">{{ status.account.acct }}</a>
</p>
<template v-if="status && status.content_text && status.content_text.length">
<admin-read-more :content="status.content_text" />
</template>
<template v-else>
<admin-read-more content="EMPTY CAPTION" class="font-weight-bold text-muted" />
</template>
<p class="mb-0">
<a :href="`/i/web/post/${status.id}`" target="_blank" class="text-muted" style="font-size: 11px;">
<i class="far fa-link mr-1"></i> {{ formatDate(status.created_at)}}
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BigPicture from 'bigpicture';
import AdminReadMore from './AdminReadMore.vue';
export default {
props: {
status: {
type: Object
}
},
data() {
return {
showInReplyTo: false,
}
},
components: {
"admin-read-more": AdminReadMore
},
methods: {
toggleLightbox(e) {
BigPicture({
el: e.target
})
},
toggleVideoLightbox($event, src) {
BigPicture({
el: event.target,
vidSrc: src
})
},
formatDate(str) {
let date = new Date(str);
return new Intl.DateTimeFormat('default', {
month: 'long',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric'
}).format(date);
},
}
}
</script>