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)
Default
Ešte jedna vec — ukážem vám, ako to vyzerá na mieste. Toto je tá miestnosť, kde by mali byť tie nové stoly. Rozmery vám pošlem večer.
export const Default = () => {
const src = useWav(72);
return (
<VideoMessage
src={src}
durationSec={72}
time="10:21"
caption="Video z prohlídky skladu"
transcript={SK}
/>
);
};Variants
Ešte jedna vec — ukážem vám, ako to vyzerá na mieste. Toto je tá miestnosť, kde by mali byť tie nové stoly. Rozmery vám pošlem večer.
Ešte jedna vec — ukážem vám, ako to vyzerá na mieste. Toto je tá miestnosť, kde by mali byť tie nové stoly. Rozmery vám pošlem večer.
export const InOut = () => {
const src = useWav(72);
return (
<div style={grid}>
<Labeled label="Příchozí">
<VideoMessage
src={src}
durationSec={72}
time="10:21"
caption="Video z prohlídky skladu"
transcript={SK}
/>
</Labeled>
<Labeled label="Odchozí, přečteno">
<VideoMessage
src={src}
durationSec={72}
time="10:22"
out
state="read"
caption="Video z prohlídky skladu"
transcript={SK}
/>
</Labeled>
</div>
);
};States
Ešte jedna vec — ukážem vám, ako to vyzerá na mieste. Toto je tá miestnosť, kde by mali byť tie nové stoly. Rozmery vám pošlem večer.
Ešte jedna vec — ukážem vám, ako to vyzerá na mieste. Toto je tá miestnosť, kde by mali byť tie nové stoly. Rozmery vám pošlem večer.
export const States = () => {
const src = useWav(72);
const rows: Array<[string, VoiceTranscript | null, boolean?]> = [
['Přepis (sbalený)', SK],
['Skrýt přepis (rozbalený)', SK, true],
['Přepisuji…', { status: 'processing' }],
['Bez řeči', { status: 'empty' }],
['Přepis se nepodařil · Zkusit znovu', { status: 'error' }],
['Přepis vypnutý (bez odkazu)', null],
];
return (
<div style={grid}>
{rows.map(([label, transcript, open]) => (
<Labeled key={label} label={label}>
<VideoMessage
src={src}
durationSec={72}
time="10:21"
caption="Video z prohlídky skladu"
transcript={transcript}
defaultTranscriptOpen={open}
onRetry={() => {}}
/>
</Labeled>
))}
</div>
);
};