Video note

A round video message (Telegram-style video note) in a chat thread. React <VideoNote> (packages/ui/src/components/VoiceMessage.tsx) renders .cht-msg.vmx.vm-bare with .vn (apps/web/src/ds/voice-message.css) over a real <video playsInline preload="metadata">. Same props as Voice message (src, durationSec, out, time, state, fromLabel, transcript, onRetry, transcript open props, onPlay, onEnded, locale, labels, ref) plus poster.

Visual contract: prototype proto/chat-hlasove-zpravy@6ed969dc9, approved 8 Oct 2026 (acrm !4918).

When to use

  • A short round video recorded in the chat (video note), incoming or outgoing.

When not to use

  • A regular (rectangular) video, a screen recording or a forwarded clip — use Video message.
  • Audio only — use Voice message.
  • A video file to download — use Attachment.

Anatomy

  • No bubble: .cht-msg.vm-bare is transparent, no padding, width 200 px.
  • Circle .vn-circle 200 × 200, border-radius: 50%, --ink-300 under the video until the first frame (poster if given); the video fills it with object-fit: cover.
  • Progress ring .vn-ring: SVG circle, 3 px stroke --accent, round cap, starts at 12 o'clock.
  • Play icon .vn-ico (Button default icon look, not a separate button) in the centre; hidden while playing.
  • Row .vn-row under the circle (height --control-h-sm): duration .vm-time (after the first play 0:12 / 0:24), on the right the Přepis link or transcript state — identical to Voice message.
  • Transcript block .vm-tr under the row, same as Voice message; unplayable media shows the same error + download link.

Best practices

Do

  • Pass poster (first frame) so the circle is not an empty grey disc.
  • Use the same host wiring as Voice message: unplayed, onEnded chaining, retry.

Don't

  • Put the circle into a bubble or crop it to another shape.
  • Change the ring colour or width — the ring is the progress, --accent 3 px (AD 10 Oct 2026).

Content

  • Same labels as Voice message; the play name is "Přehrát video".
  • Voice message — same player, transcript and states.
  • Video message — rectangular video.
  • Chat thread — the thread and the message meta.

Source: docs/voice-message/video-note.usage.md · GitLab