TOXI MEDIA — Wiki

Deploy manual

npm run build   # genera /dist
vercel --prod   # deploy inmediato

Regenerar páginas estáticas (SEO)

Después de modificar un proyecto en projects.json:

npm run gen
# equivale a: node generate-static.js
# genera public/[slug]/index.html con OG tags por cada proyecto

El routing se define en vercel.json. Hay un catch-all al final que manda cualquier slug a plantform.html.

# Agregar variable (sin newline al final)
node -e "process.stdout.write('EL_VALOR')" | npx vercel env add NOMBRE_VAR production

# Eliminar variable
node -e "process.stdout.write('y')" | npx vercel env rm NOMBRE_VAR production

# Listar variables actuales
npx vercel env ls

# Redesplegar después de cualquier cambio
npx vercel --prod

Variables activas

{
  "name":        "Nombre del Proyecto",
  "slug":        "nombre-del-proyecto",
  "description": "Descripción corta (cards + SEO).",
  "contenido":   "<p>Cuerpo HTML. Puede tener iframes.</p>",
  "card":        "/nombre-del-proyecto/thumb.jpg",
  "banner":      "/nombre-del-proyecto/poster.jpg",
  "thumbnail":   "/nombre-del-proyecto/thumb.jpg",
  "talentos":    ["slug-talento-1"],
  "formato":     "1",
  "credits":     "<h4>Dirección</h4><p>Nombre Apellido</p>",
  "web":         "https://url-externa.com"
}

npm run gen

git add public/data/projects.json public/[slug]/
git commit -m "feat: agregar [Nombre del proyecto]"
git push

IDs de formato

Los talentos se cargan desde public/data/talentos.json. El slug debe existir ahí antes de referenciarlo en un proyecto.

{
  "name":  "Nombre Apellido",
  "slug":  "nombre-apellido",
  "rol":   "Director / Editor / ...",
  "bio":   "Bio corta.",
  "foto":  "/nombre-apellido/foto.jpg"
}

Todos los proyectos en public/data/projects.json. Accesibles en toxi.media/[slug].

El canal en vivo de toxi.media/tv. Todos los usuarios ven lo mismo en el mismo momento, sin señal en tiempo real.

Cómo funciona la sincronización

• El video actual se calcula usando EPOCH_SEC = 2026-01-01T00:00:00Z como referencia.
• Se suma el tiempo desde el epoch y se divide entre la duración total de la playlist para encontrar el slot actual.
• Cada cliente lo calcula de forma independiente — no hay WebSocket ni señal en tiempo real.

Actualizar la playlist

Hay que editar dos archivos en paralelo:

1. src/content.js — agregar entrada con onTV: true (para la web).
2. api/playlist.mjs — agregar el mismo item al array PLAYLIST (para la app Android y el AI voice).

Endpoint

GET https://toxi.media/api/playlist
# devuelve: [{ "id": "MuxPlaybackID", "duration": 339.5, "title": "Título" }, ...]

App para Android TV / Google TV. Reproduce el canal sincronizado, igual que la versión web.

Estructura

toxi-tv-android/
  app/src/main/java/media/toxi/tv/
    MainActivity.kt   # ExoPlayer + fetch de playlist al arrancar
    Playlist.kt       # Playlist hardcodeada + lógica de slot sincronizado
  app/src/main/res/
    drawable/banner.png   # Banner launcher TV (320×180)
  app/build.gradle.kts

Cómo funciona

• Al arrancar busca https://toxi.media/api/playlist y reemplaza la hardcodeada.
• Si falla el fetch, usa HARDCODED_PLAYLIST en Playlist.kt.
• Cada 30 segundos corrige el drift — si la diferencia es mayor de 5 segundos, hace seek.
• Los cambios en la playlist se propagan sin actualizar el APK.

Build y distribución

Tres piezas: PC (fuente de audio) → BUTT (encoder) → Icecast (servidor).

1 — Icecast (Windows)

• Descargar de icecast.org e instalar.
• Abrir icecast.xml y agregar CORS (necesario para la onda visual):

<http-headers>
    <header name="Access-Control-Allow-Origin" value="*" />
</http-headers>

2 — BUTT (Broadcast Using This Tool)

Descargar de danielnoethen.de/butt. Settings → Main → Server → Add:

3 — Conectar en el código

// src/line.js
const STREAM_URL = 'http://localhost:8000/stream';

Troubleshooting

Solución recomendada: Zeno.fm (gratis)

const STREAM_URL = 'https://stream.zeno.fm/tu-codigo';

Alternativa temporal: Ngrok

Para testear con alguien sin registrarse. La URL cambia en cada reinicio.

ngrok http 8000
# usar la URL https://xyz.ngrok-free.app/stream

MUNDO-TOXI/
  index.html          # Entrada principal (keypad + paywall + Three.js)
  plantform.html      # Página dinámica de proyectos y talentos
  tv.html             # Canal en vivo sincronizado
  audiont.html        # Landing de Audion't
  wiki.html           # Este wiki
  [proyecto].html     # Páginas estáticas por proyecto especial

  src/
    main.js           # Escena Three.js
    paywall.js        # Lógica de pagos y acceso
    style.css         # Estilos globales
    content.js        # Contenido de TV (items con onTV: true)

  public/
    data/
      projects.json   # Catálogo completo de proyectos
      talentos.json   # Catálogo de talentos
      formatos.json   # Categorías (Cine, VR, Software, etc.)
    [slug]/           # Imágenes y index.html SEO por proyecto

  api/
    playlist.mjs      # Playlist de TV para app Android y AI voice
    ai-voice.mjs      # AI voice — importa playlist.mjs directo
    transcribe.mjs    # Transcripción de audio (maxDuration: 60s)

  tools/
    upload-to-mux.js          # Subir video a Mux
    upload-downloads-batch.js # Upload en batch

  toxi-tv-android/    # App Android TV (Kotlin + ExoPlayer)
  _archive/           # Archivos viejos preservados

  vite.config.js      # Bundler: entradas HTML + PWA config
  vercel.json         # Routing, rewrites, funciones serverless
  generate-static.js  # Genera meta tags SEO por proyecto

Todo lo que está en public/ se sirve desde la raíz del sitio en dev y en producción. No hace falta importarlos con JS.

public/hedonismo-y-seduccion/thumb.jpg
# accesible en: /hedonismo-y-seduccion/thumb.jpg

Las páginas de proyectos en plantform.html son SPA (JS renderiza el contenido). Para que Google y WhatsApp lean los meta tags correctos, se genera un index.html estático por proyecto.

Generar

npm run gen
# genera public/[slug]/index.html con:
#   <title> del proyecto
#   og:title, og:description, og:image
#   twitter:card

Vercel sirve ese HTML estático cuando Google o un scraper accede a /[slug]. El browser lo recibe, carga el JS de plantform y renderiza la página completa.

Core — decisiones estratégicas

Líderes de área

Pasantes

Interfaz & grabadores

Micrófonos

Instrumentos

Oficina

Computadoras