Theme

Sound

Jump to a component

Core · Media

Scrubber

Scrubber shows and sets the playhead: played, buffered and remaining time, with the current time and total length.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Scrubber for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

Scrubber for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for: Showing and setting the playhead of an episode or a short, over video or the player bar: played, buffered and remaining time, with chapter marks.
Not for: How far something being made has comeProgress
Seeking inside a voice line or a soundAudioPlayer
The playhead across the cut's tracksTimeline
Moving through the story in story orderStoryScrubber

Guidelines

It is a slider with spoken values ("3 minutes 12 seconds of 11 minutes 36 seconds"). Arrow keys move 10 seconds, Page keys a minute, Home and End jump to the ends.
Always over video or the player bar, so it uses the media tokens and stays the same in both themes.
showTimes={false} when the times are shown elsewhere (phone shorts).
markers draws chapter marks (in seconds) cut into the track.
The thumb grows and the track thickens under the pointer. Dragging follows the pointer with no easing; playback moves the fill linearly.

ScrubberExample.jsxReact

import { useState } from 'react';
import { Scrubber } from '@anicanon/sakuga/ui';

export default function ScrubberExample() {
  const [value, setValue] = useState(192);
  return (
    <Scrubber value={value} max={696} buffered={320} onChange={setValue} />
  );
}

Props`ScrubberProps`

valuerequired

number

maxrequired

number

markers

number[]

Chapter marks, in seconds.

buffered

number

step

number

label

string

showTimes

boolean

onChange

(seconds: number) => void

className

string

ScrubberExample.swiftiOS · coming soon

ScrubberExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

scrubber-trackScrubber: unplayed range.

bg-unplayed-mediawhite-a28rgba(255,255,255,0.28)

scrubber-bufferScrubber: buffered range.

bg-buffered-mediawhite-a45rgba(255,255,255,0.45)

scrubber-fillScrubber: played range.

accentcamellia-600#c2335f

accentcamellia-400#f4779f

scrubber-thumbScrubber: handle.

text-on-medianeutral-0#ffffff

scrubber-timeScrubber: timecodes.

text-on-medianeutral-0#ffffff

scrubber-markerScrubber: chapter marks cut into the track.

bg-medianeutral-950#07070a

Space and shape

scrubber-wrap-gap

gap-lg

12px

scrubber-height

its own value

24px

scrubber-track-height

its own value

4px

scrubber-track-before-radius

radius-full

9999px

scrubber-buf-height

its own value

4px

scrubber-buf-radius

radius-full

9999px

scrubber-fill-height

its own value

4px

scrubber-fill-radius

radius-full

9999px

scrubber-mark-top

its own value

calc(-1 * 2px)

scrubber-mark-width

line-strong

2px

scrubber-mark-height

its own value

8px

scrubber-mark-margin-left

its own value

calc(2px / -2)

scrubber-thumb-size

its own value

16px

scrubber-thumb-margin-top

its own value

calc(16px / -2)

scrubber-thumb-margin-left

its own value

calc(16px / -2)

scrubber-thumb-scale

its own value

.75

scrubber-track-before-hover-scale-y

its own value

1.5

scrubber-thumb-dragging-scale

its own value

1.25

scrubber-forced-thumb-edge-width

line-strong

2px

Type

scrubber-wrap-font

text-caption-strong

600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

scrubber-track-before-duration

motion-fast

160ms

scrubber-track-before-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)

scrubber-thumb-duration

motion-fast

160ms

scrubber-thumb-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)

Scrubber

Guidelines

PropsScrubberProps

Colour

Space and shape

Type

Motion

Props`ScrubberProps`