c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-29 15:11:58 +00:00
Code Releases Activity

feat(web): load original panorama image when zoomed in to 75% or above (#12222)

Browse source 
* feat(web): load original panorama image when zoomed in to 75% or above

* add checks that original 360 image is web compatible and better error handling

* fix web compatability check typing

* fix asset type
This commit is contained in:
Vietbao Tran 2024-09-02 12:39:55 -07:00 committed by GitHub
parent bd6c5e1b1c
commit 862d6d9abe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/lib/components/asset-viewer/panorama-viewer.svelte
View file

@ -1,11 +1,12 @@
<script lang="ts">
import { getAssetOriginalUrl, getKey } from '$lib/utils';
import { isWebCompatibleImage } from '$lib/utils/asset-utils';
import { AssetMediaSize, AssetTypeEnum, viewAsset, type AssetResponseDto } from '@immich/sdk';
import type { AdapterConstructor, PluginConstructor } from '@photo-sphere-viewer/core';
import { fade } from 'svelte/transition';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { t } from 'svelte-i18n';
export let asset: Pick<AssetResponseDto, 'id' | 'type'>;
export let asset: { id: string; type: AssetTypeEnum.Video } | AssetResponseDto;
const photoSphereConfigs =
asset.type === AssetTypeEnum.Video
@ -27,6 +28,9 @@
const url = URL.createObjectURL(data);
return url;
};
const originalImageUrl =
asset.type === AssetTypeEnum.Image && isWebCompatibleImage(asset) ? getAssetOriginalUrl(asset.id) : null;
</script>
<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
@ -34,7 +38,14 @@
{#await Promise.all([loadAssetData(), import('./photo-sphere-viewer-adapter.svelte'), ...photoSphereConfigs])}
<LoadingSpinner />
{:then [data, module, adapter, plugins, navbar]}
<svelte:component this={module.default} panorama={data} plugins={plugins ?? undefined} {navbar} {adapter} />
<svelte:component
this={module.default}
panorama={data}
plugins={plugins ?? undefined}
{navbar}
{adapter}
{originalImageUrl}
/>
{:catch}
{$t('errors.failed_to_load_asset')}
{/await}

16
web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import {
Viewer,
events,
EquirectangularAdapter,
type PluginConstructor,
type AdapterConstructor,
@ -9,6 +10,7 @@
import { onDestroy, onMount } from 'svelte';
export let panorama: string | { source: string };
export let originalImageUrl: string | null;
export let adapter: AdapterConstructor | [AdapterConstructor, unknown] = EquirectangularAdapter;
export let plugins: (PluginConstructor | [PluginConstructor, unknown])[] = [];
export let navbar = false;
@ -28,6 +30,20 @@
maxFov: 180,
fisheye: true,
});
if (originalImageUrl) {
const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
// zoomLevel range: [0, 100]
if (Math.round(zoomLevel) >= 75) {
// Replace the preview with the original
viewer.setPanorama(originalImageUrl, { showLoader: false, speed: 150 }).catch(() => {
viewer.setPanorama(panorama, { showLoader: false, speed: 0 }).catch(() => {});
});
viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
}
};
viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
}
});
onDestroy(() => {