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

machine.js

  const playerMachine = Machine({
    id: 'player',
    initial: 'boot',
    context: {
      playbackState: undefined
    },
    states: {
      boot: {
        on: {
          RESOLVE: { target: 'initialized'},
          REJECT: { target: 'failed'},
        },
      },
      initialized: {
        type: 'parallel',
        states : {
          playback: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  PLAY: 'play'
                }
              },
              play: {
                on: {
                  PAUSE: 'pause'
                }
              },
              pause: {
                on: {
                  PLAY: 'play'
                }
              }
            }
          },
          shuffle: {
            initial: 'disabled',
            states: {
              disabled: {
                on: { TOGGLE_SHUFFLE: 'enabled' },
              },
              enabled: {
                on: { TOGGLE_SHUFFLE: 'disabled' },
              },
            },
          },
          repeat: {
            initial: 'off',
            states: {
              off: {
                on: { TOGGLE_REPEAT: 'all' },
              },
              all: {
                on: { TOGGLE_REPEAT: 'one' },
              },
              one: {
                on: { TOGGLE_REPEAT: 'off' },
              },
            },
          },
          modifyVolume: {
            actions: ['modifyVolume']
          },
        },
      },
      failed: {}
    }
  }, {
    actions: {
      modifyVolume: assign({ volume: (_, event) => event.payload.data }),
    }
  });