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

feat(server,web): hide faces (#3262)

Browse source 
* feat: hide faces

* fix: types

* pr feedback

* fix: svelte checks

* feat: new server endpoint

* refactor: rename person count dto

* fix(server): linter

* fix: remove duplicate button

* docs: add comments

* pr feedback

* fix: get unhidden faces

* fix: do not use PersonCountResponseDto

* fix: transition

* pr feedback

* pr feedback

* fix: remove unused check

* add server tests

* rename persons to people

* feat: add exit button

* pr feedback

* add server tests

* pr feedback

* pr feedback

* fix: show & hide faces

* simplify

* fix: close button

* pr feeback

* pr feeback

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
martin 2023-07-18 20:09:43 +02:00 • committed by GitHub
parent 02b70e693c
commit f28fc8fa5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 742 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
View file

@ -3,6 +3,7 @@
import { fade } from 'svelte/transition';
import { thumbHashToDataURL } from 'thumbhash';
import { Buffer } from 'buffer';
import EyeOffOutline from 'svelte-material-icons/EyeOffOutline.svelte';
export let url: string;
export let altText: string;
@ -12,16 +13,17 @@
export let curve = false;
export let shadow = false;
export let circle = false;
export let hidden = false;
let complete = false;
</script>
<img
style:width={widthStyle}
style:height={heightStyle}
style:filter={hidden ? 'grayscale(75%)' : 'none'}
src={url}
alt={altText}
class="object-cover transition-opacity duration-300"
class="object-cover transition duration-300"
class:rounded-lg={curve}
class:shadow-lg={shadow}
class:rounded-full={circle}
@ -30,6 +32,11 @@
use:imageLoad
on:image-load|once={() => (complete = true)}
/>
{#if hidden}
<div class="absolute top-1/2 left-1/2 transform translate-x-[-50%] translate-y-[-50%]">
<EyeOffOutline size="2em" />
</div>
{/if}
{#if thumbhash && !complete}
<img

4
web/src/lib/components/faces-page/merge-face-selector.svelte
View file

@ -25,8 +25,8 @@
$: unselectedPeople = people.filter((source) => !selectedPeople.includes(source) && source.id !== person.id);
onMount(async () => {
const { data } = await api.personApi.getAllPeople();
people = data;
const { data } = await api.personApi.getAllPeople({ withHidden: true });
people = data.people;
});
const onClose = () => {

8
web/src/lib/components/faces-page/people-card.svelte
View file

@ -24,12 +24,12 @@
<div id="people-card" class="relative">
<a href="/people/{person.id}" draggable="false">
<div class="filter brightness-95 rounded-xl w-48">
<div class="w-48 rounded-xl brightness-95 filter">
<ImageThumbnail shadow url={api.getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" />
</div>
{#if person.name}
<span
class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center font-medium text-white backdrop-blur-[1px] hover:cursor-pointer"
>
{person.name}
</span>
@ -37,7 +37,7 @@
</a>
<button
class="absolute top-2 right-2 z-20"
class="absolute right-2 top-2 z-20"
on:click|stopPropagation|preventDefault={() => {
showContextMenu = !showContextMenu;
}}
@ -59,6 +59,6 @@
{#if showContextMenu}
<Portal target="body">
<div class="absolute top-0 left-0 heyo w-screen h-screen bg-transparent z-10" />
<div class="heyo absolute left-0 top-0 z-10 h-screen w-screen bg-transparent" />
</Portal>
{/if}

30
web/src/lib/components/faces-page/show-hide.svelte Normal file
View file

@ -0,0 +1,30 @@
<script>
import { fly } from 'svelte/transition';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { quintOut } from 'svelte/easing';
import Close from 'svelte-material-icons/Close.svelte';
import IconButton from '../elements/buttons/icon-button.svelte';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script>
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
>
<div
class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full h-16"
>
<div class="flex items-center justify-between p-8 w-full">
<div class="flex items-center">
<CircleIconButton logo={Close} on:click={() => dispatch('closeClick')} />
<p class="ml-4">Show & hide faces</p>
</div>
<IconButton on:click={() => dispatch('doneClick')}>Done</IconButton>
</div>
<div class="absolute top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8">
<slot />
</div>
</div>
</section>

1
web/src/lib/components/layouts/user-page-layout.svelte
View file

@ -16,7 +16,6 @@
<slot name="header" />
</header>
<main
class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
>