From 7f854432ae11eb07c28de301820d4fc6e21d32ed Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 3 Apr 2024 09:37:03 -0500 Subject: [PATCH] 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 --- e2e/src/api/specs/search.e2e-spec.ts | 2 +- .../asset-viewer/asset-viewer-nav-bar.svelte | 11 +++++++++++ .../lib/components/asset-viewer/asset-viewer.svelte | 9 ++++----- web/src/lib/utils.ts | 13 ++++++------- web/src/routes/(user)/share/[key]/+page.svelte | 2 ++ web/src/routes/(user)/share/[key]/+page.ts | 3 ++- 6 files changed, 26 insertions(+), 14 deletions(-) diff --git a/e2e/src/api/specs/search.e2e-spec.ts b/e2e/src/api/specs/search.e2e-spec.ts index afe131228a..a613cdd288 100644 --- a/e2e/src/api/specs/search.e2e-spec.ts +++ b/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); diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte index 1772b8641d..abcb248f1c 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte @@ -161,6 +161,16 @@ }} /> {/if} + + {#if !isOwner && showDownloadButton} + dispatch('download')} + title="Download" + /> + {/if} + {#if showDetailButton} {/if} + {#if isOwner} 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; diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts index 299f045055..e6c21b70a3 100644 --- a/web/src/lib/utils.ts +++ b/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; diff --git a/web/src/routes/(user)/share/[key]/+page.svelte b/web/src/routes/(user)/share/[key]/+page.svelte index 1b87063da9..28ebbc6c8e 100644 --- a/web/src/routes/(user)/share/[key]/+page.svelte +++ b/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'; diff --git a/web/src/routes/(user)/share/[key]/+page.ts b/web/src/routes/(user)/share/[key]/+page.ts index 380c9d0024..89821a447b 100644 --- a/web/src/routes/(user)/share/[key]/+page.ts +++ b/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;