From 87d7592b292c26f07b48e9b36a27dcd7264e7d01 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 17 Feb 2023 15:50:13 +0800
Subject: [PATCH] feat: add supports for preview audio and video file in
 attachment detail (#841)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature

#### What this PR does / why we need it:

支持在附件库的附件详情弹框中预览音视频文件。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/1923

#### Screenshots:

<img width="1011" alt="image" src="https://user-images.githubusercontent.com/21301288/217746883-92c46d4e-a51d-4b53-ae8e-f647a47b216f.png">
<img width="1010" alt="image" src="https://user-images.githubusercontent.com/21301288/217746922-9b014974-71aa-4d54-aa42-be2ae03647a1.png">


#### Special notes for your reviewer:

测试方式：

1. 上传若干视频和音频文件，检查是否可以正常播放即可。


可供测试的文件：[音视频测试.zip](https://github.com/halo-dev/console/files/10694553/default.zip)

#### Does this PR introduce a user-facing change?

```release-note
Console 端的附件详情支持预览音视频文件。
```
---
 .../components/AttachmentDetailModal.vue           | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index 72a17967..eb0b168b 100644
--- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -118,6 +118,20 @@ const onVisibleChange = (visible: boolean) => {
                 </template>
               </LazyImage>
             </div>
+            <div v-else-if="attachment?.spec.mediaType?.startsWith('video/')">
+              <video
+                :src="attachment.status?.permalink"
+                controls
+                class="max-w-full rounded sm:max-w-[50%]"
+              >
+                当前浏览器不支持该视频播放
+              </video>
+            </div>
+            <div v-else-if="attachment?.spec.mediaType?.startsWith('audio/')">
+              <audio :src="attachment.status?.permalink" controls>
+                当前浏览器不支持该音频播放
+              </audio>
+            </div>
             <span v-else> 此文件不支持预览 </span>
           </dd>
         </div>