Skip to content

Work / Scrvio / Wiki / Surfaces

recording-live

Surfacecanonicalverified 2026-10-04

SURFACE.WEB.RECORDING-LIVE

Summary

Recording in progress: pulsing dot, timer, pause and stop.

Raw wireframe

  • .context/designs/web/record/recording.html

Why it is drawn this way

The timer prints / 300s. recording-controls.tsx appends the raw maxDurationSeconds. It is 300 for every user because app/page.tsx sets it from FREE_MAX_DURATION.

Red means live. The dot, the stop button and the camera bubble's LIVE mark use the reserved rec colour.

The camera bubble can be dragged. camera-preview.tsx starts bottom-left and follows the mouse, clamped to the window.

Keyboard works too. Alt+Shift+R stops, Alt+Shift+P pauses. The hint line under the buttons says so.

Related

Sources

  • packages/ui/src/components/recording/recording-controls.tsx
  • packages/ui/src/components/recording/camera-preview.tsx
  • apps/website/src/app/app/page.tsx