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

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">

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>

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>

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, {});