mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
feat(web): new shortcuts (#3111)
* feat: shortcuts Signed-off-by: martabal <74269598+martabal@users.noreply.github.com> * fix: remove listener on component destroy Signed-off-by: martabal <74269598+martabal@users.noreply.github.com> * revert delete shortcut Signed-off-by: martabal <74269598+martabal@users.noreply.github.com> * feat: new notifications Signed-off-by: martabal <74269598+martabal@users.noreply.github.com> * fix: use handleError Signed-off-by: martabal <74269598+martabal@users.noreply.github.com> --------- Signed-off-by: martabal <74269598+martabal@users.noreply.github.com>
This commit is contained in:
parent
e287b18435
commit
f9032866e7
@ -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`);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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}`);
|
||||
|
Loading…
Reference in New Issue
Block a user