self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-20 04:15:46 +02:00
Code Issues Releases Activity

feat(web): add zoom to photo viewer (#2577)

Browse Source 
* feat(web): add zoom to photo viewer

* reduce asset viewer next/prev button div width

* add wrap to block statement
This commit is contained in:
Manuel Taberna
2023-05-29 16:12:58 +02:00
committed by GitHub
parent 94d0705607
commit e7122d7a72
4 changed files with 59 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -325,7 +325,7 @@
{#if showNavigation}
<div
class={`row-start-2 row-span-end col-start-1 col-span-2 flex place-items-center hover:cursor-pointer w-3/4 mb-[60px] ${
class={`row-start-2 row-span-end col-start-1 flex place-items-center hover:cursor-pointer w-1/4 mb-[60px] ${
asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
}`}
on:mouseenter={() => {
@ -377,7 +377,7 @@
{#if showNavigation}
<div
class={`row-start-2 row-span-full col-start-3 col-span-2 flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end mb-[60px] ${
class={`row-start-2 row-span-full col-start-4 flex justify-end place-items-center hover:cursor-pointer w-1/4 justify-self-end mb-[60px] ${
asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
}`}
on:click={navigateAssetForward}

25
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@ -7,9 +7,11 @@
notificationController,
NotificationType
} from '../shared-components/notification/notification';
import { useZoomImageWheel } from '@zoom-image/svelte';
export let asset: AssetResponseDto;
export let publicSharedKey = '';
let imgElement: HTMLDivElement;
let assetData: string;
@ -70,6 +72,13 @@
});
}
};
const { createZoomImage: createZoomImageWheel } = useZoomImageWheel();
$: if (imgElement) {
createZoomImageWheel(imgElement, {
wheelZoomRatio: 0.06
});
}
</script>
<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} />
@ -81,12 +90,14 @@
{#await loadAssetData()}
<LoadingSpinner />
{:then assetData}
<img
transition:fade={{ duration: 150 }}
src={assetData}
alt={asset.id}
class="object-contain h-full transition-all"
draggable="false"
/>
<div bind:this={imgElement} class="h-full w-full">
<img
transition:fade={{ duration: 150 }}
src={assetData}
alt={asset.id}
class="object-contain h-full w-full"
draggable="false"
/>
</div>
{/await}
</div>