La máquina de un reproductor: siete situaciones, cero banderas

El reproductor de medios es el ejemplo con el que casi todo el mundo descubre que su intuición sobre el estado era demasiado pobre. Empieza con una variable booleana llamada reproduciendo, gana otra llamada cargando cuando aparece el primer parpadeo, gana una tercera llamada buffering cuando alguien se queja de que la rueda no se distingue de la carga inicial, y termina con seis banderas que ningún ser humano puede razonar a la vez. El problema no es la cantidad de banderas sino su semántica: reproduciendo en falso no dice si el usuario pausó, si el búfer se vació, si el medio terminó o si la fuente no existe, y esas cuatro circunstancias exigen interfaces distintas, órdenes distintas y recuperaciones distintas. Un reproductor no tiene grados de una propiedad, tiene situaciones, y ese es exactamente el dominio donde una máquina de estados no es una elección estilística sino la descripción correcta del problema.

Las siete situaciones y por qué ninguna sobra

El catálogo mínimo de un reproductor honesto tiene siete posiciones. inactivo es antes de conocer la fuente; cargando es la primera adquisición de metadatos y del arranque del búfer; pausado es la detención deliberada del usuario con datos disponibles; reproduciendo es el único estado donde el tiempo del medio avanza; buffering es la detención involuntaria por falta de datos mientras la intención de reproducir sigue viva; terminado es haber llegado al final sin error; error es la imposibilidad de continuar. Nótese que dos de ellas —buffering y terminado— son las que casi siempre faltan en la primera versión casera, y son justo las que explican los peores fallos visibles.

import { setup, assign } from 'xstate'

export const reproductor = setup({
  types: {
    context: {} as { src: string; posicion: number; error: string | null },
    events: {} as
      | { type: 'CARGAR'; src: string }
      | { type: 'PUEDE_REPRODUCIR' }
      | { type: 'REPRODUCIR' }
      | { type: 'PAUSAR' }
      | { type: 'ESPERANDO_DATOS' }
      | { type: 'DATOS_SUFICIENTES' }
      | { type: 'FIN' }
      | { type: 'FALLO'; motivo: string }
      | { type: 'REINTENTAR' },
  },
}).createMachine({
  id: 'reproductor',
  initial: 'inactivo',
  context: { src: '', posicion: 0, error: null },
  on: {
    FALLO: {
      target: '.error',
      actions: assign({ error: ({ event }) => event.motivo }),
    },
  },
  states: {
    inactivo: {
      on: {
        CARGAR: { target: 'cargando', actions: assign({ src: ({ event }) => event.src }) },
      },
    },
    cargando: {
      on: { PUEDE_REPRODUCIR: 'pausado' },
    },
    pausado: {
      on: { REPRODUCIR: 'reproduciendo', CARGAR: 'cargando' },
    },
    reproduciendo: {
      on: { PAUSAR: 'pausado', ESPERANDO_DATOS: 'buffering', FIN: 'terminado' },
    },
    buffering: {
      on: { DATOS_SUFICIENTES: 'reproduciendo', PAUSAR: 'pausado' },
    },
    terminado: {
      on: {
        REPRODUCIR: { target: 'reproduciendo', actions: assign({ posicion: 0 }) },
        CARGAR: 'cargando',
      },
    },
    error: {
      on: { REINTENTAR: 'cargando' },
    },
  },
})

La transición de FALLO está declarada en la raíz y no en cada estado, porque un fallo del medio puede llegar en cualquier momento y repetir la misma arista siete veces sería exactamente el tipo de duplicación que la jerarquía existe para evitar. El destino .error con punto inicial es una referencia relativa al hijo del propio nodo raíz.

Las aristas que existen y las que están prohibidas

Un grafo se define tanto por lo que conecta como por lo que se niega a conectar. Las ausencias del ejemplo son deliberadas y cada una elimina una clase entera de defectos que en la versión con banderas se manifiestan como comportamientos imposibles perfectamente alcanzables.

stateDiagram-v2
[*] --> inactivo
inactivo --> cargando: CARGAR
cargando --> pausado: PUEDE_REPRODUCIR
pausado --> reproduciendo: REPRODUCIR
reproduciendo --> pausado: PAUSAR
reproduciendo --> buffering: ESPERANDO_DATOS
buffering --> reproduciendo: DATOS_SUFICIENTES
buffering --> pausado: PAUSAR
reproduciendo --> terminado: FIN
terminado --> reproduciendo: REPRODUCIR
error --> cargando: REINTENTAR

La interfaz se deriva, no se calcula

El beneficio inmediato aparece en la capa de presentación. Con banderas, cada elemento visual necesita una expresión booleana propia que combine varias de ellas, y esas expresiones divergen con el tiempo hasta contradecirse. Con un estado activo, la interfaz es una función total definida sobre siete casos, exhaustiva por construcción y verificable de un vistazo.