From b0a69f9944357d62c67d51a560c425c3a46959cc Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 22 Jul 2024 16:14:26 +0600
Subject: [PATCH] web/PickerItem: always show type badge, prevent right click
 on video

- fixed type badge centering in webkit
- increased border radius of type badge to match icons inside it
---
 web/src/components/dialog/PickerItem.svelte | 27 ++++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte
index e53dcfe2..9760fdac 100644
--- a/web/src/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -26,21 +26,20 @@
         downloadFile(item.url);
     }}
 >
-    {#if item.type}
-        <div class="picker-type">
-            {#if item.type === "video"}
-                <IconMovie />
-            {:else if item.type === "photo"}
-                <IconPhoto />
-            {/if}
-        </div>
-    {/if}
+    <div class="picker-type">
+        {#if itemType === "video"}
+            <IconMovie />
+        {:else}
+            <IconPhoto />
+        {/if}
+    </div>
 
     <img
         class="picker-image"
         src={item.thumb ? item.thumb : item.url}
 
         class:loading={!imageLoaded}
+        class:video-thumbnail={item.thumb}
         on:load={() => (imageLoaded = true)}
 
         alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"
@@ -77,6 +76,10 @@
         opacity: 0.8;
     }
 
+    .picker-image.video-thumbnail {
+        pointer-events: none;
+    }
+
     @media (hover: hover) {
         .picker-item:hover .picker-image {
             opacity: 0.8;
@@ -99,13 +102,13 @@
         top: 6px;
         left: 6px;
 
-        border-radius: 4px;
+        border-radius: 6px;
 
         pointer-events: none;
     }
 
     .picker-type :global(svg) {
-        width: 21px;
-        height: 21px;
+        width: 22px;
+        height: 22px;
     }
 </style>