feat: unassign faces

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -1,23 +1,25 @@
 <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 { AssetTypeEnum, ThumbnailFormat, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
-  import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { getPersonNameWithHiddenValue, zoomImageToBase64 } from '$lib/utils/person';
+  import { AssetTypeEnum, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { mdiAccountOff, mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  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 LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
 
-  export let peopleWithFaces: AssetFaceResponseDto[];
+  export let editedFace: AssetFaceResponseDto;
   export let allPeople: PersonResponseDto[];
-  export let editedPerson: PersonResponseDto;
   export let assetType: AssetTypeEnum;
   export let assetId: string;
+  export let editedPerson: PersonResponseDto | undefined = undefined;
+  export let onClose = () => {};
+  export let onCreatePerson: (featurePhoto: string | null) => void;
+  export let onReassign: (person: PersonResponseDto) => void;
 
   // loading spinners
   let isShowLoadingNewPerson = false;
@@ -30,85 +32,20 @@
 
   $: showPeople = searchName ? searchedPeople : allPeople.filter((person) => !person.isHidden);
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-    createPerson: string | null;
-    reassign: PersonResponseDto;
-  }>();
   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, ThumbnailFormat.Webp);
-      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;
-    }
+    onClose();
   };
 
   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, assetType, assetId);
 
-    dispatch('createPerson', newFeaturePhoto);
+    onCreatePerson(newFeaturePhoto);
 
     clearTimeout(timeout);
     isShowLoadingNewPerson = false;
-    dispatch('createPerson', newFeaturePhoto);
+    onCreatePerson(newFeaturePhoto);
   };
 </script>
 
@@ -157,33 +94,42 @@
     {/if}
   </div>
   <div class="px-4 py-4 text-sm">
-    <h2 class="mb-8 mt-4 uppercase">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 !== editedPerson.id}
-          <div class="w-fit">
-            <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
-              <div class="relative">
-                <ImageThumbnail
-                  curve
-                  shadow
-                  url={getPeopleThumbnailUrl(person.id)}
-                  altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                  title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                  widthStyle="90px"
-                  heightStyle="90px"
-                  thumbhash={null}
-                  hidden={person.isHidden}
-                />
-              </div>
+    {#if showPeople.length > 0}
+      <h2 class="mb-8 mt-4 uppercase">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 !== editedPerson?.id}
+            <div class="w-fit">
+              <button class="w-[90px]" on:click={() => onReassign(person)}>
+                <div class="relative">
+                  <ImageThumbnail
+                    curve
+                    shadow
+                    url={getPeopleThumbnailUrl(person.id)}
+                    altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                    title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                    widthStyle="90px"
+                    heightStyle="90px"
+                    thumbhash={null}
+                    hidden={person.isHidden}
+                  />
+                </div>
 
-              <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
-                {person.name}
-              </p>
-            </button>
-          </div>
-        {/if}
-      {/each}
-    </div>
+                <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
+                  {person.name}
+                </p>
+              </button>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    {:else}
+      <div class="flex items-center justify-center">
+        <div class="grid place-items-center">
+          <Icon path={mdiAccountOff} size="3.5em" />
+          <p class="mt-5 font-medium">No faces found</p>
+        </div>
+      </div>
+    {/if}
   </div>
 </section>