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>
92 lines
3 KiB
Svelte
92 lines
3 KiB
Svelte
<script lang="ts">
|
|
import { PersonResponseDto, api } from '@api';
|
|
import { getContextMenuPosition } from '$lib/utils/context-menu';
|
|
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
|
|
import IconButton from '../elements/buttons/icon-button.svelte';
|
|
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
|
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
|
import Portal from '../shared-components/portal/portal.svelte';
|
|
import { createEventDispatcher } from 'svelte';
|
|
import { AppRoute } from '$lib/constants';
|
|
import { mdiDotsVertical } from '@mdi/js';
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
|
|
export let person: PersonResponseDto;
|
|
export let preload = false;
|
|
|
|
type MenuItemEvent = 'change-name' | 'set-birth-date' | 'merge-people' | 'hide-person';
|
|
let dispatch = createEventDispatcher<{
|
|
'change-name': void;
|
|
'set-birth-date': void;
|
|
'merge-people': void;
|
|
'hide-person': void;
|
|
}>();
|
|
|
|
let showVerticalDots = false;
|
|
let showContextMenu = false;
|
|
let contextMenuPosition = { x: 0, y: 0 };
|
|
const showMenu = (event: MouseEvent) => {
|
|
contextMenuPosition = getContextMenuPosition(event);
|
|
showContextMenu = !showContextMenu;
|
|
};
|
|
const onMenuExit = () => {
|
|
showContextMenu = false;
|
|
};
|
|
const onMenuClick = (event: MenuItemEvent) => {
|
|
onMenuExit();
|
|
dispatch(event);
|
|
};
|
|
</script>
|
|
|
|
<div
|
|
id="people-card"
|
|
class="relative"
|
|
on:mouseenter={() => (showVerticalDots = true)}
|
|
on:mouseleave={() => (showVerticalDots = false)}
|
|
role="group"
|
|
>
|
|
<a href="/people/{person.id}?previousRoute={AppRoute.PEOPLE}" draggable="false">
|
|
<div class="h-48 w-48 rounded-xl brightness-95 filter">
|
|
<ImageThumbnail
|
|
shadow
|
|
{preload}
|
|
url={api.getPeopleThumbnailUrl(person.id)}
|
|
altText={person.name}
|
|
title={person.name}
|
|
widthStyle="100%"
|
|
/>
|
|
</div>
|
|
{#if person.name}
|
|
<span
|
|
class="text-white-shadow absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white"
|
|
title={person.name}
|
|
>
|
|
{person.name}
|
|
</span>
|
|
{/if}
|
|
</a>
|
|
|
|
<button
|
|
class="absolute right-2 top-2"
|
|
on:click|stopPropagation|preventDefault={showMenu}
|
|
class:hidden={!showVerticalDots}
|
|
data-testid="context-button-parent"
|
|
id={`icon-${person.id}`}
|
|
>
|
|
<IconButton color="transparent-primary">
|
|
<Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
|
|
</IconButton>
|
|
</button>
|
|
</div>
|
|
|
|
{#if showContextMenu}
|
|
<Portal target="body">
|
|
<ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
|
|
<MenuOption on:click={() => onMenuClick('hide-person')} text="Hide Person" />
|
|
<MenuOption on:click={() => onMenuClick('change-name')} text="Change name" />
|
|
<MenuOption on:click={() => onMenuClick('set-birth-date')} text="Set date of birth" />
|
|
<MenuOption on:click={() => onMenuClick('merge-people')} text="Merge People" />
|
|
</ContextMenu>
|
|
</Portal>
|
|
{/if}
|