56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<template>
|
|
<v-chip size="small" variant="tonal" prepend-icon="mdi-paperclip" v-if="props.overview">
|
|
Attached {{ props.attachments.length }} attachment(s)
|
|
</v-chip>
|
|
|
|
<v-card v-else variant="outlined" class="max-w-[540px]">
|
|
<v-carousel hide-delimiters progress="primary" show-arrows="hover" height="100%">
|
|
<v-carousel-item v-for="item in attachments">
|
|
<img v-if="item.type === 1" :src="getUrl(item)" class="cursor-zoom-in" @click="openLightbox" />
|
|
<video v-if="item.type === 2" controls class="w-full">
|
|
<source :src="getUrl(item)" />
|
|
</video>
|
|
<div v-if="item.type === 3" class="w-full px-7 py-12">
|
|
<audio controls :src="getUrl(item)" class="mx-auto"></audio>
|
|
</div>
|
|
</v-carousel-item>
|
|
</v-carousel>
|
|
|
|
<vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false">
|
|
<template v-slot:close-btn="{ close }">
|
|
<v-btn class="fixed left-2 top-2" icon="mdi-close" variant="text" color="white" @click="close" />
|
|
</template>
|
|
</vue-easy-lightbox>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { buildRequestUrl } from "@/scripts/request"
|
|
import { computed, ref } from "vue"
|
|
import VueEasyLightbox from "vue-easy-lightbox"
|
|
|
|
const props = defineProps<{ attachments: any[]; overview?: boolean }>()
|
|
|
|
const lightbox = ref(false)
|
|
const focus = ref(0)
|
|
|
|
const current = computed(() => props.attachments[focus.value])
|
|
const canLightbox = computed(() => current.value.type === 1)
|
|
|
|
function getUrl(item: any) {
|
|
return item.external_url ? item.external_url : buildRequestUrl("interactive", `/api/attachments/o/${item.file_id}`)
|
|
}
|
|
|
|
function openLightbox() {
|
|
if (canLightbox.value) {
|
|
lightbox.value = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.vel-model {
|
|
z-index: 10;
|
|
}
|
|
</style>
|