fix(web): Create Person face preview not working for video assets

FaceEditor previously required an HTMLImageElement | HTMLVideoElement prop to
compute layout metrics and generate the face crop preview. This was unavailable
for video assets, so the preview thumbnail in the Create Person modal was always
missing, and face positions could be NaN during image load (naturalWidth is 0
before the image decodes).

Replace the DOM element prop with assetSize: Size and containerSize: Size, using
asset metadata dimensions that are always available from the API response.
computeContentMetrics() is extracted as a pure utility alongside
mapContentRectToNatural() for converting face rect coordinates back to original
image space.

For videos, VideoNativeViewer now captures the current frame to canvas when face
edit mode opens and sets assetViewerManager.imgRef, giving FaceEditor the same
image-based preview path as photo assets.

Change-Id: I0e9da549e3af40211abad4ab2c0270706a6a6964

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

@@ -321,15 +321,24 @@
     const canvas = document.createElement('canvas');
     canvas.width = videoWidth;
     canvas.height = videoHeight;
-    canvas.getContext('2d')?.drawImage(videoPlayer, 0, 0);
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return;
+    }
+
+    context.drawImage(videoPlayer, 0, 0);
+    const dataUrl = canvas.toDataURL('image/png');
+    canvas.width = 0;
 
     const img = new Image();
-    const onImageLoad = () => (assetViewerManager.imgRef = img);
-    img.addEventListener('load', onImageLoad);
-    img.src = canvas.toDataURL('image/png');
+    const onLoad = () => {
+      assetViewerManager.imgRef = img;
+    };
+    img.addEventListener('load', onLoad);
+    img.src = dataUrl;
 
     return () => {
-      img.removeEventListener('load', onImageLoad);
+      img.removeEventListener('load', onLoad);
       img.src = '';
       assetViewerManager.imgRef = undefined;
     };

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

@@ -88,11 +88,11 @@
   const imageContentMetrics = $derived(computeContentMetrics(imageSize, containerSize));
 
   const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
-    const { offsetX, offsetY } = imageContentMetrics;
+    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
 
     faceRect.set({
-      top: offsetY + 200,
-      left: offsetX + 200,
+      top: offsetY + contentHeight / 2 - 56,
+      left: offsetX + contentWidth / 2 - 56,
     });
 
     faceRect.setCoords();
@@ -156,6 +156,9 @@
     const gap = 15;
     const padding = faceRect.padding ?? 0;
     const rawBox = faceRect.getBoundingRect();
+    if (Number.isNaN(rawBox.left) || Number.isNaN(rawBox.width)) {
+      return;
+    }
     const faceBox = {
       left: rawBox.left - padding,
       top: rawBox.top - padding,
@@ -253,16 +256,27 @@
 
     const scaleX = imgRef.naturalWidth / imageSize.width;
     const scaleY = imgRef.naturalHeight / imageSize.height;
+
     const x = clamp(Math.floor(data.x * scaleX), 0, imgRef.naturalWidth - 1);
     const y = clamp(Math.floor(data.y * scaleY), 0, imgRef.naturalHeight - 1);
     const width = clamp(Math.floor(data.width * scaleX), 1, imgRef.naturalWidth - x);
     const height = clamp(Math.floor(data.height * scaleY), 1, imgRef.naturalHeight - y);
 
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+
     const canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
+
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return;
+    }
+
     try {
-      canvas.getContext('2d')?.drawImage(imgRef, x, y, width, height, 0, 0, width, height);
+      context.drawImage(imgRef, x, y, width, height, 0, 0, width, height);
       return canvas.toDataURL('image/png');
     } catch {
       return;

web/src/lib/utils/container-utils.ts

@@ -56,16 +56,16 @@ export const getNaturalSize = (element: HTMLImageElement | HTMLVideoElement): Si
   return { width: element.naturalWidth, height: element.naturalHeight };
 };
 
-export function computeContentMetrics(imageSize: Size, containerSize: Size): ContentMetrics {
-  if (imageSize.width === 0 || imageSize.height === 0) {
+export function computeContentMetrics(content: Size, container: Size): ContentMetrics {
+  if (content.width === 0 || content.height === 0) {
     return { contentWidth: 0, contentHeight: 0, offsetX: 0, offsetY: 0 };
   }
-  const { width: contentWidth, height: contentHeight } = scaleToFit(imageSize, containerSize);
+  const { width: contentWidth, height: contentHeight } = scaleToFit(content, container);
   return {
     contentWidth,
     contentHeight,
-    offsetX: (containerSize.width - contentWidth) / 2,
-    offsetY: (containerSize.height - contentHeight) / 2,
+    offsetX: (container.width - contentWidth) / 2,
+    offsetY: (container.height - contentHeight) / 2,
   };
 }
 
@@ -104,7 +104,7 @@ export function mapNormalizedRectToContent(
   };
 }
 
-export function mapContentToNatural(point: Point, metrics: ContentMetrics, naturalSize: Size): Point {
+function mapContentToNatural(point: Point, metrics: ContentMetrics, naturalSize: Size): Point {
   return {
     x: ((point.x - metrics.offsetX) / metrics.contentWidth) * naturalSize.width,
     y: ((point.y - metrics.offsetY) / metrics.contentHeight) * naturalSize.height,