fix(web): copy to clipboard on safari (#22217)

i18n/en.json

@@ -920,6 +920,7 @@
     "cant_get_number_of_comments": "Can't get number of comments",
     "cant_search_people": "Can't search people",
     "cant_search_places": "Can't search places",
+    "clipboard_unsupported_mime_type": "The system clipboard does not support copying this type of content: {mimeType}",
     "error_adding_assets_to_album": "Error adding assets to album",
     "error_adding_users_to_album": "Error adding users to album",
     "error_deleting_shared_user": "Error deleting shared user",

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

@@ -97,12 +97,15 @@
     }
 
     try {
-      await copyImageToClipboard($photoViewerImgElement ?? assetFileUrl);
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('copied_image_to_clipboard'),
-        timeout: 3000,
-      });
+      const result = await copyImageToClipboard($photoViewerImgElement ?? assetFileUrl);
+      if (result.success) {
+        notificationController.show({ type: NotificationType.Info, message: $t('copied_image_to_clipboard') });
+      } else {
+        notificationController.show({
+          type: NotificationType.Error,
+          message: $t('errors.clipboard_unsupported_mime_type', { values: { mimeType: result.mimeType } }),
+        });
+      }
     } catch (error) {
       handleError(error, $t('copy_error'));
     }

web/src/lib/utils/asset-utils.ts

@@ -625,7 +625,21 @@ const urlToBlob = async (imageSource: string) => {
   return await response.blob();
 };
 
-export const copyImageToClipboard = async (source: HTMLImageElement | string) => {
-  const blob = source instanceof HTMLImageElement ? await imgToBlob(source) : await urlToBlob(source);
+export const copyImageToClipboard = async (
+  source: HTMLImageElement | string,
+): Promise<{ success: true } | { success: false; mimeType: string }> => {
+  if (source instanceof HTMLImageElement) {
+    // do not await, so the Safari clipboard write happens in the context of the user gesture
+    await navigator.clipboard.write([new ClipboardItem({ ['image/png']: imgToBlob(source) })]);
+    return { success: true };
+  }
+
+  // if we had a way to get the mime type synchronously, we could do the same thing here
+  const blob = await urlToBlob(source);
+  if (!ClipboardItem.supports(blob.type)) {
+    return { success: false, mimeType: blob.type };
+  }
+
   await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+  return { success: true };
 };