cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into feature/readonly-sharing

Browse Source 
# Conflicts:
#	server/src/services/album.service.ts
This commit is contained in:
mgabor
2024-04-12 17:20:36 +02:00
parent 222bcf853d 97c099e26d
commit 3211894e18
250 changed files with 9537 additions and 4911 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/+layout.svelte
+2 -25
View File
@@ -1,29 +1,6 @@
<script lang="ts">
import { page } from '$app/stores';
import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { fileUploadHandler } from '$lib/utils/file-uploader';
let albumId: string | undefined;
const dropHandler = async ({ dataTransfer }: DragEvent) => {
const files = dataTransfer?.files;
if (!files) {
return;
}
const filesArray: File[] = Array.from<File>(files);
albumId = ($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
const isShare = $page.route.id === '/(user)/share/[key]' || undefined;
if (isShare) {
dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
} else {
await fileUploadHandler(filesArray, albumId);
}
};
</script>
<slot {albumId} />
<UploadCover {dropHandler} />
<slot />
<UploadCover />
web/src/routes/(user)/albums/+page.svelte
+37 -4
View File
@@ -1,17 +1,50 @@
<script lang="ts">
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import type { PageData } from './$types';
import { AlbumFilter, albumViewSettings } from '$lib/stores/preferences.store';
import { createAlbumAndRedirect } from '$lib/utils/album-utils';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import AlbumsControls from '$lib/components/album-page/albums-controls.svelte';
import Albums from '$lib/components/album-page/albums-list.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import GroupTab from '$lib/components/elements/group-tab.svelte';
import SearchBar from '$lib/components/elements/search-bar.svelte';
export let data: PageData;
let searchAlbum = '';
let searchQuery = '';
let albumGroups: string[] = [];
</script>
<UserPageLayout title={data.meta.title}>
<div class="flex place-items-center gap-2" slot="buttons">
<AlbumsControls bind:searchAlbum />
<AlbumsControls {albumGroups} bind:searchQuery />
</div>
<Albums ownedAlbums={data.albums} {searchAlbum} sharedAlbums={data.sharedAlbums} />
<div class="xl:hidden">
<div class="w-fit h-14 dark:text-immich-dark-fg py-2">
<GroupTab
filters={Object.keys(AlbumFilter)}
selected={$albumViewSettings.filter}
onSelect={(selected) => ($albumViewSettings.filter = selected)}
/>
</div>
<div class="w-60">
<SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
</div>
</div>
<Albums
ownedAlbums={data.albums}
sharedAlbums={data.sharedAlbums}
userSettings={$albumViewSettings}
allowEdit
{searchQuery}
bind:albumGroupIds={albumGroups}
>
<EmptyPlaceholder
slot="empty"
text="Create an album to organize your photos and videos"
onClick={() => createAlbumAndRedirect()}
/>
</Albums>
</UserPageLayout>
web/src/routes/(user)/albums/[albumId]/+page.svelte
+25 -5
View File
@@ -39,7 +39,7 @@
import { locale } from '$lib/stores/preferences.store';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { user } from '$lib/stores/user.store';
import { downloadArchive } from '$lib/utils/asset-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';
@@ -345,7 +345,7 @@
};
const handleDownloadAlbum = async () => {
await downloadArchive(`${album.albumName}.zip`, { albumId: album.id });
await downloadAlbum(album);
};
const handleRemoveAlbum = async () => {
@@ -372,6 +372,18 @@
viewMode = ViewMode.VIEW;
assetInteractionStore.clearMultiselect();
await updateThumbnail(assetId);
};
const updateThumbnailUsingCurrentSelection = async () => {
if ($selectedAssets.size === 1) {
const assetId = [...$selectedAssets][0].id;
assetInteractionStore.clearMultiselect();
await updateThumbnail(assetId);
}
};
const updateThumbnail = async (assetId: string) => {
try {
await updateAlbumInfo({
id: album.id,
@@ -403,6 +415,13 @@
{#if isAllUserOwned}
<ChangeDate menuItem />
<ChangeLocation menuItem />
{#if $selectedAssets.size === 1}
<MenuOption
text="Set as album cover"
icon={mdiImageOutline}
on:click={() => updateThumbnailUsingCurrentSelection()}
/>
{/if}
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
{/if}
{#if isOwned || isAllUserOwned}
@@ -663,17 +682,17 @@
{album}
on:select={({ detail: users }) => handleAddUsers(users)}
on:share={() => (viewMode = ViewMode.LINK_SHARING)}
on:close={() => (viewMode = ViewMode.VIEW)}
onClose={() => (viewMode = ViewMode.VIEW)}
/>
{/if}
{#if viewMode === ViewMode.LINK_SHARING}
<CreateSharedLinkModal albumId={album.id} on:close={() => (viewMode = ViewMode.VIEW)} />
<CreateSharedLinkModal albumId={album.id} onClose={() => (viewMode = ViewMode.VIEW)} />
{/if}
{#if viewMode === ViewMode.VIEW_USERS}
<ShareInfoModal
on:close={() => (viewMode = ViewMode.VIEW)}
onClose={() => (viewMode = ViewMode.VIEW)}
{album}
on:remove={({ detail: userId }) => handleRemoveUser(userId)}
/>
@@ -681,6 +700,7 @@
{#if viewMode === ViewMode.CONFIRM_DELETE}
<ConfirmDialogue
id="delete-album-modal"
title="Delete album"
confirmText="Delete"
onConfirm={handleRemoveAlbum}
web/src/routes/(user)/people/+page.svelte
+17 -27
View File
@@ -463,35 +463,25 @@
{/if}
{#if showChangeNameModal}
<FullScreenModal onClose={() => (showChangeNameModal = false)}>
<div
class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Change name</h1>
<FullScreenModal id="change-name-modal" title="Change name" onClose={() => (showChangeNameModal = false)}>
<form on:submit|preventDefault={submitNameChange} autocomplete="off">
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="name">Name</label>
<!-- svelte-ignore a11y-autofocus -->
<input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} autofocus />
</div>
<form on:submit|preventDefault={submitNameChange} autocomplete="off">
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="name">Name</label>
<!-- svelte-ignore a11y-autofocus -->
<input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} autofocus />
</div>
<div class="mt-8 flex w-full gap-4 px-4">
<Button
color="gray"
fullwidth
on:click={() => {
showChangeNameModal = false;
}}>Cancel</Button
>
<Button type="submit" fullwidth>Ok</Button>
</div>
</form>
</div>
<div class="mt-8 flex w-full gap-4">
<Button
color="gray"
fullwidth
on:click={() => {
showChangeNameModal = false;
}}>Cancel</Button
>
<Button type="submit" fullwidth>Ok</Button>
</div>
</form>
</FullScreenModal>
{/if}
web/src/routes/(user)/search/+page.svelte
+2 -9
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { afterNavigate, goto } from '$app/navigation';
import { page } from '$app/stores';
import AlbumCard from '$lib/components/album-page/album-card.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@@ -31,7 +30,6 @@
type AlbumResponseDto,
} from '@immich/sdk';
import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
import { flip } from 'svelte/animate';
import type { Viewport } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
@@ -39,6 +37,7 @@
import { parseUtcDate } from '$lib/utils/date-time';
import { featureFlags } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
const MAX_ASSET_COUNT = 5000;
let { isViewing: showAssetViewer } = assetViewingStore;
@@ -275,13 +274,7 @@
{#if searchResultAlbums.length > 0}
<section>
<div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">ALBUMS</div>
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] mt-4 gap-y-4">
{#each searchResultAlbums as album, index (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
<AlbumCard preload={index < 20} {album} isSharingView={false} showItemCount={false} />
</a>
{/each}
</div>
<AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
<div class="m-6 text-4xl font-medium text-black/70 dark:text-white/80">PHOTOS & VIDEOS</div>
</section>
web/src/routes/(user)/sharing/+page.svelte
+26 -26
View File
@@ -1,37 +1,44 @@
<script lang="ts">
import { goto } from '$app/navigation';
import empty2Url from '$lib/assets/empty-2.svg';
import AlbumCard from '$lib/components/album-page/album-card.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { AppRoute } from '$lib/constants';
import { createAlbum } from '@immich/sdk';
import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
import { flip } from 'svelte/animate';
import { handleError } from '../../../lib/utils/handle-error';
import type { PageData } from './$types';
import { createAlbumAndRedirect } from '$lib/utils/album-utils';
import {
AlbumFilter,
AlbumGroupBy,
AlbumSortBy,
AlbumViewMode,
SortOrder,
type AlbumViewSettings,
} from '$lib/stores/preferences.store';
import Albums from '$lib/components/album-page/albums-list.svelte';
export let data: PageData;
const createSharedAlbum = async () => {
try {
const newAlbum = await createAlbum({ createAlbumDto: { albumName: '' } });
await goto(`${AppRoute.ALBUMS}/${newAlbum.id}`);
} catch (error) {
handleError(error, 'Unable to create album');
}
const settings: AlbumViewSettings = {
view: AlbumViewMode.Cover,
filter: AlbumFilter.Shared,
groupBy: AlbumGroupBy.None,
groupOrder: SortOrder.Desc,
sortBy: AlbumSortBy.MostRecentPhoto,
sortOrder: SortOrder.Desc,
collapsedGroups: {},
};
</script>
<UserPageLayout title={data.meta.title}>
<div class="flex" slot="buttons">
<LinkButton on:click={createSharedAlbum}>
<LinkButton on:click={() => createAlbumAndRedirect()}>
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<Icon path={mdiPlusBoxOutline} size="18" class="shrink-0" />
<span class="leading-none max-sm:text-xs">Create shared album</span>
<span class="leading-none max-sm:text-xs">Create album</span>
</div>
</LinkButton>
@@ -79,22 +86,15 @@
</div>
<div>
<!-- Share Album List -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] mt-4 gap-y-4">
{#each data.sharedAlbums as album, index (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
<AlbumCard preload={index < 20} {album} isSharingView />
</a>
{/each}
</div>
<!-- Empty List -->
{#if data.sharedAlbums.length === 0}
<!-- Shared Album List -->
<Albums sharedAlbums={data.sharedAlbums} userSettings={settings} showOwner>
<!-- Empty List -->
<EmptyPlaceholder
text="Create a shared album to share photos and videos with people in your network"
slot="empty"
text="Create an album to share photos and videos with people in your network"
src={empty2Url}
/>
{/if}
</Albums>
</div>
</div>
</div>
web/src/routes/(user)/sharing/sharedlinks/+page.svelte
+3 -2
View File
@@ -83,12 +83,13 @@
</section>
{#if editSharedLink}
<CreateSharedLinkModal editingLink={editSharedLink} on:close={handleEditDone} />
<CreateSharedLinkModal editingLink={editSharedLink} onClose={handleEditDone} />
{/if}
{#if deleteLinkId}
<ConfirmDialogue
title="Delete Shared Link"
id="delete-shared-link-modal"
title="Delete shared link"
prompt="Are you sure you want to delete this shared link?"
confirmText="Delete"
onConfirm={() => handleDeleteLink()}
web/src/routes/(user)/trash/+page.svelte
+2 -1
View File
@@ -98,7 +98,8 @@
{#if isShowEmptyConfirmation}
<ConfirmDialogue
title="Empty Trash"
id="empty-trash-modal"
title="Empty trash"
confirmText="Empty"
onConfirm={handleEmptyTrash}
onClose={() => (isShowEmptyConfirmation = false)}
web/src/routes/+layout.svelte
+1 -2
View File
@@ -19,7 +19,6 @@
import '../app.css';
let showNavigationLoadingBar = false;
let albumId: string | undefined;
const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
@@ -111,7 +110,7 @@
</FullscreenContainer>
</noscript>
<slot {albumId} />
<slot />
{#if showNavigationLoadingBar}
<NavigationLoadingBar />
web/src/routes/admin/jobs-status/+page.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
<UserPageLayout title={data.meta.title} admin>
<div class="flex justify-end" slot="buttons">
<a href="{AppRoute.ADMIN_SETTINGS}?open=job">
<a href="{AppRoute.ADMIN_SETTINGS}?isOpen=job">
<LinkButton>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiCog} size="18" />
web/src/routes/admin/library-management/+page.svelte
+4 -1
View File
@@ -118,7 +118,9 @@
const handleCreate = async (ownerId: string) => {
try {
const createdLibrary = await createLibrary({ createLibraryDto: { ownerId, type: LibraryType.External } });
const createdLibrary = await createLibrary({
createLibraryDto: { ownerId, type: LibraryType.External },
});
notificationController.show({
message: `Created library: ${createdLibrary.name}`,
@@ -300,6 +302,7 @@
{#if confirmDeleteLibrary}
<ConfirmDialogue
id="warning-modal"
title="Warning!"
prompt="Are you sure you want to delete this library? This will delete all {deleteAssetCount} contained assets from Immich and cannot be undone. Files will remain on disk."
onConfirm={handleDelete}
web/src/routes/admin/user-management/+page.svelte
+53 -37
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { page } from '$app/stores';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialogue.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
import RestoreDialogue from '$lib/components/admin-page/restore-dialogue.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
@@ -21,7 +21,14 @@
import { asByteUnitString } from '$lib/utils/byte-units';
import { copyToClipboard } from '$lib/utils';
import { UserStatus, getAllUsers, type UserResponseDto } from '@immich/sdk';
import { mdiClose, mdiContentCopy, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
import {
mdiAccountEditOutline,
mdiClose,
mdiContentCopy,
mdiDeleteRestore,
mdiPencilOutline,
mdiTrashCanOutline,
} from '@mdi/js';
import { DateTime } from 'luxon';
import { onMount } from 'svelte';
import type { PageData } from './$types';
@@ -116,13 +123,23 @@
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 lg:w-[850px]">
{#if shouldShowCreateUserForm}
<FullScreenModal onClose={() => (shouldShowCreateUserForm = false)}>
<FullScreenModal
id="create-new-user-modal"
title="Create new user"
showLogo
onClose={() => (shouldShowCreateUserForm = false)}
>
<CreateUserForm on:submit={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
</FullScreenModal>
{/if}
{#if shouldShowEditUserForm}
<FullScreenModal onClose={() => (shouldShowEditUserForm = false)}>
<FullScreenModal
id="edit-user-modal"
title="Edit user"
icon={mdiAccountEditOutline}
onClose={() => (shouldShowEditUserForm = false)}
>
<EditUserForm
user={selectedUser}
bind:newPassword
@@ -153,40 +170,39 @@
{/if}
{#if shouldShowPasswordResetSuccess}
<FullScreenModal onClose={() => (shouldShowPasswordResetSuccess = false)}>
<ConfirmDialogue
title="Password Reset Success"
confirmText="Done"
onConfirm={() => (shouldShowPasswordResetSuccess = false)}
onClose={() => (shouldShowPasswordResetSuccess = false)}
hideCancelButton={true}
confirmColor="green"
>
<svelte:fragment slot="prompt">
<div class="flex flex-col gap-4">
<p>The user's password has been reset:</p>
<ConfirmDialogue
id="password-reset-success-modal"
title="Password reset success"
confirmText="Done"
onConfirm={() => (shouldShowPasswordResetSuccess = false)}
onClose={() => (shouldShowPasswordResetSuccess = false)}
hideCancelButton={true}
confirmColor="green"
>
<svelte:fragment slot="prompt">
<div class="flex flex-col gap-4">
<p>The user's password has been reset:</p>
<div class="flex justify-center gap-2">
<code
class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
>
{newPassword}
</code>
<LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiContentCopy} size="18" />
</div>
</LinkButton>
</div>
<p>
Please provide the temporary password to the user and inform them they will need to change the
password at their next login.
</p>
<div class="flex justify-center gap-2">
<code
class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
>
{newPassword}
</code>
<LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiContentCopy} size="18" />
</div>
</LinkButton>
</div>
</svelte:fragment>
</ConfirmDialogue>
</FullScreenModal>
<p>
Please provide the temporary password to the user and inform them they will need to change the password
at their next login.
</p>
</div>
</svelte:fragment>
</ConfirmDialogue>
{/if}
<table class="my-5 w-full text-left">