ReplayTransport

Shell

Control session playback, jumps, speed, idle skipping, fullscreen, and timecode display while the host owns playback state.

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { ReplayTransport, formatReplayElapsed } from "@reopt-ai/opt-ui";

Live preview

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

100%

재생 상태를 호스트가 소유하는 트랜스포트

모의 재생 · 1:00–1:40 비활성 구간 · Space 재생, ←/→ 이동, F 전체화면

정지 · 1× · 대기 건너뛰기 켜짐 · 전체화면 꺼짐

Usage guidance

Best practices

Group shortcuts through ReplayPlayerLayout.shortcuts and pass only display strings here.
Use clock timecodes when comparing playback with logs. Supply the session's actual timestamps.

Usage to avoid

Keep playback state in the player engine as the single source of truth, rather than inside the component.
The example timer simulates a recording. In production, subscribe to the engine's time, playback, and end events, and connect seek/play/pause/speed/skipInactive commands.

Usage examples

Transport with playback state owned by the host

ReplayTransport

Prop	Type	Default	Description
playingRequired	boolean	—	재생 중 여부
ended	boolean	false	끝에 도달. 재생 버튼이 다시 시작을 제안
positionRequired	number	—	절대 플레이헤드 시각
startRequired	number	—	녹화 시작 시각(절대값)
endRequired	number	—	녹화 종료 시각(절대값)
onTogglePlayRequired	() => void	—	재생/일시정지 토글. ended면 처음부터 다시 시작
onSkipRequired	(deltaMs: number) => void	—	부호 있는 시간만큼 이동
onSkipToStart	() => void	—	처음으로. 생략하면 버튼 숨김
jumpMs	number	10000	앞뒤 점프 버튼 이동량(ms)
speedRequired	number	—	현재 배속
speeds	readonly number[]	[0.5, 1, 1.5, 2, 3, 4, 8, 16]	선택 가능한 배속 목록
onSpeedChangeRequired	(speed: number) => void	—	배속 변경 콜백
skipInactiveRequired	boolean	—	비활성 구간 건너뛰기 여부
onSkipInactiveChangeRequired	(skip: boolean) => void	—	건너뛰기 토글 콜백
fullscreen	boolean	—	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	있으면 전체화면 버튼 표시
timecode	"elapsed" \| "clock"	"elapsed"	경과 시간 또는 실제 시각 표시 모드
onTimecodeChange	(mode: "elapsed" \| "clock") => void	—	있으면 타임코드를 클릭해 전환
formatClock	(time: number) => string	—	clock 모드 포맷
disabled	boolean	false	모든 조작을 비활성화
children	ReactNode	—	오른쪽에 추가 컨트롤
labels	ReplayTransportLabels	—	문구 오버라이드
shortcuts	ReplayTransportShortcuts	—	툴팁에 표시할 단축키
className	string	—	추가 클래스

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

PageAside

Shells

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

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

BranchSelect

Shells

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

DesignGuidePanel

Shells

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

QuickActions

Shells

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

ReplayTransport

Shell

Control session playback, jumps, speed, idle skipping, fullscreen, and timecode display while the host owns playback state.

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { ReplayTransport, formatReplayElapsed } from "@reopt-ai/opt-ui";

Live preview

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

100%

재생 상태를 호스트가 소유하는 트랜스포트

모의 재생 · 1:00–1:40 비활성 구간 · Space 재생, ←/→ 이동, F 전체화면

정지 · 1× · 대기 건너뛰기 켜짐 · 전체화면 꺼짐

Usage guidance

Best practices

Group shortcuts through ReplayPlayerLayout.shortcuts and pass only display strings here.
Use clock timecodes when comparing playback with logs. Supply the session's actual timestamps.

Usage to avoid

Keep playback state in the player engine as the single source of truth, rather than inside the component.
The example timer simulates a recording. In production, subscribe to the engine's time, playback, and end events, and connect seek/play/pause/speed/skipInactive commands.

Usage examples

Transport with playback state owned by the host

ReplayTransport

Prop	Type	Default	Description
playingRequired	boolean	—	재생 중 여부
ended	boolean	false	끝에 도달. 재생 버튼이 다시 시작을 제안
positionRequired	number	—	절대 플레이헤드 시각
startRequired	number	—	녹화 시작 시각(절대값)
endRequired	number	—	녹화 종료 시각(절대값)
onTogglePlayRequired	() => void	—	재생/일시정지 토글. ended면 처음부터 다시 시작
onSkipRequired	(deltaMs: number) => void	—	부호 있는 시간만큼 이동
onSkipToStart	() => void	—	처음으로. 생략하면 버튼 숨김
jumpMs	number	10000	앞뒤 점프 버튼 이동량(ms)
speedRequired	number	—	현재 배속
speeds	readonly number[]	[0.5, 1, 1.5, 2, 3, 4, 8, 16]	선택 가능한 배속 목록
onSpeedChangeRequired	(speed: number) => void	—	배속 변경 콜백
skipInactiveRequired	boolean	—	비활성 구간 건너뛰기 여부
onSkipInactiveChangeRequired	(skip: boolean) => void	—	건너뛰기 토글 콜백
fullscreen	boolean	—	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	있으면 전체화면 버튼 표시
timecode	"elapsed" \| "clock"	"elapsed"	경과 시간 또는 실제 시각 표시 모드
onTimecodeChange	(mode: "elapsed" \| "clock") => void	—	있으면 타임코드를 클릭해 전환
formatClock	(time: number) => string	—	clock 모드 포맷
disabled	boolean	false	모든 조작을 비활성화
children	ReactNode	—	오른쪽에 추가 컨트롤
labels	ReplayTransportLabels	—	문구 오버라이드
shortcuts	ReplayTransportShortcuts	—	툴팁에 표시할 단축키
className	string	—	추가 클래스