fix(web): tag people in video (#16351)

web/src/lib/components/asset-viewer/face-editor/face-editor.svelte

@@ -12,13 +12,13 @@
   import { handleError } from '$lib/utils/handle-error';
 
   interface Props {
-    imgElement: HTMLImageElement;
+    htmlElement: HTMLImageElement | HTMLVideoElement;
     containerWidth: number;
     containerHeight: number;
     assetId: string;
   }
 
-  let { imgElement, containerWidth, containerHeight, assetId }: Props = $props();
+  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
@@ -39,7 +39,7 @@
   };
 
   const setupCanvas = () => {
-    if (!canvasEl || !imgElement) {
+    if (!canvasEl || !htmlElement) {
       return;
     }
 
@@ -68,7 +68,7 @@
   });
 
   $effect(() => {
-    const { actualWidth, actualHeight } = getContainedSize(imgElement);
+    const { actualWidth, actualHeight } = getContainedSize(htmlElement);
     const offsetArea = {
       width: (containerWidth - actualWidth) / 2,
       height: (containerHeight - actualHeight) / 2,
@@ -103,7 +103,10 @@
     positionFaceSelector();
   });
 
-  const getContainedSize = (img: HTMLImageElement): { actualWidth: number; actualHeight: number } => {
+  const getContainedSize = (
+    img: HTMLImageElement | HTMLVideoElement,
+  ): { actualWidth: number; actualHeight: number } => {
+    if (img instanceof HTMLImageElement) {
       const ratio = img.naturalWidth / img.naturalHeight;
       let actualWidth = img.height * ratio;
       let actualHeight = img.height;
@@ -112,6 +115,18 @@
         actualHeight = img.width / ratio;
       }
       return { actualWidth, actualHeight };
+    } else if (img instanceof HTMLVideoElement) {
+      const ratio = img.videoWidth / img.videoHeight;
+      let actualWidth = img.clientHeight * ratio;
+      let actualHeight = img.clientHeight;
+      if (actualWidth > img.clientWidth) {
+        actualWidth = img.clientWidth;
+        actualHeight = img.clientWidth / ratio;
+      }
+      return { actualWidth, actualHeight };
+    }
+
+    return { actualWidth: 0, actualHeight: 0 };
   };
 
   const cancel = () => {
@@ -202,12 +217,12 @@
   });
 
   const getFaceCroppedCoordinates = () => {
-    if (!faceRect || !imgElement) {
+    if (!faceRect || !htmlElement) {
       return;
     }
 
     const { left, top, width, height } = faceRect.getBoundingRect();
-    const { actualWidth, actualHeight } = getContainedSize(imgElement);
+    const { actualWidth, actualHeight } = getContainedSize(htmlElement);
 
     const offsetArea = {
       width: (containerWidth - actualWidth) / 2,
@@ -220,19 +235,35 @@
     const y2Coeff = (top + height - offsetArea.height) / actualHeight;
 
     // transpose to the natural image location
-    const x1 = x1Coeff * imgElement.naturalWidth;
-    const y1 = y1Coeff * imgElement.naturalHeight;
-    const x2 = x2Coeff * imgElement.naturalWidth;
-    const y2 = y2Coeff * imgElement.naturalHeight;
+    if (htmlElement instanceof HTMLImageElement) {
+      const x1 = x1Coeff * htmlElement.naturalWidth;
+      const y1 = y1Coeff * htmlElement.naturalHeight;
+      const x2 = x2Coeff * htmlElement.naturalWidth;
+      const y2 = y2Coeff * htmlElement.naturalHeight;
+
+      return {
+        imageWidth: htmlElement.naturalWidth,
+        imageHeight: htmlElement.naturalHeight,
+        x: Math.floor(x1),
+        y: Math.floor(y1),
+        width: Math.floor(x2 - x1),
+        height: Math.floor(y2 - y1),
+      };
+    } else if (htmlElement instanceof HTMLVideoElement) {
+      const x1 = x1Coeff * htmlElement.videoWidth;
+      const y1 = y1Coeff * htmlElement.videoHeight;
+      const x2 = x2Coeff * htmlElement.videoWidth;
+      const y2 = y2Coeff * htmlElement.videoHeight;
 
       return {
-      imageWidth: imgElement.naturalWidth,
-      imageHeight: imgElement.naturalHeight,
+        imageWidth: htmlElement.videoWidth,
+        imageHeight: htmlElement.videoHeight,
         x: Math.floor(x1),
         y: Math.floor(y1),
         width: Math.floor(x2 - x1),
         height: Math.floor(y2 - y1),
       };
+    }
   };
 
   const tagFace = async (person: PersonResponseDto) => {

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -234,7 +234,7 @@
     </div>
 
     {#if isFaceEditMode.value}
-      <FaceEditor imgElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
+      <FaceEditor htmlElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
     {/if}
   {/if}
 </div>

web/src/lib/components/asset-viewer/video-native-viewer.svelte

@@ -9,6 +9,8 @@
   import type { SwipeCustomEvent } from 'svelte-gestures';
   import { fade } from 'svelte/transition';
   import { t } from 'svelte-i18n';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
 
   interface Props {
     assetId: string;
@@ -84,9 +86,23 @@
       onPreviousAsset();
     }
   };
+
+  let containerWidth = $state(0);
+  let containerHeight = $state(0);
+
+  $effect(() => {
+    if (isFaceEditMode.value) {
+      videoPlayer?.pause();
+    }
+  });
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
+<div
+  transition:fade={{ duration: 150 }}
+  class="flex h-full select-none place-content-center place-items-center"
+  bind:clientWidth={containerWidth}
+  bind:clientHeight={containerHeight}
+>
   <video
     bind:this={videoPlayer}
     loop={$loopVideoPreference && loopVideo}
@@ -116,4 +132,8 @@
       <LoadingSpinner />
     </div>
   {/if}
+
+  {#if isFaceEditMode.value}
+    <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
+  {/if}
 </div>