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 sharedEvents = {
    SELECT: {
      target: '#audioPlayer.playing',
      actions: ['setCurrentTrack'],
    },
    NEXT: {
      target: '#audioPlayer.playing',
      actions: ['toggleTrack'],
    },
    PREVIOUS: {
      target: '#audioPlayer.playing',
      actions: ['toggleTrack'],
    }
  }
  
  const playerMachine = Machine({
    id: 'audioPlayer',
    initial: 'gettingPlaylist',
    context: {
      currentTrack: null,
      errorMessage: null,
      playlist: null
    },
    states: {
      gettingPlaylist: {
        invoke: {
          src: 'getPlaylist',
          onDone: {
            target: 'paused',
            actions: ['setPlaylist', 'setFirstTrack',  'removeErrorMessage']
          },
          onError: {
            target: 'paused.error',
            actions: ['setErrorMessage'],
          },
        },
      },
      paused: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              ...sharedEvents,
              PLAY: {
                target: '#audioPlayer.playing',
              }
            }
          },
          error: {
            on: {
              RETRY: {
                target: '#audioPlayer.gettingPlaylist',
              },
            },
          },
        },
      },
      playing: {
        on: {
          ...sharedEvents,
          PAUSE: {
            target: '#audioPlayer.paused.idle',
          },
        }
      },
    },
  }, {
    services: {
      getPlaylist: () => Promise.resolve(['first', 'second', 'last']),
    },
    actions: {
      setPlaylist: assign({
        playlist: (context, event) => event.data,
      }),
      setFirstTrack: assign({
        currentTrack: (context) => context.playlist[0],
      }),
      setErrorMessage: assign({
        errorMessage: (context, event) => event.data,
      }),
      setCurrentTrack: assign({
        currentTrack: (context, event) => event.track || context.playlist[0],
      }),
      removeErrorMessage: assign({
        errorMessage: () => null,
      }),
      toggleTrack: assign({
        currentTrack: (context, event) => {
          const { currentTrack, playlist } = context
          const currentTrackIndex = playlist.indexOf(currentTrack)
          const nextTrackIndex = (currentTrackIndex + 1) % playlist.length
          const previousTrackIndex = currentTrackIndex === 0 ? playlist.length - 1 : currentTrackIndex - 1
          console.log({playlist, previousTrackIndex})
          switch (event.type) {
            case 'NEXT':
              return playlist[nextTrackIndex]
            case 'PREVIOUS':
              return playlist[previousTrackIndex]
            default:
              throw new Error('Unexpected event type in toggleTrack action: ' + event.type)
          }
        },
      }),
    },
  });