From eb3f0655eb15203ca1b37287b017881715624791 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 21 Nov 2022 21:38:10 +0800
Subject: [PATCH] feat: support displaying video

---
 components/status/StatusAttachment.vue | 24 ++++++++++++++++++++++--
 components/status/StatusCard.vue       |  2 +-
 components/status/StatusMedia.vue      |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 668b4ffa..0c760560 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
+import { clamp } from '@vueuse/core'
 import type { Attachment } from 'masto'
 
 const { attachment } = defineProps<{
   attachment: Attachment
 }>()
 
-const aspectRatio = computed(() => {
+const rawAspectRatio = computed(() => {
   if (attachment.meta?.original?.aspect)
     return attachment.meta.original.aspect
   if (attachment.meta?.small?.aspect)
     return attachment.meta.small.aspect
   return undefined
 })
+
+const aspectRatio = computed(() => {
+  if (rawAspectRatio.value)
+    return clamp(rawAspectRatio.value, 0.5, 2)
+  return undefined
+})
 </script>
 
 <template>
@@ -21,13 +28,26 @@ const aspectRatio = computed(() => {
       class="status-attachment-image"
       :src="attachment.previewUrl!"
       :alt="attachment.description!"
-      border="~ border"
       :style="{
         aspectRatio,
       }"
+      border="~ border"
       object-cover rounded-lg
     />
   </template>
+  <template v-else-if="attachment.type === 'video'">
+    <video
+      :poster="attachment.previewUrl"
+      controls
+      border="~ border"
+      object-cover
+      :style="{
+        aspectRatio,
+      }"
+    >
+      <source :src="attachment.url || attachment.previewUrl" type="video/mp4">
+    </video>
+  </template>
   <template v-else>
     TODO:
     <pre>{{ attachment }}
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 5beb4e61..2f413b37 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -24,7 +24,7 @@ const router = useRouter()
 
 function go(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
-  const el = path.find(el => ['A', 'BUTTON', 'P'].includes(el.tagName?.toUpperCase()))
+  const el = path.find(el => ['A', 'BUTTON', 'P', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
   if (!el || el.tagName.toUpperCase() === 'P')
     router.push(`/@${status.account.acct}/${status.id}`)
 }
diff --git a/components/status/StatusMedia.vue b/components/status/StatusMedia.vue
index 1c162369..82f24b49 100644
--- a/components/status/StatusMedia.vue
+++ b/components/status/StatusMedia.vue
@@ -17,6 +17,7 @@ const { status } = defineProps<{
 <style lang="postcss">
 .status-media-container {
   --at-apply: gap-0.5;
+  position: relative;
   width: 100%;
   overflow: hidden;
 }