fix(web): hide detail panel for shared links with hidden metadata (im…

…mich-app#9700)
magicedy · May 23, 2024 · 8bfa676 · 8bfa676
1 parent e7aa504
commit 8bfa676
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/e2e/src/web/specs/asset-viewer/detail-panel.e2e-spec.ts b/e2e/src/web/specs/asset-viewer/detail-panel.e2e-spec.ts
@@ -0,0 +1,46 @@
+import { AssetFileUploadResponseDto, LoginResponseDto, SharedLinkType } from '@immich/sdk';
+import { expect, test } from '@playwright/test';
+import { utils } from 'src/utils';
+
+test.describe('Detail Panel', () => {
+  let admin: LoginResponseDto;
+  let asset: AssetFileUploadResponseDto;
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    await utils.resetDatabase();
+    admin = await utils.adminSetup();
+    asset = await utils.createAsset(admin.accessToken);
+  });
+
+  test('can be opened for shared links', async ({ page }) => {
+    const sharedLink = await utils.createSharedLink(admin.accessToken, {
+      type: SharedLinkType.Individual,
+      assetIds: [asset.id],
+    });
+    await page.goto(`/share/${sharedLink.key}/photos/${asset.id}`);
+    await page.waitForSelector('#immich-asset-viewer');
+
+    await expect(page.getByRole('button', { name: 'Info' })).toBeVisible();
+    await page.keyboard.press('i');
+    await expect(page.locator('#detail-panel')).toBeVisible();
+    await page.keyboard.press('i');
+    await expect(page.locator('#detail-panel')).toHaveCount(0);
+  });
+
+  test('cannot be opened for shared links with hidden metadata', async ({ page }) => {
+    const sharedLink = await utils.createSharedLink(admin.accessToken, {
+      type: SharedLinkType.Individual,
+      assetIds: [asset.id],
+      showMetadata: false,
+    });
+    await page.goto(`/share/${sharedLink.key}/photos/${asset.id}`);
+    await page.waitForSelector('#immich-asset-viewer');
+
+    await expect(page.getByRole('button', { name: 'Info' })).toHaveCount(0);
+    await page.keyboard.press('i');
+    await expect(page.locator('#detail-panel')).toHaveCount(0);
+    await page.keyboard.press('i');
+    await expect(page.locator('#detail-panel')).toHaveCount(0);
+  });
+});
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -88,7 +88,7 @@
   let isShowProfileImageCrop = false;
   let sharedLink = getSharedLink();
   let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
-  let shouldShowDetailButton = asset.hasMetadata;
+  let enableDetailPanel = asset.hasMetadata;
   let shouldShowShareModal = !asset.isTrashed;
   let canCopyImagesToClipboard: boolean;
   let slideshowStateUnsubscribe: () => void;
@@ -574,7 +574,7 @@
           showZoomButton={asset.type === AssetTypeEnum.Image}
           showMotionPlayButton={!!asset.livePhotoVideoId}
           showDownloadButton={shouldShowDownloadButton}
-          showDetailButton={shouldShowDetailButton}
+          showDetailButton={enableDetailPanel}
           showSlideshow={!!assetStore}
           hasStackChildren={$stackAssetsStore.length > 0}
           showShareButton={shouldShowShareModal}
@@ -701,7 +701,7 @@
       </div>
     {/if}
 
-    {#if $slideshowState === SlideshowState.None && $isShowDetail}
+    {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail}
       <div
         transition:fly={{ duration: 150 }}
         id="detail-panel"