feat: support loading moment media images with thumbnails

console/src/components/MediaCard.vue

@@ -1,16 +1,15 @@
 <script lang="ts" setup>
 import type { MomentMedia } from "@/types";
-import MingCloseCircle from "~icons/mingcute/close-circle-fill";
-import LucideFileVideo from "~icons/lucide/file-video";
+import { computed } from "vue";
 import LucideFileAudio from "~icons/lucide/file-audio";
+import LucideFileVideo from "~icons/lucide/file-video";
+import MingCloseCircle from "~icons/mingcute/close-circle-fill";
 
 const props = withDefaults(
   defineProps<{
     media: MomentMedia;
   }>(),
-  {
-    media: undefined,
-  }
+  {}
 );
 
 const emit = defineEmits<{
@@ -40,54 +39,59 @@ const getExtname = (type: string) => {
   }
   return "";
 };
+
+const imageThumbnailUrl = computed(() => {
+  const { url } = props.media || {};
+  return `/apis/api.storage.halo.run/v1alpha1/thumbnails/-/via-uri?uri=${url}&width=w400`;
+});
 </script>
 <template>
   <div class="relative overflow-hidden">
-    <template v-if="props.media.type == 'PHOTO'">
+    <template v-if="media.type == 'PHOTO'">
       <div class="aspect-square">
         <img
-          :src="props.media.url"
+          :src="imageThumbnailUrl"
           class="size-full object-cover"
           loading="lazy"
         />
       </div>
     </template>
-    <template v-else-if="props.media.type == 'VIDEO'">
+    <template v-else-if="media.type == 'VIDEO'">
       <div class="aspect-square">
         <video
-          v-if="canPlayType(props.media.originType)"
+          v-if="canPlayType(media.originType)"
           class="size-full object-cover"
           preload="metadata"
         >
-          <source :src="props.media.url" :type="props.media.originType" />
+          <source :src="media.url" :type="media.originType" />
         </video>
         <div
           v-else
           class="size-full flex flex-col items-center justify-center bg-gray-100 space-y-1"
         >
           <LucideFileVideo />
           <span class="text-xs text-gray-500 font-sans">
-            {{ getExtname(props.media.originType) }}
+            {{ getExtname(media.originType) }}
           </span>
         </div>
       </div>
     </template>
-    <template v-else-if="props.media.type == 'AUDIO'">
+    <template v-else-if="media.type == 'AUDIO'">
       <div class="aspect-square">
         <audio
-          v-if="audioType(props.media.originType)"
+          v-if="audioType(media.originType)"
           class="object-cover"
           preload="metadata"
         >
-          <source :src="props.media.url" :type="props.media.originType" />
+          <source :src="media.url" :type="media.originType" />
         </audio>
         <div
           v-else
           class="size-full flex flex-col items-center justify-center bg-gray-100 space-y-1"
         >
           <LucideFileAudio />
           <span class="text-xs text-gray-500 font-sans">
-            {{ getExtname(props.media.originType) }}
+            {{ getExtname(media.originType) }}
           </span>
         </div>
       </div>

console/src/components/MomentPreview.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Moment } from "@/types";
+import type { Moment, MomentMedia } from "@/types";
 import { IconArrowLeft, IconArrowRight } from "@halo-dev/components";
 import hljs from "highlight.js/lib/common";
 import xml from "highlight.js/lib/languages/xml";
@@ -99,13 +99,17 @@ const getExtname = (type: string) => {
   }
   return "";
 };
+
+function getImageThumbnailUrl(media: MomentMedia) {
+  const { url } = media || {};
+  return `/apis/api.storage.halo.run/v1alpha1/thumbnails/-/via-uri?uri=${url}&width=w400`;
+}
 </script>
 <template>
   <PreviewDetailModal
-    v-if="selectedMedia"
-    v-model:visible="detailVisible"
+    v-if="detailVisible && selectedMedia"
     :media="selectedMedia"
-    @close="(selectedMedia = undefined) && (selectedIndex = 0)"
+    @close="detailVisible = false"
   >
     <template #actions>
       <span
@@ -145,7 +149,7 @@ const getExtname = (type: string) => {
           <div class="aspect-square" @click="handleClickMedium(index)">
             <template v-if="media.type == 'PHOTO'">
               <img
-                :src="media.url"
+                :src="getImageThumbnailUrl(media)"
                 class="size-full object-cover"
                 loading="lazy"
               />

console/src/components/PreviewDetailModal.vue

@@ -1,38 +1,31 @@
 <script setup lang="ts">
 import type { MomentMedia } from "@/types";
-import { VModal, VButton, VSpace } from "@halo-dev/components";
+import { VButton, VModal } from "@halo-dev/components";
+import { ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     media: MomentMedia;
   }>(),
   {
-    visible: false,
     media: undefined,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
 }>();
 
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 </script>
 <template>
   <VModal
+    ref="modal"
     title="预览"
-    :visible="visible"
     :width="1000"
     :layer-closable="true"
     height="80vh"
-    @update:visible="onVisibleChange"
+    @close="emit('close')"
   >
     <template #actions>
       <slot name="actions"></slot>
@@ -50,12 +43,7 @@ const onVisibleChange = (visible: boolean) => {
       </template>
     </div>
     <template #footer>
-      <VSpace>
-        <VButton type="default" @click="onVisibleChange(false)"
-          >关闭 Esc</VButton
-        >
-        <slot name="footer" />
-      </VSpace>
+      <VButton type="default" @click="modal?.close()">关闭 Esc</VButton>
     </template>
   </VModal>
 </template>