chore(server,cli,web): housekeeping and stricter code style (#6751)

* add unicorn to eslint

* fix lint errors for cli

* fix merge

* fix album name extraction

* Update cli/src/commands/upload.command.ts

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

* es2k23

* use lowercase os

* return undefined album name

* fix bug in asset response dto

* auto fix issues

* fix server code style

* es2022 and formatting

* fix compilation error

* fix test

* fix config load

* fix last lint errors

* set string type

* bump ts

* start work on web

* web formatting

* Fix UUIDParamDto as UUIDParamDto

* fix library service lint

* fix web errors

* fix errors

* formatting

* wip

* lints fixed

* web can now start

* alphabetical package json

* rename error

* chore: clean up

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -47,8 +47,8 @@
       img.src = data;
 
       await new Promise<void>((resolve) => {
-        img.onload = () => resolve();
-        img.onerror = () => resolve();
+        img.addEventListener('load', () => resolve());
+        img.addEventListener('error', () => resolve());
       });
 
       image = img;
@@ -56,13 +56,20 @@
     if (image === null) {
       return null;
     }
-    const { boundingBoxX1: x1, boundingBoxX2: x2, boundingBoxY1: y1, boundingBoxY2: y2 } = face;
+    const {
+      boundingBoxX1: x1,
+      boundingBoxX2: x2,
+      boundingBoxY1: y1,
+      boundingBoxY2: y2,
+      imageWidth,
+      imageHeight,
+    } = face;
 
     const coordinates = {
-      x1: (image.naturalWidth / face.imageWidth) * x1,
-      x2: (image.naturalWidth / face.imageWidth) * x2,
-      y1: (image.naturalHeight / face.imageHeight) * y1,
-      y2: (image.naturalHeight / face.imageHeight) * y2,
+      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;
@@ -72,17 +79,17 @@
     faceImage.src = image.src;
 
     await new Promise((resolve) => {
-      faceImage.onload = resolve;
-      faceImage.onerror = () => resolve(null);
+      faceImage.addEventListener('load', resolve);
+      faceImage.addEventListener('error', () => resolve(null));
     });
 
     const canvas = document.createElement('canvas');
     canvas.width = faceWidth;
     canvas.height = faceHeight;
 
-    const ctx = canvas.getContext('2d');
-    if (ctx) {
-      ctx.drawImage(faceImage, coordinates.x1, coordinates.y1, faceWidth, faceHeight, 0, 0, faceWidth, 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 {

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -71,7 +71,7 @@
             }}
           >
             <ImageThumbnail
-              border={potentialMergePeople.length !== 0}
+              border={potentialMergePeople.length > 0}
               circle
               shadow
               url={api.getPeopleThumbnailUrl(personMerge2.id)}

web/src/lib/components/faces-page/people-list.svelte

@@ -34,10 +34,8 @@
       people = peopleCopy;
       return;
     }
-    if (!force) {
-      if (people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) {
-        return;
-      }
+    if (!force && people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) {
+      return;
     }
 
     const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);

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

@@ -72,8 +72,8 @@
       allPeople = data.people;
       const result = await api.faceApi.getFaces({ id: assetId });
       peopleWithFaces = result.data;
-      selectedPersonToCreate = new Array<string | null>(peopleWithFaces.length);
-      selectedPersonToReassign = new Array<PersonResponseDto | null>(peopleWithFaces.length);
+      selectedPersonToCreate = Array.from({ length: peopleWithFaces.length });
+      selectedPersonToReassign = Array.from({ length: peopleWithFaces.length });
     } catch (error) {
       handleError(error, "Can't get faces");
     } finally {
@@ -106,20 +106,20 @@
       selectedPersonToReassign.filter((person) => person !== null).length;
     if (numberOfChanges > 0) {
       try {
-        for (let i = 0; i < peopleWithFaces.length; i++) {
-          const personId = selectedPersonToReassign[i]?.id;
+        for (const [index, peopleWithFace] of peopleWithFaces.entries()) {
+          const personId = selectedPersonToReassign[index]?.id;
 
           if (personId) {
             await api.faceApi.reassignFacesById({
               id: personId,
-              faceDto: { id: peopleWithFaces[i].id },
+              faceDto: { id: peopleWithFace.id },
             });
-          } else if (selectedPersonToCreate[i]) {
+          } else if (selectedPersonToCreate[index]) {
             const { data } = await api.personApi.createPerson();
             numberOfPersonToCreate.push(data.id);
             await api.faceApi.reassignFacesById({
               id: data.id,
-              faceDto: { id: peopleWithFaces[i].id },
+              faceDto: { id: peopleWithFace.id },
             });
           }
         }
@@ -138,7 +138,7 @@
       clearTimeout(loaderLoadingDoneTimeout);
       dispatch('refresh');
     } else {
-      automaticRefreshTimeout = setTimeout(() => dispatch('refresh'), 15000);
+      automaticRefreshTimeout = setTimeout(() => dispatch('refresh'), 15_000);
     }
   };