mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
f446bc8caa
* First test * Added translation using Weblate (French) * Translated using Weblate (German) Currently translated at 100.0% (4 of 4 strings) Translation: immich/web Translate-URL: http://familie-mach.net/projects/immich/web/de/ * Translated using Weblate (French) Currently translated at 100.0% (4 of 4 strings) Translation: immich/web Translate-URL: http://familie-mach.net/projects/immich/web/fr/ * Further testing * Further testing * Translated using Weblate (German) Currently translated at 100.0% (18 of 18 strings) Translation: immich/web Translate-URL: http://familie-mach.net/projects/immich/web/de/ * Further work * Update string file. * More strings * Automatically changed strings * Add automatically translated german file for testing purposes * Fix merge-face-selector component * Make server stats strings uppercase * Fix uppercase string * Fix some strings in jobs-panel * Fix lower and uppercase strings. Add a few additional string. Fix a few unnecessary replacements * Update german test translations * Fix typo in locales file * Change string keys * Extract more strings * Extract and replace some more strings * Update testtranslationfile * Change translation keys * Fix rebase errors * Fix one more rebase error * Remove german translation file * Co-authored-by: Daniel Dietzler <danieldietzler@users.noreply.github.com> * chore: clean up translations * chore: add new line * fix formatting * chore: fixes * fix: loading and tests --------- Co-authored-by: root <root@Blacki> Co-authored-by: admin <admin@example.com> Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
79 lines
3.1 KiB
Svelte
79 lines
3.1 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,
|
|
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';
|
|
import SettingDropdown from './shared-components/settings/setting-dropdown.svelte';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
const { slideshowDelay, showProgressBar, slideshowNavigation, slideshowLook } = slideshowStore;
|
|
|
|
export let onClose = () => {};
|
|
|
|
const navigationOptions: Record<SlideshowNavigation, RenderedOption> = {
|
|
[SlideshowNavigation.Shuffle]: { icon: mdiShuffle, title: $t('shuffle') },
|
|
[SlideshowNavigation.AscendingOrder]: { icon: mdiArrowUpThin, title: $t('backward') },
|
|
[SlideshowNavigation.DescendingOrder]: { icon: mdiArrowDownThin, title: $t('forward') },
|
|
};
|
|
|
|
const lookOptions: Record<SlideshowLook, RenderedOption> = {
|
|
[SlideshowLook.Contain]: { icon: mdiFitToScreenOutline, title: $t('contain') },
|
|
[SlideshowLook.Cover]: { icon: mdiFitToPageOutline, title: $t('cover') },
|
|
[SlideshowLook.BlurredBackground]: { icon: mdiPanorama, title: $t('blurred_background') },
|
|
};
|
|
|
|
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 title={$t('slideshow_settings')} {onClose}>
|
|
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
|
|
<SettingDropdown
|
|
title={$t('direction')}
|
|
options={Object.values(navigationOptions)}
|
|
selectedOption={navigationOptions[$slideshowNavigation]}
|
|
onToggle={(option) => {
|
|
$slideshowNavigation = handleToggle(option, navigationOptions) || $slideshowNavigation;
|
|
}}
|
|
/>
|
|
<SettingDropdown
|
|
title={$t('look')}
|
|
options={Object.values(lookOptions)}
|
|
selectedOption={lookOptions[$slideshowLook]}
|
|
onToggle={(option) => {
|
|
$slideshowLook = handleToggle(option, lookOptions) || $slideshowLook;
|
|
}}
|
|
/>
|
|
<SettingSwitch title={$t('show_progress_bar')} bind:checked={$showProgressBar} />
|
|
<SettingInputField
|
|
inputType={SettingInputFieldType.NUMBER}
|
|
label={$t('duration')}
|
|
desc={$t('slideshow_duration_description')}
|
|
min={1}
|
|
bind:value={$slideshowDelay}
|
|
/>
|
|
</div>
|
|
<svelte:fragment slot="sticky-bottom">
|
|
<Button fullwidth color="primary" on:click={onClose}>{$t('done')}</Button>
|
|
</svelte:fragment>
|
|
</FullScreenModal>
|