public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-26 06:30:43 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(web): add an option to fill the screen with the slideshow view (#8909)

Browse Source 
* feat: add an option to fill the screen with the slideshow view

* fix: rename var
This commit is contained in:
martin
2024-04-19 12:49:29 +02:00
committed by GitHub
parent 4478e524f8
commit eaf9e5e477
3 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,27 +4,34 @@
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, mdiShuffle } from '@mdi/js';
import { SlideshowNavigation, slideshowStore } from '../stores/slideshow.store';
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 } = slideshowStore;
const { slideshowDelay, showProgressBar, slideshowNavigation, slideshowLook } = slideshowStore;
export let onClose = () => {};
const options: Record<SlideshowNavigation, RenderedOption> = {
const navigationOptions: Record<SlideshowNavigation, RenderedOption> = {
[SlideshowNavigation.Shuffle]: { icon: mdiShuffle, title: 'Shuffle' },
[SlideshowNavigation.AscendingOrder]: { icon: mdiArrowUpThin, title: 'Backward' },
[SlideshowNavigation.DescendingOrder]: { icon: mdiArrowDownThin, title: 'Forward' },
};
const handleToggle = (selectedOption: RenderedOption) => {
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 === selectedOption) {
$slideshowNavigation = key as SlideshowNavigation;
break;
if (option === record) {
return key as Type;
}
}
};
@@ -34,9 +41,19 @@
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
<SettingDropdown
title="Direction"
options={Object.values(options)}
selectedOption={options[$slideshowNavigation]}
onToggle={(option) => handleToggle(option)}
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