feat(web): new look option for slideshow (#8924)

feat: new look option for slideshow

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -14,7 +14,7 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import { getAltText } from '$lib/utils/thumbnail-util';
-  import { slideshowLookCssMapping, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
+  import { SlideshowLook, slideshowLookCssMapping, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
 
   const { slideshowState, slideshowLook } = slideshowStore;
 
@@ -150,15 +150,24 @@
 <div
   bind:this={element}
   transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
-  class="flex h-full select-none place-content-center place-items-center"
+  class="relative h-full select-none"
 >
   {#if !imageLoaded}
-    <LoadingSpinner />
+    <div class="flex h-full items-center justify-center">
+      <LoadingSpinner />
+    </div>
   {:else}
-    <div bind:this={imgElement} class="h-full w-full">
+    <div bind:this={imgElement} class="h-full w-full" transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}>
+      {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
+        <img
+          src={assetData}
+          alt={getAltText(asset)}
+          class="absolute top-0 left-0 -z-10 object-cover h-full w-full blur-lg"
+          draggable="false"
+        />
+      {/if}
       <img
         bind:this={$photoViewer}
-        transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
         src={assetData}
         alt={getAltText(asset)}
         class="h-full w-full {$slideshowState === SlideshowState.None

web/src/lib/components/slideshow-settings.svelte

@@ -4,7 +4,14 @@
     SettingInputFieldType,
   } from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { mdiArrowDownThin, mdiArrowUpThin, mdiFitToPageOutline, mdiFitToScreenOutline, mdiShuffle } from '@mdi/js';
+  import {
+    mdiArrowDownThin,
+    mdiArrowUpThin,
+    mdiFitToPageOutline,
+    mdiFitToScreenOutline,
+    mdiPanorama,
+    mdiShuffle,
+  } from '@mdi/js';
   import { SlideshowLook, SlideshowNavigation, slideshowStore } from '../stores/slideshow.store';
   import Button from './elements/buttons/button.svelte';
   import type { RenderedOption } from './elements/dropdown.svelte';
@@ -23,6 +30,7 @@
   const lookOptions: Record<SlideshowLook, RenderedOption> = {
     [SlideshowLook.Contain]: { icon: mdiFitToScreenOutline, title: 'Contain' },
     [SlideshowLook.Cover]: { icon: mdiFitToPageOutline, title: 'Cover' },
+    [SlideshowLook.BlurredBackground]: { icon: mdiPanorama, title: 'Blurred background' },
   };
 
   const handleToggle = <Type extends SlideshowNavigation | SlideshowLook>(

web/src/lib/stores/slideshow.store.ts

@@ -16,11 +16,13 @@ export enum SlideshowNavigation {
 export enum SlideshowLook {
   Contain = 'contain',
   Cover = 'cover',
+  BlurredBackground = 'blurred-background',
 }
 
 export const slideshowLookCssMapping: Record<SlideshowLook, string> = {
   [SlideshowLook.Contain]: 'object-contain',
   [SlideshowLook.Cover]: 'object-cover',
+  [SlideshowLook.BlurredBackground]: 'object-contain',
 };
 
 function createSlideshowStore() {