💄 Optimized attachments view
This commit is contained in:
parent
e986ff8c5f
commit
05e8782557
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user