Ring View 0.11 beta: coherent low-chrome controls

[thomasgregg]

Summary

This beta implements the approved low-chrome redesign for Ring View's custom controls while deliberately leaving every native browser and Home Assistant media-player control untouched.

Design system

• Uses one borderless translucent rail language for modes, camera actions, and visitor actions.
• Keeps utility controls at 44 px on desktop and 48 px on touch layouts.
• Keeps hover, selected, pressed, and focus treatments inset by 4 px so controls never change size.
• Uses semantic colour sparingly: red only for Live and active Talk, amber for a Ding and door progress, green for success, and red for errors.
• Removes the white ring around the selected Live dot, decorative dividers, nested outlines, shadows, and default blur.

Responsive layout

• Dashboard: Recording and Live stay centered; snapshot and enlarge remain at the top right.
• The dashboard enlarge action always opens the complete Ring View viewer, independently from native player fullscreen.
• Portrait: mode switching stays near the top right, Close stays in the corner, and snapshot/Ding actions use a vertical rail at the right edge.
• Landscape and desktop retain the established header layout.
• Talk and door access remain above the native player-control area and use stable 48 px targets.
• At 290 px and below, labels collapse only as a last resort while both controls retain 48-by-48 accessible targets.

Visitor interactions

• Talk and door access share one borderless rail without a divider.
• Talk turns red only while audio is actively transmitted.
• Door confirmation is now 1.6 seconds.
• Door progress fills left to right with a rounded starting edge and straight moving edge; the button does not resize or bounce.
• Early release, pointer cancellation, focus loss, viewer close, and state transitions cancel safely.

Messages and recovery

• Loading uses a lightweight spinner and label.
• Retry and Resume remain clear rounded actions.
• Snapshot, door, Ding, and session feedback use the existing central notification area with one consistent dark surface and left-aligned wrapped text.
• Exceptionally short interactive cards temporarily prioritize the central message; visitor controls return when the message clears or height becomes available.

Accessibility and resilience

• Adds explicit Windows forced-colour surfaces, selected states, door progress, and keyboard outlines.
• Preserves complete feedback without animation when reduced motion is requested.
• Keeps accessible names when labels collapse at exceptionally narrow widths.
• Preserves native playback, volume, timeline, captions, and fullscreen behavior.

Validation

• 195 unit and component tests passed.
• 134 Playwright scenarios passed across desktop and phone projects.
• Coverage includes portrait, landscape, desktop, interactive dashboard, 280 px width, compact-height transitions, reduced motion, forced colours, keyboard navigation, long translated text, active Talk, door timing and cancellation, provider parity, media recovery, and native-control preservation.
• TypeScript check and production build passed.

Release

Prepared as v0.11.0-beta.1 so the new visual system can be validated on real Home Assistant dashboards before the stable release.