diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index d6a5b525d9..67189417c1 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -20,6 +20,7 @@ import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils'; import NavigationArea from './navigation-area.svelte'; import { browser } from '$app/environment'; + import { handleError } from '$lib/utils/handle-error'; export let asset: AssetResponseDto; export let publicSharedKey = ''; @@ -35,7 +36,7 @@ let isShowProfileImageCrop = false; let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true; let canCopyImagesToClipboard: boolean; - const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key); + const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key, keyInfo.shiftKey); onMount(async () => { document.addEventListener('keydown', onKeyboardPress); @@ -65,16 +66,11 @@ } }; - const handleKeyboardPress = (key: string) => { + const handleKeyboardPress = (key: string, shiftKey: boolean) => { switch (key) { - case 'Escape': - closeViewer(); - return; - case 'Delete': - isShowDeleteConfirmation = true; - return; - case 'i': - $isShowDetail = !$isShowDetail; + case 'a': + case 'A': + if (shiftKey) toggleArchive(); return; case 'ArrowLeft': navigateAssetBackward(); @@ -82,6 +78,22 @@ case 'ArrowRight': navigateAssetForward(); return; + case 'd': + case 'D': + if (shiftKey) downloadFile(asset, publicSharedKey); + return; + case 'Delete': + isShowDeleteConfirmation = true; + return; + case 'Escape': + closeViewer(); + return; + case 'f': + toggleFavorite(); + return; + case 'i': + $isShowDetail = !$isShowDetail; + return; } }; @@ -135,15 +147,24 @@ }; const toggleFavorite = async () => { - const { data } = await api.assetApi.updateAsset({ - id: asset.id, - updateAssetDto: { - isFavorite: !asset.isFavorite, - }, - }); + try { + const { data } = await api.assetApi.updateAsset({ + id: asset.id, + updateAssetDto: { + isFavorite: !asset.isFavorite, + }, + }); - asset.isFavorite = data.isFavorite; - assetStore.updateAsset(asset.id, data.isFavorite); + asset.isFavorite = data.isFavorite; + assetStore.updateAsset(asset.id, data.isFavorite); + + notificationController.show({ + type: NotificationType.Info, + message: asset.isFavorite ? `Added to favorites` : `Removed from favorites`, + }); + } catch (error) { + handleError(error, `Unable to ${asset.isArchived ? `add asset to` : `remove asset from`} favorites`); + } }; const openAlbumPicker = (shared: boolean) => { @@ -206,11 +227,7 @@ message: asset.isArchived ? `Added to archive` : `Removed from archive`, }); } catch (error) { - console.error(error); - notificationController.show({ - type: NotificationType.Error, - message: `Error ${asset.isArchived ? 'archiving' : 'unarchiving'} asset, check console for more details`, - }); + handleError(error, `Unable to ${asset.isArchived ? `add asset to` : `remove asset from`} archive`); } }; diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte index c30a7cb3d4..de94fcaabe 100644 --- a/web/src/lib/components/photos-page/asset-grid.svelte +++ b/web/src/lib/components/photos-page/asset-grid.svelte @@ -26,6 +26,10 @@ import AssetDateGroup from './asset-date-group.svelte'; import MemoryLane from './memory-lane.svelte'; + import { AppRoute } from '$lib/constants'; + import { goto } from '$app/navigation'; + import { browser } from '$app/environment'; + export let user: UserResponseDto | undefined = undefined; export let isAlbumSelectionMode = false; export let showMemoryLane = false; @@ -35,7 +39,10 @@ let assetGridElement: HTMLElement; let bucketInfo: AssetCountByTimeBucketResponseDto; + const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event); + onMount(async () => { + document.addEventListener('keydown', onKeyboardPress); const { data: assetCountByTimebucket } = await api.assetApi.getAssetCountByTimeBucket({ getAssetCountByTimeBucketDto: { timeGroup: TimeGroupEnum.Month, @@ -67,9 +74,21 @@ }); onDestroy(() => { + if (browser) document.removeEventListener('keydown', handleKeyboardPress); assetStore.setInitialState(0, 0, { totalCount: 0, buckets: [] }, undefined); }); + const handleKeyboardPress = (event: KeyboardEvent) => { + if (event.key === '/') event.preventDefault(); + if (!$isViewingAssetStoreState) { + switch (event.key) { + case '/': + goto(AppRoute.EXPLORE); + return; + } + } + }; + function intersectedHandler(event: CustomEvent) { const el = event.detail.container as HTMLElement; const target = el.firstChild as HTMLElement; @@ -128,14 +147,14 @@ let shiftKeyIsDown = false; const onKeyDown = (e: KeyboardEvent) => { - if (e.key === 'Shift') { + if (e.shiftKey && e.key !== '/') { e.preventDefault(); shiftKeyIsDown = true; } }; const onKeyUp = (e: KeyboardEvent) => { - if (e.key === 'Shift') { + if (e.shiftKey && e.key !== '/') { e.preventDefault(); shiftKeyIsDown = false; } diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts index 55169acf1f..0be85fa89b 100644 --- a/web/src/lib/utils/asset-utils.ts +++ b/web/src/lib/utils/asset-utils.ts @@ -122,6 +122,11 @@ export const downloadFile = async (asset: AssetResponseDto, key?: string) => { }, ); + notificationController.show({ + type: NotificationType.Info, + message: `Downloading asset ${asset.originalFileName}`, + }); + downloadBlob(data, filename); } catch (e) { handleError(e, `Error downloading ${filename}`);