pixelfed/pixelfed

<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>