mirror of
https://github.com/immich-app/immich
synced 2025-06-07 14:50:59 +00:00
43 lines
1.2 KiB
Svelte
43 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { fade } from 'svelte/transition';
|
|
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
|
import { api, type AssetResponseDto } from '@api';
|
|
import View360, { EquirectProjection } from '@egjs/svelte-view360';
|
|
import './panorama-viewer.css';
|
|
|
|
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;
|
|
} else {
|
|
throw new Error('Invalid data format');
|
|
}
|
|
} catch (error) {
|
|
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()}
|
|
<LoadingSpinner />
|
|
{:then assetData}
|
|
{#if assetData}
|
|
<View360 autoResize={true} initialZoom={0.5} projection={new EquirectProjection({ src: assetData })} />
|
|
{:else}
|
|
<p>{errorMessage}</p>
|
|
{/if}
|
|
{/await}
|
|
</div>
|