Generated by XState Viz: https://xstate.js.org/viz?gist=f347abb80b0324c891f28842df31090e

machine.js

  const ComponentStateMachine = Machine({
    id: 'component:record-screen',
    initial: 'ssr',
    states: {
      ssr: {
        on: {
          MOUNT: {
            target: 'loading',
          },
        },
      },
      loading: {
        entry: ['onLoadingPipeline'],
        type: 'parallel',
        states: {
          audio: {
            initial: 'pending',
            states: {
              pending: {
                entry: ['onLoadingAudio'],
                on: {
                  AUDIO_LOADED: 'ready',
                  AUDIO_STALLED: 'stalled',
                },
              },
              stalled: {
                after: {
                  3000: 'error',
                },
                on: {
                  AUDIO_LOADED: 'ready',
                  AUDIO_PROGRESS: 'pending',
                },
              },
              error: {
                entry: ['onLoadingAudioError'],
                on: {
                  AUDIO_LOADED: 'ready',
                  AUDIO_PROGRESS: 'pending',
                },
              },
              ready: {
                type: 'final',
              },
            },
          },
          audioRecorder: {
            initial: 'pending',
            states: {
              pending: {
                entry: ['onLoadingAudioRecorder'],
                on: {
                  AUDIO_RECORDER_READY: 'ready',
                },
              },
              ready: {
                type: 'final',
              },
            },
          },
          lyrics: {
            initial: 'pending',
            states: {
              pending: {
                entry: ['onLoadingLyrics'],
                on: {
                  LYRICS_PARSED: 'ready',
                },
              },
              ready: {
                type: 'final',
              },
            },
          },
          videoRecorder: {
            initial: 'pending',
            states: {
              pending: {
                entry: ['onLoadingVideoRecorder'],
                on: {
                  VIDEO_RECORDER_READY: 'ready',
                },
              },
              ready: {
                type: 'final',
              },
            },
          },
        },
        onDone: 'loadingUserMedia',
      },
      loadingUserMedia: {
        entry: ['startGetUserMedia'],
        on: {
          GUM_READY: {
            target: 'headphonesModal',
          },
        },
      },
      headphonesModal: {
        on: {
          GUM_READY: {
            target: 'headphonesModal',
          },
          START: {
            target: 'started',
          },
          EXIT: {
            target: 'unmounting',
          },
        },
      },
      started: {
        entry: ['onEnterStartedState'],
        exit: ['onExitStartedState'],
        on: {
          CLOSE: {
            target: 'exiting',
          },
          TOO_QUIET: {
            target: 'unmounting',
          },
        },
      },
      exiting: {
        on: {
          EXIT: {
            target: 'unmounting',
          },
          RESTART: {
            target: 'started',
          },
          WAIT: {
            target: 'waiting',
          },
        },
      },
      waiting: {
        entry: ['onEnterWaitingState'],
        on: {
          EXIT: {
            target: 'unmounting',
          },
        },
      },
      unmounting: {
        entry: ['onEnterUnmountingState'],
        type: 'final',
      },
    },
  });