github/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-06-07 19:11:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: delay settings apply for slideshow popup (#18028)

Browse Source 
* fix: fixed slideshow values to apply on done.

* chore: linting error fixes

* feat: added cancel button and changed text from done to confirm
This commit is contained in:
Dhaval Javia 2025-05-18 02:39:15 +05:30 committed by GitHub
parent 61d784f4e7
commit a65c905621
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/lib/components/slideshow-settings.svelte
View File

@ -25,6 +25,13 @@
let { onClose = () => {} }: Props = $props(); let { onClose = () => {} }: Props = $props();
// Temporary variables to hold the settings - marked as reactive with $state() but initialized with store values
let tempSlideshowDelay = $state($slideshowDelay);
let tempShowProgressBar = $state($showProgressBar);
let tempSlideshowNavigation = $state($slideshowNavigation);
let tempSlideshowLook = $state($slideshowLook);
let tempSlideshowTransition = $state($slideshowTransition);
const navigationOptions: Record<SlideshowNavigation, RenderedOption> = { const navigationOptions: Record<SlideshowNavigation, RenderedOption> = {
[SlideshowNavigation.Shuffle]: { icon: mdiShuffle, title: $t('shuffle') }, [SlideshowNavigation.Shuffle]: { icon: mdiShuffle, title: $t('shuffle') },
[SlideshowNavigation.AscendingOrder]: { icon: mdiArrowUpThin, title: $t('backward') }, [SlideshowNavigation.AscendingOrder]: { icon: mdiArrowUpThin, title: $t('backward') },
@ -47,6 +54,15 @@
} }
} }
}; };
const applyChanges = () => {
$slideshowDelay = tempSlideshowDelay;
$showProgressBar = tempShowProgressBar;
$slideshowNavigation = tempSlideshowNavigation;
$slideshowLook = tempSlideshowLook;
$slideshowTransition = tempSlideshowTransition;
onClose();
};
</script> </script>
<FullScreenModal title={$t('slideshow_settings')} onClose={() => onClose()}> <FullScreenModal title={$t('slideshow_settings')} onClose={() => onClose()}>
@ -54,31 +70,32 @@
<SettingDropdown <SettingDropdown
title={$t('direction')} title={$t('direction')}
options={Object.values(navigationOptions)} options={Object.values(navigationOptions)}
selectedOption={navigationOptions[$slideshowNavigation]} selectedOption={navigationOptions[tempSlideshowNavigation]}
onToggle={(option) => { onToggle={(option) => {
$slideshowNavigation = handleToggle(option, navigationOptions) || $slideshowNavigation; tempSlideshowNavigation = handleToggle(option, navigationOptions) || tempSlideshowNavigation;
}} }}
/> />
<SettingDropdown <SettingDropdown
title={$t('look')} title={$t('look')}
options={Object.values(lookOptions)} options={Object.values(lookOptions)}
selectedOption={lookOptions[$slideshowLook]} selectedOption={lookOptions[tempSlideshowLook]}
onToggle={(option) => { onToggle={(option) => {
$slideshowLook = handleToggle(option, lookOptions) || $slideshowLook; tempSlideshowLook = handleToggle(option, lookOptions) || tempSlideshowLook;
}} }}
/> />
<SettingSwitch title={$t('show_progress_bar')} bind:checked={$showProgressBar} /> <SettingSwitch title={$t('show_progress_bar')} bind:checked={tempShowProgressBar} />
<SettingSwitch title={$t('show_slideshow_transition')} bind:checked={$slideshowTransition} /> <SettingSwitch title={$t('show_slideshow_transition')} bind:checked={tempSlideshowTransition} />
<SettingInputField <SettingInputField
inputType={SettingInputFieldType.NUMBER} inputType={SettingInputFieldType.NUMBER}
label={$t('duration')} label={$t('duration')}
description={$t('admin.slideshow_duration_description')} description={$t('admin.slideshow_duration_description')}
min={1} min={1}
bind:value={$slideshowDelay} bind:value={tempSlideshowDelay}
/> />
</div> </div>
{#snippet stickyBottom()} {#snippet stickyBottom()}
<Button fullWidth shape="round" color="primary" onclick={() => onClose()}>{$t('done')}</Button> <Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button>
{/snippet} {/snippet}
</FullScreenModal> </FullScreenModal>