mantine-video 1.2.0 — the CC button that could never appear
Hey everyone 👋
New release for mantine-video (v1.2.0) — the Mantine-native video player — and it comes with a confession.
The button that could never appear
The player has always shipped a captions button in its control bar. It hid itself whenever there was no caption track to toggle... and there was no way to give it a track. No prop for it, and a <track> passed as a child rendered outside the <video> element, because that slot is the control bar. So textTracks.length stayed at 0 and the button returned null forever. Unreachable code, with a tooltip and an icon set.
What changed
A tracks prop, mirroring the existing sources one:
<Video
src="/clip.mp4"
tracks={[
{ src: '/en.vtt', srcLang: 'en', label: 'English', default: true },
{ src: '/it.vtt', srcLang: 'it', label: 'Italiano', kind: 'subtitles' },
]}
/>
With a track present the browser paints the cues over the video itself, and the CC button finally shows up. kind defaults to captions — the kind that includes non-speech sound like [door slams] — and subtitles is for translating the dialogue.
A takeaway for your own libraries 🙏
The accessibility linter had been reporting this the whole time. Someone had switched the rule off with a comment explaining that captions came through a compound <Video.Captions> API — a component that never existed. The justification read as more authoritative than the warning, so the warning lost.
If you suppress a lint rule, write the suppression so a reader can check it in thirty seconds: which prop, which test, when you last confirmed it. A suppressed warning is a claim, and claims go stale exactly like comments do — except this kind silences a tool that was telling you the truth.
I'd love your input
Are you using mantine-video in production? What are you building with it?
Would a track picker (multiple languages, chosen from the control bar) be useful, or is default enough?
Which extension should we polish next?
Drop a comment below — I read every one.
📦 npm: https://www.npmjs.com/package/@gfazioli/mantine-video
Replies