feat(web): configure slideshow (#7219)

* feat: configure slideshow delay

* feat: show/hide progressbar

* fix: slider

* refactor: use grid instead of flex

* fix: default delay

* refactor: progress bar props

* refactor: slideshow settings

* fix: enforce min/max value

* chore: linting

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/shared-components/progress-bar/progress-bar.svelte

@@ -15,20 +15,29 @@
    */
   export let autoplay = false;
 
-  /**
-   * Duration in milliseconds
-   * @default 5000
-   */
-  export let duration = 5000;
-
   /**
    * Progress bar status
    */
   export let status: ProgressBarStatus = ProgressBarStatus.Paused;
 
-  let progress = tweened<number>(0, {
-    duration: (from: number, to: number) => (to ? duration * (to - from) : 0),
-  });
+  export let hidden = false;
+
+  export let duration = 5;
+
+  const onChange = () => {
+    progress = setDuration(duration);
+    play();
+  };
+
+  let progress = setDuration(duration);
+
+  $: duration, onChange();
+
+  $: {
+    if ($progress === 1) {
+      dispatch('done');
+    }
+  }
 
   const dispatch = createEventDispatcher<{
     done: void;
@@ -67,17 +76,13 @@
     progress.set(0);
   };
 
-  export const setDuration = (newDuration: number) => {
-    progress = tweened<number>(0, {
-      duration: (from: number, to: number) => (to ? newDuration * (to - from) : 0),
+  function setDuration(newDuration: number) {
+    return tweened<number>(0, {
+      duration: (from: number, to: number) => (to ? newDuration * 1000 * (to - from) : 0),
     });
-  };
-
-  progress.subscribe((value) => {
-    if (value === 1) {
-      dispatch('done');
-    }
-  });
+  }
 </script>
 
-<span class="absolute left-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`} />
+{#if !hidden}
+  <span class="absolute left-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`} />
+{/if}

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -13,8 +13,8 @@
 
   export let inputType: SettingInputFieldType;
   export let value: string | number;
-  export let min = Number.MIN_SAFE_INTEGER.toString();
-  export let max = Number.MAX_SAFE_INTEGER.toString();
+  export let min = Number.MIN_SAFE_INTEGER;
+  export let max = Number.MAX_SAFE_INTEGER;
   export let step = '1';
   export let label = '';
   export let desc = '';
@@ -25,15 +25,23 @@
 
   const handleInput = (e: Event) => {
     value = (e.target as HTMLInputElement).value;
+
     if (inputType === SettingInputFieldType.NUMBER) {
-      value = Number(value) || 0;
+      let newValue = Number(value) || 0;
+      if (newValue < min) {
+        newValue = min;
+      }
+      if (newValue > max) {
+        newValue = max;
+      }
+      value = newValue;
     }
   };
 </script>
 
 <div class="mb-4 w-full">
   <div class={`flex h-[26px] place-items-center gap-1`}>
-    <label class={`immich-form-label text-sm`} for={label}>{label}</label>
+    <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>
     {/if}
@@ -63,8 +71,8 @@
     id={label}
     name={label}
     type={inputType}
-    {min}
-    {max}
+    min={min.toString()}
+    max={max.toString()}
     {step}
     {required}
     {value}

web/src/lib/components/shared-components/settings/setting-select.svelte

@@ -25,7 +25,9 @@
 
 <div class="mb-4 w-full">
   <div class={`flex h-[26px] place-items-center gap-1`}>
-    <label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
+    <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="{name}-select"
+      >{label}</label
+    >
 
     {#if isEdited}
       <div

web/src/lib/components/shared-components/settings/setting-switch.svelte

@@ -2,6 +2,7 @@
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
+  import Slider from '$lib/components/elements/slider.svelte';
 
   export let title: string;
   export let subtitle = '';
@@ -33,66 +34,5 @@
     <slot />
   </div>
 
-  <label class="relative inline-block h-[10px] w-[36px] flex-none">
-    <input
-      class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
-      type="checkbox"
-      bind:checked
-      on:click={onToggle}
-      {disabled}
-    />
-
-    {#if disabled}
-      <span class="slider slider-disabled cursor-not-allowed" />
-    {:else}
-      <span class="slider slider-enabled cursor-pointer" />
-    {/if}
-  </label>
+  <Slider bind:checked {disabled} on:click={onToggle} />
 </div>
-
-<style>
-  .slider {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 34px;
-  }
-
-  input:disabled {
-    cursor: not-allowed;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 20px;
-    width: 20px;
-    left: 0px;
-    right: 0px;
-    bottom: -4px;
-    background-color: gray;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 50%;
-  }
-
-  input:checked + .slider:before {
-    -webkit-transform: translateX(18px);
-    -ms-transform: translateX(18px);
-    transform: translateX(18px);
-    background-color: #4250af;
-  }
-
-  input:checked + .slider-disabled {
-    background-color: gray;
-  }
-
-  input:checked + .slider-enabled {
-    background-color: #adcbfa;
-  }
-</style>