From 8bfa6769a5d4d3a4104170f84195d1637e9372c1 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Thu, 23 May 2024 18:39:06 +0200
Subject: [PATCH] fix(web): hide detail panel for shared links with hidden
 metadata (#9700)

---
 .../asset-viewer/detail-panel.e2e-spec.ts     | 46 +++++++++++++++++++
 .../asset-viewer/asset-viewer.svelte          |  6 +--
 2 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 e2e/src/web/specs/asset-viewer/detail-panel.e2e-spec.ts

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
new file mode 100644
index 0000000000..ad847dab15
--- /dev/null
+++ 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
index 01af94d71a..21e38bf0ec 100644
--- 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"