github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-02-04 08:49:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: album page (#25140)

Browse Source
This commit is contained in:
Daniel Dietzler
2026-01-08 16:27:20 -06:00
committed by GitHub
parent 191401f2f1
commit 520b825511
7 changed files with 142 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/src/web/specs/timeline/timeline.parallel-e2e-spec.ts
View File

@@ -463,7 +463,7 @@ test.describe('Timeline', () => {
});
changes.albumAdditions.push(...requestJson.ids);
});
await page.getByText('Done').click();
await page.getByText('Add assets').click();
await expect(put).resolves.toEqual({
ids: [
'c077ea7b-cfa1-45e4-8554-f86c00ee5658',

2
i18n/en.json
View File

@@ -18,6 +18,7 @@
"add_a_title": "Add a title",
"add_action": "Add action",
"add_action_description": "Click to add an action to perform",
"add_assets": "Add assets",
"add_birthday": "Add a birthday",
"add_endpoint": "Add endpoint",
"add_exclusion_pattern": "Add exclusion pattern",
@@ -478,6 +479,7 @@
"album_summary": "Album summary",
"album_updated": "Album updated",
"album_updated_setting_description": "Receive an email notification when a shared album has new assets",
"album_upload_assets": "Upload assets from your computer and add to album",
"album_user_left": "Left {album}",
"album_user_removed": "Removed {user}",
"album_viewer_appbar_delete_confirm": "Are you sure you want to delete this album from your account?",

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

@@ -6,7 +6,6 @@
import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { handleDeleteAlbum, handleDownloadAlbum } from '$lib/services/album.service';
import {
AlbumFilter,
@@ -21,14 +20,8 @@
import { userInteraction } from '$lib/stores/user.svelte';
import { getSelectedAlbumGroupOption, sortAlbums, stringToSortOrder, type AlbumGroup } from '$lib/utils/album-utils';
import type { ContextMenuPosition } from '$lib/utils/context-menu';
import { handleError } from '$lib/utils/handle-error';
import { normalizeSearchString } from '$lib/utils/string-utils';
import {
addUsersToAlbum,
type AlbumResponseDto,
type AlbumUserAddDto,
type SharedLinkResponseDto,
} from '@immich/sdk';
import { type AlbumResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
import { modalManager } from '@immich/ui';
import { mdiDeleteOutline, mdiDownload, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
import { groupBy } from 'lodash-es';
@@ -205,18 +198,7 @@
}
case 'share': {
const result = await modalManager.show(AlbumShareModal, { album: selectedAlbum });
switch (result?.action) {
case 'sharedUsers': {
await handleAddUsers(selectedAlbum, result.data);
break;
}
case 'sharedLink': {
await modalManager.show(SharedLinkCreateModal, { albumId: selectedAlbum.id });
break;
}
}
await modalManager.show(AlbumShareModal, { album: selectedAlbum });
break;
}
@@ -251,20 +233,6 @@
sharedAlbums = findAndUpdate(sharedAlbums, album);
};
const handleAddUsers = async (album: AlbumResponseDto, albumUsers: AlbumUserAddDto[]) => {
try {
const updatedAlbum = await addUsersToAlbum({
id: album.id,
addUsersDto: {
albumUsers,
},
});
onUpdate(updatedAlbum);
} catch (error) {
handleError(error, $t('errors.unable_to_add_album_users'));
}
};
const onAlbumUpdate = (album: AlbumResponseDto) => {
onUpdate(album);
userInteraction.recentAlbums = findAndUpdate(userInteraction.recentAlbums || [], album);

2
web/src/lib/managers/event-manager.svelte.ts
View File

@@ -33,8 +33,10 @@ export type Events = {
AssetUpdate: [AssetResponseDto];
AssetReplace: [{ oldAssetId: string; newAssetId: string }];
AlbumAddAssets: [];
AlbumUpdate: [AlbumResponseDto];
AlbumDelete: [AlbumResponseDto];
AlbumShare: [];
PersonUpdate: [PersonResponseDto];

40
web/src/lib/modals/AlbumShareModal.svelte
View File

@@ -2,16 +2,17 @@
import AlbumSharedLink from '$lib/components/album-page/album-shared-link.svelte';
import { AppRoute } from '$lib/constants';
import Dropdown from '$lib/elements/Dropdown.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { handleAddUsersToAlbum } from '$lib/services/album.service';
import {
AlbumUserRole,
getAllSharedLinks,
searchUsers,
type AlbumResponseDto,
type AlbumUserAddDto,
type SharedLinkResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { Button, Icon, Link, Modal, ModalBody, Stack, Text } from '@immich/ui';
import { Button, Icon, Link, Modal, ModalBody, modalManager, Stack, Text } from '@immich/ui';
import { mdiCheck, mdiEye, mdiLink, mdiPencil } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@@ -19,7 +20,7 @@
interface Props {
album: AlbumResponseDto;
onClose: (result?: { action: 'sharedLink' } | { action: 'sharedUsers'; data: AlbumUserAddDto[] }) => void;
onClose: () => void;
}
let { album, onClose }: Props = $props();
@@ -62,6 +63,21 @@
selectedUsers[user.id].role = role;
}
};
const onShareUser = async () => {
const success = await handleAddUsersToAlbum(
album,
Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
);
if (success) {
onClose();
}
};
const onShareLink = () => {
void modalManager.show(SharedLinkCreateModal, { albumId: album.id });
onClose();
};
</script>
<Modal size="small" title={$t('share')} {onClose}>
@@ -145,12 +161,10 @@
fullWidth
shape="round"
disabled={Object.keys(selectedUsers).length === 0}
onclick={() =>
onClose({
action: 'sharedUsers',
data: Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
})}>{$t('add')}</Button
onclick={onShareUser}
>
{$t('add')}
</Button>
</div>
{/if}
@@ -170,13 +184,9 @@
</Stack>
{/if}
<Button
leadingIcon={mdiLink}
size="small"
shape="round"
fullWidth
onclick={() => onClose({ action: 'sharedLink' })}>{$t('create_link')}</Button
>
<Button leadingIcon={mdiLink} size="small" shape="round" fullWidth onclick={onShareLink}>
{$t('create_link')}
</Button>
</Stack>
</ModalBody>
</Modal>

82
web/src/lib/services/album.service.ts
View File

@@ -2,11 +2,89 @@ import { goto } from '$app/navigation';
import ToastAction from '$lib/components/ToastAction.svelte';
import { AppRoute } from '$lib/constants';
import { eventManager } from '$lib/managers/event-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
import { user } from '$lib/stores/user.store';
import { downloadArchive } from '$lib/utils/asset-utils';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { handleError } from '$lib/utils/handle-error';
import { getFormatter } from '$lib/utils/i18n';
import { deleteAlbum, updateAlbumInfo, type AlbumResponseDto, type UpdateAlbumDto } from '@immich/sdk';
import { modalManager, toastManager } from '@immich/ui';
import {
addAssetsToAlbum,
addUsersToAlbum,
deleteAlbum,
updateAlbumInfo,
type AlbumResponseDto,
type AlbumUserAddDto,
type UpdateAlbumDto,
} from '@immich/sdk';
import { modalManager, toastManager, type ActionItem } from '@immich/ui';
import { mdiPlusBoxOutline, mdiShareVariantOutline, mdiUpload } from '@mdi/js';
import { type MessageFormatter } from 'svelte-i18n';
import { get } from 'svelte/store';
export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) => {
const isOwned = get(user).id === album.ownerId;
const Share: ActionItem = {
title: $t('share'),
type: $t('command'),
icon: mdiShareVariantOutline,
$if: () => isOwned,
onAction: () => modalManager.show(AlbumShareModal, { album }),
};
return { Share };
};
export const getAlbumAssetsActions = ($t: MessageFormatter, album: AlbumResponseDto, assets: TimelineAsset[]) => {
const AddAssets: ActionItem = {
title: $t('add_assets'),
type: $t('command'),
icon: mdiPlusBoxOutline,
$if: () => assets.length > 0,
onAction: () => addAssets(album, assets),
};
const Upload: ActionItem = {
title: $t('select_from_computer'),
description: $t('album_upload_assets'),
type: $t('command'),
icon: mdiUpload,
onAction: () => void openFileUploadDialog({ albumId: album.id }),
};
return { AddAssets, Upload };
};
const addAssets = async (album: AlbumResponseDto, assets: TimelineAsset[]) => {
const $t = await getFormatter();
const assetIds = assets.map(({ id }) => id);
try {
const results = await addAssetsToAlbum({ id: album.id, bulkIdsDto: { ids: assetIds } });
const count = results.filter(({ success }) => success).length;
toastManager.success($t('assets_added_count', { values: { count } }));
eventManager.emit('AlbumAddAssets');
} catch (error) {
handleError(error, $t('errors.error_adding_assets_to_album'));
}
};
export const handleAddUsersToAlbum = async (album: AlbumResponseDto, albumUsers: AlbumUserAddDto[]) => {
const $t = await getFormatter();
try {
await addUsersToAlbum({ id: album.id, addUsersDto: { albumUsers } });
eventManager.emit('AlbumShare');
return true;
} catch (error) {
handleError(error, $t('errors.error_adding_users_to_album'));
}
return false;
};
export const handleUpdateAlbum = async ({ id }: { id: string }, dto: UpdateAlbumDto) => {
const $t = await getFormatter();

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

@@ -8,6 +8,7 @@
import AlbumTitle from '$lib/components/album-page/album-title.svelte';
import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
import OnEvents from '$lib/components/OnEvents.svelte';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -38,7 +39,12 @@
import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
import AlbumUsersModal from '$lib/modals/AlbumUsersModal.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { handleDeleteAlbum, handleDownloadAlbum } from '$lib/services/album.service';
import {
getAlbumActions,
getAlbumAssetsActions,
handleDeleteAlbum,
handleDownloadAlbum,
} from '$lib/services/album.service';
import { getGlobalActions } from '$lib/services/app.service';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -46,7 +52,6 @@
import { preferences, user } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils';
import { cancelMultiselect } from '$lib/utils/asset-utils';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { handleError } from '$lib/utils/handle-error';
import {
isAlbumsRoute,
@@ -59,14 +64,11 @@
AlbumUserRole,
AssetOrder,
AssetVisibility,
addAssetsToAlbum,
addUsersToAlbum,
getAlbumInfo,
updateAlbumInfo,
type AlbumResponseDto,
type AlbumUserAddDto,
} from '@immich/sdk';
import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
import { CommandPaletteDefaultProvider, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
import {
mdiAccountEye,
mdiAccountEyeOutline,
@@ -80,8 +82,6 @@
mdiLink,
mdiPlus,
mdiPresentationPlay,
mdiShareVariantOutline,
mdiUpload,
} from '@mdi/js';
import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
@@ -101,7 +101,6 @@
let backUrl: string = $state(AppRoute.ALBUMS);
let viewMode: AlbumPageViewMode = $state(AlbumPageViewMode.VIEW);
let isCreatingSharedAlbum = $state(false);
let albumOrder: AssetOrder | undefined = $state(data.album.order);
let timelineManager = $state<TimelineManager>() as TimelineManager;
@@ -124,9 +123,7 @@
backUrl = url || AppRoute.ALBUMS;
if (backUrl === AppRoute.SHARING && album.albumUsers.length === 0 && !album.hasSharedLink) {
isCreatingSharedAlbum = true;
} else if (backUrl === AppRoute.SHARED_LINKS) {
if (backUrl === AppRoute.SHARED_LINKS) {
backUrl = history.state?.backUrl || AppRoute.ALBUMS;
}
});
@@ -177,26 +174,6 @@
const refreshAlbum = async () => {
album = await getAlbumInfo({ id: album.id, withoutAssets: true });
};
const handleAddAssets = async () => {
const assetIds = timelineInteraction.selectedAssets.map((asset) => asset.id);
try {
const results = await addAssetsToAlbum({
id: album.id,
bulkIdsDto: { ids: assetIds },
});
const count = results.filter(({ success }) => success).length;
toastManager.success($t('assets_added_count', { values: { count } }));
await refreshAlbum();
timelineInteraction.clearMultiselect();
await setModeToView();
} catch (error) {
handleError(error, $t('errors.error_adding_assets_to_album'));
}
};
const setModeToView = async () => {
timelineManager.suspendTransitions = true;
@@ -213,28 +190,6 @@
await setModeToView();
};
const handleSelectFromComputer = async () => {
await openFileUploadDialog({ albumId: album.id });
timelineInteraction.clearMultiselect();
await setModeToView();
};
const handleAddUsers = async (albumUsers: AlbumUserAddDto[]) => {
try {
await addUsersToAlbum({
id: album.id,
addUsersDto: {
albumUsers,
},
});
await refreshAlbum();
viewMode = AlbumPageViewMode.VIEW;
} catch (error) {
handleError(error, $t('errors.error_adding_users_to_album'));
}
};
const handleSetVisibility = (assetIds: string[]) => {
timelineManager.removeAssets(assetIds);
assetInteraction.clearMultiselect();
@@ -353,22 +308,6 @@
viewMode === AlbumPageViewMode.SELECT_ASSETS ? timelineInteraction : assetInteraction,
);
const handleShare = async () => {
const result = await modalManager.show(AlbumShareModal, { album });
switch (result?.action) {
case 'sharedLink': {
await handleShareLink();
return;
}
case 'sharedUsers': {
await handleAddUsers(result.data);
return;
}
}
};
const onSharedLinkCreate = async () => {
await refreshAlbum();
};
@@ -380,10 +319,6 @@
}
};
const handleShareLink = async () => {
await modalManager.show(SharedLinkCreateModal, { albumId: album.id });
};
const handleEditUsers = async () => {
const changed = await modalManager.show(AlbumUsersModal, { album });
@@ -405,7 +340,7 @@
break;
}
case 'shareUser': {
await handleShare();
await modalManager.show(AlbumShareModal, { album });
break;
}
case 'refreshAlbum': {
@@ -415,10 +350,24 @@
}
};
const onAlbumAddAssets = async () => {
await refreshAlbum();
timelineInteraction.clearMultiselect();
await setModeToView();
};
const onAlbumShare = async () => {
await refreshAlbum();
await setModeToView();
};
const { Cast } = $derived(getGlobalActions($t));
const { Share } = $derived(getAlbumActions($t, album));
const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineInteraction.selectedAssets));
</script>
<OnEvents {onSharedLinkCreate} {onAlbumDelete} />
<OnEvents {onSharedLinkCreate} {onAlbumDelete} {onAlbumAddAssets} {onAlbumShare} />
<CommandPaletteDefaultProvider name={$t('album')} actions={[AddAssets, Upload]} />
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
<div class="relative w-full shrink">
@@ -463,7 +412,7 @@
size="medium"
shape="round"
icon={mdiLink}
onclick={handleShareLink}
onclick={() => modalManager.show(SharedLinkCreateModal, { albumId: album.id })}
/>
{/if}
@@ -491,16 +440,7 @@
/>
{/if}
{#if isOwned}
<IconButton
shape="round"
color="secondary"
size="medium"
icon={mdiPlus}
onclick={handleShare}
aria-label={$t('add_more_users')}
/>
{/if}
<ActionButton action={Share} />
</div>
{/if}
<!-- ALBUM DESCRIPTION -->
@@ -616,16 +556,7 @@
/>
{/if}
{#if isOwned}
<IconButton
shape="round"
variant="ghost"
color="secondary"
aria-label={$t('share')}
onclick={handleShare}
icon={mdiShareVariantOutline}
/>
{/if}
<ActionButton action={Share} />
{#if featureFlagsManager.value.map}
<AlbumMap {album} />
@@ -682,12 +613,6 @@
{/if}
</ButtonContextMenu>
{/if}
{#if isCreatingSharedAlbum && album.albumUsers.length === 0}
<Button size="small" disabled={album.assetCount === 0} onclick={handleShare}>
{$t('share')}
</Button>
{/if}
{/snippet}
</ControlAppBar>
{/if}
@@ -705,10 +630,8 @@
{/snippet}
{#snippet trailing()}
<Button variant="ghost" leadingIcon={mdiUpload} onclick={handleSelectFromComputer}
>{$t('select_from_computer')}</Button
>
<Button disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}>{$t('done')}</Button>
<HeaderActionButton action={Upload} />
<HeaderActionButton action={AddAssets} />
{/snippet}
</ControlAppBar>
{/if}