self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-28 09:33:27 +02:00
Code Issues Releases Activity

feat(web): lazy load photo sphere viewer (#7057)

Browse Source 
* feat: lazy load photo sphere viewer

* destructure
This commit is contained in:
Ben McCann 2024-02-12 12:31:20 -08:00 committed by GitHub
parent afe5e17254
commit b43cadccee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,40 +2,29 @@
import { fade } from 'svelte/transition';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, type AssetResponseDto } from '@api';
import PhotoSphere from './photo-sphere-viewer-adapter.svelte';
export let asset: AssetResponseDto;
let dataUrl = '';
let errorMessage = '';
const loadAssetData = async () => {
try {
const { data } = await api.assetApi.serveFile(
{ id: asset.id, isThumb: false, isWeb: false, key: api.getKey() },
{ responseType: 'blob' },
);
if (data instanceof Blob) {
dataUrl = URL.createObjectURL(data);
return dataUrl;
return URL.createObjectURL(data);
} else {
throw new TypeError('Invalid data format');
}
} catch {
errorMessage = 'Failed to load asset';
return '';
}
};
</script>
<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
{#await loadAssetData()}
<!-- the photo sphere viewer is quite large, so lazy load it in parallel with loading the data -->
{#await Promise.all([loadAssetData(), import('./photo-sphere-viewer-adapter.svelte')])}
<LoadingSpinner />
{:then assetData}
{#if assetData}
<PhotoSphere panorama={assetData} />
{:else}
<p>{errorMessage}</p>
{/if}
{:then [data, module]}
<svelte:component this={module.default} panorama={data} />
{:catch}
Failed to load asset
{/await}
</div>