Preview
Preview mode applies temporary config overrides on top of the base config. When the user clicks the video container, preview mode stops and the widget returns to its original configuration.
This is useful for showing a compact or simplified version of the widget that expands on interaction — for example, a small circle that grows into a full portrait player with buttons and controls.
Config
The preview key accepts the same shape as ScenaOverrides — size, shape, and any component property can be overridden — plus two behavioral options. The base config defines how the widget looks after preview ends, and the preview config defines how it looks before the user interacts:
await scena.mount({
video: { src: '/video.mp4' },
size: ComponentSize.MD,
shape: ComponentShape.CIRCLE,
preview: {
size: ComponentSize.SM,
shape: ComponentShape.CIRCLE,
closeButton: false,
ctaButton: false,
},
});
When preview is active, the widget renders at sm / circle with no buttons. Clicking the video container stops preview and the widget transitions to md with all components visible.
Behavior options
Two boolean flags control what happens when preview stops:
| Option | Type | Default | Description |
|---|---|---|---|
keepTimeOnExpand | boolean | false | Preserve the current video position when expanding from preview |
keepMuteOnExpand | boolean | false | Preserve the mute state when expanding from preview |
await scena.mount({
video: { src: '/video.mp4' },
size: ComponentSize.MD,
shape: ComponentShape.CIRCLE,
preview: {
size: ComponentSize.SM,
closeButton: false,
ctaButton: false,
keepTimeOnExpand: true,
keepMuteOnExpand: true,
},
});
How it works
- If
previewis present in the config, preview mode activates automatically on mount. - Preview overrides are layered on top of the base config — the original config is never mutated.
- Clicking the video container stops preview mode and removes the overrides.
- The widget re-renders with the base config values immediately after preview stops.
During preview, the video container receives the rs-video-container--preview CSS class for custom styling.
Runtime API
Control preview through the instance:
// Start preview (applies overrides)
instance.preview.start();
// Stop preview (removes overrides)
instance.preview.stop();
// Check current state
console.log(instance.preview.isPreviewing);
// Read behavior flags set via config
console.log(instance.preview.isKeepTimeOnExpand);
console.log(instance.preview.isKeepMuteOnExpand);