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

web/package-lock.json

@@ -16,7 +16,6 @@
 				"luxon": "^3.1.1",
 				"rxjs": "^7.8.0",
 				"socket.io-client": "^4.5.1",
-				"svelte-keydown": "^0.5.0",
 				"svelte-material-icons": "^2.0.2"
 			},
 			"devDependencies": {
@@ -53,7 +52,6 @@
 				"svelte": "^3.44.0",
 				"svelte-check": "^2.7.1",
 				"svelte-jester": "^2.3.2",
-				"svelte-keydown": "^0.5.0",
 				"svelte-preprocess": "^4.10.7",
 				"tailwindcss": "^3.0.24",
 				"tslib": "^2.3.1",
@@ -10586,12 +10584,6 @@
 				"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==",
-			"dev": true
-		},
 		"node_modules/svelte-material-icons": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/svelte-material-icons/-/svelte-material-icons-2.0.4.tgz",
@@ -19022,12 +19014,6 @@
 			"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==",
-			"dev": true
-		},
 		"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

@@ -52,7 +52,6 @@
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-jester": "^2.3.2",
-		"svelte-keydown": "^0.5.0",
 		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "^3.0.24",
 		"tslib": "^2.3.1",
@@ -69,7 +68,6 @@
 		"luxon": "^3.1.1",
 		"rxjs": "^7.8.0",
 		"socket.io-client": "^4.5.1",
-		"svelte-keydown": "^0.5.0",
 		"svelte-material-icons": "^2.0.2"
 	}
 }

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

@@ -39,12 +39,18 @@
 	let addToSharedAlbum = true;
 	let shouldPlayMotionPhoto = false;
 	let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
+	let canCopyImagesToClipboard: boolean;
 	const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
 
 	onMount(async () => {
 		document.addEventListener('keydown', onKeyboardPress);
 
 		getAllAlbums();
+
+		// 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');
+		canCopyImagesToClipboard = module.canCopyImagesToClipboard();
 	});
 
 	onDestroy(() => {
@@ -253,7 +259,7 @@
 		<AssetViewerNavBar
 			{asset}
 			isMotionPhotoPlaying={shouldPlayMotionPhoto}
-			showCopyButton={asset.type === AssetTypeEnum.Image}
+			showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
 			showMotionPlayButton={!!asset.livePhotoVideoId}
 			showDownloadButton={shouldShowDownloadButton}
 			on:goBack={closeViewer}

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

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