From 862d6d9abe68d255f3f44ced12dbdf5fb01d5da6 Mon Sep 17 00:00:00 2001
From: Vietbao Tran <46217210+TapuCosmo@users.noreply.github.com>
Date: Mon, 2 Sep 2024 12:39:55 -0700
Subject: [PATCH] feat(web): load original panorama image when zoomed in to 75%
 or above (#12222)

* 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
---
 .../asset-viewer/panorama-viewer.svelte          | 15 +++++++++++++--
 .../photo-sphere-viewer-adapter.svelte           | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/panorama-viewer.svelte b/web/src/lib/components/asset-viewer/panorama-viewer.svelte
index 71ed4b8997..dee9a5f8ec 100644
--- a/web/src/lib/components/asset-viewer/panorama-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/panorama-viewer.svelte
@@ -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}
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 0c0e707693..30a2018feb 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
@@ -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(() => {