WidgetAlerts and AlertRuntime

No-code alerts (the Alerts template) are designed on the editor canvas and saved in alerts of manifest.json. Two global objects put them on screen, and both let you add your own code.

WidgetAlerts

The interpreter that draws the manifest.alerts design using Widget.queue. It only exists if the manifest has alerts.

• WidgetAlerts.start(hooks?): starts the design alerts. Hooks are optional.
• WidgetAlerts.clear(): empties the alert queue, removes the one on screen and cuts its sound, like “Clear alerts” from Streamer.bot.

The start hooks:

• before(alert): before an alert goes in the queue. Return false to skip it.
• after(alert): when the alert is removed from the screen.
• layer(layer, element, alert): every layer once built, to change it your way. Hidden layers (hidden) are not built.

WidgetAlerts.start({
  before(alert) {
    return alert.data.user !== "annoying_bot";
  },
});

AlertRuntime

The engine of the visual editor alerts. It lives inside the generated part of script.js (the one marked with ⟦estudio⟧), so your code goes outside that mark, in your part of the file.

• AlertRuntime.features: what this engine carries according to the design (sound, video, follow folding…).
• AlertRuntime.alerts: the design alerts (manifest.alerts); they can be changed on the fly.
• AlertRuntime.show(event, data?): queues the alert that listens to that event with this data, as if it came from Streamer.bot. Returns false if nothing is shown.
• AlertRuntime.render(alertId, variantId, sample?): draws a variant still, with sample data, and returns its element.
• AlertRuntime.clear(): empties the queue, removes the alert on screen and cuts its sound.

Hooks: AlertRuntime.hooks

Assign them from your part of script.js:

• AlertRuntime.hooks.before(alert): before an alert goes in the queue; false skips it.
• AlertRuntime.hooks.after(alert): when the alert is removed from the screen.
• AlertRuntime.hooks.layer(name, element, alert): every layer and group once built, by their name in the code.

AlertRuntime.hooks.layer = (name, element, alert) => {
  if (name === "title") element.style.letterSpacing = "0.05em";
};

Playback: AlertRuntime.timeline

This is what the editor uses to play an alert outside the queue and without sound.

• AlertRuntime.timeline.state: status ("idle", "playing" or "paused"), phase ("enter", "active", "exit" or null), alertId, variantId and nodes.
• AlertRuntime.timeline.play(alertId, variantId, options?): enter, active phase and exit. With nodes only those nodes are animated. Returns true if it finishes and false if it stops early.
• AlertRuntime.timeline.pause(): stops at the exact moment, including the active phase clock; false if it was not playing.
• AlertRuntime.timeline.resume(): continues from where it stopped; false if it was not paused.
• AlertRuntime.timeline.restart(): starts the last one again, with the same options.
• AlertRuntime.timeline.stop(): stops and removes the one playing.
• AlertRuntime.timeline.watch(callback): notifies each state change; returns how to stop listening.