Remote Theatre

Controlling TheatreJS over Broadcast Channel.

Open 2 windows, one for the app, and one for the editor

How to Use

Create a RemoteTheatre object, this acts as the Theatre Controller. All Sheets and SheetObjects should be created with this.

const theatre = new RemoteTheatre(IS_DEV, IS_EDITOR);

Pass along the studio object to control remotely

if (IS_DEV) {
  studio.initialize();
  theatre.studio = studio;
  theatre.handleEditorApp();
}

Load your project and setup sheets/sheet objects

theatre.project = getProject('Example Project', { state });
theatre.project.ready.then(() => {
  const sheetName = 'Test Sheet';
  theatre.sheet(sheetName);
  theatre.sheetObject(sheetName, 'Box', {
    x: 100,
    y: 100,
    color: types.rgba({ r: 255, g: 255, b: 255, a: 1 }),
  }, (values: any) => {
    const div = divRef.current;
    if (!div) return;
    div.style.left = `${values.x}px`;
    div.style.top = `${values.y}px`;
    div.style.background = rgbaToHex(values.color);
  });
});