From b4579e788bffdee7504aba680cd61a57c3e93c3d Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Tue, 13 Feb 2024 15:42:29 +0100
Subject: [PATCH] feat(web): add a setting to load the original file (#6753)

* feat(web): add a setting to load the original file

* fix: export

* fix: subtitle
---
 .../asset-viewer/photo-viewer.svelte          |  5 ++--
 .../quality-settings.svelte                   | 24 +++++++++++++++++++
 .../user-settings-list.svelte                 |  5 ++++
 web/src/lib/stores/preferences.store.ts       |  2 ++
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 web/src/lib/components/user-settings-page/quality-settings.svelte

diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index cf7c16b3d8..f957341fbf 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -11,6 +11,7 @@
   import { photoViewer } from '$lib/stores/assets.store';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { boundingBoxesArray } from '$lib/stores/people.store';
+  import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
 
   export let asset: AssetResponseDto;
   export let element: HTMLDivElement | undefined = undefined;
@@ -114,7 +115,7 @@
   zoomImageWheelState.subscribe((state) => {
     photoZoomState.set(state);
 
-    if (state.currentZoom > 1 && isWebCompatibleImage(asset) && !hasZoomed) {
+    if (state.currentZoom > 1 && isWebCompatibleImage(asset) && !hasZoomed && !$alwaysLoadOriginalFile) {
       hasZoomed = true;
 
       loadAssetData({ loadOriginal: true });
@@ -129,7 +130,7 @@
   transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
   class="flex h-full select-none place-content-center place-items-center"
 >
-  {#await loadAssetData({ loadOriginal: false })}
+  {#await loadAssetData({ loadOriginal: $alwaysLoadOriginalFile ? isWebCompatibleImage(asset) : false })}
     <LoadingSpinner />
   {:then}
     <div bind:this={imgElement} class="h-full w-full">
diff --git a/web/src/lib/components/user-settings-page/quality-settings.svelte b/web/src/lib/components/user-settings-page/quality-settings.svelte
new file mode 100644
index 0000000000..9adf77c5f4
--- /dev/null
+++ b/web/src/lib/components/user-settings-page/quality-settings.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { alwaysLoadOriginalFile } from '../../stores/preferences.store';
+  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+
+  const handleToggle = () => {
+    $alwaysLoadOriginalFile = !$alwaysLoadOriginalFile;
+  };
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 500 }}>
+    <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ml-4">
+        <SettingSwitch
+          title="Display original photos"
+          subtitle="Prefer to display the original photo when viewing an asset rather than thumbnails when the original asset is web-compatible. This may result in slower photo display speeds."
+          bind:checked={$alwaysLoadOriginalFile}
+          on:toggle={handleToggle}
+        />
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/lib/components/user-settings-page/user-settings-list.svelte b/web/src/lib/components/user-settings-page/user-settings-list.svelte
index 9405205e64..77e9fac69d 100644
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -17,6 +17,7 @@
   import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
   import AppearanceSettings from './appearance-settings.svelte';
   import TrashSettings from './trash-settings.svelte';
+  import QualitySettings from './quality-settings.svelte';
 
   export let keys: APIKeyResponseDto[] = [];
   export let devices: AuthDeviceResponseDto[] = [];
@@ -67,6 +68,10 @@
   <ChangePasswordSettings />
 </SettingAccordion>
 
+<SettingAccordion key="quality" title="Quality" subtitle="Manage your photo viewing experience">
+  <QualitySettings />
+</SettingAccordion>
+
 <SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
   <PartnerSettings user={$user} />
 </SettingAccordion>
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 09154f5b12..d23c3a3ac3 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -92,3 +92,5 @@ export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settin
 });
 
 export const showDeleteModal = persisted<boolean>('delete-confirm-dialog', true, {});
+
+export const alwaysLoadOriginalFile = persisted<boolean>('always-load-original-file', false, {});