✨ Better attachment displaying

✨ Audio file support

pkg/views/src/components/posts/PostAttachment.vue

@@ -3,21 +3,18 @@
     Attached {{ props.attachments.length }} attachment(s)
   </v-chip>
 
-  <v-card v-else variant="outlined" class="max-w-[540px]" :ripple="canLightbox" @click="openLightbox">
-    <div class="content">
-      <img v-if="current.type === 1" :src="getUrl(current)" />
-      <video v-if="current.type === 2" controls class="w-full">
-        <source :src="getUrl(current)" />
+  <v-card v-else variant="outlined" class="max-w-[540px]">
+    <v-carousel hide-delimiters progress="primary" show-arrows="hover" height="100%">
+      <v-carousel-item v-for="item in attachments">
+        <img v-if="item.type === 1" :src="getUrl(item)" class="cursor-zoom-in" @click="openLightbox" />
+        <video v-if="item.type === 2" controls class="w-full">
+          <source :src="getUrl(item)" />
         </video>
+        <div v-if="item.type === 3" class="w-full px-7 py-12">
+          <audio controls :src="getUrl(item)" class="mx-auto"></audio>
         </div>
-
-    <div v-if="props.attachments.length > 1" class="switcher flex justify-between items-center px-5 py-2">
-      <div>{{ focus + 1 }} of {{ props.attachments.length }}</div>
-      <div>
-        <v-btn icon="mdi-arrow-left" variant="text" size="small" @click.stop="focusPrev" />
-        <v-btn icon="mdi-arrow-right" variant="text" size="small" @click.stop="focusNext" />
-      </div>
-    </div>
+      </v-carousel-item>
+    </v-carousel>
 
     <vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false">
       <template v-slot:close-btn="{ close }">
@@ -48,18 +45,6 @@ function openLightbox() {
     lightbox.value = true
   }
 }
-
-function focusNext() {
-  if (focus.value + 1 < props.attachments.length) {
-    focus.value++
-  }
-}
-
-function focusPrev() {
-  if (focus.value - 1 >= 0) {
-    focus.value--
-  }
-}
 </script>
 
 <style>

pkg/views/src/components/posts/PostItem.vue

@@ -46,7 +46,6 @@
 
 <script setup lang="ts">
 import { type Component } from "vue"
-import { useUserinfo } from "@/stores/userinfo"
 import ArticleContent from "@/components/posts/ArticleContent.vue"
 import MomentContent from "@/components/posts/MomentContent.vue"
 import CommentContent from "@/components/posts/CommentContent.vue"
@@ -54,8 +53,6 @@ import PostAttachment from "@/components/posts/PostAttachment.vue"
 import PostReaction from "@/components/posts/PostReaction.vue"
 import PostAction from "@/components/posts/PostAction.vue"
 
-const id = useUserinfo()
-
 const props = defineProps<{ item: any; brief?: boolean }>()
 const emits = defineEmits(["update:item"])
 

pkg/views/src/components/publish/parts/Media.vue

@@ -13,7 +13,7 @@
           variant="solo-filled"
           label="File Picker"
           v-model="picked"
-          :accept="['image/*', 'video/*']"
+          :accept="['image/*', 'video/*', 'audio/*']"
           :loading="props.uploading"
           @click:append="upload()"
         />