refactor(web): shared link key auth (#3855)

web/src/lib/components/album-page/album-viewer.svelte

@@ -27,13 +27,13 @@
 
   let { isViewing: showAssetViewer } = assetViewingStore;
 
-  const assetStore = new AssetStore({ size: TimeBucketSize.Month, albumId: album.id, key: sharedLink.key });
+  const assetStore = new AssetStore({ size: TimeBucketSize.Month, albumId: album.id });
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
   dragAndDropFilesStore.subscribe((value) => {
     if (value.isDragging && value.files.length > 0) {
-      fileUploadHandler(value.files, album.id, sharedLink.key);
+      fileUploadHandler(value.files, album.id);
       dragAndDropFilesStore.set({ isDragging: false, files: [] });
     }
   });
@@ -88,7 +88,7 @@
   };
 
   const downloadAlbum = async () => {
-    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id }, sharedLink.key);
+    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id });
   };
 </script>
 
@@ -97,7 +97,7 @@
     <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
       <SelectAllAssets {assetStore} {assetInteractionStore} />
       {#if sharedLink.allowDownload}
-        <DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink.key} />
+        <DownloadAction filename="{album.albumName}.zip" />
       {/if}
     </AssetSelectControlBar>
   {:else}
@@ -117,7 +117,7 @@
         {#if sharedLink.allowUpload}
           <CircleIconButton
             title="Add Photos"
-            on:click={() => openFileUploadDialog(album.id, sharedLink.key)}
+            on:click={() => openFileUploadDialog(album.id)}
             logo={FileImagePlusOutline}
           />
         {/if}
@@ -135,7 +135,7 @@
 <main
   class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
 >
-  <AssetGrid {assetStore} {assetInteractionStore} publicSharedKey={sharedLink.key}>
+  <AssetGrid {assetStore} {assetInteractionStore}>
     <section class="pt-24">
       <!-- ALBUM TITLE -->
       <p

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

@@ -26,7 +26,6 @@
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
-  export let publicSharedKey = '';
   export let showNavigation = true;
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
 
@@ -72,6 +71,10 @@
   $: asset.id && !sharedLink && getAllAlbums(); // Update the album information when the asset ID changes
 
   const getAllAlbums = async () => {
+    if (api.isSharedLink) {
+      return;
+    }
+
     try {
       const { data } = await api.albumApi.getAllAlbums({ assetId: asset.id });
       appearsInAlbums = data;
@@ -84,7 +87,9 @@
     switch (key) {
       case 'a':
       case 'A':
-        if (shiftKey) toggleArchive();
+        if (shiftKey) {
+          toggleArchive();
+        }
         return;
       case 'ArrowLeft':
         navigateAssetBackward();
@@ -94,7 +99,9 @@
         return;
       case 'd':
       case 'D':
-        if (shiftKey) downloadFile(asset, publicSharedKey);
+        if (shiftKey) {
+          downloadFile(asset);
+        }
         return;
       case 'Delete':
         isShowDeleteConfirmation = true;
@@ -272,7 +279,7 @@
       showDownloadButton={shouldShowDownloadButton}
       on:goBack={closeViewer}
       on:showDetail={showDetailInfoHandler}
-      on:download={() => downloadFile(asset, publicSharedKey)}
+      on:download={() => downloadFile(asset)}
       on:delete={() => (isShowDeleteConfirmation = true)}
       on:favorite={toggleFavorite}
       on:addToAlbum={() => openAlbumPicker(false)}
@@ -304,7 +311,6 @@
       {:else if asset.type === AssetTypeEnum.Image}
         {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
           <VideoViewer
-            {publicSharedKey}
             assetId={asset.livePhotoVideoId}
             on:close={closeViewer}
             on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
@@ -312,12 +318,12 @@
         {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || asset.originalPath
             .toLowerCase()
             .endsWith('.insp')}
-          <PanoramaViewer {publicSharedKey} {asset} />
+          <PanoramaViewer {asset} />
         {:else}
-          <PhotoViewer {publicSharedKey} {asset} on:close={closeViewer} />
+          <PhotoViewer {asset} on:close={closeViewer} />
         {/if}
       {:else}
-        <VideoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} />
+        <VideoViewer assetId={asset.id} on:close={closeViewer} />
       {/if}
     {/key}
   </div>
@@ -338,7 +344,6 @@
       <DetailPanel
         {asset}
         albums={appearsInAlbums}
-        {sharedLink}
         on:close={() => ($isShowDetail = false)}
         on:close-viewer={handleCloseViewer}
         on:description-focus-in={disableKeyDownEvent}

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

@@ -9,21 +9,20 @@
   import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
   import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
   import { createEventDispatcher } from 'svelte';
-  import { AssetResponseDto, AlbumResponseDto, api, ThumbnailFormat, SharedLinkResponseDto } from '@api';
+  import { AssetResponseDto, AlbumResponseDto, api, ThumbnailFormat } from '@api';
   import { asByteUnitString } from '../../utils/byte-units';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import { getAssetFilename } from '$lib/utils/asset-utils';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
-  export let sharedLink: SharedLinkResponseDto | undefined = undefined;
 
   let textarea: HTMLTextAreaElement;
   let description: string;
 
   $: {
     // Get latest description from server
-    if (asset.id && !sharedLink) {
+    if (asset.id && !api.isSharedLink) {
       api.assetApi.getAssetById({ id: asset.id }).then((res) => {
         people = res.data?.people || [];
         textarea.value = res.data?.exifInfo?.description || '';
@@ -91,13 +90,15 @@
     <p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
   </div>
 
-  <section class="mx-4 mt-10">
+  <section
+    class="mx-4 mt-10"
+    style:display={$page?.data?.user?.id !== asset.ownerId && textarea?.value == '' ? 'none' : 'block'}
+  >
     <textarea
       bind:this={textarea}
       class="max-h-[500px]
       w-full resize-none overflow-hidden border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary"
       placeholder={$page?.data?.user?.id !== asset.ownerId ? '' : 'Add a description'}
-      style:display={$page?.data?.user?.id !== asset.ownerId && textarea?.value == '' ? 'none' : 'block'}
       on:focusin={handleFocusIn}
       on:focusout={handleFocusOut}
       on:input={autoGrowHeight}
@@ -106,7 +107,7 @@
     />
   </section>
 
-  {#if people.length > 0}
+  {#if !api.isSharedLink && people.length > 0}
     <section class="px-4 py-4 text-sm">
       <h2>PEOPLE</h2>
 

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

@@ -4,14 +4,16 @@
   import { api, AssetResponseDto } from '@api';
   import View360, { EquirectProjection } from '@egjs/svelte-view360';
   import './panorama-viewer.css';
+
   export let asset: AssetResponseDto;
-  export let publicSharedKey = '';
+
   let dataUrl = '';
   let errorMessage = '';
+
   const loadAssetData = async () => {
     try {
       const { data } = await api.assetApi.serveFile(
-        { id: asset.id, isThumb: false, isWeb: false, key: publicSharedKey },
+        { id: asset.id, isThumb: false, isWeb: false, key: api.getKey() },
         { responseType: 'blob' },
       );
       if (data instanceof Blob) {

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

@@ -8,12 +8,10 @@
   import { photoZoomState } from '$lib/stores/zoom-image.store';
 
   export let asset: AssetResponseDto;
-  export let publicSharedKey = '';
   export let element: HTMLDivElement | undefined = undefined;
+
   let imgElement: HTMLDivElement;
-
   let assetData: string;
-
   let copyImageToClipboard: (src: string) => Promise<Blob>;
   let canCopyImagesToClipboard: () => boolean;
 
@@ -28,7 +26,7 @@
   const loadAssetData = async () => {
     try {
       const { data } = await api.assetApi.serveFile(
-        { id: asset.id, isThumb: false, isWeb: true, key: publicSharedKey },
+        { id: asset.id, isThumb: false, isWeb: true, key: api.getKey() },
         {
           responseType: 'blob',
         },

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

@@ -7,7 +7,6 @@
   import { handleError } from '../../utils/handle-error';
 
   export let assetId: string;
-  export let publicSharedKey: string | undefined = undefined;
 
   let isVideoLoading = true;
   const dispatch = createEventDispatcher<{ onVideoEnded: void }>();
@@ -37,7 +36,7 @@
     bind:volume={$videoViewerVolume}
     poster={api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg)}
   >
-    <source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
+    <source src={api.getAssetFileUrl(assetId, false, true)} type="video/mp4" />
     <track kind="captions" />
   </video>
 

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -27,7 +27,6 @@
   export let selectionCandidate = false;
   export let disabled = false;
   export let readonly = false;
-  export let publicSharedKey: string | undefined = undefined;
   export let showArchiveIcon = false;
 
   let mouseOver = false;
@@ -118,13 +117,13 @@
         />
 
         <!-- Favorite asset star -->
-        {#if asset.isFavorite && !publicSharedKey}
+        {#if !api.isSharedLink && asset.isFavorite}
           <div class="absolute bottom-2 left-2 z-10">
             <Heart size="24" class="text-white" />
           </div>
         {/if}
 
-        {#if showArchiveIcon && asset.isArchived}
+        {#if !api.isSharedLink && showArchiveIcon && asset.isArchived}
           <div class="absolute {asset.isFavorite ? 'bottom-10' : 'bottom-2'} left-2 z-10">
             <ArchiveArrowDownOutline size="24" class="text-white" />
           </div>
@@ -140,7 +139,7 @@
 
         {#if asset.resized}
           <ImageThumbnail
-            url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
+            url={api.getAssetThumbnailUrl(asset.id, format)}
             altText={asset.originalFileName}
             widthStyle="{width}px"
             heightStyle="{height}px"
@@ -156,7 +155,7 @@
         {#if asset.type === AssetTypeEnum.Video}
           <div class="absolute top-0 h-full w-full">
             <VideoThumbnail
-              url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
+              url={api.getAssetFileUrl(asset.id, false, true)}
               enablePlayback={mouseOver}
               curve={selected}
               durationInSeconds={timeToSeconds(asset.duration)}
@@ -167,7 +166,7 @@
         {#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
           <div class="absolute top-0 h-full w-full">
             <VideoThumbnail
-              url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true, publicSharedKey)}
+              url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true)}
               pauseIcon={MotionPauseOutline}
               playIcon={MotionPlayOutline}
               showTime={false}

web/src/lib/components/photos-page/actions/download-action.svelte

@@ -6,7 +6,6 @@
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let filename = 'immich.zip';
-  export let sharedLinkKey: string | undefined = undefined;
   export let menuItem = false;
 
   const { getAssets, clearSelect } = getAssetControlContext();
@@ -15,12 +14,12 @@
     const assets = Array.from(getAssets());
     if (assets.length === 1) {
       clearSelect();
-      await downloadFile(assets[0], sharedLinkKey);
+      await downloadFile(assets[0]);
       return;
     }
 
     clearSelect();
-    await downloadArchive(filename, { assetIds: assets.map((asset) => asset.id) }, sharedLinkKey);
+    await downloadArchive(filename, { assetIds: assets.map((asset) => asset.id) });
   };
 </script>
 

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -20,7 +20,7 @@
         assetIdsDto: {
           assetIds: Array.from(getAssets()).map((asset) => asset.id),
         },
-        key: sharedLink.key,
+        key: api.getKey(),
       });
 
       for (const result of results) {

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -21,7 +21,6 @@
   export let isSelectionMode = false;
   export let viewport: Viewport;
   export let singleSelect = false;
-  export let publicSharedKey: string | undefined = undefined;
 
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
@@ -96,7 +95,7 @@
       return;
     }
 
-    assetViewingStore.setAssetId(asset.id, publicSharedKey);
+    assetViewingStore.setAssetId(asset.id);
   };
 
   const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => dispatch('select', { title, assets });
@@ -189,7 +188,6 @@
               disabled={$assetStore.albumAssets.has(asset.id)}
               thumbnailWidth={box.width}
               thumbnailHeight={box.height}
-              {publicSharedKey}
             />
           </div>
         {/each}

web/src/lib/components/photos-page/asset-grid.svelte

@@ -23,7 +23,7 @@
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
   export let removeAction: AssetAction | null = null;
-  export let publicSharedKey: string | undefined = undefined;
+
   const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
     assetInteractionStore;
   const viewport: Viewport = { width: 0, height: 0 };
@@ -97,7 +97,7 @@
   const handlePrevious = async () => {
     const previousAsset = await assetStore.getPreviousAssetId($viewingAsset.id);
     if (previousAsset) {
-      assetViewingStore.setAssetId(previousAsset, publicSharedKey);
+      assetViewingStore.setAssetId(previousAsset);
     }
 
     return !!previousAsset;
@@ -106,7 +106,7 @@
   const handleNext = async () => {
     const nextAsset = await assetStore.getNextAssetId($viewingAsset.id);
     if (nextAsset) {
-      assetViewingStore.setAssetId(nextAsset, publicSharedKey);
+      assetViewingStore.setAssetId(nextAsset);
     }
 
     return !!nextAsset;
@@ -349,7 +349,6 @@
                 bucketDate={bucket.bucketDate}
                 bucketHeight={bucket.bucketHeight}
                 {viewport}
-                {publicSharedKey}
               />
             {/if}
           </div>
@@ -371,7 +370,6 @@
       on:unarchived={({ detail: asset }) => handleAction(asset, AssetAction.UNARCHIVE)}
       on:favorite={({ detail: asset }) => handleAction(asset, AssetAction.FAVORITE)}
       on:unfavorite={({ detail: asset }) => handleAction(asset, AssetAction.UNFAVORITE)}
-      {publicSharedKey}
     />
   {/if}
 </Portal>

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -15,7 +15,6 @@
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
   import SelectAll from 'svelte-material-icons/SelectAll.svelte';
   import ImmichLogo from '../shared-components/immich-logo.svelte';
-
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import { handleError } from '../../utils/handle-error';
 
@@ -35,23 +34,23 @@
   });
 
   const downloadAssets = async () => {
-    await downloadArchive(`immich-shared.zip`, { assetIds: assets.map((asset) => asset.id) }, sharedLink.key);
+    await downloadArchive(`immich-shared.zip`, { assetIds: assets.map((asset) => asset.id) });
   };
 
   const handleUploadAssets = async (files: File[] = []) => {
     try {
       let results: (string | undefined)[] = [];
       if (!files || files.length === 0 || !Array.isArray(files)) {
-        results = await openFileUploadDialog(undefined, sharedLink.key);
+        results = await openFileUploadDialog(undefined);
       } else {
-        results = await fileUploadHandler(files, undefined, sharedLink.key);
+        results = await fileUploadHandler(files, undefined);
       }
       const { data } = await api.sharedLinkApi.addSharedLinkAssets({
         id: sharedLink.id,
         assetIdsDto: {
           assetIds: results.filter((id) => !!id) as string[],
         },
-        key: sharedLink.key,
+        key: api.getKey(),
       });
 
       const added = data.filter((item) => item.success).length;
@@ -75,7 +74,7 @@
     <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
       <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
       {#if sharedLink?.allowDownload}
-        <DownloadAction filename="immich-shared.zip" sharedLinkKey={sharedLink.key} />
+        <DownloadAction filename="immich-shared.zip" />
       {/if}
       {#if isOwned}
         <RemoveFromSharedLink bind:sharedLink />
@@ -106,6 +105,6 @@
     </ControlAppBar>
   {/if}
   <section class="my-[160px] flex flex-col px-6 sm:px-12 md:px-24 lg:px-40">
-    <GalleryViewer {assets} {sharedLink} bind:selectedAssets />
+    <GalleryViewer {assets} bind:selectedAssets />
   </section>
 </section>

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -2,14 +2,13 @@
   import { page } from '$app/stores';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { handleError } from '$lib/utils/handle-error';
-  import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
+  import { AssetResponseDto, ThumbnailFormat } from '@api';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
   import { flip } from 'svelte/animate';
   import { getThumbnailSize } from '$lib/utils/thumbnail-util';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
   export let assets: AssetResponseDto[];
-  export let sharedLink: SharedLinkResponseDto | undefined = undefined;
   export let selectedAssets: Set<AssetResponseDto> = new Set();
   export let disableAssetSelect = false;
   export let showArchiveIcon = false;
@@ -90,7 +89,6 @@
           {asset}
           {thumbnailSize}
           readonly={disableAssetSelect}
-          publicSharedKey={sharedLink?.key}
           format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
           on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
           on:select={selectAssetHandler}
@@ -106,8 +104,6 @@
 {#if $showAssetViewer}
   <AssetViewer
     asset={selectedAsset}
-    publicSharedKey={sharedLink?.key}
-    {sharedLink}
     on:previous={navigateAssetBackward}
     on:next={navigateAssetForward}
     on:close={closeViewer}