feat(web): add share link on asset-viewer (#7595)

* feat(web): add share link on asset-viewer

* PR feedback: move download to context, make share first button

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

@@ -9,7 +9,6 @@
   import {
     mdiAlertOutline,
     mdiArrowLeft,
-    mdiCloudDownloadOutline,
     mdiContentCopy,
     mdiDeleteOutline,
     mdiDotsVertical,
@@ -20,6 +19,7 @@
     mdiMagnifyPlusOutline,
     mdiMotionPauseOutline,
     mdiPlaySpeed,
+    mdiShareVariantOutline,
   } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
@@ -32,12 +32,20 @@
   export let isMotionPhotoPlaying = false;
   export let showDownloadButton: boolean;
   export let showDetailButton: boolean;
+  export let showShareButton: boolean;
   export let showSlideshow = false;
   export let hasStackChildren = false;
 
   $: isOwner = asset.ownerId === $user?.id;
 
-  type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob' | 'playSlideShow' | 'unstack';
+  type MenuItemEvent =
+    | 'addToAlbum'
+    | 'addToSharedAlbum'
+    | 'asProfileImage'
+    | 'download'
+    | 'playSlideShow'
+    | 'runJob'
+    | 'unstack';
 
   const dispatch = createEventDispatcher<{
     back: void;
@@ -54,6 +62,7 @@
     runJob: AssetJobName;
     playSlideShow: void;
     unstack: void;
+    showShareModal: void;
   }>();
 
   let contextMenuPosition = { x: 0, y: 0 };
@@ -82,6 +91,14 @@
     <CircleIconButton isOpacity={true} icon={mdiArrowLeft} on:click={() => dispatch('back')} />
   </div>
   <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
+    {#if showShareButton}
+      <CircleIconButton
+        isOpacity={true}
+        icon={mdiShareVariantOutline}
+        on:click={() => dispatch('showShareModal')}
+        title="Share"
+      />
+    {/if}
     {#if asset.isOffline}
       <CircleIconButton
         isOpacity={true}
@@ -130,15 +147,6 @@
         }}
       />
     {/if}
-
-    {#if showDownloadButton}
-      <CircleIconButton
-        isOpacity={true}
-        icon={mdiCloudDownloadOutline}
-        on:click={() => dispatch('download')}
-        title="Download"
-      />
-    {/if}
     {#if showDetailButton}
       <CircleIconButton
         isOpacity={true}
@@ -167,6 +175,9 @@
             {#if showSlideshow}
               <MenuOption on:click={() => onMenuClick('playSlideShow')} text="Slideshow" />
             {/if}
+            {#if showDownloadButton}
+              <MenuOption on:click={() => onMenuClick('download')} text="Download" />
+            {/if}
             <MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
             <MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />
 

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

@@ -51,6 +51,7 @@
   import PhotoViewer from './photo-viewer.svelte';
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-viewer.svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -81,11 +82,13 @@
   let appearsInAlbums: AlbumResponseDto[] = [];
   let isShowAlbumPicker = false;
   let isShowDeleteConfirmation = false;
+  let isShowShareModal = false;
   let addToSharedAlbum = true;
   let shouldPlayMotionPhoto = false;
   let isShowProfileImageCrop = false;
   let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
   let shouldShowDetailButton = asset.hasMetadata;
+  let shouldShowShareModal = !asset.isTrashed;
   let canCopyImagesToClipboard: boolean;
   let slideshowStateUnsubscribe: () => void;
   let shuffleSlideshowUnsubscribe: () => void;
@@ -292,6 +295,10 @@
           isShowDeleteConfirmation = false;
           return;
         }
+        if (isShowShareModal) {
+          isShowShareModal = false;
+          return;
+        }
         closeViewer();
         return;
       }
@@ -563,6 +570,7 @@
         showDetailButton={shouldShowDetailButton}
         showSlideshow={!!assetStore}
         hasStackChildren={$stackAssetsStore.length > 0}
+        showShareButton={shouldShowShareModal}
         on:back={closeViewer}
         on:showDetail={showDetailInfoHandler}
         on:download={() => downloadFile(asset)}
@@ -577,6 +585,7 @@
         on:runJob={({ detail: job }) => handleRunJob(job)}
         on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         on:unstack={handleUnstack}
+        on:showShareModal={() => (isShowShareModal = true)}
       />
     </div>
   {/if}
@@ -767,6 +776,10 @@
   {#if isShowProfileImageCrop}
     <ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
   {/if}
+
+  {#if isShowShareModal}
+    <CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
+  {/if}
 </section>
 
 <style>