From 5f2187e52a4c836bd7d8f52ce67a322e691823b1 Mon Sep 17 00:00:00 2001
From: Mees Frensel <meesfrensel@gmail.com>
Date: Thu, 23 Oct 2025 22:16:21 +0200
Subject: [PATCH] feat(web): animate gifs on hover

---
 .../assets/thumbnail/thumbnail.svelte         | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 1047f4a2dfcf0..dedb89d40d273 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { ProjectionType } from '$lib/constants';
   import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
-  import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
+  import { getAssetOriginalUrl, getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/date-time';
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { AssetMediaSize, AssetVisibility } from '@immich/sdk';
@@ -9,6 +9,7 @@
     mdiArchiveArrowDownOutline,
     mdiCameraBurst,
     mdiCheckCircle,
+    mdiFileGifBox,
     mdiHeart,
     mdiMotionPauseOutline,
     mdiMotionPlayOutline,
@@ -281,6 +282,14 @@
           </div>
         {/if}
 
+        {#if asset.isImage && asset.duration}
+          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+            <span class="pe-2 pt-2">
+              <Icon icon={mdiFileGifBox} size="24" />
+            </span>
+          </div>
+        {/if}
+
         <!-- Stacked asset -->
         {#if asset.stack && showStackedIcon}
           <div
@@ -342,6 +351,25 @@
             playbackOnIconHover={!$playVideoThumbnailOnHover}
           />
         </div>
+      {:else if asset.isImage && asset.duration && mouseOver}
+        <!-- GIF -->
+        <div class="absolute top-0 h-full w-full pointer-events-none">
+          <div class="absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%]"></div>
+          <ImageThumbnail
+            class={imageClass}
+            {brokenAssetClass}
+            url={getAssetOriginalUrl({ id: asset.id, cacheKey: asset.thumbhash })}
+            altText={$getAltText(asset)}
+            widthStyle="{width}px"
+            heightStyle="{height}px"
+            curve={selected}
+          />
+          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+            <span class="pe-2 pt-2">
+              <Icon icon={mdiMotionPauseOutline} size="24" />
+            </span>
+          </div>
+        </div>
       {/if}
 
       {#if (!loaded || thumbError) && asset.thumbhash}