From 7427788efd791da9ddbdd99e3ab2e7e73b2529d4 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 26 Jul 2024 21:34:18 +0600
Subject: [PATCH] web/PickerItem: add support for gifs in picker

---
 web/i18n/en/a11y/dialog.json                | 3 ++-
 web/src/components/dialog/PickerItem.svelte | 5 ++++-
 web/src/lib/types/dialog.ts                 | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/i18n/en/a11y/dialog.json b/web/i18n/en/a11y/dialog.json
index cdade377..84df736b 100644
--- a/web/i18n/en/a11y/dialog.json
+++ b/web/i18n/en/a11y/dialog.json
@@ -1,4 +1,5 @@
 {
     "picker.item.photo": "photo thumbnail",
-    "picker.item.video": "video thumbnail"
+    "picker.item.video": "video thumbnail",
+    "picker.item.gif": "gif thumbnail"
 }
diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte
index fa159981..f5071885 100644
--- a/web/src/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -8,6 +8,7 @@
 
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
+    import IconGif from "@tabler/icons-svelte/IconGif.svelte";
 
     export let item: DialogPickerItem;
     export let number: number;
@@ -21,6 +22,8 @@
     <div class="picker-type">
         {#if itemType === "video"}
             <IconMovie />
+        {:else if itemType === "gif"}
+            <IconGif />
         {:else}
             <IconPhoto />
         {/if}
@@ -31,7 +34,7 @@
         src={item.thumb ?? item.url}
 
         class:loading={!imageLoaded}
-        class:video-thumbnail={itemType === "video"}
+        class:video-thumbnail={["video", "gif"].includes(itemType)}
         on:load={() => imageLoaded = true}
 
         alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"
diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts
index 2e61946d..f01af5e4 100644
--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@@ -10,7 +10,7 @@ export type DialogButton = {
 export type SmallDialogIcons = "warn-red";
 
 export type DialogPickerItem = {
-    type?: 'photo' | 'video',
+    type?: 'photo' | 'video' | 'gif',
     url: string,
     thumb?: string,
 }