Acciones

Una acción es un trozo de HTML, CSS y JavaScript que aparece en el overlay. Cada una funciona por su cuenta, sin red y sin acceso a contraseñas: lo que necesita de fuera se lo pide a Vovó.

Para empezar

"Nueva acción" crea una en blanco o una a partir de un ejemplo: alertas y chat, lo que suena, cuenta atrás, meta, sorteo, contador de muertes y otros. El ejemplo se convierte en una copia tuya, para cambiarla libremente.

En tres pasos

Solo HTML: una <template> que aparece cuando ocurre el evento, con los campos del evento entre llaves.

<template data-on="follow" data-seconds="5">
    <div class="alerta">¡{user} empezó a seguir!</div>
</template>

Un poco de JavaScript: vovo.on("raid", (e) => { ... }) y vovo.show("nombre", e). Y la API entera para todo lo demás.

• Referencia de la API
• Cómo funciona una acción

Disparadores

Una acción solo recibe los eventos de su lista de disparadores, en el editor. Un botón del pad es el disparador button.

Condiciones

El icono de deslizadores junto a un disparador abre sus condiciones: el disparador solo se activa cuando se cumplen todas. Una incursión de 50 o más, un mensaje que empieza por !entrar, la recompensa correcta.

Temporizador y atajo

El disparador Temporizador se activa cada cierto tiempo: su condición every dice cuántos segundos entre uno y otro (sin ella, cada minuto). El disparador Atajo se activa con una combinación de teclas, su condición keys, también con el juego delante.

Controles

En la tarjeta Controles del editor, la acción declara lo que el pad puede cambiar mientras funciona: activado o desactivado, una elección entre opciones, un contador (con una meta, si quieres) o un texto. Cada uno se guarda en vovo.state, con la clave que muestra el diálogo, y cada cambio llega como el evento control, sin necesidad de disparador. Los ejemplos Alertas y chat, Meta de seguidores y Contador de muertes muestran cómo.

vovo.on("control", () =>
{
    document.getElementById("chat").hidden = !vovo.state.chat;
});

Personalizar

Una acción puede dejar que quien la usa la cambie sin abrir su código: su color, el tamaño de su texto, su fuente, un lado de la pantalla, una imagen o un sonido tuyos. La paleta junto al nombre de su panel, o en su fila de la lista de acciones, abre Personalizar: una línea para cada ajuste, con lo que tiene, su valor por defecto cuando es distinto y el camino de vuelta a él. Un cambio se ve al momento en las escenas que muestran la acción, sin reiniciarla, y cada uno es una versión que la auditoría deshace. Se elige solo en este equipo: un móvil u otra Vovó nunca lo ven. El paquete de la acción lleva los valores por defecto, nunca tus elecciones; uno que ocupa el lugar de la acción conserva las elecciones para las que aún tiene sitio.

Quien escribe la acción los declara en la tarjeta Personalizar del editor, o en settings de su action.json: cada uno con un tipo (un color, un número de un mínimo a un máximo, activado o desactivado, una elección, un texto, una imagen, un sonido o un vídeo, una fuente), un nombre, una clave y un valor por defecto. La acción los lee en vovo.settings, y recibe el evento settings cuando uno cambia; su CSS los lee como var(--vovo-clave) (un número con su unidad, como 32px), y un activado o desactivado o una elección como un atributo de la página, para los selectores:

.chat
{
    color: var(--vovo-color);
    font-size: var(--vovo-size);
    font-family: var(--vovo-font), sans-serif;
}
html[data-vovo-side="Right"] .chat
{
    right: 40px;
}

Un ajuste también puede ser una cámara: quien usa la acción elige una de las cámaras de su equipo en Personalizar, y la acción la muestra donde la coloca (vovo.camera.place, con el permiso camera.show). Una acción viene sin cámara y nunca sabe cuál se eligió, ni ve sus imágenes: vovo.settings solo dice si hay una elegida, como true o false. El ejemplo "Cámara" es una cámara en un marco.

Paneles

Lo que un botón no puede contener (los nombres de un sorteo, las metas con sus números, una pulsación que debería preguntar dos veces) va en el panel de la acción: panel en su manifiesto, mostrado en Paneles, en la barra lateral (su icono en el borde derecho de la ventana, presente mientras alguna acción tiene un panel). Un panel es una lista de piezas que dibuja Vovó: heading y note, un control por su clave, un button (con confirm, primero pregunta "¿Seguro?"), un form con hasta cuatro campos, y una list leída de vovo.state (su key, y un path dentro), cada línea con hasta tres botones.

Una acción con mucho que ofrecer lo reparte de dos maneras. { "kind": "panel", "label": "Sorteo", "icon": "gift" } empieza otro panel: una entrada propia en Paneles, con su nombre y su icono (uno de los iconos de Vovó por su nombre, o un emoji; sin él, el icono del primer botón del pad de la acción). Las piezas que le siguen, hasta el siguiente, son suyas, y las que van antes del primero aparecen arriba de todos. Dentro de un panel, tab empieza una sección (hasta doce): las piezas que le siguen, hasta la siguiente pestaña, se ven mientras está elegida, y las que van antes de la primera se ven en todas. Así, un sorteo es un panel con una sección para el sorteo, otra para quién participa y otra para quién ganó, en lugar de una página larga. Una acción que no declara ningún { "kind": "panel" } tiene uno, con su nombre.

La cabecera de Paneles nombra el que está delante; al pulsarla los lista todos, cada uno diciendo si una escena abierta lo muestra y de quién es, con una búsqueda cuando hay más de ocho. Las secciones aparecen como pestañas bajo la cabecera: las que caben, y el resto en "Más". Un heading abre un grupo: las piezas que le siguen comparten una tarjeta, los botones seguidos comparten una línea, una lista es una tarjeta propia con su cuenta, y una nota va entre las tarjetas. Un formulario de un campo se escribe en el propio panel, con Intro para enviarlo, y lo mismo un control de texto; un formulario de más campos abre una ventanita. Un contador con meta (max) muestra cuánto falta.

Una lista puede tener miles de líneas. Una de más de ocho tiene su propia búsqueda, que se queda a la vista mientras la lista se desplaza. Cuando es la última pieza de su sección se ve entera; con piezas detrás, muestra sus ocho primeras líneas y el camino a todas, así que pon una lista larga al final, o en una sección propia.

Lo que se hace ahí llega como el evento panel, sin necesidad de disparador: su name, los values de un formulario, y el item y el index de una línea. Los nombres son de la acción, sea cual sea el panel que los muestra. Una acción solo oye su panel mientras una escena abierta la muestra, en OBS o en la ventana de vista previa: sin ninguna, el panel lo dice, sus botones esperan atenuados y "Abrir vista previa" abre la de la escena; sus controles y listas se siguen viendo, porque Vovó los guarda. Solo lo usa quien lleva el directo, aquí o en un dispositivo al que le permitiste los paneles, y nada llega a la acción durante el pánico.

Escribir en el chat

Con el permiso chat.send, vovo.chat.send("...") escribe en el chat del directo como tú. Vovó mantiene el ritmo (20 líneas en 30 segundos) y escribe una sola vez lo que piden dos páginas que muestran la acción; dos pulsaciones de un botón son dos líneas. El ejemplo Recordatorio en el chat muestra cómo. Con { as: "persona" }, la línea va por la cuenta propia de la persona en Twitch (Integraciones, bajo Twitch): lo que la persona dice que no es una de sus respuestas, como una línea que alguien escribe para que la diga. Mientras esa cuenta no está conectada, no se escribe nada, y nada como tú en su lugar.

Vovó distingue la llamada de una página de la de otra por el evento que la acción estaba atendiendo cuando llamó. Una llamada hecha más tarde, tras un await o en un temporizador, dice a qué evento responde con { event: e }, siendo e lo que recibió tu función: vovo.chat.send("¡Bienvenidos!", { event: e }). Lo mismo vale para vovo.emit, vovo.pad.play, vovo.webhook.send, vovo.draw, vovo.media.play y las llamadas a OBS. Sin eso, dos páginas escribirían la línea dos veces, y el enlace de un moderador esperaría en la campana.

El micrófono, la pantalla y cómo te mueves

Una acción puede seguir lo fuerte que suena tu micrófono (audio.level), el color de la pantalla (screen.color) y cómo te mueves en un juego (input.move): cuánto giró la cámara, hacia dónde caminas y si saltas, desde el ratón, W, A, S y D o las flechas, y un mando, para que una escena se balancee con la cámara. Los ejemplos "Brillo de pantalla" y "Balanceo de cámara" muestran cómo. Vovó lee cada cosa solo mientras un overlay abierto muestra una acción que la espera, y la barra de estado muestra su icono en el centro mientras lo hace, con los nombres de las acciones en su descripción. Del teclado lee solo las teclas de movimiento, como una dirección, nunca qué tecla, y no mientras la ventana de Vovó está delante, donde lo que escribes balancearía la escena; el ratón y el mando la siguen moviendo entonces, salvo que "Pausar el movimiento con Vovó delante" esté activado (Configuración, General). El sonido nunca sale del equipo, solo lo fuerte que suena.

Clips y vídeos

Con el permiso media.play, vovo.media.play(enlace) muestra un clip de Twitch, un vídeo de Twitch o un vídeo de YouTube en su reproductor oficial, donde lo puso vovo.media.place(elemento), con su sonido. Una acción que solo dispara quien opera lo reproduce al momento; cualquier otra, que alguien del chat puede haber disparado, espera en la campana hasta que tú (o un dispositivo con permiso para aprobar) lo dejes pasar. El reproductor no sabe cuándo termina un clip: indica { seconds: 60 }, o llama a vovo.media.stop(). El ejemplo Clips en una tele acepta !clip y un enlace de los moderadores.

Tus moderadores son las personas a las que confías el chat: en Integraciones, en Twitch, "Los enlaces de moderadores se reproducen al momento" deja que un enlace que uno de ellos (o tú) pega salga al aire sin esperar, cuando la acción lo muestra por su mensaje. Desactivado salvo que lo actives; el enlace de cualquier otra persona sigue esperando.

Llamadas de voz

Con el permiso call, una acción puede ponerte al teléfono con un modelo de IA, al aire: hablas al micrófono, responde en voz alta, y el directo oye a los dos. vovo.call.start({ instructions, voice }) abre la llamada con tu clave de OpenAI (Integraciones, IA); instructions es quién es el modelo y cómo habla. La llamada se abre en silencio, para que la acción pueda hacer sonar un teléfono antes; vovo.call.answer() abre el micrófono y hace que el modelo hable primero, vovo.call.tell() le dice algo durante la llamada, y vovo.call.end() cuelga. call.started, call.answered, call.text (lo que se dice, por escrito) y call.ended dicen lo que ocurre.

Lo que dice el modelo se oye a medida que lo dice, sin que nadie lo lea antes, así que una llamada solo empieza por algo que hiciste con tu mano: un botón del pad, un atajo, un control o el panel de la acción. El chat, las recompensas y los webhooks no empiezan ninguna. OpenAI la cobra por segundo desde que se abre, así que cada llamada tiene un límite (cinco minutos como mucho). Mientras hay una, un teléfono rojo aparece en la barra de estado: púlsalo, o el pánico, para colgar al momento. Usa auriculares, o el modelo se oirá a sí mismo por tus altavoces.

Webhooks

Con el permiso webhook, vovo.webhook.send("nombre", { ... }) pide a Vovó que envíe el JSON a un webhook configurado en Configuración, Webhooks: el de un canal de Discord, una automatización, una herramienta de tu red. La dirección se queda en la caja fuerte de este equipo, fuera de las copias de seguridad y de los paquetes, y la acción solo conoce el nombre. El ejemplo Anunciar en Discord muestra cómo.

Webhooks entrantes

En sentido contrario, un servicio de internet avisa a Vovó: en Configuración, Webhooks, crea un webhook entrante, copia su dirección y pégala en el servicio (una página de donaciones, una tienda, un script). Cada llamada llega a las acciones como el evento webhook, con hook (el nombre) y data (lo que se envió). Usa el disparador webhook con la condición de que hook sea el nombre. Cada webhook tiene una dirección propia: dásela solo al servicio que lo llama. El relay guarda una llamada sellada para este equipo como mucho un día, así que una hecha con Vovó cerrada llega cuando se abre. Lo que llega es texto de otra persona: las acciones lo muestran solo como texto.

Desde un programa de este equipo

Un programa de este equipo puede decirle a una acción lo que sabe: un script que lee el registro de un juego, una herramienta que lleva la puntuación de un torneo, una macro. La acción escucha un evento con un nombre propio, entre los disparadores de su action.json (como en una carpeta que sigue vovo dev):

"triggers": ["score"]

y lo oye como cualquier otro:

vovo.on("score", (e) =>
{
    document.getElementById("home").textContent = e.home;
    document.getElementById("away").textContent = e.away;
});

El programa se lo dice con vovo emit, el nombre y los campos:

vovo emit score home=2 away=1

Un número, true y false llegan tal cual, todo lo demás como texto. Las listas y los objetos van enteros como JSON, que es como lo llama un programa:

import json, subprocess
subprocess.run(["vovo", "emit", "score", "--fields", json.dumps({"home": 2, "away": 1})])

Dice qué acciones lo oyeron, y falla (código de salida 1, con el motivo) cuando ninguna lo haría: ninguna acción tiene ese nombre entre sus disparadores, sus condiciones no se cumplen, o ninguna página abierta las muestra. Va adonde iría el propio vovo.emit de una acción, nunca durante el pánico, 30 en 10 segundos como mucho, y la auditoría dice que lo disparó la línea de comandos. Una acción solo para quien opera no lo oye. Lo que envía un programa es texto de ese programa: la acción lo muestra solo como texto. Para fingir que ocurrió un evento de la API, como un seguimiento, usa vovo simulate.

Vista previa y Simular

El editor muestra la acción en vivo mientras escribes, y los botones Simular disparan los disparadores sin esperar al hecho real y mueven los controles como lo haría el botón del pad. Nada de la vista previa llega al directo. El icono en la esquina del código o de la vista previa le da toda la ventana; el mismo icono, o Esc, la devuelve junto a la otra.

Lectores de pantalla

Los lectores de pantalla no pueden leer el editor de código. El botón Texto sin formato, encima del código, pone en su lugar un cuadro de texto que Narrador, NVDA y JAWS leen entero, por línea, palabra y carácter. Empieza activado cuando Windows dice que hay un lector de pantalla en marcha; Tab pasa al siguiente control, así que sangra con espacios.

Archivos

En la pestaña Archivos del editor, añade imágenes, sonidos, vídeos y fuentes. La acción los usa por su nombre: <img src="logo.png">. Para pasar uno de sus propios sonidos o vídeos por Web Audio (un compresor, un medidor), pídelo con crossOrigin = "anonymous" antes de darle su nombre: una acción funciona aparte de todo, y para ella hasta sus propios archivos vienen de fuera, cosa que Web Audio, si no, oye como silencio.

Permisos

Lo que la acción puede pedirle a Vovó está en Comportamiento: escribir en el chat, llamar a un webhook, mostrar la pantalla compartida, mostrar una cámara, mostrar fuentes y activar filtros en OBS. Desactivado, la acción no puede.

OBS desde una acción

Con el permiso obs.toggle, vovo.obs.source("Escena", "Fuente", true) muestra una fuente en una escena de OBS (false la oculta; sin él, la alterna), y vovo.obs.filter("Fuente", "Filtro", true) hace lo mismo con un filtro. Los nombres son los de OBS, sin importar mayúsculas ni acentos; uno que OBS no tiene se dice en la Consola, con el que se quería decir. Eso es todo lo que una acción alcanza en OBS: no puede detener la transmisión ni leer su clave.

Solo para quien opera

En Comportamiento, "Solo para quien lleva el directo" hace que la acción solo la disparen el pad, los atajos, los temporizadores y sus controles: nunca los espectadores, el chat, las recompensas, los webhooks ni el evento de otra acción. Úsalo para lo que nadie que mira debería poder hacer, como limpiar el chat o cambiar de escena.

Versiones

Cada guardado conserva una versión. "Historial" recupera cualquiera de ellas.

Paquetes

El icono de exportar, en la lista de acciones, escribe la acción en un .zip con su código y sus archivos, para dársela a alguien. En Comportamiento, su autor, su sitio y una línea sobre lo que hace van con ella, para que quien la traiga sepa qué es y de dónde viene. "Importar acción" muestra lo que trae el paquete y lo que pide antes de guardarlo, y abre la acción en el editor: léela antes de usarla. Un paquete con el nombre de una acción que tienes es, muy probablemente, esa acción en una versión más nueva, así que ofrece ocupar su lugar: la acción conserva sus escenas, sus botones y su estado, y la versión que tenía queda en su historial. En una terminal, vovo export y vovo import hacen lo mismo, y vovo import --replace ocupa el lugar de la acción de su nombre. Un paquete hecho para otras personas puede indicar un id en Comportamiento, el nombre de quien lo hizo y el de la acción con un punto entre los dos (example.raffle). Su siguiente versión encuentra entonces la acción que actualiza aunque le hayas cambiado el nombre, y dos acciones del mismo nombre, de autores distintos, nunca ocupan el lugar una de la otra; vovo import --replace también se guía por él. Con id o sin él, la importación dice qué versión ocupa el lugar de cuál, y avisa cuando el archivo es la misma versión o una anterior, y lo que elegiste en Personalizar se mantiene allí donde la versión nueva siga teniendo ese ajuste. Un paquete puede decir bajo qué licencia se entrega: el nombre de una licencia o una línea tuya en Comportamiento, y el texto completo de la licencia, elegido allí de un archivo o guardado como LICENSE junto a action.json en una carpeta. Quien trae la acción ve la línea, y lee el texto desde el diálogo de importación antes de que entre. Vovó dice lo que escribiste y no obliga a nadie a nada: no comprueba ninguna clave, cuenta ni compra, y vender una acción ocurre fuera de Vovó. El icono de copiar, a su lado, duplica la acción y abre la copia en el editor, para empezar una variación a partir de una que funciona: su código, archivos y disparadores van con ella; su estado, escenas y botones no, y un disparador de atajo llega sin su combinación, para que una tecla no dispare las dos.

En tu propio editor

Una acción se puede escribir en el editor que prefieras, o con una compilación propia: guarda sus partes en una carpeta como las guarda un paquete (action.json, index.html, style.css, script.js y files/) y, en una terminal, ejecuta vovo dev con la carpeta. Vovó abre su editor en la acción de ese nombre, creándola a partir de la carpeta cuando el perfil no la tiene, y muestra al momento en la vista previa cada cambio guardado en la carpeta; Simular funciona como siempre. Igual que un cambio escrito aquí, solo llega al directo cuando Guardas. vovo dev stop, o Dejar de seguir arriba en el editor, suelta la carpeta.

vovo new <carpeta> empieza esa carpeta por ti, en blanco o desde uno de los ejemplos (vovo new --list los nombra, y --from goal toma uno), y vovo check <carpeta> dice de una vez todo lo que está mal en una carpeta o un paquete, sin crear ni abrir nada: cada problema con su archivo, y lo que Vovó aceptaría y pasaría por alto, como una clave que no usa. Los dos responden también con Vovó cerrada. vovo export <acción> <carpeta> escribe como una carpeta así una acción que ya tienes.

vovo dev también escribe vovo.d.ts en la carpeta, la API tal como la tiene esta Vovó, y un jsconfig.json cuando no hay ninguno, para que un editor como VS Code complete vovo., los nombres de los eventos en vovo.on(" y los campos de cada evento. Ninguno de los dos es parte de la acción, y un paquete nunca los lleva; con control de versiones, guárdalos o ignóralos como prefieras. Para que un campo erróneo se subraye, añade "checkJs": true a las compilerOptions del jsconfig.

También escribe allí action.schema.json, que tampoco es parte de la acción: con "$schema": "./action.schema.json" al principio de action.json, el editor completa sus claves, ofrece los eventos y los permisos por su nombre y subraya lo que Vovó rechazaría.

La vista previa se abre también en tu navegador, en la dirección que imprime vovo dev o desde la flecha de la esquina de la vista previa: el mismo borrador, ejecutado por el mismo vovo que al aire, recargado a cada cambio, con Simular llegando a él, y con las propias herramientas de desarrollo del navegador (su consola, puntos de interrupción, los elementos).

• action.json y pad.json

Para mostrarla en el directo

La acción tiene que estar en una escena, y la escena en OBS.

• Escenas y OBS