7702560b12
* feat: unassign person faces * multiple improvements * chore: regenerate api * feat: improve face interactions in photos * fix: tests * fix: tests * optimize * fix: wrong assignment on complex-multiple re-assignments * fix: thumbnails with large photos * fix: complex reassign * fix: don't send people with faces * fix: person thumbnail generation * chore: regenerate api * add tess * feat: face box even when zoomed * fix: change feature photo * feat: make the blue icon hoverable * chore: regenerate api * feat: use websocket * fix: loading spinner when clicking on the done button * fix: use the svelte way * fix: tests * simplify * fix: unused vars * fix: remove unused code * fix: add migration * chore: regenerate api * ci: add unit tests * chore: regenerate api * feat: if a new person is created for a face and the server takes more than 15 seconds to generate the person thumbnail, don't wait for it * reorganize * chore: regenerate api * feat: global edit * pr feedback * pr feedback * simplify * revert test * fix: face generation * fix: tests * fix: face generation * fix merge * feat: search names in unmerge face selector modal * fix: merge face selector * simplify feature photo generation * fix: change endpoint * pr feedback * chore: fix merge * chore: fix merge * fix: tests * fix: edit & hide buttons * fix: tests * feat: show if person is hidden * feat: rename face to person * feat: split in new panel * copy-paste-error * pr feedback * fix: feature photo * do not leak faces * fix: unmerge modal * fix: merge modal event * feat(server): remove duplicates * fix: title for image thumbnails * fix: disable side panel when there's no face until next PR --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
167 lines
5.7 KiB
Svelte
167 lines
5.7 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher, onMount } from 'svelte';
|
|
import { api, type PersonResponseDto } from '@api';
|
|
import FaceThumbnail from './face-thumbnail.svelte';
|
|
import { quintOut } from 'svelte/easing';
|
|
import { fly } from 'svelte/transition';
|
|
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
|
import Button from '../elements/buttons/button.svelte';
|
|
import { flip } from 'svelte/animate';
|
|
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
|
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
|
import { handleError } from '$lib/utils/handle-error';
|
|
import { goto } from '$app/navigation';
|
|
import { AppRoute } from '$lib/constants';
|
|
import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
|
import PeopleList from './people-list.svelte';
|
|
import { page } from '$app/stores';
|
|
|
|
export let person: PersonResponseDto;
|
|
let people: PersonResponseDto[] = [];
|
|
let selectedPeople: PersonResponseDto[] = [];
|
|
let screenHeight: number;
|
|
let isShowConfirmation = false;
|
|
|
|
let dispatch = createEventDispatcher();
|
|
|
|
$: hasSelection = selectedPeople.length > 0;
|
|
$: unselectedPeople = people.filter(
|
|
(source) => !selectedPeople.some((selected) => selected.id === source.id) && source.id !== person.id,
|
|
);
|
|
|
|
onMount(async () => {
|
|
const { data } = await api.personApi.getAllPeople({ withHidden: false });
|
|
people = data.people;
|
|
});
|
|
|
|
const onClose = () => {
|
|
dispatch('go-back');
|
|
};
|
|
|
|
const handleSwapPeople = () => {
|
|
[person, selectedPeople[0]] = [selectedPeople[0], person];
|
|
$page.url.searchParams.set('action', 'merge');
|
|
goto(`${AppRoute.PEOPLE}/${person.id}?${$page.url.searchParams.toString()}`);
|
|
};
|
|
|
|
const onSelect = (selected: PersonResponseDto) => {
|
|
if (selectedPeople.includes(selected)) {
|
|
selectedPeople = selectedPeople.filter((person) => person.id !== selected.id);
|
|
return;
|
|
}
|
|
|
|
if (selectedPeople.length >= 5) {
|
|
notificationController.show({
|
|
message: 'You can only merge up to 5 faces at a time',
|
|
type: NotificationType.Info,
|
|
});
|
|
return;
|
|
}
|
|
|
|
selectedPeople = [selected, ...selectedPeople];
|
|
};
|
|
|
|
const handleMerge = async () => {
|
|
try {
|
|
const { data: results } = await api.personApi.mergePerson({
|
|
id: person.id,
|
|
mergePersonDto: { ids: selectedPeople.map(({ id }) => id) },
|
|
});
|
|
const count = results.filter(({ success }) => success).length;
|
|
notificationController.show({
|
|
message: `Merged ${count} ${count === 1 ? 'person' : 'people'}`,
|
|
type: NotificationType.Info,
|
|
});
|
|
dispatch('merge');
|
|
} catch (error) {
|
|
handleError(error, 'Cannot merge people');
|
|
} finally {
|
|
isShowConfirmation = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<svelte:window bind:innerHeight={screenHeight} />
|
|
|
|
<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={onClose}>
|
|
<svelte:fragment slot="leading">
|
|
{#if hasSelection}
|
|
Selected {selectedPeople.length}
|
|
{:else}
|
|
Merge people
|
|
{/if}
|
|
<div />
|
|
</svelte:fragment>
|
|
<svelte:fragment slot="trailing">
|
|
<Button
|
|
size={'sm'}
|
|
disabled={!hasSelection}
|
|
on:click={() => {
|
|
isShowConfirmation = true;
|
|
}}
|
|
>
|
|
<Icon path={mdiMerge} size={18} />
|
|
<span class="ml-2"> Merge</span></Button
|
|
>
|
|
</svelte:fragment>
|
|
</ControlAppBar>
|
|
<section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
|
|
<section id="merge-face-selector relative">
|
|
<div class="mb-10 h-[200px] place-content-center place-items-center">
|
|
<p class="mb-4 text-center uppercase dark:text-white">Choose matching people to merge</p>
|
|
|
|
<div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">
|
|
{#each selectedPeople as person (person.id)}
|
|
<div animate:flip={{ duration: 250, easing: quintOut }}>
|
|
<FaceThumbnail border circle {person} selectable thumbnailSize={120} on:click={() => onSelect(person)} />
|
|
</div>
|
|
{/each}
|
|
|
|
{#if hasSelection}
|
|
<div class="relative h-full">
|
|
<div class="flex flex-col h-full justify-between">
|
|
<div class="flex h-full items-center justify-center">
|
|
<Icon path={mdiCallMerge} size={48} class="rotate-90 dark:text-white" />
|
|
</div>
|
|
{#if selectedPeople.length === 1}
|
|
<div class="absolute bottom-2">
|
|
<CircleIconButton icon={mdiSwapHorizontal} size="24" on:click={handleSwapPeople} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
|
|
</div>
|
|
</div>
|
|
|
|
<PeopleList
|
|
people={unselectedPeople}
|
|
peopleCopy={unselectedPeople}
|
|
unselectedPeople={selectedPeople}
|
|
{screenHeight}
|
|
on:select={({ detail }) => onSelect(detail)}
|
|
/>
|
|
</section>
|
|
|
|
{#if isShowConfirmation}
|
|
<ConfirmDialogue
|
|
title="Merge people"
|
|
confirmText="Merge"
|
|
on:confirm={handleMerge}
|
|
on:cancel={() => (isShowConfirmation = false)}
|
|
>
|
|
<svelte:fragment slot="prompt">
|
|
<p>Are you sure you want merge these people ?</p></svelte:fragment
|
|
>
|
|
</ConfirmDialogue>
|
|
{/if}
|
|
</section>
|
|
</section>
|