fix(web): show download button correctly based on shared link permission (#8288)

* fix(web): show download button correctly based on shared link permission

* remove console log

* Define initial value

* simpler implementation

* refactor: show download in asset viewer for shared link

* chore: hook timeout

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

e2e/src/api/specs/search.e2e-spec.ts

@@ -133,7 +133,7 @@ describe('/search', () => {
     assetLast = assets.at(-1) as AssetFileUploadResponseDto;
 
     await deleteAssets({ assetBulkDeleteDto: { ids: [assetSilver.id] } }, { headers: asBearerAuth(admin.accessToken) });
-  });
+  }, 30_000);
 
   afterAll(async () => {
     utils.disconnectWebsocket(websocket);

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

@@ -161,6 +161,16 @@
         }}
       />
     {/if}
+
+    {#if !isOwner && showDownloadButton}
+      <CircleIconButton
+        isOpacity={true}
+        icon={mdiFolderDownloadOutline}
+        on:click={() => dispatch('download')}
+        title="Download"
+      />
+    {/if}
+
     {#if showDetailButton}
       <CircleIconButton
         isOpacity={true}
@@ -169,6 +179,7 @@
         title="Info"
       />
     {/if}
+
     {#if isOwner}
       <CircleIconButton
         isOpacity={true}

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

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import { AssetAction, ProjectionType } from '$lib/constants';
   import { updateNumberOfComments } from '$lib/stores/activity.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -9,7 +11,7 @@
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
   import { user } from '$lib/stores/user.store';
-  import { getAssetJobMessage, isSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetJobMessage, getSharedLink, handlePromiseError, isSharedLink } from '$lib/utils';
   import { addAssetsToAlbum, addAssetsToNewAlbum, downloadFile } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { shortcuts } from '$lib/utils/shortcut';
@@ -30,7 +32,6 @@
     type ActivityResponseDto,
     type AlbumResponseDto,
     type AssetResponseDto,
-    type SharedLinkResponseDto,
   } from '@immich/sdk';
   import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
@@ -49,14 +50,11 @@
   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';
-  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
   export let preloadAssets: AssetResponseDto[] = [];
   export let showNavigation = true;
-  export let sharedLink: SharedLinkResponseDto | undefined = undefined;
   $: isTrashEnabled = $featureFlags.trash;
   export let withStacked = false;
   export let isShared = false;
@@ -86,6 +84,7 @@
   let addToSharedAlbum = true;
   let shouldPlayMotionPhoto = false;
   let isShowProfileImageCrop = false;
+  let sharedLink = getSharedLink();
   let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
   let shouldShowDetailButton = asset.hasMetadata;
   let shouldShowShareModal = !asset.isTrashed;

web/src/lib/utils.ts

@@ -10,6 +10,7 @@ import {
   linkOAuthAccount,
   startOAuth,
   unlinkOAuthAccount,
+  type SharedLinkResponseDto,
   type UserResponseDto,
 } from '@immich/sdk';
 import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiImageRefreshOutline } from '@mdi/js';
@@ -129,14 +130,12 @@ export const getJobName = (jobName: JobName) => {
 };
 
 let _key: string | undefined;
+let _sharedLink: SharedLinkResponseDto | undefined;
 
-export const setKey = (key: string) => {
-  _key = key;
-};
-
-export const getKey = (): string | undefined => {
-  return _key;
-};
+export const setKey = (key: string) => (_key = key);
+export const getKey = (): string | undefined => _key;
+export const setSharedLink = (sharedLink: SharedLinkResponseDto) => (_sharedLink = sharedLink);
+export const getSharedLink = (): SharedLinkResponseDto | undefined => _sharedLink;
 
 export const isSharedLink = () => {
   return !!_key;

web/src/routes/(user)/share/[key]/+page.svelte

@@ -9,6 +9,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { getMySharedLink, SharedLinkType } from '@immich/sdk';
   import type { PageData } from './$types';
+  import { setSharedLink } from '$lib/utils';
 
   export let data: PageData;
   let { sharedLink, passwordRequired, sharedLinkKey: key, meta } = data;
@@ -19,6 +20,7 @@
   const handlePasswordSubmit = async () => {
     try {
       sharedLink = await getMySharedLink({ password, key });
+      setSharedLink(sharedLink);
       passwordRequired = false;
       isOwned = $user ? $user.id === sharedLink.userId : false;
       title = (sharedLink.album ? sharedLink.album.albumName : 'Public Share') + ' - Immich';

web/src/routes/(user)/share/[key]/+page.ts

@@ -1,4 +1,4 @@
-import { getAssetThumbnailUrl } from '$lib/utils';
+import { getAssetThumbnailUrl, setSharedLink } from '$lib/utils';
 import { authenticate } from '$lib/utils/auth';
 import { ThumbnailFormat, getMySharedLink, isHttpError } from '@immich/sdk';
 import type { PageLoad } from './$types';
@@ -9,6 +9,7 @@ export const load = (async ({ params }) => {
 
   try {
     const sharedLink = await getMySharedLink({ key });
+    setSharedLink(sharedLink);
     const assetCount = sharedLink.assets.length;
     const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;