self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-27 05:11:11 +02:00
Code Issues Releases Activity

feat: optimize copy image to clipboard (#12366)

Browse Source 
* feat: optimize copy image to clipboard

* pr feedback

* fix: urlToBlob

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* fix: imgToBlob

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* chore: finish rename

* fix: dimensions

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
martin
2024-09-06 15:16:59 +02:00
committed by GitHub
parent ecc85ff6c6
commit a653d9d29f
6 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View File

@ -41,7 +41,7 @@
mdiPresentationPlay,
mdiUpload,
} from '@mdi/js';
import { canCopyImagesToClipboard } from 'copy-image-clipboard';
import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
import { t } from 'svelte-i18n';
export let asset: AssetResponseDto;
@ -101,7 +101,7 @@
on:click={onZoomImage}
/>
{/if}
{#if canCopyImagesToClipboard() && asset.type === AssetTypeEnum.Image}
{#if canCopyImageToClipboard() && asset.type === AssetTypeEnum.Image}
<CircleIconButton color="opaque" icon={mdiContentCopy} title={$t('copy_image')} on:click={onCopyImage} />
{/if}

14
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@ -8,17 +8,17 @@
import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
import { photoZoomState } from '$lib/stores/zoom-image.store';
import { getAssetOriginalUrl, getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
import { isWebCompatibleImage } from '$lib/utils/asset-utils';
import { isWebCompatibleImage, canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
import { getBoundingBox } from '$lib/utils/people-utils';
import { getAltText } from '$lib/utils/thumbnail-util';
import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
import { canCopyImagesToClipboard, copyImageToClipboard } from 'copy-image-clipboard';
import { onDestroy, onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { type SwipeCustomEvent, swipe } from 'svelte-gestures';
import { fade } from 'svelte/transition';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
export let asset: AssetResponseDto;
export let preloadAssets: AssetResponseDto[] | undefined = undefined;
@ -81,23 +81,19 @@
};
copyImage = async () => {
if (!canCopyImagesToClipboard()) {
if (!canCopyImageToClipboard()) {
return;
}
try {
await copyImageToClipboard(assetFileUrl);
await copyImageToClipboard($photoViewer ?? assetFileUrl);
notificationController.show({
type: NotificationType.Info,
message: $t('copied_image_to_clipboard'),
timeout: 3000,
});
} catch (error) {
console.error('Error [photo-viewer]:', error);
notificationController.show({
type: NotificationType.Error,
message: 'Copying image to clipboard failed.',
});
handleError(error, $t('copy_error'));
}
};