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

src/components/chat/renderer/MessageAttachment.vue

@@ -3,59 +3,60 @@
     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-carousel
-        hide-delimiter-background
-        height="100%"
-        :hide-delimiters="props.attachments.length <= 1"
-        :show-arrows="false"
-      >
-        <v-carousel-item v-for="(item, idx) in attachments">
-          <img
-            v-if="item.type === 1"
-            loading="lazy"
-            decoding="async"
-            class="cursor-zoom-in content-visibility-auto w-full h-full object-contain"
-            :src="getUrl(item)"
-            :alt="item.filename"
-            @click="openLightbox(item, idx)"
-          />
-          <video v-else-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">
+  <v-card variant="outlined" class="w-fit max-h-[540px]">
+    <v-carousel
+      hide-delimiter-background
+      height="100%"
+      :hide-delimiters="props.attachments.length <= 1"
+      :show-arrows="false"
+    >
+      <v-carousel-item v-for="(item, idx) in attachments">
+        <img
+          v-if="item.type === 1"
+          loading="lazy"
+          decoding="async"
+          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-if="item.type === 2" controls class="w-full content-visibility-auto">
+          <source :src="getUrl(item)" />
+        </video>
+        <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 class="text-center">
-              <p>{{ item.filename }}</p>
-              <a class="underline" target="_blank" :href="getUrl(item)">Download</a>
-            </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>
-        </v-carousel-item>
-      </v-carousel>
+        </div>
+      </v-carousel-item>
+    </v-carousel>
 
-      <vue-easy-lightbox
-        teleport="#app"
-        :visible="lightbox"
-        :imgs="props.attachments.map((x) => getUrl(x))"
-        v-model:index="currentIndex"
-        @hide="lightbox = false"
-      >
-        <template v-slot:close-btn="{ close }">
-          <v-btn
-            class="fixed left-2 top-2"
-            icon="mdi-close"
-            variant="text"
-            color="white"
-            :style="`margin-top: ${safeAreaTop}`"
-            @click="close"
-          />
-        </template>
-      </vue-easy-lightbox>
-    </v-card>
-  </v-responsive>
+    <vue-easy-lightbox
+      teleport="#app"
+      :visible="lightbox"
+      :imgs="props.attachments.map((x) => getUrl(x))"
+      v-model:index="currentIndex"
+      @hide="lightbox = false"
+    >
+      <template v-slot:close-btn="{ close }">
+        <v-btn
+          class="fixed left-2 top-2"
+          icon="mdi-close"
+          variant="text"
+          color="white"
+          :style="`margin-top: ${safeAreaTop}`"
+          @click="close"
+        />
+      </template>
+    </vue-easy-lightbox>
+  </v-card>
 </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,52 +3,59 @@
     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-carousel
-        hide-delimiter-background
-        height="100%"
-        :hide-delimiters="props.attachments.length <= 1"
-        :show-arrows="false"
-      >
-        <v-carousel-item v-for="(item, idx) in attachments">
-          <img
-            v-if="item.type === 1"
-            decoding="async"
-            class="cursor-zoom-in content-visibility-auto w-full h-full object-contain"
-            :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">
+  <v-card v-else variant="outlined" class="w-fit max-h-[540px]">
+    <v-carousel
+      hide-delimiter-background
+      height="100%"
+      :hide-delimiters="props.attachments.length <= 1"
+      :show-arrows="false"
+    >
+      <v-carousel-item v-for="(item, idx) in attachments">
+        <img
+          v-if="item.type === 1"
+          decoding="async"
+          class="cursor-zoom-in max-h-[540px] object-cover object-c"
+          :src="getUrl(item)"
+          :alt="getFileName(item)"
+          @click="openLightbox(item, idx)"
+        />
+        <video v-else-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-[480px] py-12">
+          <div class="text-center">
+            <p class="mb-1">{{ getFileName(item) }}</p>
             <audio controls :src="getUrl(item)" class="mx-auto"></audio>
           </div>
-        </v-carousel-item>
-      </v-carousel>
+        </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>
 
-      <vue-easy-lightbox
-        teleport="#app"
-        :visible="lightbox"
-        :imgs="props.attachments.map((x) => getUrl(x))"
-        v-model:index="currentIndex"
-        @hide="lightbox = false"
-      >
-        <template v-slot:close-btn="{ close }">
-          <v-btn
-            class="fixed left-2 top-2"
-            icon="mdi-close"
-            variant="text"
-            color="white"
-            :style="`margin-top: ${safeAreaTop}`"
-            @click="close"
-          />
-        </template>
-      </vue-easy-lightbox>
-    </v-card>
-  </v-responsive>
+    <vue-easy-lightbox
+      teleport="#app"
+      :visible="lightbox"
+      :imgs="props.attachments.map((x) => getUrl(x))"
+      v-model:index="currentIndex"
+      @hide="lightbox = false"
+    >
+      <template v-slot:close-btn="{ close }">
+        <v-btn
+          class="fixed left-2 top-2"
+          icon="mdi-close"
+          variant="text"
+          color="white"
+          :style="`margin-top: ${safeAreaTop}`"
+          @click="close"
+        />
+      </template>
+    </vue-easy-lightbox>
+  </v-card>
 </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", () => {
       }
     })
 
-    await Notification.requestPermission()
+    if (Capacitor.getPlatform() === "web") {
+      await Notification.requestPermission()
+    } else {
+      await LocalNotifications.requestPermissions()
+    }
   }
 
   function disconnect() {