mirror of
https://github.com/immich-app/immich.git
synced 2025-05-31 12:15:47 -04:00
b3b6426695
* 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>
38 lines
1.5 KiB
Svelte
38 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
import SettingInputField, {
|
|
SettingInputFieldType,
|
|
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
|
|
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
|
import { slideshowStore } from '../stores/slideshow.store';
|
|
import Button from './elements/buttons/button.svelte';
|
|
|
|
const { slideshowShuffle, slideshowDelay, showProgressBar } = slideshowStore;
|
|
|
|
export let onClose = () => {};
|
|
</script>
|
|
|
|
<FullScreenModal on:clickOutside={onClose} on:escape={onClose}>
|
|
<div
|
|
class="flex w-96 max-w-lg flex-col gap-8 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
|
|
>
|
|
<h1 class="self-center text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
|
|
Slideshow Settings
|
|
</h1>
|
|
|
|
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
|
|
<SettingSwitch title="Shuffle" bind:checked={$slideshowShuffle} />
|
|
<SettingSwitch title="Show Progress Bar" bind:checked={$showProgressBar} />
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label="Delay"
|
|
desc="Number of seconds to display each image"
|
|
min={1}
|
|
bind:value={$slideshowDelay}
|
|
/>
|
|
|
|
<Button class="w-full" color="gray" on:click={onClose}>Done</Button>
|
|
</div>
|
|
</div>
|
|
</FullScreenModal>
|