Skip to content
CroStreamUI kit

Media

Sound, video and pictures: players with a scrubber and waveform, one-at-a-time playback, a lightbox, drop zones, file pickers and an upload queue.

01MediaPlayer

MediaPlayer

One player for clips and sounds. Controls sit under the picture, never over it, so they stay readable on any frame. Starting one pauses the others, and volume is shared and remembered.

Video A Moment clip with a poster and captions. Click the picture to play, double-click for full screen.
Audio with a waveform The waveform is the seek bar: click, drag or use the arrow keys.
Follow chime follow-chime.wav · Follow alert
Alert
Audio with a scrubber The plain seek bar shows what's loaded and the time under the pointer.
Hype horn hype-horn.wav · Hype train
Compact One row for lists: play, seek, time and mute.
Can't play A missing file says so in words, with a way to try again.
old-raid-alert.mp3 Moved or deleted
Keyboard Works from any control in the player; the seek bar takes the arrows when it has focus.
Spaceor K
Play or pause
←or →
Back or forward 5 s
Jor L
Back or forward 10 s
M
Mute
F
Full screen (video)
C
Captions (video)

02Scrubber

Scrubber

A slim time slider: played, loaded and the time under the pointer. Screen readers hear minutes and seconds, never a bare number.

With loaded ranges Lighter bars are what has loaded; hover to preview a time, drag to seek.
  • --cs-accent-fg
  • --cs-line-3

1:23 of 3:05 · “1 minute 23 seconds of 3 minutes 5 seconds”

Small, and unknown length Small for compact rows; without a duration it waits, disabled.

03Waveform

Waveform

A seek bar shaped like the sound. Real peaks when they're known; otherwise a stable shape made from the item's id, so every sound has its own silhouette.

Real peaks Peaks measured from the file; played bars light, hover previews the jump.

0:01 of 0:04

Seeded shapes No peaks yet? The id gives each sound a stable shape.
water-drop.wav
follow-chime.wav
sub-fanfare.wav

04PlaybackCoordinator

PlaybackCoordinator

Headless: one sound plays at a time, and the volume is shared and remembered. Wrap a region to give it its own rules; without one, players share the page's.

Sound alerts Start one and the playing one stops. The volume follows you between rows and visits.
Alert sounds Nothing playing

06DropZone

DropZone

Drag files onto a region and it says where they'll land: the whole library, or the folder under the pointer, which lights up. Screen readers hear the same. Only real files react, never drags within the page.

Upload Drop files anywhere here or on a folder; the button does the same from the keyboard. Names with “fail” fail halfway to show Retry.
Media
  • Sounds
  • Moments
  • Images

Drag files here, or onto a folder

Uploads

Nothing uploading

07FileTrigger

FileTrigger

A button that opens the system file picker, checking type and size before you see the files. The keyboard path to anything a DropZone takes.

Kinds accept narrows the picker; maxSize rejects with a reason.
Limits Rejected files come back with plain-words reasons.

Up to 25 MB each · sounds, clips and pictures

08UploadQueue

UploadQueue

Every file's own progress, a way to cancel it, and Retry with the reason when it fails. Optionally mirrors the batch in one toast that turns into a summary.

Every state Waiting, uploading, done, failed and cancelled.

Upload states

2 files to go · 1 done · 1 failed
  • sub-fanfare.wav Waiting, 793 KB
  • moment-0044-hype.webm Uploading, 42% · 18 MB
  • overlay-frame.png Uploaded, 1.1 MB
  • giant-recording.mov Failed, 30 MB

    Bigger than 25 MB. Trim it first.

  • old-alert.mp3 Cancelled, 394 KB

    Cancelled