ReplayPlayerLayout

Shell

Arrange a replay stage, metadata, controls, and resizable inspector with player-wide fullscreen and shortcuts that avoid text inputs.

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { ReplayPlayerLayout, replayShortcutKey } from "@reopt-ai/opt-ui";

Live preview

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

100%

스테이지·컨트롤·인스펙터를 하나의 키보드 범위로

모의 녹화입니다. 1:00–1:40은 비활성 구간이며, 건너뛰기를 끄면 그대로 재생합니다.

https://shop.example/checkout · 1280×720 · Chrome · macOS

모의 녹화 · 0초 · 스테이지에 포커스한 뒤 Space로 재생하세요

Usage guidance

Best practices

replayShortcutKey produces shortcut key names such as space, arrowleft, shift+arrowright, mod+arrowleft, and f.
The host owns fullscreen state. If the browser exits fullscreen, onFullscreenChange(false) notifies the host.
Pass the same fullscreen state and callback to Layout and Transport. Keyboard events inside an iframe do not bubble to the parent, so wire iframe-engine shortcuts separately.

Usage to avoid

Do not call requestFullscreen directly on the stage iframe; the controls must remain visible too.

Usage examples

Arrange the stage, controls, inspector, and shortcuts

ReplayPlayerLayout

Prop	Type	Default	Description
stageRequired	ReactNode	—	녹화가 렌더되는 영역(iframe 호스트)
meta	ReactNode	—	스테이지 위 얇은 바: URL, 창, 기기
controls	ReactNode	—	스테이지 아래 트랜스포트와 스크러버
inspector	ReactNode	—	측면 패널. 생략하면 패널 없음
inspectorOpen	boolean	true	인스펙터 표시 여부(제어됨)
onInspectorOpenChange	(open: boolean) => void	—	있으면 토글 버튼 표시
inspectorSize	number	34	인스펙터 초기 폭(%)
layoutId	string	—	리사이즈 레이아웃 영속 id
fullscreen	boolean	false	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	전체화면 변경 콜백. 브라우저가 스스로 나가도 호출된다
shortcuts	ReplayShortcutMap	—	포커스가 안에 있고 입력 필드가 아닐 때만 동작. false를 반환하면 전파
overlay	ReactNode	—	스테이지 위 오버레이: 로딩, 오류, 건너뛰는 중
labels	ReplayPlayerLayoutLabels	—	문구 오버라이드
className	string	—	추가 클래스

View test results

테스트 커버리지

2026년 7월 9일

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

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

테스트를 추가한 뒤 `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.

ReplayPlayerLayout

Shell

Arrange a replay stage, metadata, controls, and resizable inspector with player-wide fullscreen and shortcuts that avoid text inputs.

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { ReplayPlayerLayout, replayShortcutKey } from "@reopt-ai/opt-ui";

Live preview

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

100%

스테이지·컨트롤·인스펙터를 하나의 키보드 범위로

모의 녹화입니다. 1:00–1:40은 비활성 구간이며, 건너뛰기를 끄면 그대로 재생합니다.

https://shop.example/checkout · 1280×720 · Chrome · macOS

모의 녹화 · 0초 · 스테이지에 포커스한 뒤 Space로 재생하세요

Usage guidance

Best practices

replayShortcutKey produces shortcut key names such as space, arrowleft, shift+arrowright, mod+arrowleft, and f.
The host owns fullscreen state. If the browser exits fullscreen, onFullscreenChange(false) notifies the host.
Pass the same fullscreen state and callback to Layout and Transport. Keyboard events inside an iframe do not bubble to the parent, so wire iframe-engine shortcuts separately.

Usage to avoid

Do not call requestFullscreen directly on the stage iframe; the controls must remain visible too.

Usage examples

Arrange the stage, controls, inspector, and shortcuts

ReplayPlayerLayout

Prop	Type	Default	Description
stageRequired	ReactNode	—	녹화가 렌더되는 영역(iframe 호스트)
meta	ReactNode	—	스테이지 위 얇은 바: URL, 창, 기기
controls	ReactNode	—	스테이지 아래 트랜스포트와 스크러버
inspector	ReactNode	—	측면 패널. 생략하면 패널 없음
inspectorOpen	boolean	true	인스펙터 표시 여부(제어됨)
onInspectorOpenChange	(open: boolean) => void	—	있으면 토글 버튼 표시
inspectorSize	number	34	인스펙터 초기 폭(%)
layoutId	string	—	리사이즈 레이아웃 영속 id
fullscreen	boolean	false	전체화면 상태(호스트 소유)
onFullscreenChange	(fullscreen: boolean) => void	—	전체화면 변경 콜백. 브라우저가 스스로 나가도 호출된다
shortcuts	ReplayShortcutMap	—	포커스가 안에 있고 입력 필드가 아닐 때만 동작. false를 반환하면 전파
overlay	ReactNode	—	스테이지 위 오버레이: 로딩, 오류, 건너뛰는 중
labels	ReplayPlayerLayoutLabels	—	문구 오버라이드
className	string	—	추가 클래스