clones/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-09-21 10:37:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): load original panorama if specified in user settings (#12123)

Browse Source 
* fix: load original panorama if specified in user settings

* fixes after merge

* chore: cleanup

---------

Co-authored-by: Saschl <noreply@saschl.com>
Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
Saschl 2024-09-12 21:30:21 +02:00 committed by GitHub
parent 6cbdb4c90d
commit 92811190a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,13 @@
<script lang="ts"> <script lang="ts">
import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
import { getAssetOriginalUrl, getKey } from '$lib/utils'; import { getAssetOriginalUrl, getKey } from '$lib/utils';
import { isWebCompatibleImage } from '$lib/utils/asset-utils'; import { isWebCompatibleImage } from '$lib/utils/asset-utils';
import { AssetMediaSize, AssetTypeEnum, viewAsset, type AssetResponseDto } from '@immich/sdk'; import { AssetMediaSize, AssetTypeEnum, viewAsset, type AssetResponseDto } from '@immich/sdk';
import type { AdapterConstructor, PluginConstructor } from '@photo-sphere-viewer/core'; import type { AdapterConstructor, PluginConstructor } from '@photo-sphere-viewer/core';
import { t } from 'svelte-i18n';
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 { t } from 'svelte-i18n';
export let asset: { id: string; type: AssetTypeEnum.Video } | AssetResponseDto; export let asset: { id: string; type: AssetTypeEnum.Video } | AssetResponseDto;
const photoSphereConfigs = const photoSphereConfigs =
@ -20,17 +22,20 @@
] as [PromiseLike<AdapterConstructor>, Promise<PluginConstructor[]>, true, unknown]) ] as [PromiseLike<AdapterConstructor>, Promise<PluginConstructor[]>, true, unknown])
: ([undefined, [], false] as [undefined, [], false]); : ([undefined, [], false] as [undefined, [], false]);
const originalImageUrl =
asset.type === AssetTypeEnum.Image && isWebCompatibleImage(asset) ? getAssetOriginalUrl(asset.id) : null;
const loadAssetData = async () => { const loadAssetData = async () => {
if (asset.type === AssetTypeEnum.Video) { if (asset.type === AssetTypeEnum.Video) {
return { source: getAssetOriginalUrl(asset.id) }; return { source: getAssetOriginalUrl(asset.id) };
} }
if (originalImageUrl && $alwaysLoadOriginalFile) {
return getAssetOriginalUrl(asset.id);
}
const data = await viewAsset({ id: asset.id, size: AssetMediaSize.Preview, key: getKey() }); const data = await viewAsset({ id: asset.id, size: AssetMediaSize.Preview, key: getKey() });
const url = URL.createObjectURL(data); const url = URL.createObjectURL(data);
return url; return url;
}; };
const originalImageUrl =
asset.type === AssetTypeEnum.Image && isWebCompatibleImage(asset) ? getAssetOriginalUrl(asset.id) : null;
</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">

7
web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
View File

@ -1,10 +1,11 @@
<script lang="ts"> <script lang="ts">
import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
import { import {
EquirectangularAdapter,
Viewer, Viewer,
events, events,
EquirectangularAdapter,
type PluginConstructor,
type AdapterConstructor, type AdapterConstructor,
type PluginConstructor,
} from '@photo-sphere-viewer/core'; } from '@photo-sphere-viewer/core';
import '@photo-sphere-viewer/core/index.css'; import '@photo-sphere-viewer/core/index.css';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
@ -31,7 +32,7 @@
fisheye: true, fisheye: true,
}); });
if (originalImageUrl) { if (originalImageUrl && !$alwaysLoadOriginalFile) {
const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => { const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
// zoomLevel range: [0, 100] // zoomLevel range: [0, 100]
if (Math.round(zoomLevel) >= 75) { if (Math.round(zoomLevel) >= 75) {