Components › Records & data › Voice message › Video message

Video message

canon

A 16:9 video in a chat bubble with duration on a scrim, a progress bar, a time row, Přepis link and optional caption.

acrm !4918 (DS) + !4935 (Komunikace) + !4956 (44 px tap target), prototype proto/chat-hlasove-zpravy@6ed969dc9 (owner approved 8 Oct 2026). Family split from discussion/voice-message on 11 Oct 2026 (owner R43 a). Not on dev with data (stories only). Canon 14 Oct 2026: dev check after !4957 + !4982 — 390 px 64 bars × 3.7 px, gap 0; time without tabular-nums (StableTime). Signed off by AD. Own stories + light/dark baseline: acrm !5079 (Default · In-out · States; fixed wrapping of „Přepis se nepodařil · Zkusit znovu“ under the 200 px circle).

Used in no file in the app (main)

@acrm/ui <VideoMessage>.vmx .vv-msg .vv-frame .vv-dur +12SourceStory
ExamplesCodeUsageAccessibilityChangelog

A 16:9 video inside a chat bubble. React <VideoMessage> (packages/ui/src/components/VoiceMessage.tsx) renders .cht-msg.vmx.vv-msg with .vv-frame (apps/web/src/ds/voice-message.css) over a real <video playsInline preload="metadata">. Same props as Video note plus caption.

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

When to use

  • A regular video sent in a chat (recording, clip), incoming or outgoing, with or without a caption.

When not to use

  • A round video note — use Video note.
  • Audio only — use Voice message.
  • A video file the user should download or open elsewhere — use Attachment.

Anatomy

  • Bubble .cht-msg.vv-msg, width 360 px (capped by the thread like Voice message; 88 % on phone).
  • Frame .vv-frame: one button, full width, aspect-ratio: 16 / 9, --radius-sm, video object-fit: cover, poster until play.
  • Play icon .vn-ico in the centre, hidden while playing.
  • Duration .vv-dur on a scrim rgba(0,0,0,.55) with white text in the corner — the one fixed colour of the family (over video, theme-independent; AD 10 Oct 2026).
  • Progress .vv-bar: 3 px --accent strip along the bottom edge of the frame.
  • Row .vv-row (height --control-h-sm): 0:00 / 1:12 in .vm-time, on the right the Přepis link or transcript state.
  • Transcript block .vm-tr, then optional caption (.cht-msg-t), then message meta.

Best practices

Do
  • Pass poster so the bubble does not show an empty frame.
  • Put the message text into caption, not into a separate bubble.
Don’t
  • Change the aspect ratio per video — the frame is always 16:9, the video is cropped (cover).
  • Add more fixed colours over the video; the scrim is the only exception.

Content

  • Same labels as Voice message; the play name is "Přehrát video".
  • Caption is plain message text (.cht-msg-t).
  • Voice message — same transcript and states.
  • Video note — round video without a bubble.
  • Attachment — files to download.
  • Chat thread — the bubble and the thread.

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