Add navbar button to copy image (#961)

* Add navbar button to copy image

* Use global event for copy image

* merge upstream

* Fixed missing required props

* feat(web): Show notification after copying image to clipboard

* chore(web): Fix typescript error

* chore(web): Formatting

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -5,6 +5,10 @@
 	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 	import { api, AssetResponseDto } from '@api';
 	import Keydown from 'svelte-keydown';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
 
 	export let assetId: string;
 
@@ -39,14 +43,25 @@
 		}
 	};
 
-	const handleCopy = async (keyEvent: CustomEvent<string>) => {
+	const handleKeypress = async (keyEvent: CustomEvent<string>) => {
 		if (keyEvent.detail == 'Control-c' || keyEvent.detail == 'Meta-c') {
-			await copyImageToClipboard(assetData);
+			await doCopy();
 		}
 	};
+
+	export const doCopy = async () => {
+		await copyImageToClipboard(assetData);
+		notificationController.show({
+			type: NotificationType.Info,
+			message: 'Copied image to clipboard.',
+			timeout: 3000
+		});
+	};
 </script>
 
-<Keydown on:combo={handleCopy} />
+<Keydown on:combo={handleKeypress} />
+
+<svelte:window on:copyImage={async () => await doCopy()} />
 
 <div
 	transition:fade={{ duration: 150 }}