From 8f3dd106de460015ff1faee22677a7bdf2fda4ee Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Fri, 15 Nov 2024 07:29:10 +0100
Subject: [PATCH] fix(web): don't refresh panorama viewer when modifying asset

---
 .../asset-viewer/asset-viewer.svelte          |  4 +-
 .../asset-viewer/image-panorama-viewer.svelte | 32 +++++++++++
 .../asset-viewer/panorama-viewer.svelte       | 54 -------------------
 .../photo-sphere-viewer-adapter.svelte        |  2 +-
 .../asset-viewer/video-panorama-viewer.svelte | 29 ++++++++++
 .../asset-viewer/video-wrapper-viewer.svelte  |  5 +-
 6 files changed, 66 insertions(+), 60 deletions(-)
 create mode 100644 web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
 delete mode 100644 web/src/lib/components/asset-viewer/panorama-viewer.svelte
 create mode 100644 web/src/lib/components/asset-viewer/video-panorama-viewer.svelte

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 988707cfa7413..79b61d3a30191 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -43,10 +43,10 @@
   import DetailPanel from './detail-panel.svelte';
   import CropArea from './editor/crop-tool/crop-area.svelte';
   import EditorPanel from './editor/editor-panel.svelte';
-  import PanoramaViewer from './panorama-viewer.svelte';
   import PhotoViewer from './photo-viewer.svelte';
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-wrapper-viewer.svelte';
+  import ImagePanoramaViewer from './image-panorama-viewer.svelte';
 
   interface Props {
     assetStore?: AssetStore | null;
@@ -510,7 +510,7 @@
           {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
                 .toLowerCase()
                 .endsWith('.insp'))}
-            <PanoramaViewer {asset} />
+            <ImagePanoramaViewer {asset} />
           {:else if isShowEditor && selectedEditType === 'crop'}
             <CropArea {asset} />
           {:else}
diff --git a/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte b/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
new file mode 100644
index 0000000000000..6da8cc33d3bc9
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getAssetOriginalUrl, getKey } from '$lib/utils';
+  import { isWebCompatibleImage } from '$lib/utils/asset-utils';
+  import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
+  import { fade } from 'svelte/transition';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    asset: AssetResponseDto;
+  }
+
+  const { asset }: Props = $props();
+
+  const loadAssetData = async (id: string) => {
+    const data = await viewAsset({ id, size: AssetMediaSize.Preview, key: getKey() });
+    return URL.createObjectURL(data);
+  };
+</script>
+
+<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
+  {#await Promise.all([loadAssetData(asset.id), import('./photo-sphere-viewer-adapter.svelte')])}
+    <LoadingSpinner />
+  {:then [data, { default: PhotoSphereViewer }]}
+    <PhotoSphereViewer
+      panorama={data}
+      originalImageUrl={isWebCompatibleImage(asset) ? getAssetOriginalUrl(asset.id) : undefined}
+    />
+  {:catch}
+    {$t('errors.failed_to_load_asset')}
+  {/await}
+</div>
diff --git a/web/src/lib/components/asset-viewer/panorama-viewer.svelte b/web/src/lib/components/asset-viewer/panorama-viewer.svelte
deleted file mode 100644
index b17f9fdea77d2..0000000000000
--- a/web/src/lib/components/asset-viewer/panorama-viewer.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-  import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
-  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 { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-
-  interface Props {
-    asset: { id: string; type: AssetTypeEnum.Video } | AssetResponseDto;
-  }
-
-  let { asset }: Props = $props();
-
-  const photoSphereConfigs =
-    asset.type === AssetTypeEnum.Video
-      ? ([
-          import('@photo-sphere-viewer/equirectangular-video-adapter').then(
-            ({ EquirectangularVideoAdapter }) => EquirectangularVideoAdapter,
-          ),
-          import('@photo-sphere-viewer/video-plugin').then(({ VideoPlugin }) => [VideoPlugin]),
-          true,
-          import('@photo-sphere-viewer/video-plugin/index.css'),
-        ] as [PromiseLike<AdapterConstructor>, Promise<PluginConstructor[]>, true, unknown])
-      : ([undefined, [], false] as [undefined, [], false]);
-
-  const originalImageUrl =
-    asset.type === AssetTypeEnum.Image && isWebCompatibleImage(asset) ? getAssetOriginalUrl(asset.id) : null;
-
-  const loadAssetData = async () => {
-    if (asset.type === AssetTypeEnum.Video) {
-      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 url = URL.createObjectURL(data);
-    return url;
-  };
-</script>
-
-<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
-  <!-- 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'), ...photoSphereConfigs])}
-    <LoadingSpinner />
-  {:then [data, module, adapter, plugins, navbar]}
-    <module.default panorama={data} plugins={plugins ?? undefined} {navbar} {adapter} {originalImageUrl} />
-  {:catch}
-    {$t('errors.failed_to_load_asset')}
-  {/await}
-</div>
diff --git a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
index c18e6bd14bd1e..0c8f76a01ed7a 100644
--- a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
+++ b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
@@ -12,7 +12,7 @@
 
   interface Props {
     panorama: string | { source: string };
-    originalImageUrl: string | null;
+    originalImageUrl?: string;
     adapter?: AdapterConstructor | [AdapterConstructor, unknown];
     plugins?: (PluginConstructor | [PluginConstructor, unknown])[];
     navbar?: boolean;
diff --git a/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte b/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte
new file mode 100644
index 0000000000000..73315d661ed49
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getAssetOriginalUrl } from '$lib/utils';
+  import { fade } from 'svelte/transition';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    assetId: string;
+  }
+
+  const { assetId }: Props = $props();
+
+  const modules = Promise.all([
+    import('./photo-sphere-viewer-adapter.svelte').then((module) => module.default),
+    import('@photo-sphere-viewer/equirectangular-video-adapter').then((module) => module.EquirectangularVideoAdapter),
+    import('@photo-sphere-viewer/video-plugin').then((module) => module.VideoPlugin),
+    import('@photo-sphere-viewer/video-plugin/index.css'),
+  ]);
+</script>
+
+<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
+  {#await modules}
+    <LoadingSpinner />
+  {:then [PhotoSphereViewer, adapter, videoPlugin]}
+    <PhotoSphereViewer panorama={{ source: getAssetOriginalUrl(assetId) }} plugins={[videoPlugin]} {adapter} navbar />
+  {:catch}
+    {$t('errors.failed_to_load_asset')}
+  {/await}
+</div>
diff --git a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
index 3ee4791b073db..7ee21e59a237b 100644
--- a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { AssetTypeEnum } from '@immich/sdk';
   import { ProjectionType } from '$lib/constants';
   import VideoNativeViewer from '$lib/components/asset-viewer/video-native-viewer.svelte';
-  import PanoramaViewer from '$lib/components/asset-viewer/panorama-viewer.svelte';
+  import VideoPanoramaViewer from '$lib/components/asset-viewer/video-panorama-viewer.svelte';
 
   interface Props {
     assetId: string;
@@ -30,7 +29,7 @@
 </script>
 
 {#if projectionType === ProjectionType.EQUIRECTANGULAR}
-  <PanoramaViewer asset={{ id: assetId, type: AssetTypeEnum.Video }} />
+  <VideoPanoramaViewer {assetId} />
 {:else}
   <VideoNativeViewer
     {loopVideo}