mirror of
https://github.com/immich-app/immich.git
synced 2025-07-03 21:40:00 +02:00
feat(server,web): hide faces (#3262)
* 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:
parent
02b70e693c
commit
f28fc8fa5c
38 changed files with 742 additions and 108 deletions
web/src/lib/components/assets/thumbnail
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue