mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
70 lines
2.9 KiB
Svelte
70 lines
2.9 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 { mdiArrowDownThin, mdiArrowUpThin, mdiFitToPageOutline, mdiFitToScreenOutline, 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';
|
|
import SettingDropdown from './shared-components/settings/setting-dropdown.svelte';
|
|
|
|
const { slideshowDelay, showProgressBar, slideshowNavigation, slideshowLook } = slideshowStore;
|
|
|
|
export let onClose = () => {};
|
|
|
|
const navigationOptions: Record<SlideshowNavigation, RenderedOption> = {
|
|
[SlideshowNavigation.Shuffle]: { icon: mdiShuffle, title: 'Shuffle' },
|
|
[SlideshowNavigation.AscendingOrder]: { icon: mdiArrowUpThin, title: 'Backward' },
|
|
[SlideshowNavigation.DescendingOrder]: { icon: mdiArrowDownThin, title: 'Forward' },
|
|
};
|
|
|
|
const lookOptions: Record<SlideshowLook, RenderedOption> = {
|
|
[SlideshowLook.Contain]: { icon: mdiFitToScreenOutline, title: 'Contain' },
|
|
[SlideshowLook.Cover]: { icon: mdiFitToPageOutline, title: 'Cover' },
|
|
};
|
|
|
|
const handleToggle = <Type extends SlideshowNavigation | SlideshowLook>(
|
|
record: RenderedOption,
|
|
options: Record<Type, RenderedOption>,
|
|
): undefined | Type => {
|
|
for (const [key, option] of Object.entries(options)) {
|
|
if (option === record) {
|
|
return key as Type;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<FullScreenModal id="slideshow-settings-modal" title="Slideshow settings" {onClose}>
|
|
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
|
|
<SettingDropdown
|
|
title="Direction"
|
|
options={Object.values(navigationOptions)}
|
|
selectedOption={navigationOptions[$slideshowNavigation]}
|
|
onToggle={(option) => {
|
|
$slideshowNavigation = handleToggle(option, navigationOptions) || $slideshowNavigation;
|
|
}}
|
|
/>
|
|
<SettingDropdown
|
|
title="Look"
|
|
options={Object.values(lookOptions)}
|
|
selectedOption={lookOptions[$slideshowLook]}
|
|
onToggle={(option) => {
|
|
$slideshowLook = handleToggle(option, lookOptions) || $slideshowLook;
|
|
}}
|
|
/>
|
|
<SettingSwitch id="show-progress-bar" title="Show Progress Bar" bind:checked={$showProgressBar} />
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label="Duration"
|
|
desc="Number of seconds to display each image"
|
|
min={1}
|
|
bind:value={$slideshowDelay}
|
|
/>
|
|
</div>
|
|
<svelte:fragment slot="sticky-bottom">
|
|
<Button fullwidth color="primary" on:click={onClose}>Done</Button>
|
|
</svelte:fragment>
|
|
</FullScreenModal>
|