@ -1,24 +1,24 @@
< script lang = "ts" >
import { timeBeforeShowLoadingSpinner } from '$lib/constants';
import { photoViewer } from '$lib/stores/assets.store';
import { getAssetThumbnailUrl , getPeopleThumbnailUrl } from '$lib/utils';
import { getPersonNameWithHiddenValue } from '$lib/utils/person';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { AssetTypeEnum , type AssetFaceResponseDto , type PersonResponseDto } from '@immich/sdk';
import { mdiArrowLeftThin , mdiClose , mdiMagnify , mdiPlus } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import { linear } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { photoViewer } from '$lib/stores/assets.store';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { zoomImageToBase64 } from '$lib/utils/people-utils';
import { t } from 'svelte-i18n';
export let peopleWithFaces: AssetFaceResponseDto[];
export let allPeople: PersonResponseDto[];
export let editedPerson: PersonResponseDto;
export let assetType: AssetTypeEnum;
export let editedFace: AssetFaceResponseDto;
export let assetId: string;
export let assetType: AssetTypeEnum;
// loading spinners
let isShowLoadingNewPerson = false;
@ -39,71 +39,11 @@
const handleBackButton = () => {
dispatch('close');
};
const zoomImageToBase64 = async (face: AssetFaceResponseDto): Promise< string | null > => {
let image: HTMLImageElement | null = null;
if (assetType === AssetTypeEnum.Image) {
image = $photoViewer;
} else if (assetType === AssetTypeEnum.Video) {
const data = getAssetThumbnailUrl(assetId);
const img: HTMLImageElement = new Image();
img.src = data;
await new Promise< void > ((resolve) => {
img.addEventListener('load', () => resolve());
img.addEventListener('error', () => resolve());
});
image = img;
}
if (image === null) {
return null;
}
const {
boundingBoxX1: x1,
boundingBoxX2: x2,
boundingBoxY1: y1,
boundingBoxY2: y2,
imageWidth,
imageHeight,
} = face;
const coordinates = {
x1: (image.naturalWidth / imageWidth) * x1,
x2: (image.naturalWidth / imageWidth) * x2,
y1: (image.naturalHeight / imageHeight) * y1,
y2: (image.naturalHeight / imageHeight) * y2,
};
const faceWidth = coordinates.x2 - coordinates.x1;
const faceHeight = coordinates.y2 - coordinates.y1;
const faceImage = new Image();
faceImage.src = image.src;
await new Promise((resolve) => {
faceImage.addEventListener('load', resolve);
faceImage.addEventListener('error', () => resolve(null));
});
const canvas = document.createElement('canvas');
canvas.width = faceWidth;
canvas.height = faceHeight;
const context = canvas.getContext('2d');
if (context) {
context.drawImage(faceImage, coordinates.x1, coordinates.y1, faceWidth, faceHeight, 0, 0, faceWidth, faceHeight);
return canvas.toDataURL();
} else {
return null;
}
};
const handleCreatePerson = async () => {
const timeout = setTimeout(() => (isShowLoadingNewPerson = true), timeBeforeShowLoadingSpinner);
const personToUpdate = peopleWithFaces.find((face) => face.person?.id === editedPerson.id);
const newFeaturePhoto = personToUpdate ? await zoomImageToBase64(personToUpdate) : null ;
const newFeaturePhoto = await zoomImageToBase64(editedFace, assetId, assetType, $photoViewer);
dispatch('createPerson', newFeaturePhoto);
@ -161,7 +101,7 @@
< h2 class = "mb-8 mt-4 uppercase" > { $t ( 'all_people' )} </ h2 >
< div class = "immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto" >
{ #each showPeople as person ( person . id )}
{ #if person . id !== edited P erson. id }
{ #if ! editedFace . person || person . id !== edited Face. p erson. id }
< div class = "w-fit" >
< button type = "button" class = "w-[90px]" on:click = {() => dispatch ( 'reassign' , person )} >
< div class = "relative" >
Jan108
GitHub