Video trimmer
The trim timeline of a video editor: two edge handles over a filmstrip frame the part kept, the outside dimmed, a playhead to scrub — every part stylable, the keyboard included.
Web only — React, from @krizaka/ui/video-trimmer. Beta: its API may still change in a minor version.
When to use
- To keep a part of a clip before publishing it: a story, a highlight, a reply.
- To choose a segment of any timeline (a sound with a waveform as
children, a recording).
When not to use
- For one value or a range of numbers without a media: a slider.Use instead: Slider
- To play a video: the video player.Use instead: Video player
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { VideoTrimmer } from "@krizaka/ui/video-trimmer";Examples
Filmstrip
A 42-second clip, 12 seconds kept, frames in the track.
With the playhead
time and onSeek: the playhead stays within the part kept.
Custom parts
classNames and renderHandle: thin handles over a waveform band.
Props
Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included.
| Prop | Type | Default | Description |
|---|---|---|---|
durationrequired | number | — | The length of the clip, in seconds. |
children | ReactNode | — | Track content instead of the filmstrip (a waveform, a coloured band). |
classNames | Partial<Record<"root" | "base" | "header" | "track" | "range" | "frame" | "kept" | "strip" | "shade" | "grip" | "handle" | "playhead", string>> | {} | Classes per part: root, header, kept, track, strip, frame, shade, range, handle, grip, playhead. |
defaultValue | readonly [number, number] | — | The part kept at first, uncontrolled. Default: the whole clip. |
disabled | boolean | — | Not available (a render is running). |
formatTime | ((seconds: number) => string) | (seconds: number) => `${formatClock(seconds)}.${Math.floor((Math.max(0, seconds) % 1) * 10)}` | A time as read and shown. Default m:ss with tenths. |
frames | readonly string[] | — | Pictures of the clip, in order: the filmstrip. |
labels | Partial<VideoTrimmerLabels> | — | The words, passed translated; English by default. |
largeStep | number | 1 | Shift + arrow, Page Up / Page Down, in seconds. Default 1. |
minLength | number | 0.5 | The shortest part that can be kept, in seconds. Default 0.5. |
onSeek | ((time: number) => void) | — | Called when the playhead is moved (a drag on the track, the arrows on the playhead). |
onValueChange | ((value: [number, number]) => void) | — | Called on every move of a handle. |
onValueCommit | ((value: [number, number]) => void) | — | Called once a drag or a key press ends: render a preview, save. |
renderHandle | ((edge: "start" | "end") => ReactNode) | — | The content of a handle (default: two grip lines). |
showHeader | boolean | true | Shows the times and the length kept above the track. Default true. |
step | number | 0.1 | One arrow press, in seconds. Default 0.1. |
time | number | — | The time played, in seconds: shows the playhead. |
value | readonly [number, number] | — | The part kept, [start, end] in seconds (controlled). |
Accessibility
- Each handle is a
slidernamed by a prop (“Start”, “End”), its bounds set by the other handle andminLength. - The values are read as times (
aria-valuetext,formatTime), not as seconds. - The playhead is a slider too when
onSeekis given; read-only otherwise.
Keyboard
| Keys | Action |
|---|---|
| Arrow keys | Move the focused handle (or the playhead) by step; with Shift by largeStep. |
| Page Up / Page Down | Move by largeStep. |
| Home / End | To the start or the end, as far as the other handle allows. |
Best practices
- Render the preview on
onValueCommit(the end of a drag), not on every move. - Set
minLengthto the shortest clip the product accepts, andlargeStepto a second. - Make the filmstrip from a few frames of the clip (8 to 12), the same width each.
- Restyle any part with
classNamesand the handles withrenderHandle; the alignment stays (each handle on its value by its outer edge).
Related components
Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Video player
A video with accessible controls — HLS through an hls.js loaded only when needed, signed sources resolved at the last moment, subtitles, speed, full screen, a pause when it leaves the screen.
Area chart
A volume over time: a line over a soft wash, or stacked areas whose parts add up to a total.