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

machine.js

const EMPTY_SONG = Object.freeze({
  id: '',
  title: '',
  description: '',
  thumbnail: '',
});

const context = {
  // logged in
  player: {
    song: EMPTY_SONG,
  },
};

const loggedInState = {
  id: 'logged in',
  exit: 'clear email & password',
  // on: {
  //   'LOG OUT': 'logged out',
  // },
  type: 'parallel',
  states: {
    'core page': {
      id: 'core page',
      meta: { description: '4 pages with dedicated buttons' },
      on: {
        'FOR YOU': '.For you',
        MUSIC: '.Music',
        'NEWS & TALK': '.News & Talk',
        FAVORITES: '.Favorites',
        'PLAY SONG': {
          actions: [
            'assign song to player',
            send('PLAY'),
            send('MAXIMIZE PLAYER'),
          ],
        },
      },
      initial: 'For you',
      states: {
        'For you': {},
        Music: {},
        'News & Talk': {},
        Favorites: {},
      },
    },

    'search page': {
      id: 'search page',
      meta: { description: 'stacks on top of core page & player' },
      type: 'parallel',
      states: {
        visibility: {
          initial: 'hidden',
          states: {
            hidden: {
              on: {
                SEARCH: 'visible',
              },
            },
            visible: {
              on: {
                BACK: 'hidden',
              },
            },
          },
        },
        referrer: {
          on: {
            'FOR YOU': '.For you',
            MUSIC: '.Music',
            'NEWS & TALK': '.News & Talk',
          },
          initial: 'For you',
          states: {
            'For you': {},
            Music: {},
            'News & Talk': {},
          },
        },
      },
    },

    'settings page': {
      id: 'settings page',
      meta: { description: 'stacks on top of core page & player' },
      type: 'parallel',
      states: {
        visibility: {
          initial: 'hidden',
          states: {
            hidden: {
              on: {
                SETTINGS: 'visible',
              },
            },
            visible: {
              on: {
                BACK: 'hidden',
              },
            },
          },
        },
        avatar: {
          initial: 'none',
          states: {
            none: {
              on: { 'EDIT AVATAR': 'choosing avatar' },
            },
            'choosing avatar': {
              on: { 'SAVE AVATAR': 'visible' },
            },
            visible: {
              on: { 'EDIT AVATAR': 'choosing avatar' },
            },
          },
        },
      },
    },

    'content player': {
      id: 'content player',
      meta: { description: 'stacks on top of core page' },
      type: 'parallel',
      states: {
        size: {
          initial: 'minimized',
          states: {
            maximized: {
              on: { 'MINIMIZE PLAYER': 'minimized' },
            },
            minimized: {
              on: { 'MAXIMIZE PLAYER': 'maximized' },
            },
          },
        },
        playback: {
          on: {
            PLAY: '.playing',
            STOP: '.stopped',
          },
          initial: 'stopped',
          states: {
            stopped: {},
            playing: {
              on: {
                PAUSE: 'paused',
              },
            },
            paused: {
              on: {
                PAUSE: 'playing',
              },
            },
          },
        },
      },
    },
  },
};

const machine = Machine({
    // id: 'Audacy App',
    context,
    // ...loggedOutState,
    ...loggedInState,
    // initial: 'logged out',
    // states: {
      // 'logged out': loggedOutState,
      // 'logged in': loggedInState,
    // },
  });