helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): timeline bucket for albums (4) (#3604)

Browse source 
* feat: server changes for album timeline

* feat(web): album timeline view

* chore: open api

* chore: remove archive action

* fix: favorite for non-owners
This commit is contained in:
Jason Rasmussen 2023-08-11 12:00:51 -04:00 • committed by GitHub
parent 36dc7bd924
commit 5cd13227ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 1014 additions and 757 deletions
Download patch file Download diff file Expand all files Collapse all files

497
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -1,90 +1,29 @@
<script lang="ts">
import { browser } from '$app/environment';
import { afterNavigate, goto } from '$app/navigation';
import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { locale } from '$lib/stores/preferences.store';
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
import {
AlbumResponseDto,
AssetResponseDto,
SharedLinkResponseDto,
SharedLinkType,
UserResponseDto,
api,
} from '@api';
import type { AlbumResponseDto, AssetResponseDto, SharedLinkResponseDto } from '@api';
import { onDestroy, onMount } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import Button from '../elements/buttons/button.svelte';
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
import { dateFormats } from '../../constants';
import { downloadArchive } from '../../utils/asset-utils';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import DownloadAction from '../photos-page/actions/download-action.svelte';
import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import CreateSharedLinkModal from '../shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import ThemeButton from '../shared-components/theme-button.svelte';
import AssetSelection from './asset-selection.svelte';
import ShareInfoModal from './share-info-modal.svelte';
import ThumbnailSelection from './thumbnail-selection.svelte';
import UserSelectionModal from './user-selection-modal.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import { handleError } from '../../utils/handle-error';
import { downloadArchive } from '../../utils/asset-utils';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import EditDescriptionModal from './edit-description-modal.svelte';
export let album: AlbumResponseDto;
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
export let sharedLink: SharedLinkResponseDto;
let { isViewing: showAssetViewer } = assetViewingStore;
let isShowAssetSelection = false;
let isShowShareLinkModal = false;
$: $isAlbumAssetSelectionOpen = isShowAssetSelection;
$: {
if (browser) {
if (isShowAssetSelection) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
}
}
let isShowShareUserSelection = false;
let isEditingTitle = false;
let isCreatingSharedAlbum = false;
let isShowShareInfoModal = false;
let isShowAlbumOptions = false;
let isShowThumbnailSelection = false;
let isShowDeleteConfirmation = false;
let isEditingDescription = false;
let backUrl = '/albums';
let currentAlbumName = '';
let currentUser: UserResponseDto;
let titleInput: HTMLInputElement;
let contextMenuPosition = { x: 0, y: 0 };
$: isPublicShared = sharedLink;
$: isOwned = currentUser?.id == album.ownerId;
dragAndDropFilesStore.subscribe((value) => {
if (value.isDragging && value.files.length > 0) {
fileUploadHandler(value.files, album.id, sharedLink?.key);
@ -94,32 +33,13 @@
let multiSelectAsset: Set<AssetResponseDto> = new Set();
$: isMultiSelectionMode = multiSelectAsset.size > 0;
$: isMultiSelectionUserOwned = Array.from(multiSelectAsset).every((asset) => asset.ownerId === currentUser?.id);
afterNavigate(({ from }) => {
backUrl = from?.url.pathname ?? '/albums';
if (from?.url.pathname === '/sharing' && album.sharedUsers.length === 0) {
isCreatingSharedAlbum = true;
}
if (from?.route.id === '/(user)/search') {
backUrl = from.url.href;
}
});
const albumDateFormat: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
year: 'numeric',
};
const getDateRange = () => {
const startDate = new Date(album.assets[0].fileCreatedAt);
const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
const startDateString = startDate.toLocaleDateString($locale, dateFormats.album);
const endDateString = endDate.toLocaleDateString($locale, dateFormats.album);
// If the start and end date are the same, only show one date
return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
@ -129,14 +49,6 @@
onMount(async () => {
document.addEventListener('keydown', onKeyboardPress);
currentAlbumName = album.albumName;
try {
const { data } = await api.userApi.getMyUserInfo();
currentUser = data;
} catch (e) {
console.log('Error [getMyUserInfo - album-viewer] ', e);
}
});
onDestroy(() => {
@ -151,302 +63,67 @@
case 'Escape':
if (isMultiSelectionMode) {
multiSelectAsset = new Set();
} else {
goto(backUrl);
}
return;
}
}
};
// Update Album Name
$: {
if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
api.albumApi
.updateAlbumInfo({
id: album.id,
updateAlbumDto: {
albumName: album.albumName,
},
})
.then(() => {
currentAlbumName = album.albumName;
})
.catch((e) => {
console.error('Error [updateAlbumInfo] ', e);
notificationController.show({
type: NotificationType.Error,
message: "Error updating album's name, check console for more details",
});
});
}
}
const createAlbumHandler = async (event: CustomEvent) => {
const { assets }: { assets: AssetResponseDto[] } = event.detail;
try {
const { data: results } = await api.albumApi.addAssetsToAlbum({
id: album.id,
bulkIdsDto: { ids: assets.map((a) => a.id) },
key: sharedLink?.key,
});
const count = results.filter(({ success }) => success).length;
notificationController.show({
type: NotificationType.Info,
message: `Added ${count} asset${count === 1 ? '' : 's'}`,
});
const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
album = data;
isShowAssetSelection = false;
} catch (e) {
handleError(e, 'Error creating album');
}
};
const addUserHandler = async (event: CustomEvent) => {
const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
try {
const { data } = await api.albumApi.addUsersToAlbum({
id: album.id,
addUsersDto: {
sharedUserIds: Array.from(selectedUsers).map((u) => u.id),
},
});
album = data;
isShowShareUserSelection = false;
} catch (e) {
console.error('Error [addUserHandler] ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error adding users to album, check console for more details',
});
}
};
const sharedUserDeletedHandler = async (event: CustomEvent) => {
const { userId }: { userId: string } = event.detail;
if (userId == 'me') {
isShowShareInfoModal = false;
goto(backUrl);
return;
}
try {
const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
album = data;
isShowShareInfoModal = data.sharedUsers.length >= 1;
} catch (e) {
handleError(e, 'Error deleting share users');
}
};
const removeAlbum = async () => {
try {
await api.albumApi.deleteAlbum({ id: album.id });
goto(backUrl);
} catch (e) {
console.error('Error [userDeleteMenu] ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error deleting album, check console for more details',
});
} finally {
isShowDeleteConfirmation = false;
}
};
const downloadAlbum = async () => {
await downloadArchive(`${album.albumName}.zip`, { albumId: album.id }, sharedLink?.key);
};
const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
contextMenuPosition = { x, y };
isShowAlbumOptions = !isShowAlbumOptions;
};
const setAlbumThumbnailHandler = (event: CustomEvent) => {
const { asset }: { asset: AssetResponseDto } = event.detail;
try {
api.albumApi.updateAlbumInfo({
id: album.id,
updateAlbumDto: {
albumThumbnailAssetId: asset.id,
},
});
} catch (e) {
console.error('Error [setAlbumThumbnailHandler] ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error setting album thumbnail, check console for more details',
});
}
isShowThumbnailSelection = false;
};
const onSharedLinkClickHandler = () => {
isShowShareUserSelection = false;
isShowShareLinkModal = true;
};
const handleSelectAll = () => {
multiSelectAsset = new Set(album.assets);
};
const descriptionUpdatedHandler = (description: string) => {
try {
api.albumApi.updateAlbumInfo({
id: album.id,
updateAlbumDto: {
description,
},
});
album.description = description;
} catch (e) {
console.error('Error [descriptionUpdatedHandler] ', e);
notificationController.show({
type: NotificationType.Error,
message: 'Error setting album description, check console for more details',
});
}
isEditingDescription = false;
};
</script>
<section class="bg-immich-bg dark:bg-immich-dark-bg" class:hidden={isShowThumbnailSelection}>
<!-- Multiselection mode app bar -->
<section class="bg-immich-bg dark:bg-immich-dark-bg">
{#if isMultiSelectionMode}
<AssetSelectControlBar assets={multiSelectAsset} clearSelect={() => (multiSelectAsset = new Set())}>
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
{#if sharedLink?.allowDownload || !isPublicShared}
<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
{/if}
{#if isOwned || isMultiSelectionUserOwned}
<RemoveFromAlbum bind:album />
{#if sharedLink.allowDownload}
<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink.key} />
{/if}
</AssetSelectControlBar>
{/if}
<!-- Default app bar -->
{#if !isMultiSelectionMode}
<ControlAppBar
on:close-button-click={() => goto(backUrl)}
backIcon={ArrowLeft}
showBackButton={(!isPublicShared && isOwned) || (!isPublicShared && !isOwned) || (isPublicShared && isOwned)}
>
{:else}
<ControlAppBar showBackButton={false}>
<svelte:fragment slot="leading">
{#if isPublicShared && !isOwned}
<a
data-sveltekit-preload-data="hover"
class="ml-6 flex place-items-center gap-2 hover:cursor-pointer"
href="https://immich.app"
>
<ImmichLogo height={30} width={30} />
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
</a>
{/if}
<a
data-sveltekit-preload-data="hover"
class="ml-6 flex place-items-center gap-2 hover:cursor-pointer"
href="https://immich.app"
>
<ImmichLogo height={30} width={30} />
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
</a>
</svelte:fragment>
<svelte:fragment slot="trailing">
{#if !isCreatingSharedAlbum}
{#if !sharedLink}
<CircleIconButton
title="Add Photos"
on:click={() => (isShowAssetSelection = true)}
logo={FileImagePlusOutline}
/>
{:else if sharedLink?.allowUpload}
<CircleIconButton
title="Add Photos"
on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
logo={FileImagePlusOutline}
/>
{/if}
{#if isOwned}
<CircleIconButton
title="Share"
on:click={() => (isShowShareUserSelection = true)}
logo={ShareVariantOutline}
/>
<CircleIconButton
title="Remove album"
on:click={() => (isShowDeleteConfirmation = true)}
logo={DeleteOutline}
/>
{/if}
{#if sharedLink.allowUpload}
<CircleIconButton
title="Add Photos"
on:click={() => openFileUploadDialog(album.id, sharedLink.key)}
logo={FileImagePlusOutline}
/>
{/if}
{#if album.assetCount > 0 && !isCreatingSharedAlbum}
{#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
<CircleIconButton title="Download" on:click={() => downloadAlbum()} logo={FolderDownloadOutline} />
{/if}
{#if !isPublicShared && isOwned}
<CircleIconButton title="Album options" on:click={showAlbumOptionsMenu} logo={DotsVertical}>
{#if isShowAlbumOptions}
<ContextMenu {...contextMenuPosition} on:outclick={() => (isShowAlbumOptions = false)}>
<MenuOption
on:click={() => {
isShowThumbnailSelection = true;
isShowAlbumOptions = false;
}}
text="Set album cover"
/>
</ContextMenu>
{/if}
</CircleIconButton>
{/if}
{#if album.assetCount > 0 && sharedLink.allowDownload}
<CircleIconButton title="Download" on:click={() => downloadAlbum()} logo={FolderDownloadOutline} />
{/if}
{#if isPublicShared}
<ThemeButton />
{/if}
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
<Button
size="sm"
rounded="lg"
disabled={album.assetCount == 0}
on:click={() => (isShowShareUserSelection = true)}
>
Share
</Button>
{/if}
<ThemeButton />
</svelte:fragment>
</ControlAppBar>
{/if}
<section class="my-[160px] flex flex-col px-6 sm:px-12 md:px-24 lg:px-40">
<!-- ALBUM TITLE -->
<input
on:keydown={(e) => {
if (e.key == 'Enter') {
isEditingTitle = false;
titleInput.blur();
}
}}
on:focus={() => (isEditingTitle = true)}
on:blur={() => (isEditingTitle = false)}
class={`w-[99%] border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary ${
isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray`}
type="text"
bind:value={album.albumName}
disabled={!isOwned}
bind:this={titleInput}
title="Edit Title"
/>
<p
class="bg-immich-bg text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
>
{album.albumName}
</p>
<!-- ALBUM SUMMARY -->
{#if album.assetCount > 0}
@ -456,108 +133,12 @@
<p>{album.assetCount} items</p>
</span>
{/if}
{#if album.shared}
<div class="my-6 flex gap-x-1">
{#each album.sharedUsers as user (user.id)}
<button on:click={() => (isShowShareInfoModal = true)}>
<UserAvatar {user} size="md" autoColor />
</button>
{/each}
<button
style:display={isOwned ? 'block' : 'none'}
on:click={() => (isShowShareUserSelection = true)}
title="Add more users"
class="flex h-12 w-12 place-content-center place-items-center rounded-full border bg-white text-3xl transition-colors hover:bg-gray-300"
>+</button
>
</div>
{/if}
<!-- ALBUM DESCRIPTION -->
<button
class="mb-12 mt-6 w-full border-b-2 border-transparent pb-2 text-left text-lg font-medium transition-colors hover:border-b-2 dark:text-gray-300"
on:click={() => (isEditingDescription = true)}
class:hover:border-gray-400={isOwned}
disabled={!isOwned}
title="Edit description"
>
{album.description || 'Add description'}
</button>
<p class="mb-12 mt-6 w-full pb-2 text-left text-lg font-medium dark:text-gray-300">
{album.description}
</p>
{#if album.assetCount > 0 && !isShowAssetSelection}
<GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} />
{:else}
<!-- Album is empty - Show asset selectection buttons -->
<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
<div class="w-[300px]">
<p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
<button
on:click={() => (isShowAssetSelection = true)}
class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
>
<span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
<span class="text-lg">Select photos</span>
</button>
</div>
</section>
{/if}
<GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} />
</section>
</section>
{#if isShowAssetSelection}
<AssetSelection
albumId={album.id}
assetsInAlbum={album.assets}
on:go-back={() => (isShowAssetSelection = false)}
on:create-album={createAlbumHandler}
/>
{/if}
{#if isShowShareUserSelection}
<UserSelectionModal
{album}
on:close={() => (isShowShareUserSelection = false)}
on:add-user={addUserHandler}
on:sharedlinkclick={onSharedLinkClickHandler}
sharedUsersInAlbum={new Set(album.sharedUsers)}
/>
{/if}
{#if isShowShareLinkModal}
<CreateSharedLinkModal on:close={() => (isShowShareLinkModal = false)} shareType={SharedLinkType.Album} {album} />
{/if}
{#if isShowShareInfoModal}
<ShareInfoModal on:close={() => (isShowShareInfoModal = false)} {album} on:user-deleted={sharedUserDeletedHandler} />
{/if}
{#if isShowThumbnailSelection}
<ThumbnailSelection
{album}
on:close={() => (isShowThumbnailSelection = false)}
on:thumbnail-selected={setAlbumThumbnailHandler}
/>
{/if}
{#if isShowDeleteConfirmation}
<ConfirmDialogue
title="Delete Album"
confirmText="Delete"
on:confirm={removeAlbum}
on:cancel={() => (isShowDeleteConfirmation = false)}
>
<svelte:fragment slot="prompt">
<p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
<p>If this album is shared, other users will not be able to access it anymore.</p>
</svelte:fragment>
</ConfirmDialogue>
{/if}
{#if isEditingDescription}
<EditDescriptionModal
{album}
on:close={() => (isEditingDescription = false)}
on:updated={({ detail: description }) => descriptionUpdatedHandler(description)}
/>
{/if}

74
web/src/lib/components/album-page/asset-selection.svelte
View file

@ -1,74 +0,0 @@
<script lang="ts">
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { TimeBucketSize, type AssetResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Button from '../elements/buttons/button.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
const dispatch = createEventDispatcher();
const assetStore = new AssetStore({ size: TimeBucketSize.Month });
const assetInteractionStore = createAssetInteractionStore();
const { selectedAssets, assetsInAlbumState } = assetInteractionStore;
export let albumId: string;
export let assetsInAlbum: AssetResponseDto[];
onMount(() => {
$assetsInAlbumState = assetsInAlbum;
});
const addSelectedAssets = async () => {
dispatch('create-album', {
assets: Array.from($selectedAssets),
});
assetInteractionStore.clearMultiselect();
};
const handleSelectFromComputerClicked = async () => {
await openFileUploadDialog(albumId, '');
assetInteractionStore.clearMultiselect();
dispatch('go-back');
};
</script>
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
>
<ControlAppBar
on:close-button-click={() => {
assetInteractionStore.clearMultiselect();
dispatch('go-back');
}}
>
<svelte:fragment slot="leading">
{#if $selectedAssets.size == 0}
<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
{:else}
<p class="text-lg dark:text-immich-dark-fg">
{$selectedAssets.size.toLocaleString($locale)} selected
</p>
{/if}
</svelte:fragment>
<svelte:fragment slot="trailing">
<button
on:click={handleSelectFromComputerClicked}
class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
>
Select from computer
</button>
<Button size="sm" rounded="lg" disabled={$selectedAssets.size === 0} on:click={addSelectedAssets}>Done</Button>
</svelte:fragment>
</ControlAppBar>
<section class="grid h-screen bg-immich-bg pl-[70px] pt-[100px] dark:bg-immich-dark-bg">
<AssetGrid {assetStore} {assetInteractionStore} isSelectionMode={true} />
</section>
</section>

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

@ -13,7 +13,10 @@
export let album: AlbumResponseDto;
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
remove: string;
close: void;
}>();
let currentUser: UserResponseDto;
let position = { x: 0, y: 0 };
@ -59,7 +62,7 @@
try {
await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
dispatch('user-deleted', { userId });
dispatch('remove', userId);
const message = userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.firstName}`;
notificationController.show({ type: NotificationType.Info, message });
} catch (e) {
@ -79,6 +82,16 @@
</svelte:fragment>
<section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
<div class="flex w-full place-items-center justify-between gap-4 p-5">
<div class="flex place-items-center gap-4">
<UserAvatar user={album.owner} size="md" autoColor />
<p class="text-sm font-medium">{album.owner.firstName} {album.owner.lastName}</p>
</div>
<div id="icon-{album.owner.id}" class="flex place-items-center">
<p class="text-sm">Owner</p>
</div>
</div>
{#each album.sharedUsers as user}
<div
class="flex w-full place-items-center justify-between gap-4 p-5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
@ -88,7 +101,7 @@
<p class="text-sm font-medium">{user.firstName} {user.lastName}</p>
</div>
<div id={`icon-${user.id}`} class="flex place-items-center">
<div id="icon-{user.id}" class="flex place-items-center">
{#if isOwned}
<div>
<CircleIconButton

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

@ -11,11 +11,14 @@
import { AppRoute } from '$lib/constants';
export let album: AlbumResponseDto;
export let sharedUsersInAlbum: Set<UserResponseDto>;
let users: UserResponseDto[] = [];
let selectedUsers: UserResponseDto[] = [];
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
select: UserResponseDto[];
share: void;
close: void;
}>();
let sharedLinks: SharedLinkResponseDto[] = [];
onMount(async () => {
await getSharedLinks();
@ -25,7 +28,7 @@
users = data.filter((user) => !(user.deletedAt || user.id === album.ownerId));
// Remove the existed shared users from the album
sharedUsersInAlbum.forEach((sharedUser) => {
album.sharedUsers.forEach((sharedUser) => {
users = users.filter((user) => user.id !== sharedUser.id);
});
});
@ -36,7 +39,7 @@
sharedLinks = data.filter((link) => link.album?.id === album.id);
};
const selectUser = (user: UserResponseDto) => {
const handleSelect = (user: UserResponseDto) => {
if (selectedUsers.includes(user)) {
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
} else {
@ -44,13 +47,9 @@
}
};
const deselectUser = (user: UserResponseDto) => {
const handleUnselect = (user: UserResponseDto) => {
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
};
const onSharedLinkClick = () => {
dispatch('sharedlinkclick');
};
</script>
<BaseModal on:close={() => dispatch('close')}>
@ -69,7 +68,7 @@
{#each selectedUsers as user}
{#key user.id}
<button
on:click={() => deselectUser(user)}
on:click={() => handleUnselect(user)}
class="flex place-items-center gap-1 rounded-full border border-gray-400 p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
>
<UserAvatar {user} size="sm" autoColor />
@ -86,7 +85,7 @@
<div class="my-4">
{#each users as user}
<button
on:click={() => selectUser(user)}
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"
>
{#if selectedUsers.includes(user)}
@ -118,7 +117,7 @@
{#if selectedUsers.length > 0}
<div class="flex place-content-end p-5">
<Button size="sm" rounded="lg" on:click={() => dispatch('add-user', { selectedUsers })}>Add</Button>
<Button size="sm" rounded="lg" on:click={() => dispatch('select', selectedUsers)}>Add</Button>
</div>
{/if}
</div>
@ -127,7 +126,7 @@
<div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around">
<button
class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
on:click={onSharedLinkClick}
on:click={() => dispatch('share')}
>
<Link size={24} />
<p class="text-sm">Create link</p>

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

@ -1,7 +1,6 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import { SharedLinkType } from '@api';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
@ -12,9 +11,5 @@
<CircleIconButton title="Share" logo={ShareVariantOutline} on:click={() => (showModal = true)} />
{#if showModal}
<CreateSharedLinkModal
sharedAssets={Array.from(getAssets())}
shareType={SharedLinkType.Individual}
on:close={() => (showModal = false)}
/>
<CreateSharedLinkModal assetIds={Array.from(getAssets()).map(({ id }) => id)} on:close={() => (showModal = false)} />
{/if}

6
web/src/lib/components/photos-page/actions/remove-from-album.svelte
View file

@ -10,6 +10,7 @@
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
export let album: AlbumResponseDto;
export let onRemove: ((assetIds: string[]) => void) | undefined = undefined;
const { getAssets, clearSelect } = getAssetControlContext();
@ -17,14 +18,17 @@
const removeFromAlbum = async () => {
try {
const ids = Array.from(getAssets()).map((a) => a.id);
const { data: results } = await api.albumApi.removeAssetFromAlbum({
id: album.id,
bulkIdsDto: { ids: Array.from(getAssets()).map((a) => a.id) },
bulkIdsDto: { ids },
});
const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
album = data;
onRemove?.(ids);
const count = results.filter(({ success }) => success).length;
notificationController.show({
type: NotificationType.Info,

2
web/src/lib/components/photos-page/actions/select-all-assets.svelte
View file

@ -20,7 +20,7 @@
for (const bucket of assetGridState.buckets) {
await assetStore.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
for (const asset of bucket.assets) {
assetInteractionStore.addAssetToMultiselectGroup(asset);
assetInteractionStore.selectAsset(asset);
}
}

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

@ -25,10 +25,14 @@
export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore;
const { selectedGroup, selectedAssets, assetsInAlbumState, assetSelectionCandidates, isMultiSelectState } =
assetInteractionStore;
const { selectedGroup, selectedAssets, assetSelectionCandidates, isMultiSelectState } = assetInteractionStore;
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
select: { title: string; assets: AssetResponseDto[] };
selectAssets: AssetResponseDto;
selectAssetCandidates: AssetResponseDto | null;
shift: { heightDelta: number };
}>();
let isMouseOverGroup = false;
let actualBucketHeight: number;
@ -86,64 +90,44 @@
return width;
};
const assetClickHandler = (
asset: AssetResponseDto,
assetsInDateGroup: AssetResponseDto[],
dateGroupTitle: string,
) => {
const assetClickHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
if (isSelectionMode || $isMultiSelectState) {
assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
assetSelectHandler(asset, assetsInDateGroup, groupTitle);
return;
}
assetViewingStore.setAssetId(asset.id);
};
const selectAssetGroupHandler = (selectAssetGroupHandler: AssetResponseDto[], dateGroupTitle: string) => {
if ($selectedGroup.has(dateGroupTitle)) {
assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
selectAssetGroupHandler.forEach((asset) => {
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
});
} else {
assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
selectAssetGroupHandler.forEach((asset) => {
assetInteractionStore.addAssetToMultiselectGroup(asset);
});
}
};
const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => dispatch('select', { title, assets });
const assetSelectHandler = (
asset: AssetResponseDto,
assetsInDateGroup: AssetResponseDto[],
dateGroupTitle: string,
) => {
dispatch('selectAssets', { asset });
const assetSelectHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
dispatch('selectAssets', asset);
// Check if all assets are selected in a group to toggle the group selection's icon
let selectedAssetsInGroupCount = assetsInDateGroup.filter((asset) => $selectedAssets.has(asset)).length;
// if all assets are selected in a group, add the group to selected group
if (selectedAssetsInGroupCount == assetsInDateGroup.length) {
assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
assetInteractionStore.addGroupToMultiselectGroup(groupTitle);
} else {
assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
assetInteractionStore.removeGroupFromMultiselectGroup(groupTitle);
}
};
const assetMouseEventHandler = (dateGroupTitle: string, asset: AssetResponseDto | null) => {
const assetMouseEventHandler = (groupTitle: string, asset: AssetResponseDto | null) => {
// Show multi select icon on hover on date group
hoveredDateGroup = dateGroupTitle;
hoveredDateGroup = groupTitle;
if ($isMultiSelectState) {
dispatch('selectAssetCandidates', { asset });
dispatch('selectAssetCandidates', asset);
}
};
</script>
<section id="asset-group-by-date" class="flex flex-wrap gap-x-12" bind:clientHeight={actualBucketHeight}>
{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
{@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}
{#each assetsGroupByDate as groupAssets, groupIndex (groupAssets[0].id)}
{@const groupTitle = formatGroupTitle(DateTime.fromISO(groupAssets[0].fileCreatedAt).startOf('day'))}
<!-- Asset Group By Date -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
@ -151,11 +135,11 @@
class="mt-5 flex flex-col"
on:mouseenter={() => {
isMouseOverGroup = true;
assetMouseEventHandler(dateGroupTitle, null);
assetMouseEventHandler(groupTitle, null);
}}
on:mouseleave={() => {
isMouseOverGroup = false;
assetMouseEventHandler(dateGroupTitle, null);
assetMouseEventHandler(groupTitle, null);
}}
>
<!-- Date group title -->
@ -163,14 +147,14 @@
class="mb-2 flex h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
style="width: {geometry[groupIndex].containerWidth}px"
>
{#if !singleSelect && ((hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle))}
{#if !singleSelect && ((hoveredDateGroup == groupTitle && isMouseOverGroup) || $selectedGroup.has(groupTitle))}
<div
transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
class="inline-block px-2 hover:cursor-pointer"
on:click={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
on:keydown={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
on:click={() => handleSelectGroup(groupTitle, groupAssets)}
on:keydown={() => handleSelectGroup(groupTitle, groupAssets)}
>
{#if $selectedGroup.has(dateGroupTitle)}
{#if $selectedGroup.has(groupTitle)}
<CheckCircle size="24" color="#4250af" />
{:else}
<CircleOutline size="24" color="#757575" />
@ -178,8 +162,8 @@
</div>
{/if}
<span class="truncate first-letter:capitalize" title={dateGroupTitle}>
{dateGroupTitle}
<span class="truncate first-letter:capitalize" title={groupTitle}>
{groupTitle}
</span>
</p>
@ -188,7 +172,7 @@
class="relative"
style="height: {geometry[groupIndex].containerHeight}px;width: {geometry[groupIndex].containerWidth}px"
>
{#each assetsInDateGroup as asset, index (asset.id)}
{#each groupAssets as asset, index (asset.id)}
{@const box = geometry[groupIndex].boxes[index]}
<div
class="absolute"
@ -197,12 +181,12 @@
<Thumbnail
{asset}
{groupIndex}
on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
on:mouse-event={() => assetMouseEventHandler(dateGroupTitle, asset)}
selected={$selectedAssets.has(asset) || $assetsInAlbumState.some(({ id }) => id === asset.id)}
on:click={() => assetClickHandler(asset, groupAssets, groupTitle)}
on:select={() => assetSelectHandler(asset, groupAssets, groupTitle)}
on:mouse-event={() => assetMouseEventHandler(groupTitle, asset)}
selected={$selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)}
selectionCandidate={$assetSelectionCandidates.has(asset)}
disabled={$assetsInAlbumState.some(({ id }) => id === asset.id)}
disabled={$assetStore.albumAssets.has(asset.id)}
thumbnailWidth={box.width}
thumbnailHeight={box.height}
/>

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

@ -1,6 +1,12 @@
<script lang="ts">
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { AppRoute, AssetAction } from '$lib/constants';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import { isSearchEnabled } from '$lib/stores/search.store';
import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@api';
import { DateTime } from 'luxon';
@ -9,15 +15,8 @@
import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
import Portal from '../shared-components/portal/portal.svelte';
import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
import AssetDateGroup from './asset-date-group.svelte';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { AppRoute, AssetAction } from '$lib/constants';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
import { isSearchEnabled } from '$lib/stores/search.store';
import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
import AssetDateGroup from './asset-date-group.svelte';
export let isSelectionMode = false;
export let singleSelect = false;
@ -25,7 +24,8 @@
export let assetInteractionStore: AssetInteractionStore;
export let removeAction: AssetAction | null = null;
const { assetSelectionCandidates, assetSelectionStart, selectedAssets, isMultiSelectState } = assetInteractionStore;
const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
assetInteractionStore;
const viewport: Viewport = { width: 0, height: 0 };
let { isViewing: showAssetViewer, asset: viewingAsset } = assetViewingStore;
let element: HTMLElement;
@ -45,6 +45,10 @@
if (browser) {
document.removeEventListener('keydown', onKeyboardPress);
}
if ($showAssetViewer) {
$showAssetViewer = false;
}
});
const handleKeyboardPress = (event: KeyboardEvent) => {
@ -71,6 +75,12 @@
}
};
const handleSelectAsset = (asset: AssetResponseDto) => {
if (!assetStore.albumAssets.has(asset.id)) {
assetInteractionStore.selectAsset(asset);
}
};
function intersectedHandler(event: CustomEvent) {
const el = event.detail.container as HTMLElement;
const target = el.firstChild as HTMLElement;
@ -166,16 +176,28 @@
selectAssetCandidates(lastAssetMouseEvent);
}
const handleSelectAssetCandidates = (e: CustomEvent) => {
const asset = e.detail.asset;
const handleSelectAssetCandidates = (asset: AssetResponseDto | null) => {
if (asset) {
selectAssetCandidates(asset);
}
lastAssetMouseEvent = asset;
};
const handleSelectAssets = async (e: CustomEvent) => {
const asset = e.detail.asset as AssetResponseDto;
const handleGroupSelect = (group: string, assets: AssetResponseDto[]) => {
if ($selectedGroup.has(group)) {
assetInteractionStore.removeGroupFromMultiselectGroup(group);
for (const asset of assets) {
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
}
} else {
assetInteractionStore.addGroupToMultiselectGroup(group);
for (const asset of assets) {
handleSelectAsset(asset);
}
}
};
const handleSelectAssets = async (asset: AssetResponseDto) => {
if (!asset) {
return;
}
@ -184,6 +206,7 @@
if (singleSelect) {
element.scrollTop = 0;
return;
}
const rangeSelection = $assetSelectionCandidates.size > 0;
@ -197,9 +220,9 @@
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
} else {
for (const candidate of $assetSelectionCandidates || []) {
assetInteractionStore.addAssetToMultiselectGroup(candidate);
handleSelectAsset(candidate);
}
assetInteractionStore.addAssetToMultiselectGroup(asset);
handleSelectAsset(asset);
}
assetInteractionStore.clearAssetSelectionCandidates();
@ -224,7 +247,7 @@
if (deselect) {
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
} else {
assetInteractionStore.addAssetToMultiselectGroup(asset);
handleSelectAsset(asset);
}
}
}
@ -293,7 +316,7 @@
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section
id="asset-grid"
class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-4"
class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-[60px]"
bind:clientHeight={viewport.height}
bind:clientWidth={viewport.width}
bind:this={element}
@ -318,9 +341,10 @@
{assetInteractionStore}
{isSelectionMode}
{singleSelect}
on:select={({ detail: group }) => handleGroupSelect(group.title, group.assets)}
on:shift={handleScrollTimeline}
on:selectAssetCandidates={handleSelectAssetCandidates}
on:selectAssets={handleSelectAssets}
on:selectAssetCandidates={({ detail: asset }) => handleSelectAssetCandidates(asset)}
on:selectAssets={({ detail: asset }) => handleSelectAssets(asset)}
assets={bucket.assets}
bucketDate={bucket.bucketDate}
bucketHeight={bucket.bucketHeight}

20
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View file

@ -5,7 +5,7 @@
import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import { handleError } from '$lib/utils/handle-error';
import { AlbumResponseDto, api, AssetResponseDto, SharedLinkResponseDto, SharedLinkType } from '@api';
import { api, SharedLinkResponseDto, SharedLinkType } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import Link from 'svelte-material-icons/Link.svelte';
import BaseModal from '../base-modal.svelte';
@ -13,9 +13,8 @@
import DropdownButton from '../dropdown-button.svelte';
import { notificationController, NotificationType } from '../notification/notification';
export let shareType: SharedLinkType;
export let sharedAssets: AssetResponseDto[] = [];
export let album: AlbumResponseDto | undefined = undefined;
export let albumId: string | undefined = undefined;
export let assetIds: string[] = [];
export let editingLink: SharedLinkResponseDto | undefined = undefined;
let sharedLink: string | null = null;
@ -33,6 +32,8 @@
options: ['Never', '30 minutes', '1 hour', '6 hours', '1 day', '7 days', '30 days'],
};
$: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
onMount(async () => {
if (editingLink) {
if (editingLink.description) {
@ -41,6 +42,9 @@
allowUpload = editingLink.allowUpload;
allowDownload = editingLink.allowDownload;
showExif = editingLink.showExif;
albumId = editingLink.album?.id;
assetIds = editingLink.assets.map(({ id }) => id);
}
const module = await import('copy-image-clipboard');
@ -56,8 +60,8 @@
const { data } = await api.sharedLinkApi.createSharedLink({
sharedLinkCreateDto: {
type: shareType,
albumId: album ? album.id : undefined,
assetIds: sharedAssets.map((a) => a.id),
albumId,
assetIds,
expiresAt: expirationDate,
allowUpload,
description,
@ -151,7 +155,7 @@
</svelte:fragment>
<section class="mx-6 mb-6">
{#if shareType == SharedLinkType.Album}
{#if shareType === SharedLinkType.Album}
{#if !editingLink}
<div>Let anyone with the link see photos and people in this album.</div>
{:else}
@ -163,7 +167,7 @@
{/if}
{/if}
{#if shareType == SharedLinkType.Individual}
{#if shareType === SharedLinkType.Individual}
{#if !editingLink}
<div>Let anyone with the link see the selected photo(s)</div>
{:else}

2
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -22,7 +22,7 @@
<div
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
>
<UserAvatar size="lg" {user} />
<UserAvatar size="xl" {user} />
<div>
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -110,7 +110,7 @@
on:mouseleave={() => (shouldShowAccountInfo = false)}
on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
>
<UserAvatar {user} size="md" showTitle={false} interactive />
<UserAvatar {user} size="lg" showTitle={false} interactive />
</button>
{#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}

8
web/src/lib/components/shared-components/user-avatar.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts" context="module">
export type Color = 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green';
export type Size = 'full' | 'sm' | 'md' | 'lg';
export type Size = 'full' | 'sm' | 'md' | 'lg' | 'xl';
</script>
<script lang="ts">
@ -28,8 +28,9 @@
const sizeClasses: Record<Size, string> = {
full: 'w-full h-full',
sm: 'w-7 h-7',
md: 'w-12 h-12',
lg: 'w-20 h-20',
md: 'w-10 h-10',
lg: 'w-12 h-12',
xl: 'w-20 h-20',
};
// Get color based on the user UUID.
@ -69,6 +70,7 @@
class="flex h-full w-full select-none items-center justify-center"
class:text-xs={size === 'sm'}
class:text-lg={size === 'lg'}
class:text-xl={size === 'xl'}
class:font-medium={!autoColor}
class:font-semibold={autoColor}
>

2
web/src/lib/components/user-settings-page/partner-selection-modal.svelte
View file

@ -56,7 +56,7 @@
>✓</span
>
{:else}
<UserAvatar {user} size="md" autoColor />
<UserAvatar {user} size="lg" autoColor />
{/if}
<div class="text-left">