reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
ReplayScrubber
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

ReplayScrubber

Shell

Seek through session activity, idle and unloaded ranges, density, and event markers; commit seeking after drag or keyboard navigation ends.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ReplayScrubber, groupReplayMarkers } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

활동 구간과 이벤트 마커가 있는 탐색 트랙

Playhead 45s · preview — · marker none

Striped tail is still loading

Usage guidance

Best practices

  • Connect actual seeking only to onSeek. onPreview is for visual feedback.
  • start, end, position, segments, and markers use the same absolute millisecond coordinates. Activity buckets divide the full [start, end] interval evenly.
  • A buffer segment means data has not arrived yet; a gap means no data exists. This determines whether the player waits or skips.

Usage to avoid

  • Do not pass thousands of markers. Prioritize and reduce them to roughly one hundred.

Usage examples

Seek track with segments and markers

ReplayScrubber

PropTypeDefaultDescription
startRequirednumber—재생 가능한 첫 시각(절대값, 보통 epoch ms)
endRequirednumber—재생 가능한 마지막 시각
positionRequirednumber—현재 플레이헤드. [start, end]로 클램프
segmentsReplayScrubberSegment[]—활동 분류 구간. active/inactive/gap/buffer
bufferedArray<{ start: number; end: number }>—이미 로드된 범위
activitynumber[]—0..1로 정규화한 활동 밀도 버킷. 로그 스케일 영역으로 그린다
markersReplayScrubberMarker[]—트랙 위 관심 지점. 가까운 마커는 하나로 합쳐진다
onSeekRequired(time: number) => void—포인터·키보드 조작이 끝났을 때 한 번 호출
onPreview(time: number | null) => void—드래그·호버 중 미리보기 시각. 비싼 seek에 쓰지 않는다
onMarkerSelect(marker: ReplayScrubberMarker) => void—마커 선택. 생략하면 해당 시각으로 seek
formatTime(time: number) => string—배지와 aria-valuetext 포맷. 기본 start 기준 m:ss
stepMsnumber5000화살표 키 이동량
largeStepMsnumber30000PageUp/PageDown·Shift+화살표 이동량
disabledbooleanfalse모든 조작을 비활성화
labelsReplayScrubberLabels—접근성 문구 오버라이드
classNamestring—추가 클래스
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

ReplayScrubber 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

PreviousQueryWorkspaceNextReplayTransport