mirror of
https://github.com/immich-app/immich.git
synced 2025-01-27 22:22:45 +01:00
fix(web): load original panorama if specified in user settings (#12123)
* 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:
parent
6cbdb4c90d
commit
92811190a8
2 changed files with 13 additions and 7 deletions
web/src/lib/components/asset-viewer
|
@ -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">
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue