💄 Optimize image browsing again

src/components/chat/ChatEditor.vue

@@ -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 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"])
 

src/components/chat/renderer/MessageAttachment.vue

@@ -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-fit max-h-[540px]">
-    <v-card variant="outlined" class="w-full h-full">
     <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

src/components/posts/PostAttachment.vue

@@ -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 v-else variant="outlined" class="w-fit max-h-[540px]">
-    <v-card variant="outlined" class="w-full h-full">
     <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

src/components/publish/ArticleEditor.vue

@@ -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()

src/components/publish/MomentEditor.vue

@@ -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()

src/stores/notifications.ts

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