feat: photo-viewer; use <img> instead of blob urls, simplify/refactor, avoid window.events (#9883)

* Photoviewer

* make copyImage/zoomToggle optional

* Add e2e test

* lint

* Accept bo0tzz suggestion

Co-authored-by: bo0tzz <git@bo0tzz.me>

* Bad merge and review comments

* unused import

---------

Co-authored-by: bo0tzz <git@bo0tzz.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis 2024-06-07 14:22:46 -04:00 committed by GitHub
parent def5f59242
commit 4b49d3a85d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 200 additions and 202 deletions

View file

@ -51,6 +51,8 @@
export let showShareButton: boolean;
export let showSlideshow = false;
export let hasStackChildren = false;
export let onZoomImage: () => void;
export let onCopyImage: () => void;
$: isOwner = $user && asset.ownerId === $user?.id;
@ -144,22 +146,11 @@
hideMobile={true}
icon={$photoZoomState && $photoZoomState.currentZoom > 1 ? mdiMagnifyMinusOutline : mdiMagnifyPlusOutline}
title={$t('zoom_image')}
on:click={() => {
const zoomImage = new CustomEvent('zoomImage');
window.dispatchEvent(zoomImage);
}}
on:click={onZoomImage}
/>
{/if}
{#if showCopyButton}
<CircleIconButton
color="opaque"
icon={mdiContentCopy}
title={$t('copy_image')}
on:click={() => {
const copyEvent = new CustomEvent('copyImage');
window.dispatchEvent(copyEvent);
}}
/>
<CircleIconButton color="opaque" icon={mdiContentCopy} title={$t('copy_image')} on:click={onCopyImage} />
{/if}
{#if !isOwner && showDownloadButton}