self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-28 09:33:27 +02:00
Code Issues Releases Activity

feat(web) add handler for ctrl-c copying images from viewer (#881)

Browse Source
This commit is contained in:
bo0tzz 2022-10-29 00:18:28 +02:00 committed by GitHub
parent b1212fc98b
commit b0f10b1851
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/package-lock.json generated
View File

@ -10,12 +10,14 @@
"dependencies": {
"axios": "^0.27.2",
"cookie": "^0.4.2",
"copy-image-clipboard": "^2.1.2",
"exifr": "^7.1.3",
"leaflet": "^1.8.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"moment": "^2.29.3",
"socket.io-client": "^4.5.1",
"svelte-keydown": "^0.5.0",
"svelte-material-icons": "^2.0.2"
},
"devDependencies": {
@ -4455,6 +4457,11 @@
"node": ">= 0.6"
}
},
"node_modules/copy-image-clipboard": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/copy-image-clipboard/-/copy-image-clipboard-2.1.2.tgz",
"integrity": "sha512-3VCXVl2IpFfOyD8drv9DozcNlwmqBqxOlsgkEGyVAzadjlPk1go8YNZyy8QmTnwHPxSFpeCR9OdsStEdVK7qDA=="
},
"node_modules/core-js-compat": {
"version": "3.25.1",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.1.tgz",
@ -10334,6 +10341,11 @@
"svelte": ">= 3"
}
},
"node_modules/svelte-keydown": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/svelte-keydown/-/svelte-keydown-0.5.0.tgz",
"integrity": "sha512-DgY6AYlKbBocSvjC3kUeNPcStJQOTOCxAGG9ymVHzJdsQ1hRJuB8pcnB4UFH8uH3bAPdYyXXa3LwenLDL41eqQ=="
},
"node_modules/svelte-material-icons": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/svelte-material-icons/-/svelte-material-icons-2.0.4.tgz",
@ -14401,6 +14413,11 @@
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
},
"copy-image-clipboard": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/copy-image-clipboard/-/copy-image-clipboard-2.1.2.tgz",
"integrity": "sha512-3VCXVl2IpFfOyD8drv9DozcNlwmqBqxOlsgkEGyVAzadjlPk1go8YNZyy8QmTnwHPxSFpeCR9OdsStEdVK7qDA=="
},
"core-js-compat": {
"version": "3.25.1",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.1.tgz",
@ -18619,6 +18636,11 @@
"dev": true,
"requires": {}
},
"svelte-keydown": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/svelte-keydown/-/svelte-keydown-0.5.0.tgz",
"integrity": "sha512-DgY6AYlKbBocSvjC3kUeNPcStJQOTOCxAGG9ymVHzJdsQ1hRJuB8pcnB4UFH8uH3bAPdYyXXa3LwenLDL41eqQ=="
},
"svelte-material-icons": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/svelte-material-icons/-/svelte-material-icons-2.0.4.tgz",

2
web/package.json
View File

@ -59,12 +59,14 @@
"dependencies": {
"axios": "^0.27.2",
"cookie": "^0.4.2",
"copy-image-clipboard": "^2.1.2",
"exifr": "^7.1.3",
"leaflet": "^1.8.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"moment": "^2.29.3",
"socket.io-client": "^4.5.1",
"svelte-keydown": "^0.5.0",
"svelte-material-icons": "^2.0.2"
}
}

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

@ -4,15 +4,23 @@
import { onMount } from 'svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, AssetResponseDto } from '@api';
import Keydown from 'svelte-keydown';
export let assetId: string;
export let deviceId: string;
let assetInfo: AssetResponseDto;
let assetData: string;
let copyImageToClipboard : (src: string) => Promise<Blob>;
onMount(async () => {
const { data } = await api.assetApi.getAssetById(assetId);
assetInfo = data;
//Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
const module = await import('copy-image-clipboard')
copyImageToClipboard = module.copyImageToClipboard;
});
const loadAssetData = async () => {
@ -31,14 +39,22 @@
return;
}
const assetData = URL.createObjectURL(data);
assetData = URL.createObjectURL(data);
return assetData;
} catch {
// Do nothing
}
};
const handleCopy = async (keyEvent: CustomEvent<string>) => {
if (keyEvent.detail == 'Control-c' || keyEvent.detail == 'Meta-c') {
await copyImageToClipboard(assetData);
}
};
</script>
<Keydown on:combo={handleCopy} />
<div
transition:fade={{ duration: 150 }}
class="flex place-items-center place-content-center h-full select-none"