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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const playheadMachine = Machine({
    id: 'playhead',
    initial: 'idle',
    context: {
      fps: 2,
      events: [],
      playhead: 0
    },
    states: {
      idle: {
        on: {
          PLAY: {
            target: 'replaying',
            cond: (ctx) => ctx.events.length > 0
          },
          ADD_EVENT: {
            actions: assign({
              events: (ctx, e) => [...ctx.events, {type: e?.data?.type ?? 'default', streamId: e?.data?.streamId ?? 'some-stream'}]
            }),
            target: 'idle'
          }
        }
      },
      replaying: {
        entry: send('TICK', {
          delay: (ctx) => 1000 / ctx.fps
        }),
        on: {
          TICK: [
            {
              target: 'replaying',
              actions: [
                  'emit',
                  assign({
                  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.events[ctx.playhead])
      }
    }
  });