Estados paralelos en media: la reproducción, el sonido y los subtítulos

El grafo de siete estados de la primera lección describe una sola dimensión del reproductor: la del transporte, la que responde a la pregunta de si el tiempo del medio avanza. Pero un reproductor real tiene al menos tres dimensiones más que conviven con ella sin determinarla. El sonido puede estar activo o silenciado en cualquiera de los siete estados. Los subtítulos pueden estar visibles u ocultos con total independencia del búfer. La presentación puede ser normal, en pantalla completa o en imagen sobre imagen mientras el vídeo hace cualquier cosa. Si insistes en un único estado activo, el catálogo pasa de siete nodos a siete por dos por dos por tres, ciento sesenta y ocho combinaciones que nadie va a escribir ni a mantener. La ortogonalidad no reduce ese espacio, que es real e irreducible; reduce el texto necesario para describirlo, que pasa de ciento sesenta y ocho nodos a catorce repartidos en cuatro regiones.

Cuatro dimensiones que no se estorban

La estructura declara un nodo raíz paralelo cuyos hijos son las dimensiones. Cada región conserva su propio initial y su propia submáquina, y ninguna menciona el estado de las demás. El transporte de la primera lección entra tal cual como una región más.

import { setup, assign } from 'xstate'

export const reproductor = setup({
  types: {
    context: {} as { volumen: number; volumenPrevio: number; pista: string | null },
    events: {} as
      | { type: 'CARGAR' } | { type: 'PUEDE_REPRODUCIR' } | { type: 'REPRODUCIR' }
      | { type: 'PAUSAR' } | { type: 'FIN' } | { type: 'SILENCIAR' }
      | { type: 'RESTAURAR_SONIDO' } | { type: 'AJUSTAR_VOLUMEN'; valor: number }
      | { type: 'MOSTRAR_SUBTITULOS'; pista: string } | { type: 'OCULTAR_SUBTITULOS' }
      | { type: 'PANTALLA_COMPLETA' } | { type: 'VENTANA_FLOTANTE' } | { type: 'PRESENTACION_NORMAL' },
  },
}).createMachine({
  id: 'reproductor',
  type: 'parallel',
  context: { volumen: 0.8, volumenPrevio: 0.8, pista: null },
  states: {
    transporte: {
      initial: 'inactivo',
      states: {
        inactivo: { on: { CARGAR: 'cargando' } },
        cargando: { on: { PUEDE_REPRODUCIR: 'pausado' } },
        pausado: { on: { REPRODUCIR: 'reproduciendo' } },
        reproduciendo: { on: { PAUSAR: 'pausado', FIN: 'terminado' } },
        terminado: { on: { REPRODUCIR: 'reproduciendo' } },
      },
    },
    sonido: {
      initial: 'audible',
      states: {
        audible: {
          on: {
            AJUSTAR_VOLUMEN: { actions: assign({ volumen: ({ event }) => event.valor }) },
            SILENCIAR: { target: 'silenciado', actions: assign({ volumenPrevio: ({ context }) => context.volumen, volumen: 0 }) },
          },
        },
        silenciado: {
          on: {
            RESTAURAR_SONIDO: { target: 'audible', actions: assign({ volumen: ({ context }) => context.volumenPrevio }) },
            AJUSTAR_VOLUMEN: { target: 'audible', actions: assign({ volumen: ({ event }) => event.valor }) },
          },
        },
      },
    },
    subtitulos: {
      initial: 'ocultos',
      states: {
        ocultos: {
          on: {
            MOSTRAR_SUBTITULOS: { target: 'visibles', actions: assign({ pista: ({ event }) => event.pista }) },
          },
        },
        visibles: { on: { OCULTAR_SUBTITULOS: 'ocultos' } },
      },
    },
    presentacion: {
      initial: 'normal',
      states: {
        normal: { on: { PANTALLA_COMPLETA: 'completa', VENTANA_FLOTANTE: 'flotante' } },
        completa: { on: { PRESENTACION_NORMAL: 'normal', VENTANA_FLOTANTE: 'flotante' } },
        flotante: { on: { PRESENTACION_NORMAL: 'normal', PANTALLA_COMPLETA: 'completa' } },
      },
    },
  },
})

El valor del snapshot deja de ser una rama y pasa a ser un objeto con una clave por región, todas presentes siempre porque ninguna región puede apagarse mientras el nodo paralelo esté activo.

actor.getSnapshot().value
// { transporte: 'reproduciendo', sonido: 'silenciado', subtitulos: 'visibles', presentacion: 'completa' }

stateDiagram-v2
state reproductor {
  state transporte {
    [*] --> pausado
    pausado --> reproduciendo: REPRODUCIR
    reproduciendo --> pausado: PAUSAR
  }
  --
  state sonido {
    [*] --> audible
    audible --> silenciado: SILENCIAR
    silenciado --> audible: RESTAURAR_SONIDO
  }
}

Las regiones de subtítulos y presentación se omiten del diagrama por espacio y no por jerarquía: viven exactamente al mismo nivel que las dos dibujadas, separadas por la misma línea discontinua que en un statechart marca la frontera entre dimensiones ortogonales.

Difusión y la región que ignora el evento

Un evento no se dirige a una región concreta: se ofrece a todas y cada una decide por su cuenta. PAUSAR solo lo declara transporte, así que las otras tres lo descartan sin error y sin cambio. Esa indiferencia es precisamente la prueba de la ortogonalidad, y también su ventaja operativa: añadir una quinta dimensión —velocidad de reproducción, capítulos, calidad— no obliga a tocar ni una línea de las cuatro existentes.

La cuarta fila es la más instructiva porque parece candidata y no lo es. El buffering solo tiene sentido mientras el transporte intenta avanzar, y esa dependencia lo descalifica como región: pertenece dentro de reproduciendo, como estado hijo, junto a un hermano que represente el avance efectivo. El criterio es mecánico y no admite negociación: una dimensión merece región propia únicamente si su tabla de transiciones se puede escribir entera sin mencionar el estado de ninguna otra región.

La interfaz también se factoriza

La ventaja se propaga a la capa de presentación con una fidelidad notable. Cada control de la barra del reproductor se enlaza a una sola región y solo se vuelve a renderizar cuando esa región cambia: el botón de reproducción escucha transporte, el de volumen escucha sonido, el de subtítulos escucha subtitulos. Un selector por región es más barato y, sobre todo, más claro que una condición compuesta que mezcle las cuatro dimensiones.