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

💄 Optimize image browsing again

Browse Source
This commit is contained in:
LittleSheep 2024-03-31 22:17:30 +08:00
parent 09154f1359
commit 18d70382ff
8 changed files with 117 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/chat/ChatEditor.vue
View File

@ -86,8 +86,8 @@ import { reactive, ref, watch } from "vue"
import { request } from "@/scripts/request" import { request } from "@/scripts/request"
import { getAtk } from "@/stores/userinfo" import { getAtk } from "@/stores/userinfo"
import { useChannels } from "@/stores/channels" import { useChannels } from "@/stores/channels"
import Attachments from "@/components/chat/parts/Attachments.vue" import Attachments from "@/components/chat/parts/ChatAttachments.vue"
import Media from "@/components/publish/parts/Media.vue" import Media from "@/components/publish/parts/PublishMedia.vue"
const emits = defineEmits(["sent"]) const emits = defineEmits(["sent"])

0
src/components/chat/parts/Attachments.vue → src/components/chat/parts/ChatAttachments.vue
View File

103
src/components/chat/renderer/MessageAttachment.vue
View File

@ -3,59 +3,60 @@
Attached {{ props.attachments.length }} attachment(s) Attached {{ props.attachments.length }} attachment(s)
</v-chip> </v-chip>
<v-responsive v-else :aspect-ratio="16 / 9" max-height="720"> <v-card variant="outlined" class="w-fit max-h-[540px]">
<v-card variant="outlined" class="w-full h-full"> <v-carousel
<v-carousel hide-delimiter-background
hide-delimiter-background height="100%"
height="100%" :hide-delimiters="props.attachments.length <= 1"
:hide-delimiters="props.attachments.length <= 1" :show-arrows="false"
:show-arrows="false" >
> <v-carousel-item v-for="(item, idx) in attachments">
<v-carousel-item v-for="(item, idx) in attachments"> <img
<img v-if="item.type === 1"
v-if="item.type === 1" loading="lazy"
loading="lazy" decoding="async"
decoding="async" class="cursor-zoom-in content-visibility-auto max-h-[540px] object-cover object-c"
class="cursor-zoom-in content-visibility-auto w-full h-full object-contain" :src="getUrl(item)"
:src="getUrl(item)" :alt="item.filename"
:alt="item.filename" @click="openLightbox(item, idx)"
@click="openLightbox(item, idx)" />
/> <video v-if="item.type === 2" controls class="w-full content-visibility-auto">
<video v-else-if="item.type === 2" controls class="w-full content-visibility-auto"> <source :src="getUrl(item)" />
<source :src="getUrl(item)" /> </video>
</video> <div v-if="item.type === 3" class="w-[480px] py-12">
<div v-else-if="item.type === 3" class="w-full px-7 py-12"> <div class="text-center">
<p class="mb-1">{{ getFileName(item) }}</p>
<audio controls :src="getUrl(item)" class="mx-auto"></audio> <audio controls :src="getUrl(item)" class="mx-auto"></audio>
</div> </div>
<div v-else class="w-full px-7 py-12"> </div>
<div class="text-center"> <div v-else class="w-[480px] py-12">
<p>{{ item.filename }}</p> <div class="text-center">
<a class="underline" target="_blank" :href="getUrl(item)">Download</a> <p>{{ getFileName(item) }}</p>
</div> <a class="underline" target="_blank" :href="getUrl(item)">Download</a>
</div> </div>
</v-carousel-item> </div>
</v-carousel> </v-carousel-item>
</v-carousel>
<vue-easy-lightbox <vue-easy-lightbox
teleport="#app" teleport="#app"
:visible="lightbox" :visible="lightbox"
:imgs="props.attachments.map((x) => getUrl(x))" :imgs="props.attachments.map((x) => getUrl(x))"
v-model:index="currentIndex" v-model:index="currentIndex"
@hide="lightbox = false" @hide="lightbox = false"
> >
<template v-slot:close-btn="{ close }"> <template v-slot:close-btn="{ close }">
<v-btn <v-btn
class="fixed left-2 top-2" class="fixed left-2 top-2"
icon="mdi-close" icon="mdi-close"
variant="text" variant="text"
color="white" color="white"
:style="`margin-top: ${safeAreaTop}`" :style="`margin-top: ${safeAreaTop}`"
@click="close" @click="close"
/> />
</template> </template>
</vue-easy-lightbox> </vue-easy-lightbox>
</v-card> </v-card>
</v-responsive>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -77,6 +78,10 @@ const safeAreaTop = computed(() => {
return `${ui.safeArea.top}px` return `${ui.safeArea.top}px`
}) })
function getFileName(item: any) {
return item.filename.replace(/\.[^/.]+$/, "")
}
function getUrl(item: any) { function getUrl(item: any) {
return item.external_url return item.external_url
? item.external_url ? item.external_url

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

@ -3,52 +3,59 @@
Attached {{ props.attachments.length }} attachment(s) Attached {{ props.attachments.length }} attachment(s)
</v-chip> </v-chip>
<v-responsive v-else :aspect-ratio="16 / 9" max-height="720"> <v-card v-else variant="outlined" class="w-fit max-h-[540px]">
<v-card variant="outlined" class="w-full h-full"> <v-carousel
<v-carousel hide-delimiter-background
hide-delimiter-background height="100%"
height="100%" :hide-delimiters="props.attachments.length <= 1"
:hide-delimiters="props.attachments.length <= 1" :show-arrows="false"
:show-arrows="false" >
> <v-carousel-item v-for="(item, idx) in attachments">
<v-carousel-item v-for="(item, idx) in attachments"> <img
<img v-if="item.type === 1"
v-if="item.type === 1" decoding="async"
decoding="async" class="cursor-zoom-in max-h-[540px] object-cover object-c"
class="cursor-zoom-in content-visibility-auto w-full h-full object-contain" :src="getUrl(item)"
:src="getUrl(item)" :alt="getFileName(item)"
:alt="item.filename" @click="openLightbox(item, idx)"
@click="openLightbox(item, idx)" />
/> <video v-else-if="item.type === 2" controls class="w-full content-visibility-auto">
<video v-if="item.type === 2" controls class="w-full content-visibility-auto"> <source :src="getUrl(item)" />
<source :src="getUrl(item)" /> </video>
</video> <div v-else-if="item.type === 3" class="w-[480px] py-12">
<div v-if="item.type === 3" class="w-full px-7 py-12"> <div class="text-center">
<p class="mb-1">{{ getFileName(item) }}</p>
<audio controls :src="getUrl(item)" class="mx-auto"></audio> <audio controls :src="getUrl(item)" class="mx-auto"></audio>
</div> </div>
</v-carousel-item> </div>
</v-carousel> <div v-else class="w-[480px] py-12">
<div class="text-center">
<p>{{ getFileName(item) }}</p>
<a class="underline" target="_blank" :href="getUrl(item)">Download</a>
</div>
</div>
</v-carousel-item>
</v-carousel>
<vue-easy-lightbox <vue-easy-lightbox
teleport="#app" teleport="#app"
:visible="lightbox" :visible="lightbox"
:imgs="props.attachments.map((x) => getUrl(x))" :imgs="props.attachments.map((x) => getUrl(x))"
v-model:index="currentIndex" v-model:index="currentIndex"
@hide="lightbox = false" @hide="lightbox = false"
> >
<template v-slot:close-btn="{ close }"> <template v-slot:close-btn="{ close }">
<v-btn <v-btn
class="fixed left-2 top-2" class="fixed left-2 top-2"
icon="mdi-close" icon="mdi-close"
variant="text" variant="text"
color="white" color="white"
:style="`margin-top: ${safeAreaTop}`" :style="`margin-top: ${safeAreaTop}`"
@click="close" @click="close"
/> />
</template> </template>
</vue-easy-lightbox> </vue-easy-lightbox>
</v-card> </v-card>
</v-responsive>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -70,6 +77,10 @@ const safeAreaTop = computed(() => {
return `${ui.safeArea.top}px` return `${ui.safeArea.top}px`
}) })
function getFileName(item: any) {
return item.filename.replace(/\.[^/.]+$/, "")
}
function getUrl(item: any) { function getUrl(item: any) {
return item.external_url return item.external_url
? item.external_url ? item.external_url

2
src/components/publish/ArticleEditor.vue
View File

@ -127,7 +127,7 @@ import { useRealms } from "@/stores/realms"
import { computed, reactive, ref, watch } from "vue" import { computed, reactive, ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router"
import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue" import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
import Media from "@/components/publish/parts/Media.vue" import Media from "@/components/publish/parts/PublishMedia.vue"
import PublishArea from "@/components/publish/parts/PublishArea.vue" import PublishArea from "@/components/publish/parts/PublishArea.vue"
const route = useRoute() const route = useRoute()

2
src/components/publish/MomentEditor.vue
View File

@ -93,7 +93,7 @@ import { reactive, ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router"
import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue" import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
import PublishArea from "@/components/publish/parts/PublishArea.vue" import PublishArea from "@/components/publish/parts/PublishArea.vue"
import Media from "@/components/publish/parts/Media.vue" import Media from "@/components/publish/parts/PublishMedia.vue"
const route = useRoute() const route = useRoute()
const editor = useEditor() const editor = useEditor()

0
src/components/publish/parts/Media.vue → src/components/publish/parts/PublishMedia.vue
View File

6
src/stores/notifications.ts
View File

@ -70,7 +70,11 @@ export const useNotifications = defineStore("notifications", () => {
} }
}) })
await Notification.requestPermission() if (Capacitor.getPlatform() === "web") {
await Notification.requestPermission()
} else {
await LocalNotifications.requestPermissions()
}
} }
function disconnect() { function disconnect() {