Support image clips/gifs (#3583)

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -30,7 +30,10 @@ export const ImageCard: React.FC<IImageCardProps> = (
   props: IImageCardProps
 ) => {
   const file = useMemo(
-    () => (props.image.files.length > 0 ? props.image.files[0] : undefined),
+    () =>
+      props.image.visual_files.length > 0
+        ? props.image.visual_files[0]
+        : undefined,
     [props.image]
   );
 
@@ -138,6 +141,13 @@ export const ImageCard: React.FC<IImageCardProps> = (
     return height > width;
   }
 
+  const source =
+    props.image.paths.preview != ""
+      ? props.image.paths.preview ?? ""
+      : props.image.paths.thumbnail ?? "";
+  const video = source.includes("preview");
+  const ImagePreview = video ? "video" : "img";
+
   return (
     <GridCard
       className={`image-card zoom-${props.zoomIndex}`}
@@ -147,10 +157,12 @@ export const ImageCard: React.FC<IImageCardProps> = (
       image={
         <>
           <div className={cx("image-card-preview", { portrait: isPortrait() })}>
-            <img
+            <ImagePreview
+              loop={video}
+              autoPlay={video}
               className="image-card-preview-image"
               alt={props.image.title ?? ""}
-              src={props.image.paths.thumbnail ?? ""}
+              src={source}
             />
             {props.onPreview ? (
               <div className="preview-button">