92 lines
2.5 KiB
Vue
92 lines
2.5 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-responsive v-else :aspect-ratio="16 / 9" max-height="720">
|
|
<v-card variant="outlined" class="w-full h-full">
|
|
<v-carousel
|
|
hide-delimiter-background
|
|
height="100%"
|
|
:hide-delimiters="props.attachments.length <= 1"
|
|
:show-arrows="false"
|
|
>
|
|
<v-carousel-item v-for="(item, idx) in attachments">
|
|
<img
|
|
v-if="item.type === 1"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="cursor-zoom-in content-visibility-auto w-full h-full object-contain"
|
|
:src="getUrl(item)"
|
|
:alt="item.filename"
|
|
@click="openLightbox(item, idx)"
|
|
/>
|
|
<video v-if="item.type === 2" controls class="w-full content-visibility-auto">
|
|
<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="props.attachments.map((x) => getUrl(x))"
|
|
v-model:index="currentIndex"
|
|
@hide="lightbox = false"
|
|
>
|
|
<template v-slot:close-btn="{ close }">
|
|
<v-btn
|
|
class="fixed left-2 top-2"
|
|
icon="mdi-close"
|
|
variant="text"
|
|
color="white"
|
|
:style="`margin-top: ${safeAreaTop}`"
|
|
@click="close"
|
|
/>
|
|
</template>
|
|
</vue-easy-lightbox>
|
|
</v-card>
|
|
</v-responsive>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { buildRequestUrl } from "@/scripts/request"
|
|
import { computed, ref } from "vue"
|
|
import { useUI } from "@/stores/ui"
|
|
import VueEasyLightbox from "vue-easy-lightbox"
|
|
|
|
const props = defineProps<{ attachments: any[]; overview?: boolean }>()
|
|
|
|
const ui = useUI()
|
|
|
|
const lightbox = ref(false)
|
|
|
|
const current = ref<any>(null)
|
|
const currentIndex = ref(0)
|
|
|
|
const safeAreaTop = computed(() => {
|
|
return `${ui.safeArea.top}px`
|
|
})
|
|
|
|
function getUrl(item: any) {
|
|
return item.external_url
|
|
? item.external_url
|
|
: buildRequestUrl("interactive", `/api/attachments/o/${item.file_id}`)
|
|
}
|
|
|
|
function openLightbox(item: any, idx: number) {
|
|
current.value = item
|
|
currentIndex.value = idx
|
|
lightbox.value = true
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.vel-model {
|
|
z-index: 10;
|
|
}
|
|
</style>
|