feat: readonly album sharing (#8720)

* rename albums_shared_users_users to album_permissions and add readonly column

* disable synchronize on the original join table

* remove unnecessary FK names

* set readonly=true as default for new album shares

* separate and implement album READ and WRITE permission

* expose albumPermissions on the API, deprecate sharedUsers

* generate openapi

* create readonly view on frontend

* ??? move slideshow button out from ellipsis menu so that non-owners can have access too

* correct sharedUsers joins

* add album permission repository

* remove a log

* fix assetCount getting reset when adding users

* fix lint

* add set permission endpoint and UI

* sort users

* remove log

* Revert "??? move slideshow button out from ellipsis menu so that non-owners can have access too"

This reverts commit 1343bfa311.

* rename stuff

* fix db schema annotations

* sql generate

* change readonly default to follow migration

* fix deprecation notice

* change readonly boolean to role enum

* fix joincolumn as primary key

* rename albumUserRepository in album service

* clean up userId and albumId

* add write access to shared link

* fix existing tests

* switch to vitest

* format and fix tests on web

* add new test

* fix one e2e test

* rename new API field to albumUsers

* capitalize serverside enum

* remove unused ReadWrite type

* missed rename from previous commit

* rename to albumUsers in album entity as well

* remove outdated Equals calls

* unnecessary relation

* rename to updateUser in album service

* minor renamery

* move sorting to backend

* rename and separate ALBUM_WRITE as ADD_ASSET and REMOVE_ASSET

* fix tests

* fix "should migrate single moving picture" test failing on European system timezone

* generated changes after merge

* lint fix

* fix correct page to open after removing user from album

* fix e2e tests and some bugs

* rename updateAlbumUser rest endpoint

* add new e2e tests for updateAlbumUser endpoint

* small optimizations

* refactor album e2e test, add new album shared with viewer

* add new test to check if viewer can see the album

* add new e2e tests for readonly share

* failing test: User delete doesn't cascade to UserAlbum entity

* fix: handle deleted users

* use lodash for sort

* add role to addUsersToAlbum endpoint

* add UI for adding editors

* lint fixes

* change role back to editor as DB default

* fix server tests

* redesign user selection modal editor selector

* style tweaks

* fix type error

* Revert "style tweaks"

This reverts commit ab604f4c8f.

* Revert "redesign user selection modal editor selector"

This reverts commit e6f344856c.

* chore: cleanup and improve add user modal

* chore: open api

* small styling

---------

Co-authored-by: mgabor <>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { groupBy, orderBy } from 'lodash-es';
-  import { addUsersToAlbum, deleteAlbum, type UserResponseDto, type AlbumResponseDto } from '@immich/sdk';
+  import { addUsersToAlbum, deleteAlbum, type AlbumUserAddDto, type AlbumResponseDto } from '@immich/sdk';
   import { mdiDeleteOutline, mdiShareVariantOutline, mdiFolderDownloadOutline, mdiRenameOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
@@ -328,7 +328,7 @@
     updateAlbumInfo(album);
   };
 
-  const handleAddUsers = async (users: UserResponseDto[]) => {
+  const handleAddUsers = async (albumUsers: AlbumUserAddDto[]) => {
     if (!albumToShare) {
       return;
     }
@@ -336,7 +336,7 @@
       const album = await addUsersToAlbum({
         id: albumToShare.id,
         addUsersDto: {
-          sharedUserIds: [...users].map(({ id }) => id),
+          albumUsers,
         },
       });
       updateAlbumInfo(album);

web/src/lib/components/album-page/share-info-modal.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-  import { getMyUserInfo, removeUserFromAlbum, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
+  import {
+    getMyUserInfo,
+    removeUserFromAlbum,
+    type AlbumResponseDto,
+    type UserResponseDto,
+    updateAlbumUser,
+    AlbumUserRole,
+  } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { getContextMenuPosition } from '../../utils/context-menu';
@@ -17,6 +24,7 @@
 
   const dispatch = createEventDispatcher<{
     remove: string;
+    refreshAlbum: void;
   }>();
 
   let currentUser: UserResponseDto;
@@ -63,6 +71,19 @@
       selectedRemoveUser = null;
     }
   };
+
+  const handleSetReadonly = async (user: UserResponseDto, role: AlbumUserRole) => {
+    try {
+      await updateAlbumUser({ id: album.id, userId: user.id, updateAlbumUserDto: { role } });
+      const message = `Set ${user.name} as ${role}`;
+      dispatch('refreshAlbum');
+      notificationController.show({ type: NotificationType.Info, message });
+    } catch (error) {
+      handleError(error, 'Unable to set user role');
+    } finally {
+      selectedRemoveUser = null;
+    }
+  };
 </script>
 
 {#if !selectedRemoveUser}
@@ -78,7 +99,7 @@
           <p class="text-sm">Owner</p>
         </div>
       </div>
-      {#each album.sharedUsers as user}
+      {#each album.albumUsers as { user, role }}
         <div
           class="flex w-full place-items-center justify-between gap-4 p-5 rounded-xl transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
         >
@@ -87,7 +108,14 @@
             <p class="text-sm font-medium">{user.name}</p>
           </div>
 
-          <div id="icon-{user.id}" class="flex place-items-center">
+          <div id="icon-{user.id}" class="flex place-items-center gap-2 text-sm">
+            <div>
+              {#if role === AlbumUserRole.Viewer}
+                Viewer
+              {:else}
+                Editor
+              {/if}
+            </div>
             {#if isOwned}
               <div>
                 <CircleIconButton
@@ -101,6 +129,14 @@
 
                 {#if selectedMenuUser === user}
                   <ContextMenu {...position} on:outclick={() => (selectedMenuUser = null)}>
+                    {#if role === AlbumUserRole.Viewer}
+                      <MenuOption on:click={() => handleSetReadonly(user, AlbumUserRole.Editor)} text="Allow edits" />
+                    {:else}
+                      <MenuOption
+                        on:click={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
+                        text="Disallow edits"
+                      />
+                    {/if}
                     <MenuOption on:click={handleMenuRemove} text="Remove" />
                   </ContextMenu>
                 {/if}

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -1,27 +1,36 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import Dropdown from '$lib/components/elements/dropdown.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { AppRoute } from '$lib/constants';
   import {
+    AlbumUserRole,
     getAllSharedLinks,
     getAllUsers,
     type AlbumResponseDto,
+    type AlbumUserAddDto,
     type SharedLinkResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { mdiCheck, mdiLink, mdiShareCircle } from '@mdi/js';
+  import { mdiCheck, mdiEye, mdiLink, mdiPencil, mdiShareCircle } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
 
   export let album: AlbumResponseDto;
   export let onClose: () => void;
   let users: UserResponseDto[] = [];
-  let selectedUsers: UserResponseDto[] = [];
+  let selectedUsers: Record<string, { user: UserResponseDto; role: AlbumUserRole }> = {};
+
+  const roleOptions: Array<{ title: string; value: AlbumUserRole | 'none'; icon?: string }> = [
+    { title: 'Editor', value: AlbumUserRole.Editor, icon: mdiPencil },
+    { title: 'Viewer', value: AlbumUserRole.Viewer, icon: mdiEye },
+    { title: 'Remove', value: 'none' },
+  ];
 
   const dispatch = createEventDispatcher<{
-    select: UserResponseDto[];
+    select: AlbumUserAddDto[];
     share: void;
   }>();
   let sharedLinks: SharedLinkResponseDto[] = [];
@@ -43,71 +52,91 @@
     sharedLinks = data.filter((link) => link.album?.id === album.id);
   };
 
-  const handleSelect = (user: UserResponseDto) => {
-    selectedUsers = selectedUsers.includes(user)
-      ? selectedUsers.filter((selectedUser) => selectedUser.id !== user.id)
-      : [...selectedUsers, user];
+  const handleToggle = (user: UserResponseDto) => {
+    if (Object.keys(selectedUsers).includes(user.id)) {
+      delete selectedUsers[user.id];
+      selectedUsers = selectedUsers;
+    } else {
+      selectedUsers[user.id] = { user, role: AlbumUserRole.Editor };
+    }
   };
 
-  const handleUnselect = (user: UserResponseDto) => {
-    selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
+  const handleChangeRole = (user: UserResponseDto, role: AlbumUserRole | 'none') => {
+    if (role === 'none') {
+      delete selectedUsers[user.id];
+      selectedUsers = selectedUsers;
+    } else {
+      selectedUsers[user.id].role = role;
+    }
   };
 </script>
 
 <FullScreenModal id="user-selection-modal" title="Invite to album" showLogo {onClose}>
-  {#if selectedUsers.length > 0}
-    <div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky">
-      <p class="font-medium">To</p>
-
-      {#each selectedUsers as user}
-        {#key user.id}
-          <button
-            on:click={() => handleUnselect(user)}
-            class="flex place-items-center gap-1 rounded-full border border-gray-500 p-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
-          >
-            <UserAvatar {user} size="sm" />
-            <p class="text-xs font-medium">{user.name}</p>
-          </button>
-        {/key}
-      {/each}
-    </div>
-  {/if}
-
-  <div class="immich-scrollbar max-h-[500px] overflow-y-auto">
-    {#if users.length > 0}
-      <p class="text-xs font-medium">SUGGESTIONS</p>
-
-      <div class="my-4">
-        {#each users as user}
-          <button
-            on:click={() => handleSelect(user)}
-            class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
-          >
-            {#if selectedUsers.includes(user)}
+  {#if Object.keys(selectedUsers).length > 0}
+    <div class="mb-2 py-2 sticky">
+      <p class="text-xs font-medium">SELECTED</p>
+      <div class="my-2">
+        {#each Object.values(selectedUsers) as { user }}
+          {#key user.id}
+            <div class="flex place-items-center gap-4 p-4">
               <div
-                class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
+                class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-dark-success text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-success"
               >
                 <Icon path={mdiCheck} size={24} />
               </div>
-            {:else}
-              <UserAvatar {user} size="md" />
-            {/if}
 
-            <div class="text-left">
-              <p class="text-immich-fg dark:text-immich-dark-fg">
-                {user.name}
-              </p>
-              <p class="text-xs">
-                {user.email}
-              </p>
+              <!-- <UserAvatar {user} size="md" /> -->
+              <div class="text-left flex-grow">
+                <p class="text-immich-fg dark:text-immich-dark-fg">
+                  {user.name}
+                </p>
+                <p class="text-xs">
+                  {user.email}
+                </p>
+              </div>
+
+              <Dropdown
+                title="Role"
+                options={roleOptions}
+                render={({ title, icon }) => ({ title, icon })}
+                on:select={({ detail: { value } }) => handleChangeRole(user, value)}
+              />
             </div>
-          </button>
+          {/key}
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  {#if users.length + Object.keys(selectedUsers).length === 0}
+    <p class="p-5 text-sm">
+      Looks like you have shared this album with all users or you don't have any user to share with.
+    </p>
+  {/if}
+
+  <div class="immich-scrollbar max-h-[500px] overflow-y-auto">
+    {#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
+      <p class="text-xs font-medium">SUGGESTIONS</p>
+
+      <div class="my-2">
+        {#each users as user}
+          {#if !Object.keys(selectedUsers).includes(user.id)}
+            <div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
+              <button on:click={() => handleToggle(user)} class="flex w-full place-items-center gap-4 p-4">
+                <UserAvatar {user} size="md" />
+                <div class="text-left flex-grow">
+                  <p class="text-immich-fg dark:text-immich-dark-fg">
+                    {user.name}
+                  </p>
+                  <p class="text-xs">
+                    {user.email}
+                  </p>
+                </div>
+              </button>
+            </div>
+          {/if}
         {/each}
       </div>
-    {:else}
-      <p class="p-5 text-sm">
-        Looks like you have shared this album with all users or you don't have any user to share with.
-      </p>
     {/if}
   </div>
 
@@ -117,8 +146,12 @@
         size="sm"
         fullwidth
         rounded="full"
-        disabled={selectedUsers.length === 0}
-        on:click={() => dispatch('select', selectedUsers)}>Add</Button
+        disabled={Object.keys(selectedUsers).length === 0}
+        on:click={() =>
+          dispatch(
+            'select',
+            Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
+          )}>Add</Button
       >
     </div>
   {/if}

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { afterNavigate, goto } from '$app/navigation';
+  import AlbumDescription from '$lib/components/album-page/album-description.svelte';
   import AlbumOptions from '$lib/components/album-page/album-options.svelte';
+  import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
+  import AlbumTitle from '$lib/components/album-page/album-title.svelte';
   import ShareInfoModal from '$lib/components/album-page/share-info-modal.svelte';
   import UserSelectionModal from '$lib/components/album-page/user-selection-modal.svelte';
   import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
@@ -39,12 +42,16 @@
   import { locale } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
+  import { handlePromiseError } from '$lib/utils';
   import { downloadAlbum } from '$lib/utils/asset-utils';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
+  import { isAlbumsRoute, isPeopleRoute, isSearchRoute } from '$lib/utils/navigation';
   import {
+    AlbumUserRole,
+    AssetOrder,
     ReactionLevel,
     ReactionType,
     addAssetsToAlbum,
@@ -57,29 +64,23 @@
     getAlbumInfo,
     updateAlbumInfo,
     type ActivityResponseDto,
-    type UserResponseDto,
-    AssetOrder,
+    type AlbumUserAddDto,
   } from '@immich/sdk';
   import {
     mdiArrowLeft,
+    mdiCogOutline,
     mdiDeleteOutline,
     mdiDotsVertical,
     mdiFolderDownloadOutline,
-    mdiLink,
-    mdiPlus,
-    mdiShareVariantOutline,
-    mdiPresentationPlay,
-    mdiCogOutline,
     mdiImageOutline,
     mdiImagePlusOutline,
+    mdiLink,
+    mdiPlus,
+    mdiPresentationPlay,
+    mdiShareVariantOutline,
   } from '@mdi/js';
   import { fly } from 'svelte/transition';
   import type { PageData } from './$types';
-  import AlbumTitle from '$lib/components/album-page/album-title.svelte';
-  import AlbumDescription from '$lib/components/album-page/album-description.svelte';
-  import { handlePromiseError } from '$lib/utils';
-  import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
-  import { isAlbumsRoute, isPeopleRoute, isSearchRoute } from '$lib/utils/navigation';
 
   export let data: PageData;
 
@@ -137,6 +138,9 @@
   $: showActivityStatus =
     album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);
 
+  $: isEditor = album.albumUsers.find(({ user: { id } }) => id === $user.id)?.role === AlbumUserRole.Editor;
+  $: albumHasViewers = album.albumUsers.some(({ role }) => role === AlbumUserRole.Viewer);
+
   afterNavigate(({ from }) => {
     let url: string | undefined = from?.url?.pathname;
 
@@ -312,12 +316,12 @@
     viewMode = ViewMode.VIEW;
   };
 
-  const handleAddUsers = async (users: UserResponseDto[]) => {
+  const handleAddUsers = async (albumUsers: AlbumUserAddDto[]) => {
     try {
       album = await addUsersToAlbum({
         id: album.id,
         addUsersDto: {
-          sharedUserIds: [...users].map(({ id }) => id),
+          albumUsers,
         },
       });
 
@@ -335,9 +339,9 @@
 
     try {
       await refreshAlbum();
-      viewMode = album.sharedUsers.length > 1 ? ViewMode.SELECT_USERS : ViewMode.VIEW;
+      viewMode = album.sharedUsers.length > 0 ? ViewMode.VIEW_USERS : ViewMode.VIEW;
     } catch (error) {
-      handleError(error, 'Error deleting share users');
+      handleError(error, 'Error deleting shared user');
     }
   };
 
@@ -433,11 +437,13 @@
       {#if viewMode === ViewMode.VIEW || viewMode === ViewMode.ALBUM_OPTIONS}
         <ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close={() => goto(backUrl)}>
           <svelte:fragment slot="trailing">
-            <CircleIconButton
-              title="Add photos"
-              on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
-              icon={mdiImagePlusOutline}
-            />
+            {#if isEditor}
+              <CircleIconButton
+                title="Add photos"
+                on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
+                icon={mdiImagePlusOutline}
+              />
+            {/if}
 
             {#if isOwned}
               <CircleIconButton
@@ -578,13 +584,25 @@
                       <UserAvatar user={album.owner} size="md" />
                     </button>
 
-                    <!-- users -->
-                    {#each album.sharedUsers as user (user.id)}
+                    <!-- users with write access (collaborators) -->
+                    {#each album.albumUsers.filter(({ role }) => role === AlbumUserRole.Editor) as { user } (user.id)}
                       <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
                         <UserAvatar {user} size="md" />
                       </button>
                     {/each}
 
+                    <!-- display ellipsis if there are readonly users too -->
+                    {#if albumHasViewers}
+                      <CircleIconButton
+                        title="View all users"
+                        backgroundColor="#d3d3d3"
+                        forceDark
+                        size="20"
+                        icon={mdiDotsVertical}
+                        on:click={() => (viewMode = ViewMode.VIEW_USERS)}
+                      />
+                    {/if}
+
                     {#if isOwned}
                       <CircleIconButton
                         backgroundColor="#d3d3d3"
@@ -678,6 +696,7 @@
     onClose={() => (viewMode = ViewMode.VIEW)}
     {album}
     on:remove={({ detail: userId }) => handleRemoveUser(userId)}
+    on:refreshAlbum={refreshAlbum}
   />
 {/if}
 

web/src/test-data/factories/album-factory.ts

@@ -16,6 +16,7 @@ export const albumFactory = Sync.makeFactory<AlbumResponseDto>({
   owner: userFactory.build(),
   shared: false,
   sharedUsers: [],
+  albumUsers: [],
   hasSharedLink: false,
   isActivityEnabled: true,
   order: AssetOrder.Desc,