Ir al contenido

Una alerta con cola

Si llegan dos follows a la vez y los pintas directamente, el segundo borra al primero antes de que se lea. Widget.queue los pone en fila: cada alerta sale cuando acaba la anterior.

manifest.json
{
"events": ["Twitch.Follow", "Kick.Follow", "Twitch.Sub"],
"strings": {
"es": { "follow": "¡Gracias por el follow, {name}!", "sub": "¡{name} se ha suscrito!" },
"en": { "follow": "Thanks for the follow, {name}!", "sub": "{name} just subscribed!" }
},
"menu": { "sections": [] }
}
index.html
<div id="banner"></div>
style.css
html,
body {
margin: 0;
background: transparent;
}
#banner {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
padding: 16px 32px;
font: 700 36px system-ui, sans-serif;
color: #ffffff;
background: #6d28d9;
opacity: 0;
transition: opacity 0.3s;
}
#banner.visible {
opacity: 1;
}
script.js
const banner = document.querySelector("#banner");
function thank(key) {
return ({ user }) => {
Widget.queue.push(() => {
Widget.dom.text(banner, Widget.t(key, { name: user }));
banner.classList.add("visible");
return () => banner.classList.remove("visible");
}, { duration: 6 });
};
}
Widget.on("Twitch.Follow", thank("follow"));
Widget.on("Kick.Follow", thank("follow"));
Widget.on("Twitch.Sub", thank("sub"));
  • La función que pasas a push pinta la alerta. Lo que devuelve (aquí, una función que quita la clase visible) se ejecuta cuando acaba su duración: ahí se recoge todo lo que se puso.
  • duration: 6 son los segundos que se ve. Sin él, vale queue.durationSeconds del manifest (5 por defecto).
  • El nombre del espectador pasa por Widget.t y Widget.dom.text, así que nunca se interpreta como HTML.
  • Que una sub pase delante de los follows: { duration: 6, priority: 1 }. Con prioridad, la tarea sale antes que las de menos.
  • Plegar muchos follows en uno: { group: "follow" }. Al empezar la alerta se pliegan en ella las pendientes del grupo, y la tarea recibe cuántas en folded para escribir «y 4 más».
  • Respetar el corte: si la tarea espera algo, mira signal.aborted tras cada espera antes de pintar: Widget.queue.clear() aborta la tarea en curso.