Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-21 00:52:43 -05:00
Code Issues 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 { fade } from 'svelte/transition';
import LoadingSpinner from '../shared-components/loading-spinner.svelte'; import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, type AssetResponseDto } from '@api'; import { api, type AssetResponseDto } from '@api';
import PhotoSphere from './photo-sphere-viewer-adapter.svelte';
export let asset: AssetResponseDto; export let asset: AssetResponseDto;
let dataUrl = '';
let errorMessage = '';
const loadAssetData = async () => { const loadAssetData = async () => {
try {
const { data } = await api.assetApi.serveFile( const { data } = await api.assetApi.serveFile(
{ id: asset.id, isThumb: false, isWeb: false, key: api.getKey() }, { id: asset.id, isThumb: false, isWeb: false, key: api.getKey() },
{ responseType: 'blob' }, { responseType: 'blob' },
); );
if (data instanceof Blob) { if (data instanceof Blob) {
dataUrl = URL.createObjectURL(data); return URL.createObjectURL(data);
return dataUrl;
} else { } else {
throw new TypeError('Invalid data format'); throw new TypeError('Invalid data format');
} }
} catch {
errorMessage = 'Failed to load asset';
return '';
}
}; };
</script> </script>
<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center"> <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 /> <LoadingSpinner />
{:then assetData} {:then [data, module]}
{#if assetData} <svelte:component this={module.default} panorama={data} />
<PhotoSphere panorama={assetData} /> {:catch}
{:else} Failed to load asset
<p>{errorMessage}</p>
{/if}
{/await} {/await}
</div> </div>