0.0.2

Size

Configure widget dimensions with ComponentSize — xs, sm, md, lg, xl, xxl.

Widget dimensions are controlled by the size property, which selects from a predefined scale ranging from xs to xxl. All internal elements — video container, buttons, progress bar — scale proportionally, so you never need to adjust individual components manually.

Available sizes

Value	Description
`xs`	Extra small — minimal footprint
`sm`	Small
`md`	Medium (default)
`lg`	Large
`xl`	Extra large
`xxl`	Maximum size

Extra small

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.XS,
});

Small

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.SM,
});

Medium

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.MD,
});

Large

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.LG,
});

Extra large

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.XL,
});

Extra extra large

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.XXL,
});

Runtime

import { useScena, ComponentSize } from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

const instance = await scena.mount({
  video: { src: '/video.mp4' },
});

instance.config.mergeConfig({
  size: ComponentSize.LG,
});

The widget re-renders at the new size immediately. All child elements adapt automatically.

Overrides

Global size applies to all components at once, but each component can override it individually. This is useful when one element needs to stand out or stay compact regardless of the overall scale:

{
  videoContainer: { size: ComponentSize };
  videoLoader:    { size: ComponentSize };
  videoProgress:  { size: ComponentSize };
  videoControls:  { size: ComponentSize };
  videoVolume:    { size: ComponentSize };
  closeButton:    { size: ComponentSize };
  ctaButton:      { size: ComponentSize };
}

Overview

Structure of ScenaConfig and the principle of disabling components with false.

Shape

Set widget shape — circle, portrait, landscape, or square.