immich/web/src/lib/components/asset-viewer/actions/favorite-action.svelte
Michel Heusschen 281cfc95a4
refactor(web): asset viewer actions (#11449)
* refactor(web): asset viewer actions

* motion photo slot and more refactoring
2024-07-31 12:25:38 -04:00

47 lines
1.6 KiB
Svelte

<script lang="ts">
import { shortcut } from '$lib/actions/shortcut';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AssetAction } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
import { mdiHeart, mdiHeartOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { OnAction } from './action';
export let asset: AssetResponseDto;
export let onAction: OnAction;
const toggleFavorite = async () => {
try {
const data = await updateAsset({
id: asset.id,
updateAssetDto: {
isFavorite: !asset.isFavorite,
},
});
asset.isFavorite = data.isFavorite;
onAction({ type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset });
notificationController.show({
type: NotificationType.Info,
message: asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
});
} catch (error) {
handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
}
};
</script>
<svelte:window use:shortcut={{ shortcut: { key: 'f' }, onShortcut: toggleFavorite }} />
<CircleIconButton
color="opaque"
icon={asset.isFavorite ? mdiHeart : mdiHeartOutline}
title={asset.isFavorite ? $t('unfavorite') : $t('to_favorite')}
on:click={toggleFavorite}
/>