ui(frontend-demo): 💄 Update rendering logic and UI elements in FileVideoView and LiveCameraView for improved video handling and user interaction

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

features/video-studio/frontend-demo/src/components/FileVideoView.tsx

@@ -29,6 +29,7 @@ export function FileVideoView({
 }: FileVideoViewProps): ReactElement {
   const [mode, setMode] = useState<DisguiseMode>('none');
   const [blurStrength, setBlurStrength] = useState(20);
+  const [showOverlay, setShowOverlay] = useState(true);
   const [objectUrl, setObjectUrl] = useState<string | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
@@ -135,6 +136,14 @@ export function FileVideoView({
           onModeChange={setMode}
           onBlurStrengthChange={setBlurStrength}
         />
+        <label style={styles.overlayToggle}>
+          <input
+            type="checkbox"
+            checked={showOverlay}
+            onChange={(e) => setShowOverlay(e.target.checked)}
+          />
+          Show identity boxes
+        </label>
 
         <StatusBadge isReady={isReady} error={error} />
       </div>
@@ -162,6 +171,7 @@ export function FileVideoView({
               blurStrength={blurStrength}
               width={canvasDims.w}
               height={canvasDims.h}
+              showOverlay={showOverlay}
               showModePicker
               identities={identities}
               resolveIdentityMode={resolveIdentityMode}
@@ -284,6 +294,15 @@ const styles = {
     fontWeight: 500,
     cursor: 'pointer',
   },
+  overlayToggle: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    fontSize: '13px',
+    color: '#aaa',
+    cursor: 'pointer',
+    userSelect: 'none' as const,
+  },
   hiddenVideo: {
     position: 'absolute' as const,
     width: '1px',

features/video-studio/frontend-demo/src/components/LiveCameraView.tsx

@@ -24,6 +24,7 @@ export function LiveCameraView({
   const [blurStrength, setBlurStrength] = useState(20);
   const [demonParams, setDemonParams] = useState<DemonParams>(resolveDemonParams());
   const [succubusParams, setSuccubusParams] = useState<SuccubusParams>(resolveSuccubusParams());
+  const [showOverlay, setShowOverlay] = useState(true);
   const { isReady, error } = useFaceDetection();
 
   const disguiseOptions = useMemo(
@@ -47,6 +48,14 @@ export function LiveCameraView({
           onDemonChange={setDemonParams}
           onSuccubusChange={setSuccubusParams}
         />
+        <label style={styles.overlayToggle}>
+          <input
+            type="checkbox"
+            checked={showOverlay}
+            onChange={(e) => setShowOverlay(e.target.checked)}
+          />
+          Show identity boxes
+        </label>
         <StatusBadge isReady={isReady} error={error} />
       </div>
       <div style={styles.canvasWrapper}>
@@ -57,6 +66,7 @@ export function LiveCameraView({
           width={640}
           height={480}
           style={styles.canvas}
+          showOverlay={showOverlay}
           showModePicker
           identities={identities}
           resolveIdentityMode={resolveIdentityMode}
@@ -110,6 +120,15 @@ const styles = {
     display: 'block',
     maxWidth: '100%',
   },
+  overlayToggle: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    fontSize: '13px',
+    color: '#aaa',
+    cursor: 'pointer',
+    userSelect: 'none' as const,
+  },
   badge: {
     display: 'inline-block',
     padding: '4px 10px',