Hydrogen/SolarAgent
Hydrogen/SolarAgent
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

💄 Optimized attachment viewer

Browse Source 
🐛 Fix lightbox safe area issue
This commit is contained in:
LittleSheep 2024-03-30 01:05:47 +08:00
parent 5a1ef55126
commit a2beb45302
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ios/.gitignore vendored
View File

@ -11,3 +11,4 @@ capacitor-cordova-ios-plugins
# Generated Config files # Generated Config files
App/App/capacitor.config.json App/App/capacitor.config.json
App/App/config.xml App/App/config.xml
App/App.xcarchive

23
src/components/posts/PostAttachment.vue
View File

@ -3,10 +3,11 @@
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]"> <v-card v-else variant="outlined" class="max-w-[540px] max-h-[720px]">
<v-carousel hide-delimiters progress="primary" show-arrows="hover" height="100%"> <v-carousel hide-delimiter-background height="100%" :show-arrows="false">
<v-carousel-item v-for="item in attachments"> <v-carousel-item v-for="item in attachments">
<img v-if="item.type === 1" :src="getUrl(item)" class="cursor-zoom-in" @click="openLightbox" /> <img v-if="item.type === 1" :src="getUrl(item)" :alt="item.filename" class="cursor-zoom-in"
@click="openLightbox" />
<video v-if="item.type === 2" controls class="w-full"> <video v-if="item.type === 2" controls class="w-full">
<source :src="getUrl(item)" /> <source :src="getUrl(item)" />
</video> </video>
@ -18,7 +19,14 @@
<vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false"> <vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false">
<template v-slot:close-btn="{ close }"> <template v-slot:close-btn="{ close }">
<v-btn class="fixed left-2 top-2" icon="mdi-close" variant="text" color="white" @click="close" /> <v-btn
class="fixed left-2 top-2"
icon="mdi-close"
variant="text"
color="white"
:style="`margin-top: ${safeAreaTop}`"
@click="close"
/>
</template> </template>
</vue-easy-lightbox> </vue-easy-lightbox>
</v-card> </v-card>
@ -27,16 +35,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { buildRequestUrl } from "@/scripts/request" import { buildRequestUrl } from "@/scripts/request"
import { computed, ref } from "vue" import { computed, ref } from "vue"
import { useUI } from "@/stores/ui"
import VueEasyLightbox from "vue-easy-lightbox" import VueEasyLightbox from "vue-easy-lightbox"
const props = defineProps<{ attachments: any[]; overview?: boolean }>() const props = defineProps<{ attachments: any[]; overview?: boolean }>()
const ui = useUI()
const lightbox = ref(false) const lightbox = ref(false)
const focus = ref(0) const focus = ref(0)
const current = computed(() => props.attachments[focus.value]) const current = computed(() => props.attachments[focus.value])
const canLightbox = computed(() => current.value.type === 1) const canLightbox = computed(() => current.value.type === 1)
const safeAreaTop = computed(() => {
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}`)
} }