add AUDIO Type (#90)

type字段添加音频类型 AUDIO

```release-note
媒体类型支持音频
```

README.md

@@ -89,6 +89,7 @@ moments
  <th:block th:if="${not #lists.isEmpty(content.medium)}" th:each="momentItem : ${content.medium}">
  <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
  <video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></video>
+ <audio th:if="${momentItem.type.name == 'AUDIO'}" th:src="${momentItem.url}" controls="true"></audio>
  </th:block>
  </li>
  </ul>
@@ -144,6 +145,7 @@ moment
  <th:block th:if="${not #lists.isEmpty(content.medium)}" th:each="momentItem : ${content.medium}">
  <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
  <video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></video>
+ <audio th:if="${momentItem.type.name == 'AUDIO'}" th:src="${momentItem.url}" controls="true"></audio>
  </th:block>
  </div>
 </div>
@@ -178,6 +180,7 @@ List<[#MomentVo](#momentvo)>
  <th:block th:if="${not #lists.isEmpty(content.medium)}" th:each="momentItem : ${content.medium}">
  <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
  <video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></video>
+ <audio th:if="${momentItem.type.name == 'AUDIO'}" th:src="${momentItem.url}" controls="true"></audio>
  </th:block>
  </li>
 </ul>
@@ -208,6 +211,7 @@ List<[#MomentVo](#momentvo)>
  <th:block th:if="${not #lists.isEmpty(content.medium)}" th:each="momentItem : ${content.medium}">
  <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
  <video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></video>
+ <audio th:if="${momentItem.type.name == 'AUDIO'}" th:src="${momentItem.url}" controls="true"></audio>
  </th:block>
  </li>
  </ul>
@@ -270,7 +274,8 @@ List<[#MomentVo](#momentvo)>
 enum Target {
  PHOTO, // 图片
  VIDEO, // 视频
- POST; // 文章
+ POST, // 文章
+ AUDIO; // 音频
 }
 ```
 

console/src/components/MediaCard.vue

@@ -2,6 +2,7 @@
 import type { MomentMedia } from "@/types";
 import MingCloseCircle from "~icons/mingcute/close-circle-fill";
 import LucideFileVideo from "~icons/lucide/file-video";
+import LucideFileAudio from '~icons/lucide/file-audio';
 
 const props = withDefaults(
  defineProps<{
@@ -24,6 +25,10 @@ const canPlayType = (type: string) => {
  let obj = document.createElement("video");
  return !!obj.canPlayType(type);
 };
+const audioType = (type: string) => {
+ let obj = document.createElement("audio");
+ return !!obj.canPlayType(type);
+};
 
 const getExtname = (type: string) => {
  if (!type) {
@@ -67,6 +72,26 @@ const getExtname = (type: string) => {
  </div>
  </div>
  </template>
+ <template v-else-if="props.media.type == 'AUDIO'">
+ <div class="moments-aspect-w-1 moments-aspect-h-1">
+ <audio
+ v-if="audioType(props.media.originType)"
+ class="moments-object-cover"
+ preload="metadata"
+ >
+ <source :src="props.media.url" :type="props.media.originType" />
+ </audio>
+ <div
+ v-else
+ class="flex h-full w-full flex-col items-center justify-center moments-space-y-1 moments-bg-gray-100"
+ >
+ <LucideFileAudio />
+ <span class="font-sans text-xs text-gray-500">
+ {{ getExtname(props.media.originType) }}
+ </span>
+ </div>
+ </div>
+ </template>
  <label
  class="moments-absolute moments-cursor-pointer moments-right-1 moments-top-1"
  >

console/src/components/MomentEdit.vue

@@ -141,11 +141,14 @@ const supportImageTypes: string[] = [
 
 const supportVideoTypes: string[] = ["video/*"];
 
-const accepts = [...supportImageTypes, ...supportVideoTypes];
+const supportAudioTypes: string[] = ["audio/*"];
+
+const accepts = [...supportImageTypes, ...supportVideoTypes, ...supportAudioTypes];
 
 const mediumWhitelist: Map<string, MomentMediaTypeEnum> = new Map([
  ["image", "PHOTO"],
  ["video", "VIDEO"],
+ ["audio", "AUDIO"],
 ]);
 
 const onAttachmentsSelect = async (attachments: AttachmentLike[]) => {

console/src/components/MomentPreview.vue

@@ -3,6 +3,7 @@ import type { Moment } from "@/types";
 import { IconArrowLeft, IconArrowRight } from "@halo-dev/components";
 import { computed, inject, ref } from "vue";
 import LucideFileVideo from "~icons/lucide/file-video";
+import LucideFileAudio from '~icons/lucide/file-audio';
 import PreviewDetailModal from "./PreviewDetailModal.vue";
 import hljs from "highlight.js/lib/common";
 import xml from "highlight.js/lib/languages/xml";
@@ -164,6 +165,18 @@ const getExtname = (type: string) => {
  </span>
  </div>
  </template>
+ <template v-else-if="media.type == 'AUDIO'">
+ <div
+ class="moments-flex moments-h-full moments-w-full moments-flex-col moments-items-center moments-justify-center moments-space-y-1 moments-bg-gray-100"
+ >
+ <LucideFileAudio />
+ <span
+ class="moments-font-sans moments-text-xs moments-text-gray-500"
+ >
+ {{ getExtname(media.originType) }}
+ </span>
+ </div>
+ </template>
  </div>
  </li>
  </ul>

console/src/types/index.ts

@@ -55,6 +55,7 @@ declare const MomentMediaTypeEnum: {
  readonly Photo: "PHOTO";
  readonly Video: "VIDEO";
  readonly Post: "POST";
+ readonly Audio: "AUDIO";
 };
 
 export type MomentMediaTypeEnum =

src/main/java/run/halo/moments/Moment.java

@@ -83,6 +83,7 @@ public enum MomentMediaType {
  PHOTO,
  VIDEO,
  POST,
+ AUDIO,
  // TODO Might add more types here in the future
  }