Scenes Stock Element

You can use this Stock Element by extending the exported global: window.casthub.elements.scenes

The Scenes Element displays a grid of Scenes that can be switched to/from. It is used in a few of our Modules, including the OBS Scenes Module.

Setting and Adding Scenes

Adding Scenes is relatively easy. You have two options: add or set. Whilst similar, there are some differences:

  • set takes a single Object parameter using the id => sceneObject structure. It will also remove and existing Scenes that are not in the Object.
  • add takes two parameters, id and sceneObject. It doesn't affect other Scenes and will just add the specified Scene.

The following example shows the usage of both:

this.add('test-1', {
    title: 'Scene 1',
});

// Since this doesn't include `test-1`, it will be removed.
this.set({
    'test-2': {
        title: 'Scene 2',
    },
    'test-3': {
        title: 'Scene 3',
    },
});

Removing Scenes

Removing a Scene is pretty straightforward:

this.add('test-1', {
    title: 'Scene 1',
});

this.remove('test-1');

Responding to Scene changes

Once the User has selected a new Scene, it's up to the Module to decide how to work with that. You can override the setScene method to implement this logic.

setScene(id) {
    // The User has selected the Scene with ID `id`.
}

Setting the Active Scene

Since all software responds to changes differently, you'll have to manually set the currently active Scene. For example, you could set it immediately after the User sets it, or wait for an asynchronous Event before setting it.

this.setActive('scene-id');