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

machine.js

const machine = Machine({
  id: 'Audacy',
  type: 'parallel',
  states: {
    'core page': {
      id: 'core page',
      meta: { description: '4 pages with dedicated buttons' },
      on: {
        TAP_FOR_YOU: '.For you',
        TAP_MUSIC: '.Music',
        TAP_NEWS_TALK: '.News & Talk',
        TAP_FAVORITES: '.Favorites',
      },
      initial: 'For you',
      states: {
        'For you': {
          on: { TAP_SEARCH: '#other page.content.Search.For you' },
          type: 'parallel',
          states: {
            stories: {
              on: {
                TAP_STORY: {
                  actions: [send('PLAY'), send('MAXIMIZE_PLAYER')],
                },
              },
            },
          },
        },
        Music: {
          on: { TAP_SEARCH: '#other page.content.Search.Music' },
          initial: 'Recommended',
          states: {
            Recommended: {
              on: { NEXT_TAB: 'Trending' },
            },
            Trending: {
              on: { NEXT_TAB: 'Recommended' },
            },
          },
        },
        'News & Talk': {
          on: { TAP_SEARCH: '#other page.content.Search.News & Talk' },
        },
        Favorites: {
          on: { TAP_SETTINGS: '#other page.content.Settings' },
          initial: 'Recent',
          states: {
            Recent: {
              on: { NEXT_TAB: 'Interests' },
            },
            Interests: {
              on: { NEXT_TAB: 'Recent' },
            },
          },
        },
      },
    },
    'other page': {
      id: 'other page',
      meta: { description: 'stacks on top of core page & player' },
      on: {
        BACK: '.visibility.hidden',
      },

      type: 'parallel',
      states: {
        visibility: {
          initial: 'hidden',
          states: {
            hidden: {
              on: {
                TAP_SETTINGS: 'visible',
                TAP_SEARCH: 'visible',
              },
            },
            visible: {},
          },
        },
        content: {
          initial: 'Settings',
          states: {
            Settings: {
              type: 'parallel',
              states: {
                avatar: {
                  on: { TAP_AVATAR: '.choosing avatar' },
                  initial: 'none',
                  states: {
                    none: {},
                    'choosing avatar': {
                      on: { SAVE_AVATAR: 'visible' },
                    },
                    visible: {},
                  },
                },
              },
            },
            Search: {
              initial: 'For you',
              states: {
                'For you': {},
                Music: {},
                'News & Talk': {},
              },
            },
          },
        },
      },
    },
    'content player': {
      id: 'content player',
      meta: { description: 'stacks on top of core page' },
      type: 'parallel',
      states: {
        visibility: {
          initial: 'visible',
          states: {
            hidden: {
              on: { PLAY: 'visible' },
            },
            visible: {
              // on: { HIDE_PLAYER: 'hidden' },
            },
          },
        },
        size: {
          on: {
            PLAY: '.sizeHistory',
          },
          initial: 'minimized',
          states: {
            maximized: {
              on: { MINIMIZE_PLAYER: 'minimized' },
            },
            minimized: {
              on: { MAXIMIZE_PLAYER: 'maximized' },
            },
            sizeHistory: { type: 'history' },
          },
        },
        playback: {
          on: {
            PLAY: '.playing',
            STOP: '.stopped',
            // HIDE_PLAYER: '.stopped',
          },
          initial: 'stopped',
          states: {
            stopped: {
              on: {
                // BACK: '#content player.visibility.hidden',
              },
            },
            playing: {
              on: {
                // BACK: '#content player.size.minimized',
                PAUSE: 'paused',
              },
            },
            paused: {
              on: {
                // BACK: '#content player.size.minimized',
                PAUSE: 'playing',
              },
            },
          },
        },
      },
    },
  },
});