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 { getAtk } from "@/stores/userinfo"
import { useChannels } from "@/stores/channels"
import Attachments from "@/components/chat/parts/Attachments.vue"
import Media from "@/components/publish/parts/Media.vue"
import Attachments from "@/components/chat/parts/ChatAttachments.vue"
import Media from "@/components/publish/parts/PublishMedia.vue"
const emits = defineEmits(["sent"])

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

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

@ -3,8 +3,7 @@
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-card variant="outlined" class="w-fit max-h-[540px]">
<v-carousel
hide-delimiter-background
height="100%"
@ -16,20 +15,23 @@
v-if="item.type === 1"
loading="lazy"
decoding="async"
class="cursor-zoom-in content-visibility-auto w-full h-full object-contain"
class="cursor-zoom-in content-visibility-auto max-h-[540px] object-cover object-c"
:src="getUrl(item)"
:alt="item.filename"
@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)" />
</video>
<div v-else-if="item.type === 3" class="w-full px-7 py-12">
<div v-if="item.type === 3" class="w-[480px] py-12">
<div class="text-center">
<p class="mb-1">{{ getFileName(item) }}</p>
<audio controls :src="getUrl(item)" class="mx-auto"></audio>
</div>
<div v-else class="w-full px-7 py-12">
</div>
<div v-else class="w-[480px] py-12">
<div class="text-center">
<p>{{ item.filename }}</p>
<p>{{ getFileName(item) }}</p>
<a class="underline" target="_blank" :href="getUrl(item)">Download</a>
</div>
</div>
@ -55,7 +57,6 @@
</template>
</vue-easy-lightbox>
</v-card>
</v-responsive>
</template>
<script setup lang="ts">
@ -77,6 +78,10 @@ const safeAreaTop = computed(() => {
return `${ui.safeArea.top}px`
})
function getFileName(item: any) {
return item.filename.replace(/\.[^/.]+$/, "")
}
function getUrl(item: any) {
return item.external_url
? item.external_url

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

@ -3,8 +3,7 @@
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-card v-else variant="outlined" class="w-fit max-h-[540px]">
<v-carousel
hide-delimiter-background
height="100%"
@ -15,17 +14,26 @@
<img
v-if="item.type === 1"
decoding="async"
class="cursor-zoom-in content-visibility-auto w-full h-full object-contain"
class="cursor-zoom-in max-h-[540px] object-cover object-c"
:src="getUrl(item)"
:alt="item.filename"
:alt="getFileName(item)"
@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)" />
</video>
<div v-if="item.type === 3" class="w-full px-7 py-12">
<div v-else-if="item.type === 3" class="w-[480px] py-12">
<div class="text-center">
<p class="mb-1">{{ getFileName(item) }}</p>
<audio controls :src="getUrl(item)" class="mx-auto"></audio>
</div>
</div>
<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>
@ -48,7 +56,6 @@
</template>
</vue-easy-lightbox>
</v-card>
</v-responsive>
</template>
<script setup lang="ts">
@ -70,6 +77,10 @@ const safeAreaTop = computed(() => {
return `${ui.safeArea.top}px`
})
function getFileName(item: any) {
return item.filename.replace(/\.[^/.]+$/, "")
}
function getUrl(item: any) {
return 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 { useRoute, useRouter } from "vue-router"
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"
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 PlannedPublish from "@/components/publish/parts/PlannedPublish.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 editor = useEditor()

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

4
src/stores/notifications.ts
View File

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