useScena

The factory function that creates a widget manager. Call it once to get a reusable object with mount and unmount methods — each mount creates an independent instance.

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

const scena = useScena();

Returns

Returns a UseScenaReturns object with the following properties:

mount

Mounts the widget into a target element and returns a promise that resolves with a ScenaInstance once the Svelte component is rendered and the event bus is ready. The only required config field is video.src — everything else uses sensible defaults.

const instance = await scena.mount({
  video: { src: '/video.mp4' },
  size: ComponentSize.MD,
  shape: ComponentShape.CIRCLE,
});

The second argument specifies the mount target — any HTMLElement or ShadowRoot. When omitted, the widget mounts into document.body as a floating overlay:

const container = document.getElementById('widget-root');

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

unmount

Destroys a previously mounted widget and removes it from the DOM:

await scena.unmount(instance);

After unmounting, all event handlers are cleared automatically.

Multiple instances

Each mount() call creates an independent widget. You can run several instances on the same page:

const scena = useScena();

const widget1 = await scena.mount({ video: { src: '/a.mp4' } });
const widget2 = await scena.mount({ video: { src: '/b.mp4' } });

// Unmount individually
await scena.unmount(widget1);