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

machine.js

const machine = Machine({
  id: 'Audacy App',
  context: {
    email: '',
    password: '',
    loginError: '',
    recoveryEmailError: '',
  },
  initial: 'logged out',
  states: {
    'logged out': {
      onDone: {
        target: 'logged in',
      },
      initial: 'splash screen',
      states: {
        'splash screen': {
          after: {
            1000: 'choosing login method',
          },
        },
        'choosing login method': {
          on: {
            'CONTINUE WITH AUDACY': 'Audacy login',
          },
        },
        'Audacy login': {
          id: 'Audacy login',
          onDone: {
            target: 'done login',
          },
          on: {
            BACK: 'choosing login method',
          },
          initial: 'entering login',
          states: {
            // TODO: parallel states for email and password
            'entering login': {
              on: {
                'EDIT EMAIL': {
                  actions: 'assign email',
                },
                'EDIT PASSWORD': {
                  actions: 'assign password',
                },
                'FORGOT PASSWORD': '#resetting Audacy password',
                'SUBMIT LOGIN': {
                  target: 'checking login',
                  cond: 'if email/password are valid',
                },
              },
            },
            'checking login': {
              invoke: {
                src: 'check Audacy login',
                onDone: {
                  target: 'done Audacy login',
                  actions: 'clear login error',
                },
                onError: {
                  target: 'entering login',
                  actions: 'assign login error',
                },
              },
            },
            'done Audacy login': { type: 'final' },
          },
        },
        'resetting Audacy password': {
          id: 'resetting Audacy password',
          onDone: 'Audacy login',
          on: {
            BACK: 'Audacy login',
          },
          initial: 'entering email',
          states: {
            'entering email': {
              onDone: 'email sent',
              initial: 'editing email',
              states: {
                'editing email': {
                  on: {
                    'SUBMIT EMAIL': 'sending recovery email',
                  },
                },
                'sending recovery email': {
                  invoke: {
                    src: 'send recovery email',
                    onDone: {
                      target: 'done entering email',
                      actions: 'clear recovery email error',
                    },
                    onError: {
                      target: 'editing email',
                      actions: 'assign recovery email error',
                    },
                  },
                },
                'done entering email': { type: 'final' },
              },
            },
            'email sent': {
              on: {
                'RESEND EMAIL': 'entering email.sending recovery email',
                'BACK TO LOGIN': 'done resetting Audacy password',
              },
            },
            'done resetting Audacy password': { type: 'final' },
          },
        },
        'done login': { type: 'final' },
      },
    },
    'logged in': {
      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',
          },
          initial: 'For you',
          states: {
            'For you': {
              on: { SEARCH: '#other page.content.Search.For you' },
              type: 'parallel',
              states: {
                stories: {
                  on: {
                    'PLAY STORY': {
                      actions: [send('PLAY'), send('MAXIMIZE PLAYER')],
                    },
                  },
                },
              },
            },
            Music: {
              on: {
                SEARCH: '#other page.content.Search.Music',
                'PLAY CONTENT': {
                  actions: [send('PLAY'), send('MAXIMIZE PLAYER')],
                },
              },
              initial: 'Recommended',
              states: {
                Recommended: {
                  on: { 'NEXT TAB': 'Trending' },
                },
                Trending: {
                  on: { 'NEXT TAB': 'Recommended' },
                },
              },
            },
            'News & Talk': {
              on: { SEARCH: '#other page.content.Search.News & Talk' },
            },
            Favorites: {
              on: { 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: {
                    SETTINGS: 'visible',
                    SEARCH: 'visible',
                  },
                },
                visible: {},
              },
            },
            content: {
              initial: 'Settings',
              states: {
                Settings: {
                  type: 'parallel',
                  states: {
                    avatar: {
                      on: { 'EDIT 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',
                  },
                },
              },
            },
          },
        },
      },
    },
  },
});