Generated by XState Viz: https://xstate.js.org/viz

machine.js

 const playheadMachine = Machine({
    id: 'playhead',
    initial: 'idle',
    context: {
      fps: 2,
      events: [],
      lastEmittedEvent: null,
      emitted: [],
      playhead: 0
    },
    states: {
      idle: {
        on: {
          PLAY: {
            target: 'replaying',
            actions: assign({emitted: []}),
            cond: (ctx) => ctx.events.length > 0
          },
          ADD_EVENT: {
            actions: assign({
              events: (ctx, e) => [...ctx.events, {type: e?.data?.type ?? 'default-' + ctx.events.length, streamId: e?.data?.streamId ?? 'some-stream'}]
            }),
            target: 'idle'
          },
          RESET: {
            target: 'idle',
            actions: assign({events: []}),
            cond: (ctx) => ctx.events.length > 0
          },
          SET_FPS: {
            actions: assign({
              fps: (_, e) => e?.data?.fps ?? 20
            }),
            target: 'idle'
          }
        }
      },
      replaying: {
        entry: send('TICK'),
        after: {
          REPLAY_DELAY: 'replaying'
        },
        on: {
          TICK: [
            {
              target: 'replaying',
              internal: true,
              actions: [
                  'emit',
                  assign({
                    lastEmittedEvent: (ctx, e) => ctx.events[ctx.playhead],
                    emitted: (ctx, e) => [...ctx.emitted, ctx.events[ctx.playhead]],
                    playhead: (ctx) => ctx.playhead + 1
                  })
              ],
              cond: (ctx) => ctx.playhead < ctx.events.length
            },
            {
              target: 'idle',
              actions: assign({playhead: 0})
            }
          ],
          PAUSE: 'idle',
          STOP: {
            actions: assign({playhead: 0}),
            target: 'idle'
          }
        }
      }
    }
  }, {
    actions: {
      emit: (ctx, event) => {
        console.log('EMIT', ctx.lastEmittedEvent)
      }
    },
    delays: {
      REPLAY_DELAY: (ctx) => 1000 / ctx.fps
    }
  });