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

machine.js

const { cancel } = actions
const playerMachine = Machine(
  {
    id: 'player',
    initial: 'idle',
    context: {
      promotion: 0,
      promotionCounter: 0
    },
    states: {
      idle: {
        on: {
          PLAY: [
            {target: 'promo', cond: 'showPromo'},
            {target: 'changing'}
          ]
        }
      },
      changing: {
        entry: 'setIdleTimer',
        onExit: 'clearIdleTimer',
        on: {
          PLAY: [
            {target: 'idle', actions: ["displaySong", 'incrementPromotionalCounter']}
          ],
          TIMER: [
             {target: 'idle', actions: ["displaySong", 'incrementPromotionalCounter']}
            ],
          END: {target: 'idle'},
        }
      },
      promo: {
        on: {
          END: {target: 'idle'}
        }
      }
    }
  },
  {
    guards: {
      showPromo: (context, event) => context.promotionCounter > 10
    },
    actions: {
      incrementPromotionalCounter: assign({
        promotionCounter: (context, event) => context.promotionCounter + 1
      }),
      displaySong: (context, event) => console.log("change"),
      setIdleTimer: send('TIMER', {id: 'idleTimer',delay:1000}),
      clearIdleTimer: cancel('idleTimer')
    }
  }
)