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

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>