feat: support more kinds of attachment

components/publish/PublishAttachment.vue

@@ -17,8 +17,14 @@ defineEmits<{
 <template>
   <div relative group>
     <status-attachment :attachment="attachment" w-full />
-    <div absolute right-2 top-2 hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer op-0 group-hover:op-100>
+    <div absolute right-2 top-2>
-      <div v-if="removable" i-ri:close-line text-3 @click="$emit('remove')" />
+      <div
+        v-if="removable"
+        hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer op-0 group-hover:op-100
+        @click="$emit('remove')"
+      >
+        <div i-ri:close-line text-3 />
+      </div>
     </div>
   </div>
 </template>

components/publish/PublishWidget.vue

@@ -35,21 +35,23 @@ async function handlePaste(evt: ClipboardEvent) {
   if (!files)
     return
 
+  evt.preventDefault()
   await uploadAttachments(Array.from(files))
 }
 
 async function pickAttachments() {
   if (!globalThis.showOpenFilePicker)
-    // TODO: Safari don't support it.
+    // TODO: FireFox & Safari don't support it.
     return
 
   const handles = await showOpenFilePicker({
     multiple: true,
-    // TODO: add more kinds of files: videos, audios
     types: [{
-      description: 'Images',
+      description: 'Attachments',
       accept: {
-        'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.heic'],
+        'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.heic', '.heif'],
+        'video/*': ['.webm', '.mp4', '.m4v', '.mov', '.ogv', '.3gp'],
+        'audio/*': ['.mp3', '.ogg', '.oga', '.wav', '.flac', '.opus', '.aac', '.m4a', '.3gp', '.wma'],
       },
     }],
   })
@@ -68,7 +70,7 @@ async function uploadAttachments(files: File[]) {
   isUploading = false
 }
 
-async function removeAttachment(index: number) {
+function removeAttachment(index: number) {
   attachments.splice(index, 1)
 }
 

components/status/StatusAttachment.vue

@@ -22,7 +22,7 @@ const aspectRatio = computed(() => {
 </script>
 
 <template>
-  <template v-if="attachment.type === 'image' || attachment.type === 'gifv'">
+  <template v-if="attachment.type === 'image' ">
     <CommonBlurhash
       :blurhash="attachment.blurhash"
       class="status-attachment-image"
@@ -48,6 +48,25 @@ const aspectRatio = computed(() => {
       <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
     </video>
   </template>
+  <template v-else-if="attachment.type === 'gifv'">
+    <video
+      :poster="attachment.previewUrl"
+      loop
+      autoplay
+      border="~ base"
+      object-cover
+      :style="{
+        aspectRatio,
+      }"
+    >
+      <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
+    </video>
+  </template>
+  <template v-else-if="attachment.type === 'audio'">
+    <audio controls border="~ base">
+      <source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
+    </audio>
+  </template>
   <template v-else>
     TODO:
     <pre>{{ attachment }}