feat(webcam): default the camera to 40% and let it grow to 60%

The picture-in-picture camera opened at 25%, too small to read a face once a zoom shrinks it, and stopped at 50%. Existing projects keep the size they stored.

Author: EtienneLescot

src/components/ai-edition/RightPanes.layout.test.tsx

@@ -286,11 +286,11 @@ describe("LayoutPane picture-in-picture camera", () => {
 		expect(stored()).toMatchObject({ webcamAnchor: "right" });
 	});
 
-	it("offers a camera from 15% to 50% of the frame", () => {
+	it("offers a camera from 15% to 60% of the frame", () => {
 		renderLayout(seedProject(true));
 		const slider = screen.getByRole("slider", { name: "Webcam size" });
 		expect(slider).toHaveAttribute("min", "15");
-		expect(slider).toHaveAttribute("max", "50");
+		expect(slider).toHaveAttribute("max", "60");
 	});
 });
 

src/components/video-editor/types.ts

@@ -11,10 +11,10 @@ import { clamp01 } from "@/utils/math";
 export type { ZoomDepth, ZoomScaleInput };
 export type ZoomFocusMode = "manual" | "auto";
 export type { WebcamLayoutPreset };
-/** Webcam size as a percentage of the canvas reference dimension (15-50). */
+/** Webcam size as a percentage of the canvas reference dimension (15-60). */
 export type WebcamSizePreset = number;
 
-export const DEFAULT_WEBCAM_SIZE_PRESET: WebcamSizePreset = 25;
+export const DEFAULT_WEBCAM_SIZE_PRESET: WebcamSizePreset = 40;
 
 export const DEFAULT_WEBCAM_LAYOUT_PRESET: WebcamLayoutPreset = "picture-in-picture";
 

src/lib/ai-edition/store/editorSettings.test.ts

@@ -264,12 +264,12 @@ describe("patchEditorSettings", () => {
 		expect(read({})).toEqual(["square", 0.7]);
 	});
 
-	it("reads a camera size outside the slider's 15–50% into it", () => {
+	it("reads a camera size outside the slider's 15–60% into it", () => {
 		const read = (webcamSizePreset: number) =>
 			getEditorSettings({ ...baseDoc, legacyEditor: { webcamSizePreset } }).webcamSizePreset;
 		// An older build allowed 10%.
 		expect(read(10)).toBe(15);
-		expect(read(80)).toBe(50);
+		expect(read(80)).toBe(60);
 	});
 
 	it("preserves a non-zero crop at the bottom-right edge", () => {

src/lib/compositeLayout.test.ts

@@ -81,7 +81,7 @@ describe("computeCompositeLayout", () => {
 		});
 
 		const refDim = Math.sqrt(1280 * 720);
-		const defaultFraction = 25 / 100; // DEFAULT_WEBCAM_SIZE_PRESET = 25
+		const defaultFraction = 40 / 100; // DEFAULT_WEBCAM_SIZE_PRESET = 40
 		expect(layout).not.toBeNull();
 		expect(layout!.webcamRect).not.toBeNull();
 		expect(layout!.webcamRect!.width).toBeLessThanOrEqual(Math.round(refDim * defaultFraction) + 1);
@@ -580,7 +580,7 @@ describe("computeCompositeLayout", () => {
 
 	// A fraction of half the short side: the same value is the same shape at any size.
 	it("rounds by the roundness, and a fully round square is a circle", () => {
-		const circle = pipAt({ webcamMaskShape: "square", webcamRoundness: 1 });
+		const circle = pipAt({ webcamMaskShape: "square", webcamRoundness: 1, webcamSizePreset: 25 });
 		expect(circle.width).toBe(circle.height);
 		expect(circle.borderRadius).toBe(circle.width / 2);
 		expect(pipAt({ webcamRoundness: 0 }).borderRadius).toBe(0);
@@ -612,10 +612,10 @@ describe("computeCompositeLayout", () => {
 		}
 	});
 
-	// The size is the camera's long side: a 16:9 camera at the 50% cap is 540 x 304 in 1080p.
-	it("caps the camera at 50% of the short side", () => {
-		expect(pipAt({ webcamSizePreset: WEBCAM_SIZE_MAX })).toMatchObject({ width: 540, height: 304 });
-		expect(pipAt({ webcamSizePreset: 80 }).height).toBe(304);
+	// The size is the camera's long side: a 16:9 camera at the 60% cap is 648 x 365 in 1080p.
+	it("caps the camera at 60% of the short side", () => {
+		expect(pipAt({ webcamSizePreset: WEBCAM_SIZE_MAX })).toMatchObject({ width: 648, height: 365 });
+		expect(pipAt({ webcamSizePreset: 80 }).height).toBe(365);
 	});
 });
 

src/lib/compositeLayout.ts

@@ -426,7 +426,7 @@ export function computeCompositeLayout(params: {
 		screenSize,
 		webcamSize,
 		layoutPreset = "picture-in-picture",
-		webcamSizePreset = 25,
+		webcamSizePreset = 40,
 		webcamAnchor = "bottom-right",
 		webcamMaskShape = "rectangle",
 		webcamRoundness = DEFAULT_WEBCAM_ROUNDNESS[

src/lib/projectDefaults.ts

@@ -148,11 +148,11 @@ const LEGACY_WEBCAM_ROUNDNESS = 0.3;
 
 /**
  * The picture-in-picture camera's size, in percent of the frame's short side: the camera's
- * long side, so a 16:9 camera at 50 is 28% of a 1080p frame's height. Below 15 a face no
+ * long side, so a 16:9 camera at 60 is 34% of a 1080p frame's height. Below 15 a face no
  * longer reads, and less still once a zoom shrinks it; older builds allowed 10, read back as 15.
  */
 export const WEBCAM_SIZE_MIN = 15;
-export const WEBCAM_SIZE_MAX = 50;
+export const WEBCAM_SIZE_MAX = 60;
 
 /**
  * Reads a stored camera shape and roundness. `circle` and `rounded` were a proportion and a
@@ -253,7 +253,7 @@ export const DEFAULT_PROJECT_APPEARANCE: ProjectAppearanceDefaults = {
 	webcamRoundness: DEFAULT_WEBCAM_ROUNDNESS.square,
 	webcamMirrored: false,
 	webcamReactiveZoom: true,
-	webcamSizePreset: 25,
+	webcamSizePreset: 40,
 	webcamAnchor: "bottom-right",
 	webcamBackgroundMode: "none",
 	webcamWallpaper: "/wallpapers/wallpaper11.jpg",

src/native/sceneDescription.test.ts

@@ -1259,11 +1259,11 @@ describe("buildSceneDescription.settings mapping", () => {
 		expect(buildSceneDescription(doc).layout.webcamSize).toBeCloseTo(0.334, 5);
 	});
 
-	it("webcamSize clamps below 15 and above 50", () => {
+	it("webcamSize clamps below 15 and above 60", () => {
 		const low = makeDoc({ legacyEditor: { webcamSizePreset: 2 } });
 		const high = makeDoc({ legacyEditor: { webcamSizePreset: 90 } });
 		expect(buildSceneDescription(low).layout.webcamSize).toBeCloseTo(0.15, 5);
-		expect(buildSceneDescription(high).layout.webcamSize).toBeCloseTo(0.5, 5);
+		expect(buildSceneDescription(high).layout.webcamSize).toBeCloseTo(0.6, 5);
 	});
 
 	it("carries the camera's anchor, the point its zoom-time shrink keeps fixed", () => {

website/docs/guides/product-demo-video.md

@@ -52,7 +52,7 @@ The webcam is recorded to its own file, so its placement is an editing decision
 
 - **Picture in picture**, **Vertical stack**, **Dual frame**, or **No webcam**.
 - For every layout: mirror, and a crop of the camera image.
-- For **Picture in picture** only: **Camera shape** (Square by default, or Original, which keeps the camera's own proportions), **Roundness** (70% for Square and 40% for Original by default; at 100% a square camera is a circle), a size from 15 to 50% (25% by default), **Position** (a corner or the middle of an edge, bottom right by default), and **Shrink on zoom**, on by default, which makes the camera smaller while a zoom plays so it does not cover the detail. Drag the camera on the canvas and it snaps to the nearest position.
+- For **Picture in picture** only: **Camera shape** (Square by default, or Original, which keeps the camera's own proportions), **Roundness** (70% for Square and 40% for Original by default; at 100% a square camera is a circle), a size from 15 to 60% (40% by default), **Position** (a corner or the middle of an edge, bottom right by default), and **Shrink on zoom**, on by default, which makes the camera smaller while a zoom plays so it does not cover the detail. Drag the camera on the canvas and it snaps to the nearest position.
 - **Camera background**: Original, Blur, Cutout or Custom. Cutout removes the background without a green screen, using a segmentation model that runs on your CPU. This section only appears when the segmentation runtime loads on your machine.
 
 For an intro or outro, press `C` to add a **Full Camera** segment: the camera fills the whole frame for that span.

website/i18n/de/docusaurus-plugin-content-docs/current/guides/product-demo-video.md

@@ -52,7 +52,7 @@ Die Webcam wird in eine eigene Datei aufgenommen. Ihre Platzierung ist also eine
 
 - **Picture in Picture**, **Vertical Stack**, **Dual Frame** oder **No Webcam**.
 - Für jedes Layout: Spiegeln und ein Zuschnitt des Kamerabilds.
-- Nur für **Picture in Picture**: **Camera Shape** (standardmäßig Square, oder Original, das die eigenen Proportionen der Kamera behält), **Roundness** (standardmäßig 70 % für Square und 40 % für Original; bei 100 % wird eine quadratische Kamera zum Kreis), eine Größe von 15 bis 50 % (standardmäßig 25 %), **Position** (eine Ecke oder die Mitte einer Kante, standardmäßig unten rechts) und **Shrink on Zoom**, standardmäßig an: Es verkleinert die Kamera, während ein Zoom läuft, damit sie das Detail nicht verdeckt. Zieh die Kamera auf der Arbeitsfläche, und sie rastet an der nächsten Position ein.
+- Nur für **Picture in Picture**: **Camera Shape** (standardmäßig Square, oder Original, das die eigenen Proportionen der Kamera behält), **Roundness** (standardmäßig 70 % für Square und 40 % für Original; bei 100 % wird eine quadratische Kamera zum Kreis), eine Größe von 15 bis 60 % (standardmäßig 40 %), **Position** (eine Ecke oder die Mitte einer Kante, standardmäßig unten rechts) und **Shrink on Zoom**, standardmäßig an: Es verkleinert die Kamera, während ein Zoom läuft, damit sie das Detail nicht verdeckt. Zieh die Kamera auf der Arbeitsfläche, und sie rastet an der nächsten Position ein.
 - **Camera Background**: Original, Blur, Cutout oder Custom. Cutout entfernt den Hintergrund ohne Greenscreen, mit einem Segmentierungsmodell, das auf deiner CPU läuft. Dieser Abschnitt erscheint nur, wenn sich die Segmentierungs-Laufzeit auf deinem Rechner laden lässt.
 
 Für ein Intro oder Outro drückst du `C`, um ein **Full Camera**-Segment hinzuzufügen: Die Kamera füllt in diesem Abschnitt das ganze Bild.

website/i18n/es/docusaurus-plugin-content-docs/current/guides/product-demo-video.md

@@ -52,7 +52,7 @@ La cámara web se graba en su propio archivo, así que su ubicación es una deci
 
 - **Imagen en imagen**, **Apilado vertical**, **Marco dual** o **Sin cámara**.
 - En todas las disposiciones: reflejo y un encuadre de la imagen de la cámara.
-- Solo en **Imagen en imagen**: **Forma de cámara** (Cuadrado por defecto, u Original, que conserva las proporciones propias de la cámara), **Redondez** (70 % para Cuadrado y 40 % para Original por defecto; al 100 % una cámara cuadrada es un círculo), un tamaño del 15 al 50 % (25 % por defecto), **Posición** (una esquina o el centro de un borde, abajo a la derecha por defecto) y **Reducir al ampliar**, activado por defecto, que hace más pequeña la cámara mientras se reproduce un zoom para que no tape el detalle. Arrastra la cámara sobre el lienzo y se ajusta a la posición más cercana.
+- Solo en **Imagen en imagen**: **Forma de cámara** (Cuadrado por defecto, u Original, que conserva las proporciones propias de la cámara), **Redondez** (70 % para Cuadrado y 40 % para Original por defecto; al 100 % una cámara cuadrada es un círculo), un tamaño del 15 al 60 % (40 % por defecto), **Posición** (una esquina o el centro de un borde, abajo a la derecha por defecto) y **Reducir al ampliar**, activado por defecto, que hace más pequeña la cámara mientras se reproduce un zoom para que no tape el detalle. Arrastra la cámara sobre el lienzo y se ajusta a la posición más cercana.
 - **Fondo de la cámara**: Original, Desenfocado, Recortado o Personalizado. Recortado quita el fondo sin pantalla verde, con un modelo de segmentación que se ejecuta en tu CPU. Esta sección solo aparece cuando el entorno de ejecución de segmentación se carga en tu equipo.
 
 Para una introducción o un cierre, presiona `C` para agregar un segmento de **Cámara a pantalla completa**: la cámara llena todo el cuadro durante ese tramo.