diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 918da85ba2..cd2402f919 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -20,6 +20,7 @@ import ControlAppBar from '../shared-components/control-app-bar.svelte'; import ImmichLogo from '../shared-components/immich-logo.svelte'; import ThemeButton from '../shared-components/theme-button.svelte'; + import { shouldIgnoreShortcut } from '$lib/utils/shortcut'; export let sharedLink: SharedLinkResponseDto; @@ -76,6 +77,9 @@ }); const handleKeyboardPress = (event: KeyboardEvent) => { + if (shouldIgnoreShortcut(event)) { + return; + } if (!$showAssetViewer) { switch (event.key) { case 'Escape': diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index 8199c76ec1..a2dbe8e1c6 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -27,7 +27,7 @@ import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import Close from 'svelte-material-icons/Close.svelte'; import ProgressBar, { ProgressBarStatus } from '../shared-components/progress-bar/progress-bar.svelte'; - import { disableShortcut } from '$lib/stores/shortcut.store'; + import { shouldIgnoreShortcut } from '$lib/utils/shortcut'; export let assetStore: AssetStore | null = null; export let asset: AssetResponseDto; @@ -53,7 +53,7 @@ let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true; let canCopyImagesToClipboard: boolean; - const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key, keyInfo.shiftKey); + const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo); onMount(async () => { document.addEventListener('keydown', onKeyboardPress); @@ -89,11 +89,14 @@ } }; - const handleKeyboardPress = (key: string, shiftKey: boolean) => { - if ($disableShortcut) { + const handleKeyboardPress = (event: KeyboardEvent) => { + if (shouldIgnoreShortcut(event)) { return; } + const key = event.key; + const shiftKey = event.shiftKey; + switch (key) { case 'a': case 'A': @@ -212,13 +215,11 @@ const openAlbumPicker = (shared: boolean) => { isShowAlbumPicker = true; - $disableShortcut = true; addToSharedAlbum = shared; }; const handleAddToNewAlbum = (event: CustomEvent) => { isShowAlbumPicker = false; - $disableShortcut = false; const { albumName }: { albumName: string } = event.detail; api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds: [asset.id] } }).then((response) => { @@ -229,7 +230,6 @@ const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => { isShowAlbumPicker = false; - $disableShortcut = false; const album = event.detail.album; await addAssetsToAlbum(album.id, [asset.id]); @@ -457,10 +457,7 @@ on:newAlbum={handleAddToNewAlbum} on:newSharedAlbum={handleAddToNewAlbum} on:album={handleAddToAlbum} - on:close={() => { - isShowAlbumPicker = false; - $disableShortcut = false; - }} + on:close={() => (isShowAlbumPicker = false)} /> {/if} diff --git a/web/src/lib/components/photos-page/actions/add-to-album.svelte b/web/src/lib/components/photos-page/actions/add-to-album.svelte index 1fe1bdee59..a205d83927 100644 --- a/web/src/lib/components/photos-page/actions/add-to-album.svelte +++ b/web/src/lib/components/photos-page/actions/add-to-album.svelte @@ -10,7 +10,6 @@ import { AlbumResponseDto, api } from '@api'; import { getMenuContext } from '../asset-select-context-menu.svelte'; import { getAssetControlContext } from '../asset-select-control-bar.svelte'; - import { disableShortcut } from '$lib/stores/shortcut.store'; export let shared = false; let showAlbumPicker = false; @@ -20,13 +19,11 @@ const handleHideAlbumPicker = () => { showAlbumPicker = false; - $disableShortcut = false; closeMenu(); }; const handleAddToNewAlbum = (event: CustomEvent) => { showAlbumPicker = false; - $disableShortcut = false; const { albumName }: { albumName: string } = event.detail; const assetIds = Array.from(getAssets()).map((asset) => asset.id); @@ -46,7 +43,6 @@ const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => { showAlbumPicker = false; - $disableShortcut = false; const album = event.detail.album; const assetIds = Array.from(getAssets()).map((asset) => asset.id); await addAssetsToAlbum(album.id, assetIds); @@ -54,13 +50,7 @@ }; - { - showAlbumPicker = true; - $disableShortcut = true; - }} - text={shared ? 'Add to Shared Album' : 'Add to Album'} -/> + (showAlbumPicker = true)} text={shared ? 'Add to Shared Album' : 'Add to Album'} /> {#if showAlbumPicker} { - if ($isSearchEnabled || $disableShortcut) { + if ($isSearchEnabled || shouldIgnoreShortcut(event)) { return; } diff --git a/web/src/lib/stores/shortcut.store.ts b/web/src/lib/stores/shortcut.store.ts deleted file mode 100644 index 29feaa8f9a..0000000000 --- a/web/src/lib/stores/shortcut.store.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { writable } from 'svelte/store'; - -export const disableShortcut = writable(false); diff --git a/web/src/lib/utils/shortcut.ts b/web/src/lib/utils/shortcut.ts new file mode 100644 index 0000000000..51a64a6c5b --- /dev/null +++ b/web/src/lib/utils/shortcut.ts @@ -0,0 +1,7 @@ +export const shouldIgnoreShortcut = (event: Event): boolean => { + const type = (event.target as HTMLInputElement).type; + if (['textarea', 'text'].includes(type)) { + return true; + } + return false; +}; diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte index adaf72040a..19da26d560 100644 --- a/web/src/routes/(user)/albums/[albumId]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte @@ -45,7 +45,6 @@ import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte'; import type { PageData } from './$types'; import { clickOutside } from '$lib/utils/click-outside'; - import { disableShortcut } from '$lib/stores/shortcut.store'; export let data: PageData; @@ -277,7 +276,6 @@ album.description = description; isEditingDescription = false; - $disableShortcut = false; } catch (error) { handleError(error, 'Error updating album description'); } @@ -474,10 +472,7 @@ {#if isOwned || album.description}