feat(asset): 素材悬浮预览支持视频播放 (#1240)

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com>
Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>

apps/web/src/api/template-editor/mediaAssets.ts

@@ -18,6 +18,7 @@ const mapAssetToMediaAsset = (asset: AssetItem): MediaAsset => {
     id: asset.id,
     name: asset.name,
     type: inferMediaType(asset.mime_type || ""),
+    source_url: asset.file_url,
     thumbnail_url: asset.thumbnail_url,
     duration: asset.duration ?? metaDuration,
     size: asset.file_size ?? undefined,

apps/web/src/api/template-editor/types.ts

@@ -424,6 +424,8 @@ export interface MediaAsset {
   id: string
   name: string
   type: "video" | "image" | "audio"
+  /** 源文件 URL（视频/原图），用于悬浮预览播放 */
+  source_url?: string
   /** 缩略图 URL */
   thumbnail_url?: string
   /** 时长（秒），仅 video/audio */

apps/web/src/components/asset-selector/AssetSelector.css

@@ -456,7 +456,8 @@
   margin-bottom: 8px;
 }
 
-.as-preview-overlay-thumb img {
+.as-preview-overlay-thumb img,
+.as-preview-overlay-thumb video {
   width: 100%;
   height: 100%;
   object-fit: cover;

apps/web/src/components/asset-selector/PreviewOverlay.tsx

@@ -12,7 +12,16 @@ const PreviewOverlay: React.FC<PreviewOverlayProps> = ({ asset, position }) => {
   return (
     <div className="as-preview-overlay" style={{ left: position.x, top: position.y }}>
       <div className="as-preview-overlay-thumb">
-        {asset.thumbnail_url ? (
+        {asset.type === "video" && asset.source_url ? (
+          <video
+            src={asset.source_url}
+            autoPlay
+            muted
+            loop
+            playsInline
+            poster={asset.thumbnail_url}
+          />
+        ) : asset.thumbnail_url ? (
           <img src={asset.thumbnail_url} alt={asset.name} />
         ) : (
           <span className="as-preview-overlay-thumb-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>