Video message
canonA 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)
Import
import { VideoMessage } from '@acrm/ui'Props
VideoMessage packages/ui/src/components/VoiceMessage.tsx
| Name | Type | Default | Description |
|---|---|---|---|
caption | string | — | Popisek videa pod přehrávačem (text zprávy). |
poster | string | — | Náhledový snímek (první políčko); bez něj tmavý podklad. |
src * | string | — | URL média (GET /chats/attachments/:id). |
durationSec | number | null | — | Délka z DTO; bez ní (0/undefined) se použije délka z metadat média. |
out | boolean | — | true = odchozí zpráva (akcentní bublina, primární play). |
time | string | — | Čas zprávy, už naformátovaný hostitelem. |
state | 'sent' | 'delivered' | 'read' | — | Stav doručení odchozí zprávy; read = akcentní checks. |
stateLabel | string | — | Sr-only popisek stavu doručení. |
fromLabel | string | — | Kdo zprávu poslal (sr-only prefix, jako ChatBubble.fromLabel). |
published | boolean | — | IM-3b — zpráva je zveřejněná u kontaktu: třída .pub jako u ChatBubble.published; tvar bubliny se NEMĚNÍ (zadavatel 13. 10. 2026), zveřejnění nese metaExtra. |
metaExtra | ReactNode | — | IM-3b — drobná meta za časem (kdo · kdy zveřejnil / „Soukromé"), jako ChatBubble.metaExtra. |
reactions | ReactNode | — | Reakce na zprávu (odznaky přes spodní hranu bubliny) — jako ChatBubble.reactions. |
reactable | boolean | — | Na zprávu jde reagovat (ťuknutí ukáže „+") — jako ChatBubble.reactable. |
transcript | VoiceTranscript | null | — | — |
onRetry | () => void | — | — |
transcriptOpen | boolean | — | Přepis rozbalený (řízené); bez toho se drží lokálně (výchozí sbalený). |
defaultTranscriptOpen | boolean | — | — |
onTranscriptOpenChange | (open: boolean) => void | — | — |
onPlay | () => void | — | Spuštění přehrávání (host zruší „nepřehráno"). |
onEnded | () => void | — | Dohrání do konce (host naváže další nepřehranou zprávu). |
locale | string | — | Jazyk pro názvy jazyků přepisu (výchozí cs). |
labels | Partial<VoiceMessageLabels> | — | — |
className | string | — | — |
ref | Ref<VoiceMessageHandle> | — | — |
CSS classes
.vmx.vv-msg.vv-frame.vv-dur.vv-bar.vv-row.vn-ico.vm-time.vm-grow.vm-trlink.vm-trst.vm-tr.vm-tr-meta.vm-tr-t.vm-seg.vm-copy
Files
packages/ui/src/components/VoiceMessage.tsxpackages/ui/src/components/voice-message-parts.tsxapps/web/src/pages/komunikace/ChatMessageAttachments.tsxapps/web/src/ds/voice-message.css