helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

feat(web): only show copy image when supported (#1776)

Browse source
This commit is contained in:
Michel Heusschen 2023-02-17 17:41:52 +01:00 • committed by GitHub
parent 575154fdea
commit bf6f94f69f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

41
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -1,10 +1,8 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { onMount } from 'svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, AssetResponseDto } from '@api';
import Keydown from 'svelte-keydown';
import {
notificationController,
NotificationType
@ -16,11 +14,14 @@
let assetData: string;
let copyImageToClipboard: (src: string) => Promise<Blob>;
let canCopyImagesToClipboard: () => boolean;
onMount(async () => {
//Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
// Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
// TODO: Move to regular import once the package correctly supports ESM.
const module = await import('copy-image-clipboard');
copyImageToClipboard = module.copyImageToClipboard;
canCopyImagesToClipboard = module.canCopyImagesToClipboard;
});
const loadAssetData = async () => {
@ -43,25 +44,35 @@
}
};
const handleKeypress = async (keyEvent: CustomEvent<string>) => {
if (keyEvent.detail == 'Control-c' || keyEvent.detail == 'Meta-c') {
const handleKeypress = async ({ metaKey, ctrlKey, key }: KeyboardEvent) => {
if ((metaKey || ctrlKey) && key === 'c') {
await doCopy();
}
};
export const doCopy = async () => {
await copyImageToClipboard(assetData);
notificationController.show({
type: NotificationType.Info,
message: 'Copied image to clipboard.',
timeout: 3000
});
const doCopy = async () => {
if (!canCopyImagesToClipboard()) {
return;
}
try {
await copyImageToClipboard(assetData);
notificationController.show({
type: NotificationType.Info,
message: 'Copied image to clipboard.',
timeout: 3000
});
} catch (err) {
console.error('Error [photo-viewer]:', err);
notificationController.show({
type: NotificationType.Error,
message: 'Copying image to clipboard failed.'
});
}
};
</script>
<Keydown on:combo={handleKeypress} />
<svelte:window on:copyImage={async () => await doCopy()} />
<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} />
<div
transition:fade={{ duration: 150 }}