feat: show media fallback for video item

src/renderer/src/components/ui/media.tsx

@@ -156,7 +156,13 @@ const MediaImpl: FC<MediaProps> = ({
   if (!type || !src) return null
 
   if (hidden && showFallback) {
-    return <FallbackMedia {...props} />
+    return (
+      <FallbackMedia
+        mediaContainerClassName={mediaContainerClassName}
+        className={className}
+        {...props}
+      />
+    )
   }
   return (
     <span
@@ -171,28 +177,30 @@ const MediaImpl: FC<MediaProps> = ({
 
 export const Media: FC<MediaProps> = memo((props) => <MediaImpl {...props} key={props.src} />)
 
-const FallbackMedia: FC<MediaProps> = ({ type, mediaContainerClassName, ...props }) => (
-  <div
-    className={cn(
-      !(props.width || props.height) && "size-full",
-      "center relative box-content h-24 rounded bg-zinc-100 object-cover dark:bg-neutral-900",
-      "not-prose flex max-h-full flex-col space-y-1 p-4",
-      mediaContainerClassName,
-    )}
-    style={{
-      height: props.height ? `${props.height}px` : "",
-      width: props.width ? `${props.width}px` : "100%",
-      ...props.style,
-    }}
-  >
-    <i className="i-mgc-close-cute-re text-xl text-red-500" />
-    <p>Media loaded failed</p>
-    <div className="space-x-1 break-all px-4 text-sm">
-      Go to{" "}
-      <a href={props.src} target="_blank" rel="noreferrer" className="follow-link--underline">
-        {props.src}
-      </a>
-      <i className="i-mgc-external-link-cute-re translate-y-px" />
+const FallbackMedia: FC<MediaProps> = ({ type, mediaContainerClassName, className, ...props }) => (
+  <div className={className}>
+    <div
+      className={cn(
+        !(props.width || props.height) && "size-full",
+        "center relative rounded bg-zinc-100 object-cover dark:bg-neutral-900",
+        "not-prose flex max-h-full flex-col space-y-1 p-4",
+        mediaContainerClassName,
+      )}
+      style={{
+        height: props.height ? `${props.height}px` : "",
+        width: props.width ? `${props.width}px` : "100%",
+        ...props.style,
+      }}
+    >
+      <i className="i-mgc-close-cute-re text-xl text-red-500" />
+      <p>Media loaded failed</p>
+      <div className="space-x-1 break-all px-4 text-sm">
+        Go to{" "}
+        <a href={props.src} target="_blank" rel="noreferrer" className="follow-link--underline">
+          {props.src}
+        </a>
+        <i className="i-mgc-external-link-cute-re translate-y-px" />
+      </div>
     </div>
   </div>
 )

src/renderer/src/modules/entry-column/Items/video-item.tsx

@@ -94,6 +94,7 @@ export function VideoItem({ entryId, entryPreview, translation }: UniversalItemP
                 width: 640,
                 height: 360,
               }}
+              showFallback={true}
             />
           ) : (
             <div className="center aspect-video w-full flex-col gap-1 bg-muted text-xs text-muted-foreground">