diff --git a/web/i18n/en/a11y/dialog.json b/web/i18n/en/a11y/dialog.json index 451d74cf..cdade377 100644 --- a/web/i18n/en/a11y/dialog.json +++ b/web/i18n/en/a11y/dialog.json @@ -1,3 +1,4 @@ { - "picker.item.generic": "media thumbnail" + "picker.item.photo": "photo thumbnail", + "picker.item.video": "video thumbnail" } diff --git a/web/src/components/dialog/PickerDialog.svelte b/web/src/components/dialog/PickerDialog.svelte index 5c5c0d61..c1bb82a5 100644 --- a/web/src/components/dialog/PickerDialog.svelte +++ b/web/src/components/dialog/PickerDialog.svelte @@ -50,6 +50,14 @@ open = true; }); } + + // item id for alt text + let counter = 0; + + const itemNumber = () => { + counter++ + return counter + } </script> <dialog @@ -74,7 +82,7 @@ <div class="picker-body"> {#if items} {#each items as item} - <PickerItem {item} /> + <PickerItem {item} number={itemNumber()} /> {/each} {/if} </div> diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte index b56abcc9..e53dcfe2 100644 --- a/web/src/components/dialog/PickerItem.svelte +++ b/web/src/components/dialog/PickerItem.svelte @@ -6,9 +6,18 @@ import Skeleton from "$components/misc/Skeleton.svelte"; + import IconMovie from "@tabler/icons-svelte/IconMovie.svelte"; + import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte"; + export let item: DialogPickerItem; + export let number: number; let imageLoaded = false; + + let itemType = item.type; + if (!itemType) { + itemType = "photo" + } </script> <button @@ -17,20 +26,31 @@ downloadFile(item.url); }} > + {#if item.type} + <div class="picker-type"> + {#if item.type === "video"} + <IconMovie /> + {:else if item.type === "photo"} + <IconPhoto /> + {/if} + </div> + {/if} + <img class="picker-image" src={item.thumb ? item.thumb : item.url} + class:loading={!imageLoaded} on:load={() => (imageLoaded = true)} - alt={$t("a11y.dialog.picker.item.generic")} - height="100" - width="100" + + alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}" /> <Skeleton class="picker-image" hidden={imageLoaded} /> </button> <style> .picker-item { + position: relative; background: none; padding: 2px; box-shadow: none; @@ -62,4 +82,30 @@ opacity: 0.8; } } + + .picker-type { + position: absolute; + color: var(--white); + background: rgba(0, 0, 0, 0.5); + width: 24px; + height: 24px; + z-index: 9; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + top: 6px; + left: 6px; + + border-radius: 4px; + + pointer-events: none; + } + + .picker-type :global(svg) { + width: 21px; + height: 21px; + } </style>