# TASK 57 — Vertical (9:16) tier camera placement — the "vv" feature

> Catalog: [`TASKS.md`](../TASKS.md) — status and requirements live here.

**Status:** 🔶 Unit 1 shipped 2026-10-21 (the Live scene). **Unit 2 open** (the Chat scene).

## Why
The vertical tier (1080×1920) is a centred **band crop** of the same 1920×1080 master every
16:9 tier uses: `OutputRect*` = x 656.25, y 0, w 607.5, h 1080. The default webcam sits at
x≈1408 — **outside the cropped window entirely**, so in a vertical stream the creator is simply
not in the picture. Switching tiers must not cost the creator their camera.

## The creator's locked table (2026-10-17)

| mode | shape | size | position |
|---|---|---|---|
| 16:9 | as today | as today | as today |
| **vv · Live** | circle **or** rect, the creator's choice | small tile | one of **six** spots: top/bottom × left/centre/right |
| vv · Chat | rect only | normal, or enlarged to one 607×540 area | the same six spots (Unit 2) |
| Starting / BRB / Ending | unchanged | unchanged | unchanged |

Plus: each scene keeps its **own** vertical position, size and shape; switching back to 16:9
restores the desktop layout **exactly**; placement is set by drag with snap (like the socials)
**and** by manual entry in the properties.

## Design (Unit 1)

- **Geometry only — no render-path change.** The preview and the compositor read the element's
  own `X`/`Y`/`Width`/`Height` + `ClipShape`, so the tier switch swaps the live geometry:
  `WebcamSceneConfig.BeginVerticalLayout(...)` parks the 16:9 layout and brings the vertical one
  in; `EndVerticalLayout()` commits the vertical placement back to its stored slot and restores
  the parked 16:9 layout.
- **Storage.** Seven additive columns on `WebcamSceneConfig` (`VerticalX/Y/Width/Height/
  VerticalClipShape/VerticalRectWidth/VerticalRectHeight`), NULL = "this scene has no vertical
  placement yet". The X/Y/W/H/ClipShape columns stay the **16:9** layout, so a save never loses
  the desktop placement.
- **The band and the six spots** (`Models/VerticalCameraLayout.cs`, pure math): the band splits
  into two 607×540 areas (top/bottom), each with three columns (left/centre/right). A tile snaps
  to the spot its **centre** falls in, inset 32 master px from the band's outer edge and never
  outside the band. Default tile: 270×152 master px (480×270 in the 1080×1920 output), bottom-right
  spot — the corner the 16:9 default webcam uses. The Live scene gets it automatically the first
  time the vertical tier is picked; the other scenes keep their 16:9 placement until the creator
  drags them into the band.
- **One clamp, one choke point.** `SceneElement.X/Y/Width/Height` became `virtual` and the webcam
  constrains every write (drag, resize handle, typed Geometry fields) into the band — outside it
  the camera is invisible in the vertical stream.
- **Manual entry.** The webcam's Layers properties gained a Geometry section (X/Y/W/H) bound to
  the **live** placement — the one the current tier shows.

## Slices (one integration test each)

1. ✅ **Unit 1 — the Live scene** (shipped 2026-10-21): the vertical tier brings the Live camera
   into the band as a small tile; dragging it to the top-right snaps it top-right inside the
   band; switching back to 16:9 restores the desktop layout exactly; both placements survive a
   save + reload. `ytLive.Tests/VerticalWebcamLayoutTests.cs` — the ONE test for the unit.
2. ☐ **Unit 2 — the Chat scene**: rect only (no circle) in the vertical tier, either the normal
   size or enlarged to fill one 607×540 area; the same six-spot snap. The Chat scene's 16:9
   exemption from the half-frame cap must not leak into the vertical tier.
3. ☐ **Creator check** (needs the creator's hands): switch the dropdown to "Vertical 1080p60",
   confirm the camera tile lands inside the band and the Shape button toggles circle/rect in the
   vertical tier, then switch back and confirm the desktop layout is untouched.

## Notes

- OBS cannot do this (no per-aspect layout storage — the maintainers' answer is a second scene
  fed as a source); Streamyard documents the same gap. Our per-scene, per-tier stored placement
  resolved on the tier change is the step past both.
- The vertical tier's output crop is TASK 53's business (safe zones, caption clearance); the
  camera tile is inside the band, but the band is not yet proven against TikTok/Shorts chrome.