From 19e9908ee2195ed39306b464ebea043c61004b9d Mon Sep 17 00:00:00 2001
From: Russell Tan <sell_nat@yahoo.com>
Date: Fri, 12 Jan 2024 12:27:34 -0800
Subject: [PATCH] fix(web): show description in shared links (#4249)

* chore: rebase

* fix: re-size issue

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
---
 .../asset-viewer/detail-panel.svelte          | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 7d149e2cf6..8c61acb17b 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -54,16 +54,20 @@
 
   $: isOwner = $user?.id === asset.ownerId;
 
-  $: {
+  const handleNewAsset = async (newAsset: AssetResponseDto) => {
+    description = newAsset?.exifInfo?.description || '';
+
     // Get latest description from server
-    if (asset.id && !api.isSharedLink) {
-      api.assetApi.getAssetById({ id: asset.id }).then((res) => {
-        people = res.data?.people || [];
-        textarea.value = res.data?.exifInfo?.description || '';
-        autoGrowHeight();
-      });
+    if (newAsset.id && !api.isSharedLink) {
+      const { data } = await api.assetApi.getAssetById({ id: asset.id });
+      people = data?.people || [];
+      description = data.exifInfo?.description || '';
+      textarea.value = description;
+      autoGrowHeight();
     }
-  }
+  };
+
+  $: handleNewAsset(asset);
 
   $: latlng = (() => {
     const lat = asset.exifInfo?.latitude;
@@ -192,18 +196,21 @@
     </section>
   {/if}
 
-  <section class="mx-4 mt-10" style:display={!isOwner && textarea?.value == '' ? 'none' : 'block'}>
-    <textarea
-      bind:this={textarea}
-      class="max-h-[500px]
+  <section class="mx-4 mt-10" style:display={!isOwner && description === '' ? 'none' : 'block'}>
+    {#if !isOwner || api.isSharedLink}
+      <span>{description}</span>
+    {:else}
+      <textarea
+        bind:this={textarea}
+        class="max-h-[500px]
       w-full resize-none overflow-hidden border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary"
-      placeholder={!isOwner ? '' : 'Add a description'}
-      on:focusin={handleFocusIn}
-      on:focusout={handleFocusOut}
-      on:input={autoGrowHeight}
-      bind:value={description}
-      disabled={!isOwner}
-    />
+        placeholder={!isOwner ? '' : 'Add a description'}
+        on:focusin={handleFocusIn}
+        on:focusout={handleFocusOut}
+        on:input={autoGrowHeight}
+        bind:value={description}
+      />
+    {/if}
   </section>
 
   {#if !api.isSharedLink && people.length > 0}