💄 Optimized attachments view

This commit is contained in:
LittleSheep 2024-03-30 20:24:26 +08:00
parent e986ff8c5f
commit 05e8782557
2 changed files with 57 additions and 36 deletions

View File

@ -3,33 +3,53 @@
Attached {{ props.attachments.length }} attachment(s) Attached {{ props.attachments.length }} attachment(s)
</v-chip> </v-chip>
<v-card v-else variant="outlined" class="max-w-[540px] max-h-[720px]"> <v-responsive v-else :aspect-ratio="16 / 9" max-height="720">
<v-carousel hide-delimiter-background height="100%" :show-arrows="false"> <v-card variant="outlined" class="w-full h-full">
<v-carousel-item v-for="item in attachments"> <v-carousel
<img v-if="item.type === 1" :src="getUrl(item)" :alt="item.filename" class="cursor-zoom-in" hide-delimiter-background
@click="openLightbox" /> height="100%"
<video v-if="item.type === 2" controls class="w-full"> :hide-delimiters="props.attachments.length <= 1"
<source :src="getUrl(item)" /> :show-arrows="false"
</video> >
<div v-if="item.type === 3" class="w-full px-7 py-12"> <v-carousel-item v-for="(item, idx) in attachments">
<audio controls :src="getUrl(item)" class="mx-auto"></audio> <img
</div> v-if="item.type === 1"
</v-carousel-item> loading="lazy"
</v-carousel> decoding="async"
class="cursor-zoom-in content-visibility-auto"
: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="[getUrl(current)]" @hide="lightbox = false"> <vue-easy-lightbox
<template v-slot:close-btn="{ close }"> teleport="#app"
<v-btn :visible="lightbox"
class="fixed left-2 top-2" :imgs="props.attachments.map((x) => getUrl(x))"
icon="mdi-close" v-model:index="currentIndex"
variant="text" @hide="lightbox = false"
color="white" >
:style="`margin-top: ${safeAreaTop}`" <template v-slot:close-btn="{ close }">
@click="close" <v-btn
/> class="fixed left-2 top-2"
</template> icon="mdi-close"
</vue-easy-lightbox> variant="text"
</v-card> color="white"
:style="`margin-top: ${safeAreaTop}`"
@click="close"
/>
</template>
</vue-easy-lightbox>
</v-card>
</v-responsive>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -43,23 +63,24 @@ const props = defineProps<{ attachments: any[]; overview?: boolean }>()
const ui = useUI() const ui = useUI()
const lightbox = ref(false) const lightbox = ref(false)
const focus = ref(0)
const current = computed(() => props.attachments[focus.value]) const current = ref<any>(null)
const canLightbox = computed(() => current.value.type === 1) const currentIndex = ref(0)
const safeAreaTop = computed(() => { const safeAreaTop = computed(() => {
return `${ui.safeArea.top}px` return `${ui.safeArea.top}px`
}) })
function getUrl(item: any) { function getUrl(item: any) {
return item.external_url ? item.external_url : buildRequestUrl("interactive", `/api/attachments/o/${item.file_id}`) return item.external_url
? item.external_url
: buildRequestUrl("interactive", `/api/attachments/o/${item.file_id}`)
} }
function openLightbox() { function openLightbox(item: any, idx: number) {
if (canLightbox.value) { current.value = item
lightbox.value = true currentIndex.value = idx
} lightbox.value = true
} }
</script> </script>

View File

@ -11,13 +11,13 @@
> >
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<v-toolbar <v-toolbar
class="flex items-center justify-between px-[12px] border-opacity-15" class="flex items-center justify-between px-[14px] border-opacity-15"
color="primary" color="primary"
height="64" height="64"
:style="`padding-top: ${safeAreaTop}`" :style="`padding-top: ${safeAreaTop}`"
> >
<div class="flex items-center"> <div class="flex items-center">
<img src="/favicon.png" alt="Logo" width="36" height="36" class="block" /> <img src="/favicon.png" alt="Logo" width="32" height="32" class="block" />
<div v-show="!drawerMini" class="ms-6 font-medium">Solar Network</div> <div v-show="!drawerMini" class="ms-6 font-medium">Solar Network</div>
</div> </div>