sjs/immich
1
0
Fork 0
mirror of https://github.com/samsonjs/immich.git synced 2026-04-27 15:07:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: escape handling (#25627)

Browse source
This commit is contained in:
Daniel Dietzler 2026-01-28 14:05:21 -06:00 committed by GitHub
parent 84c3980844
commit 4e0e1b2c5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 56 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/src/lib/components/timeline/TimelineAssetViewer.svelte
View file

@ -97,7 +97,6 @@
}; };
const handleClose = async (asset: { id: string }) => { const handleClose = async (asset: { id: string }) => {
assetViewingStore.showAssetViewer(false);
invisible = true; invisible = true;
$gridScrollTarget = { at: asset.id }; $gridScrollTarget = { at: asset.id };
await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget }); await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });

66
web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
View file

@ -141,43 +141,41 @@
} }
}; };
let shortcutList = $derived( const shortcutList = $derived.by(() => {
(() => { if (searchStore.isSearchEnabled || $showAssetViewer) {
if (searchStore.isSearchEnabled || $showAssetViewer) { return [];
return []; }
}
const shortcuts: ShortcutOptions[] = [ const shortcuts: ShortcutOptions[] = [
{ shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal }, { shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
{ shortcut: { key: '/' }, onShortcut: () => goto(Route.explore()) }, { shortcut: { key: '/' }, onShortcut: () => goto(Route.explore()) },
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(timelineManager, assetInteraction) }, { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(timelineManager, assetInteraction) },
{ shortcut: { key: 'ArrowRight' }, onShortcut: () => setFocusTo('earlier', 'asset') }, { shortcut: { key: 'ArrowRight' }, onShortcut: () => setFocusTo('earlier', 'asset') },
{ shortcut: { key: 'ArrowLeft' }, onShortcut: () => setFocusTo('later', 'asset') }, { shortcut: { key: 'ArrowLeft' }, onShortcut: () => setFocusTo('later', 'asset') },
{ shortcut: { key: 'D' }, onShortcut: () => setFocusTo('earlier', 'day') }, { shortcut: { key: 'D' }, onShortcut: () => setFocusTo('earlier', 'day') },
{ shortcut: { key: 'D', shift: true }, onShortcut: () => setFocusTo('later', 'day') }, { shortcut: { key: 'D', shift: true }, onShortcut: () => setFocusTo('later', 'day') },
{ shortcut: { key: 'M' }, onShortcut: () => setFocusTo('earlier', 'month') }, { shortcut: { key: 'M' }, onShortcut: () => setFocusTo('earlier', 'month') },
{ shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') }, { shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') },
{ shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') }, { shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') },
{ shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') }, { shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') },
{ shortcut: { key: 'G' }, onShortcut: handleOpenDateModal }, { shortcut: { key: 'G' }, onShortcut: handleOpenDateModal },
]; ];
if (onEscape) { if (onEscape) {
shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape }); shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });
} }
if (assetInteraction.selectionActive) { if (assetInteraction.selectionActive) {
shortcuts.push( shortcuts.push(
{ shortcut: { key: 'Delete' }, onShortcut: onDelete }, { shortcut: { key: 'Delete' }, onShortcut: onDelete },
{ shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) }, { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
{ shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() }, { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
{ shortcut: { key: 's' }, onShortcut: () => onStackAssets() }, { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
{ shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive }, { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
); );
} }
return shortcuts; return shortcuts;
})(), });
);
</script> </script>
<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} /> <svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} />

3
web/src/lib/modals/AlbumOptionsModal.svelte
View file

@ -3,6 +3,7 @@
import HeaderActionButton from '$lib/components/HeaderActionButton.svelte'; import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
import OnEvents from '$lib/components/OnEvents.svelte'; import OnEvents from '$lib/components/OnEvents.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte'; import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { AlbumPageViewMode } from '$lib/constants';
import { import {
getAlbumActions, getAlbumActions,
handleRemoveUserFromAlbum, handleRemoveUserFromAlbum,
@ -55,7 +56,7 @@
sharedLinks = sharedLinks.filter(({ id }) => sharedLink.id !== id); sharedLinks = sharedLinks.filter(({ id }) => sharedLink.id !== id);
}; };
const { AddUsers, CreateSharedLink } = $derived(getAlbumActions($t, album)); const { AddUsers, CreateSharedLink } = $derived(getAlbumActions($t, album, AlbumPageViewMode.OPTIONS));
let sharedLinks: SharedLinkResponseDto[] = $state([]); let sharedLinks: SharedLinkResponseDto[] = $state([]);

16
web/src/lib/services/album.service.ts
View file

@ -1,5 +1,6 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import ToastAction from '$lib/components/ToastAction.svelte'; import ToastAction from '$lib/components/ToastAction.svelte';
import { AlbumPageViewMode } from '$lib/constants';
import { eventManager } from '$lib/managers/event-manager.svelte'; import { eventManager } from '$lib/managers/event-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types'; import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import AlbumAddUsersModal from '$lib/modals/AlbumAddUsersModal.svelte'; import AlbumAddUsersModal from '$lib/modals/AlbumAddUsersModal.svelte';
@ -25,7 +26,7 @@ import {
type UserResponseDto, type UserResponseDto,
} from '@immich/sdk'; } from '@immich/sdk';
import { modalManager, toastManager, type ActionItem } from '@immich/ui'; import { modalManager, toastManager, type ActionItem } from '@immich/ui';
import { mdiLink, mdiPlus, mdiPlusBoxOutline, mdiShareVariantOutline, mdiUpload } from '@mdi/js'; import { mdiArrowLeft, mdiLink, mdiPlus, mdiPlusBoxOutline, mdiShareVariantOutline, mdiUpload } from '@mdi/js';
import { type MessageFormatter } from 'svelte-i18n'; import { type MessageFormatter } from 'svelte-i18n';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
@ -39,7 +40,7 @@ export const getAlbumsActions = ($t: MessageFormatter) => {
return { Create }; return { Create };
}; };
export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) => { export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto, viewMode: AlbumPageViewMode) => {
const isOwned = get(user).id === album.ownerId; const isOwned = get(user).id === album.ownerId;
const Share: ActionItem = { const Share: ActionItem = {
@ -66,7 +67,16 @@ export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) =
onAction: () => modalManager.show(SharedLinkCreateModal, { albumId: album.id }), onAction: () => modalManager.show(SharedLinkCreateModal, { albumId: album.id }),
}; };
return { Share, AddUsers, CreateSharedLink }; const Close: ActionItem = {
title: $t('go_back'),
type: $t('command'),
icon: mdiArrowLeft,
onAction: () => goto(Route.albums()),
$if: () => viewMode === AlbumPageViewMode.VIEW,
shortcuts: { key: 'Escape' },
};
return { Share, AddUsers, CreateSharedLink, Close };
}; };
export const getAlbumAssetsActions = ($t: MessageFormatter, album: AlbumResponseDto, assets: TimelineAsset[]) => { export const getAlbumAssetsActions = ($t: MessageFormatter, album: AlbumResponseDto, assets: TimelineAsset[]) => {

39
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { afterNavigate, goto, onNavigate } from '$app/navigation'; import { goto, onNavigate } from '$app/navigation';
import { scrollMemoryClearer } from '$lib/actions/scroll-memory'; import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
import ActionButton from '$lib/components/ActionButton.svelte'; import ActionButton from '$lib/components/ActionButton.svelte';
import AlbumDescription from '$lib/components/album-page/album-description.svelte'; import AlbumDescription from '$lib/components/album-page/album-description.svelte';
@ -52,13 +52,7 @@
import { handlePromiseError } from '$lib/utils'; import { handlePromiseError } from '$lib/utils';
import { cancelMultiselect } from '$lib/utils/asset-utils'; import { cancelMultiselect } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { import { isAlbumsRoute, navigate, type AssetGridRouteSearchParams } from '$lib/utils/navigation';
isAlbumsRoute,
isPeopleRoute,
isSearchRoute,
navigate,
type AssetGridRouteSearchParams,
} from '$lib/utils/navigation';
import { AlbumUserRole, AssetVisibility, getAlbumInfo, updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk'; import { AlbumUserRole, AssetVisibility, getAlbumInfo, updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
import { CommandPaletteDefaultProvider, Icon, IconButton, modalManager, toastManager } from '@immich/ui'; import { CommandPaletteDefaultProvider, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
import { import {
@ -91,7 +85,6 @@
let oldAt: AssetGridRouteSearchParams | null | undefined = $state(); let oldAt: AssetGridRouteSearchParams | null | undefined = $state();
let backUrl: string = $state(Route.albums());
let viewMode: AlbumPageViewMode = $state(AlbumPageViewMode.VIEW); let viewMode: AlbumPageViewMode = $state(AlbumPageViewMode.VIEW);
let timelineManager = $state<TimelineManager>() as TimelineManager; let timelineManager = $state<TimelineManager>() as TimelineManager;
@ -100,25 +93,6 @@
const assetInteraction = new AssetInteraction(); const assetInteraction = new AssetInteraction();
const timelineInteraction = new AssetInteraction(); const timelineInteraction = new AssetInteraction();
afterNavigate(({ from }) => {
let url: string | undefined = from?.url?.pathname;
const route = from?.route?.id;
if (isSearchRoute(route)) {
url = from?.url.href;
}
if (isAlbumsRoute(route) || isPeopleRoute(route)) {
url = Route.albums();
}
backUrl = url || Route.albums();
if (backUrl === Route.sharedLinks()) {
backUrl = history.state?.backUrl || Route.albums();
}
});
const handleFavorite = async () => { const handleFavorite = async () => {
try { try {
await activityManager.toggleLike(); await activityManager.toggleLike();
@ -158,7 +132,6 @@
cancelMultiselect(assetInteraction); cancelMultiselect(assetInteraction);
return; return;
} }
await goto(backUrl);
return; return;
}; };
@ -305,7 +278,7 @@
const onAlbumDelete = async ({ id }: AlbumResponseDto) => { const onAlbumDelete = async ({ id }: AlbumResponseDto) => {
if (id === album.id) { if (id === album.id) {
await goto(backUrl); await goto(Route.albums());
viewMode = AlbumPageViewMode.VIEW; viewMode = AlbumPageViewMode.VIEW;
} }
}; };
@ -332,7 +305,7 @@
}; };
const { Cast } = $derived(getGlobalActions($t)); const { Cast } = $derived(getGlobalActions($t));
const { Share } = $derived(getAlbumActions($t, album)); const { Share, Close } = $derived(getAlbumActions($t, album, viewMode));
const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineInteraction.selectedAssets)); const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineInteraction.selectedAssets));
</script> </script>
@ -346,7 +319,7 @@
onAlbumUserDelete={refreshAlbum} onAlbumUserDelete={refreshAlbum}
onAlbumUpdate={(newAlbum) => (album = newAlbum)} onAlbumUpdate={(newAlbum) => (album = newAlbum)}
/> />
<CommandPaletteDefaultProvider name={$t('album')} actions={[AddAssets, Upload]} /> <CommandPaletteDefaultProvider name={$t('album')} actions={[AddAssets, Upload, Close]} />
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: Route.albums() }}> <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: Route.albums() }}>
<div class="relative w-full shrink"> <div class="relative w-full shrink">
@ -512,7 +485,7 @@
</AssetSelectControlBar> </AssetSelectControlBar>
{:else} {:else}
{#if viewMode === AlbumPageViewMode.VIEW} {#if viewMode === AlbumPageViewMode.VIEW}
<ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(backUrl)}> <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
{#snippet trailing()} {#snippet trailing()}
<ActionButton action={Cast} /> <ActionButton action={Cast} />

11
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -33,7 +33,6 @@
import { Route } from '$lib/route'; import { Route } from '$lib/route';
import { getPersonActions } from '$lib/services/person.service'; import { getPersonActions } from '$lib/services/person.service';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { locale } from '$lib/stores/preferences.store'; import { locale } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store'; import { preferences } from '$lib/stores/user.store';
import { websocketEvents } from '$lib/stores/websocket'; import { websocketEvents } from '$lib/stores/websocket';
@ -61,7 +60,6 @@
let { data }: Props = $props(); let { data }: Props = $props();
let numberOfAssets = $derived(data.statistics.assets); let numberOfAssets = $derived(data.statistics.assets);
let { isViewing: showAssetViewer } = assetViewingStore;
let timelineManager = $state<TimelineManager>() as TimelineManager; let timelineManager = $state<TimelineManager>() as TimelineManager;
const options = $derived({ visibility: AssetVisibility.Timeline, personId: data.person.id }); const options = $derived({ visibility: AssetVisibility.Timeline, personId: data.person.id });
@ -106,16 +104,13 @@
}); });
const handleEscape = async () => { const handleEscape = async () => {
if ($showAssetViewer) {
return;
}
if (assetInteraction.selectionActive) { if (assetInteraction.selectionActive) {
assetInteraction.clearMultiselect(); assetInteraction.clearMultiselect();
return; return;
} else {
await goto(previousRoute);
return;
} }
await goto(previousRoute);
return;
}; };
const updateAssetCount = async () => { const updateAssetCount = async () => {