diff --git a/features/video-studio/frontend-demo/src/components/FileVideoView.tsx b/features/video-studio/frontend-demo/src/components/FileVideoView.tsx index 6fab5dbd9..7e98da312 100644 --- a/features/video-studio/frontend-demo/src/components/FileVideoView.tsx +++ b/features/video-studio/frontend-demo/src/components/FileVideoView.tsx @@ -29,6 +29,7 @@ export function FileVideoView({ }: FileVideoViewProps): ReactElement { const [mode, setMode] = useState('none'); const [blurStrength, setBlurStrength] = useState(20); + const [showOverlay, setShowOverlay] = useState(true); const [objectUrl, setObjectUrl] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const [currentTime, setCurrentTime] = useState(0); @@ -135,6 +136,14 @@ export function FileVideoView({ onModeChange={setMode} onBlurStrengthChange={setBlurStrength} /> + @@ -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', diff --git a/features/video-studio/frontend-demo/src/components/LiveCameraView.tsx b/features/video-studio/frontend-demo/src/components/LiveCameraView.tsx index 5d3b22143..c4c45cce0 100644 --- a/features/video-studio/frontend-demo/src/components/LiveCameraView.tsx +++ b/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(resolveDemonParams()); const [succubusParams, setSuccubusParams] = useState(resolveSuccubusParams()); + const [showOverlay, setShowOverlay] = useState(true); const { isReady, error } = useFaceDetection(); const disguiseOptions = useMemo( @@ -47,6 +48,14 @@ export function LiveCameraView({ onDemonChange={setDemonParams} onSuccubusChange={setSuccubusParams} /> +
@@ -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',