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

web/package-lock.json

@@ -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",

web/package.json

@@ -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"
 	}
 }

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -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"