From 92811190a89eed8738debf270075bef4af39f532 Mon Sep 17 00:00:00 2001
From: Saschl <19493808+Saschl@users.noreply.github.com>
Date: Thu, 12 Sep 2024 21:30:21 +0200
Subject: [PATCH] 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>
---
 .../components/asset-viewer/panorama-viewer.svelte  | 13 +++++++++----
 .../asset-viewer/photo-sphere-viewer-adapter.svelte |  7 ++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/panorama-viewer.svelte b/web/src/lib/components/asset-viewer/panorama-viewer.svelte
index dee9a5f8ec..396685e351 100644
--- a/web/src/lib/components/asset-viewer/panorama-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/panorama-viewer.svelte
@@ -1,11 +1,13 @@
 <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';
-  import { t } from 'svelte-i18n';
+
   export let asset: { id: string; type: AssetTypeEnum.Video } | AssetResponseDto;
 
   const photoSphereConfigs =
@@ -20,17 +22,20 @@
         ] 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;
   };
-
-  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">
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 30a2018feb..da8febc3d9 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,10 +1,11 @@
 <script lang="ts">
+  import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import {
+    EquirectangularAdapter,
     Viewer,
     events,
-    EquirectangularAdapter,
-    type PluginConstructor,
     type AdapterConstructor,
+    type PluginConstructor,
   } from '@photo-sphere-viewer/core';
   import '@photo-sphere-viewer/core/index.css';
   import { onDestroy, onMount } from 'svelte';
@@ -31,7 +32,7 @@
       fisheye: true,
     });
 
-    if (originalImageUrl) {
+    if (originalImageUrl && !$alwaysLoadOriginalFile) {
       const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
         // zoomLevel range: [0, 100]
         if (Math.round(zoomLevel) >= 75) {