From 87c3d886ff1c89d51aaa5011efca05274c7893a9 Mon Sep 17 00:00:00 2001
From: Sam Holton <samholton@gmail.com>
Date: Mon, 4 Mar 2024 17:39:58 -0500
Subject: [PATCH] feat(web): use lib/utils/copyToClipboard for share link
 (#7603)

---
 .../create-shared-link-modal.svelte           | 55 ++++++++-----------
 1 file changed, 22 insertions(+), 33 deletions(-)

diff --git a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
index b641260cb3..801cb9f3ef 100644
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
-  import { mdiLink } from '@mdi/js';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { mdiContentCopy, mdiLink } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
   import BaseModal from '../base-modal.svelte';
   import type { ImmichDropDownOption } from '../dropdown-button.svelte';
   import DropdownButton from '../dropdown-button.svelte';
@@ -26,7 +27,6 @@
   let expirationTime = '';
   let password = '';
   let shouldChangeExpirationTime = false;
-  let canCopyImagesToClipboard = true;
   let enablePassword = false;
 
   const dispatch = createEventDispatcher<{
@@ -41,27 +41,22 @@
 
   $: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
 
-  onMount(async () => {
-    if (editingLink) {
-      if (editingLink.description) {
-        description = editingLink.description;
-      }
-      if (editingLink.password) {
-        password = editingLink.password;
-      }
-      allowUpload = editingLink.allowUpload;
-      allowDownload = editingLink.allowDownload;
-      showMetadata = editingLink.showMetadata;
-
-      albumId = editingLink.album?.id;
-      assetIds = editingLink.assets.map(({ id }) => id);
-
-      enablePassword = !!editingLink.password;
+  if (editingLink) {
+    if (editingLink.description) {
+      description = editingLink.description;
     }
+    if (editingLink.password) {
+      password = editingLink.password;
+    }
+    allowUpload = editingLink.allowUpload;
+    allowDownload = editingLink.allowDownload;
+    showMetadata = editingLink.showMetadata;
 
-    const module = await import('copy-image-clipboard');
-    canCopyImagesToClipboard = module.canCopyImagesToClipboard();
-  });
+    albumId = editingLink.album?.id;
+    assetIds = editingLink.assets.map(({ id }) => id);
+
+    enablePassword = !!editingLink.password;
+  }
 
   const handleCreateSharedLink = async () => {
     const expirationTime = getExpirationTimeInMillisecond();
@@ -88,14 +83,6 @@
     }
   };
 
-  const handleCopy = async () => {
-    if (!sharedLink) {
-      return;
-    }
-
-    await copyToClipboard(sharedLink);
-  };
-
   const getExpirationTimeInMillisecond = () => {
     switch (expirationTime) {
       case '30 minutes': {
@@ -265,9 +252,11 @@
       <div class="flex w-full gap-4">
         <input class="immich-form-input w-full" bind:value={sharedLink} disabled />
 
-        {#if canCopyImagesToClipboard}
-          <Button on:click={() => handleCopy()}>Copy</Button>
-        {/if}
+        <LinkButton on:click={() => (sharedLink ? copyToClipboard(sharedLink) : '')}>
+          <div class="flex place-items-center gap-2 text-sm">
+            <Icon path={mdiContentCopy} size="18" />
+          </div>
+        </LinkButton>
       </div>
     {/if}
   </section>