feat: shared links custom URL (#19999)

* feat: custom url for shared links

* feat: use a separate route and query param

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

web/src/lib/components/album-page/albums-list.svelte

@@ -369,7 +369,7 @@
 
         if (sharedLink) {
           handleSharedLinkCreated(albumToShare);
-          await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
+          await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
         }
         return;
       }

web/src/lib/components/asset-viewer/actions/download-action.svelte

@@ -16,7 +16,7 @@
 
   let { asset, menuItem = false }: Props = $props();
 
-  const onDownloadFile = async () => downloadFile(await getAssetInfo({ id: asset.id, key: authManager.key }));
+  const onDownloadFile = async () => downloadFile(await getAssetInfo({ ...authManager.params, id: asset.id }));
 </script>
 
 <svelte:document use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: onDownloadFile }} />

web/src/lib/components/asset-viewer/actions/share-action.svelte

@@ -17,7 +17,7 @@
     const sharedLink = await modalManager.show(SharedLinkCreateModal, { assetIds: [asset.id] });
 
     if (sharedLink) {
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
+      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
     }
   };
 </script>

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

@@ -111,7 +111,7 @@
   let zoomToggle = $state(() => void 0);
 
   const refreshStack = async () => {
-    if (authManager.key) {
+    if (authManager.isSharedLink) {
       return;
     }
 
@@ -191,7 +191,7 @@
   });
 
   const handleGetAllAlbums = async () => {
-    if (authManager.key) {
+    if (authManager.isSharedLink) {
       return;
     }
 

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

@@ -25,7 +25,7 @@
   };
 </script>
 
-{#if !authManager.key && $preferences?.ratings.enabled}
+{#if !authManager.isSharedLink && $preferences?.ratings.enabled}
   <section class="px-4 pt-2">
     <StarRating {rating} readOnly={!isOwner} onRating={(rating) => handlePromiseError(handleChangeRating(rating))} />
   </section>

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

@@ -37,7 +37,7 @@
 
 <svelte:document use:shortcut={{ shortcut: { key: 't' }, onShortcut: handleAddTag }} />
 
-{#if isOwner && !authManager.key}
+{#if isOwner && !authManager.isSharedLink}
   <section class="px-4 mt-4">
     <div class="flex h-10 w-full items-center justify-between text-sm">
       <h2>{$t('tags').toUpperCase()}</h2>

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

@@ -85,7 +85,7 @@
 
   const handleNewAsset = async (newAsset: AssetResponseDto) => {
     // TODO: check if reloading asset data is necessary
-    if (newAsset.id && !authManager.key) {
+    if (newAsset.id && !authManager.isSharedLink) {
       const data = await getAssetInfo({ id: asset.id });
       people = data?.people || [];
       unassignedFaces = data?.unassignedFaces || [];
@@ -195,7 +195,7 @@
   <DetailPanelDescription {asset} {isOwner} />
   <DetailPanelRating {asset} {isOwner} />
 
-  {#if !authManager.key && isOwner}
+  {#if !authManager.isSharedLink && isOwner}
     <section class="px-4 pt-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>{$t('people').toUpperCase()}</h2>

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

@@ -14,7 +14,7 @@
   const { asset }: Props = $props();
 
   const loadAssetData = async (id: string) => {
-    const data = await viewAsset({ id, size: AssetMediaSize.Preview, key: authManager.key });
+    const data = await viewAsset({ ...authManager.params, id, size: AssetMediaSize.Preview });
     return URL.createObjectURL(data);
   };
 </script>

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

@@ -270,13 +270,13 @@
         {/if}
 
         <!-- Favorite asset star -->
-        {#if !authManager.key && asset.isFavorite}
+        {#if !authManager.isSharedLink && asset.isFavorite}
           <div class="absolute bottom-2 start-2">
             <Icon path={mdiHeart} size="24" class="text-white" />
           </div>
         {/if}
 
-        {#if !authManager.key && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
+        {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
           <div class={['absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
             <Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />
           </div>

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

@@ -69,7 +69,7 @@
   let paused = $state(false);
   let current = $state<MemoryAsset | undefined>(undefined);
   let currentMemoryAssetFull = $derived.by(async () =>
-    current?.asset ? await getAssetInfo({ id: current.asset.id, key: authManager.key }) : undefined,
+    current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
   );
   let currentTimelineAssets = $derived(current?.memory.assets.map((asset) => toTimelineAsset(asset)) || []);
 

web/src/lib/components/pages/SharedLinkErrorPage.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { page } from '$app/state';
+</script>
+
+<svelte:head>
+  <title>Oops! Error - Immich</title>
+</svelte:head>
+
+<section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
+  <h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
+  {#if page.error?.message}
+    <h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>
+  {/if}
+</section>

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+  import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
+  import PasswordField from '$lib/components/shared-components/password-field.svelte';
+  import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { user } from '$lib/stores/user.store';
+  import { setSharedLink } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { navigate } from '$lib/utils/navigation';
+  import { getMySharedLink, SharedLinkType, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { tick } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    data: {
+      meta: {
+        title: string;
+        description?: string;
+        imageUrl?: string;
+      };
+
+      sharedLink?: SharedLinkResponseDto;
+      key?: string;
+      slug?: string;
+      asset?: AssetResponseDto;
+      passwordRequired?: boolean;
+    };
+  };
+
+  const { data }: Props = $props();
+
+  let { gridScrollTarget } = assetViewingStore;
+  let { sharedLink, passwordRequired, key, slug, meta } = $state(data);
+  let { title, description } = $state(meta);
+  let isOwned = $derived($user ? $user.id === sharedLink?.userId : false);
+  let password = $state('');
+
+  const handlePasswordSubmit = async () => {
+    try {
+      sharedLink = await getMySharedLink({ password, key, slug });
+      setSharedLink(sharedLink);
+      passwordRequired = false;
+      title = (sharedLink.album ? sharedLink.album.albumName : $t('public_share')) + ' - Immich';
+      description =
+        sharedLink.description ||
+        $t('shared_photos_and_videos_count', { values: { assetCount: sharedLink.assets.length } });
+      await tick();
+      await navigate(
+        { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget },
+        { forceNavigate: true, replaceState: true },
+      );
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_get_shared_link'));
+    }
+  };
+
+  const onsubmit = async (event: Event) => {
+    event.preventDefault();
+    await handlePasswordSubmit();
+  };
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+</svelte:head>
+{#if passwordRequired}
+  <main
+    class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height) sm:px-12 md:px-24 lg:px-40"
+  >
+    <div class="flex flex-col items-center justify-center mt-20">
+      <div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div>
+      <div class="mt-4 text-lg text-immich-primary dark:text-immich-dark-primary">
+        {$t('sharing_enter_password')}
+      </div>
+      <div class="mt-4">
+        <form class="flex gap-x-2" novalidate {onsubmit}>
+          <PasswordField autocomplete="off" bind:password placeholder="Password" />
+          <Button type="submit">{$t('submit')}</Button>
+        </form>
+      </div>
+    </div>
+  </main>
+  <header>
+    <ControlAppBar showBackButton={false}>
+      {#snippet leading()}
+        <ImmichLogoSmallLink />
+      {/snippet}
+
+      {#snippet trailing()}
+        <ThemeButton />
+      {/snippet}
+    </ControlAppBar>
+  </header>
+{/if}
+
+{#if !passwordRequired && sharedLink?.type == SharedLinkType.Album}
+  <AlbumViewer {sharedLink} />
+{/if}
+{#if !passwordRequired && sharedLink?.type == SharedLinkType.Individual}
+  <div class="immich-scrollbar">
+    <IndividualSharedViewer {sharedLink} {isOwned} />
+  </div>
+{/if}

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

@@ -15,7 +15,7 @@
     });
 
     if (sharedLink) {
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
+      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
     }
   };
 </script>

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

@@ -4,11 +4,11 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
   import { getAssetInfo } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     filename?: string;
@@ -23,7 +23,7 @@
     const assets = [...getAssets()];
     if (assets.length === 1) {
       clearSelect();
-      let asset = await getAssetInfo({ id: assets[0].id, key: authManager.key });
+      let asset = await getAssetInfo({ ...authManager.params, id: assets[0].id });
       await downloadFile(asset);
       return;
     }

web/src/lib/components/photos-page/actions/link-live-photo-action.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import type { OnLink, OnUnlink } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { getAssetInfo, updateAsset } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiLinkOff, mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     onLink: OnLink;
@@ -59,7 +59,7 @@
     try {
       loading = true;
       const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: null } });
-      const motionResponse = await getAssetInfo({ id: motionId, key: authManager.key });
+      const motionResponse = await getAssetInfo({ ...authManager.params, id: motionId });
       onUnlink({ still: toTimelineAsset(stillResponse), motion: toTimelineAsset(motionResponse) });
       clearSelect();
     } catch (error) {

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

@@ -29,11 +29,11 @@
 
     try {
       const results = await removeSharedLinkAssets({
+        ...authManager.params,
         id: sharedLink.id,
         assetIdsDto: {
           assetIds: [...getAssets()].map((asset) => asset.id),
         },
-        key: authManager.key,
       });
 
       for (const result of results) {

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

@@ -443,7 +443,7 @@
 
     if (laterAsset) {
       const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ id: laterAsset.id, key: authManager.key });
+      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
       assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: laterAsset.id });
     }
@@ -458,7 +458,7 @@
 
     if (earlierAsset) {
       const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ id: earlierAsset.id, key: authManager.key });
+      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
       assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
     }
@@ -471,7 +471,7 @@
     const randomAsset = await timelineManager.getRandomAsset();
 
     if (randomAsset) {
-      const asset = await getAssetInfo({ id: randomAsset.id, key: authManager.key });
+      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
       assetViewingStore.setAsset(asset);
       await navigate({ targetRoute: 'current', assetId: randomAsset.id });
       return asset;
@@ -869,7 +869,7 @@
   style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
-  bind:clientWidth={null, (v) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
+  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
   bind:this={element}
   onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
 >

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

@@ -4,8 +4,8 @@
   import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import type { Viewport } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { handlePromiseError } from '$lib/utils';
   import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
@@ -13,6 +13,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { addSharedLinkAssets, getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
@@ -22,7 +23,6 @@
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -54,11 +54,11 @@
         ? openFileUploadDialog()
         : fileUploadHandler({ files }));
       const data = await addSharedLinkAssets({
+        ...authManager.params,
         id: sharedLink.id,
         assetIdsDto: {
           assetIds: results.filter((id) => !!id) as string[],
         },
-        key: authManager.key,
       });
 
       const added = data.filter((item) => item.success).length;
@@ -145,7 +145,7 @@
       <GalleryViewer {assets} {assetInteraction} {viewport} />
     </section>
   {:else if assets.length === 1}
-    {#await getAssetInfo({ id: assets[0].id, key: authManager.key }) then asset}
+    {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
       <AssetViewer
         {asset}
         showCloseButton={false}

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -126,7 +126,7 @@
     }
 
     const filesArray: File[] = Array.from<File>(files);
-    if (authManager.key) {
+    if (authManager.isSharedLink) {
       dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
     } else {
       await fileUploadHandler({ files: filesArray, albumId, isLockedAssets: isInLockedFolder });

web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte

@@ -14,7 +14,7 @@
   let { link, menuItem = false }: Props = $props();
 
   const handleCopy = async () => {
-    await copyToClipboard(makeSharedLinkUrl(link.key));
+    await copyToClipboard(makeSharedLinkUrl(link));
   };
 </script>
 

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import Badge from '$lib/components/elements/badge.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
+  import SharedLinkDelete from '$lib/components/sharedlinks-page/actions/shared-link-delete.svelte';
+  import SharedLinkEdit from '$lib/components/sharedlinks-page/actions/shared-link-edit.svelte';
   import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
   import { AppRoute } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
+  import { mdiDotsVertical } from '@mdi/js';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
-  import SharedLinkDelete from '$lib/components/sharedlinks-page/actions/shared-link-delete.svelte';
-  import SharedLinkEdit from '$lib/components/sharedlinks-page/actions/shared-link-edit.svelte';
-  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import { mdiDotsVertical } from '@mdi/js';
 
   interface Props {
     link: SharedLinkResponseDto;
@@ -91,6 +91,9 @@
         {#if link.password}
           <Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
         {/if}
+        {#if link.slug}
+          <Badge rounded="full"><span class="text-xs px-1">{$t('custom_url')}</span></Badge>
+        {/if}
       </div>
     </div>
   </svelte:element>