self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-08 18:55:33 +02:00
Code Issues Releases Activity

feat(web): cancel pending requests on image change (#4145)

Browse Source
This commit is contained in:
Louis-Marie Michelin 2023-09-20 05:16:53 +02:00 committed by GitHub
parent 9030b1f89f
commit 816db700e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte'; import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, AssetResponseDto } from '@api'; import { api, AssetResponseDto } from '@api';
import { notificationController, NotificationType } from '../shared-components/notification/notification'; import { notificationController, NotificationType } from '../shared-components/notification/notification';
@ -13,6 +13,7 @@
let imgElement: HTMLDivElement; let imgElement: HTMLDivElement;
let assetData: string; let assetData: string;
let abortController: AbortController;
let hasZoomed = false; let hasZoomed = false;
let copyImageToClipboard: (src: string) => Promise<Blob>; let copyImageToClipboard: (src: string) => Promise<Blob>;
let canCopyImagesToClipboard: () => boolean; let canCopyImagesToClipboard: () => boolean;
@ -25,12 +26,20 @@
canCopyImagesToClipboard = module.canCopyImagesToClipboard; canCopyImagesToClipboard = module.canCopyImagesToClipboard;
}); });
onDestroy(() => {
abortController?.abort();
});
const loadAssetData = async ({ loadOriginal }: { loadOriginal: boolean }) => { const loadAssetData = async ({ loadOriginal }: { loadOriginal: boolean }) => {
try { try {
abortController?.abort();
abortController = new AbortController();
const { data } = await api.assetApi.serveFile( const { data } = await api.assetApi.serveFile(
{ id: asset.id, isThumb: false, isWeb: !loadOriginal, key: api.getKey() }, { id: asset.id, isThumb: false, isWeb: !loadOriginal, key: api.getKey() },
{ {
responseType: 'blob', responseType: 'blob',
signal: abortController.signal,
}, },
); );