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.
{ "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": [] }}<div id="banner"></div>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;}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"));Cómo funciona
Sección titulada «Cómo funciona»- La función que pasas a
pushpinta la alerta. Lo que devuelve (aquí, una función que quita la clasevisible) se ejecuta cuando acaba su duración: ahí se recoge todo lo que se puso. duration: 6son los segundos que se ve. Sin él, valequeue.durationSecondsdel manifest (5 por defecto).- El nombre del espectador pasa por
Widget.tyWidget.dom.text, así que nunca se interpreta como HTML.
Variaciones
Sección titulada «Variaciones»- 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 enfoldedpara escribir «y 4 más». - Respetar el corte: si la tarea espera algo, mira
signal.abortedtras cada espera antes de pintar:Widget.queue.clear()aborta la tarea en curso.