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

machine.js

const mediaPermissionsMachine = Machine(
  {
    id: 'mediaPermissions',
    type: 'parallel',
    // schema: {
    //   context: {} as Context,
    // },
    context: {
      required: true,
      webcam: true,
      mic: true,
      screen: true,
    },
    states: {
      next: {
        initial: 'disabled',
        states: {
          disabled: {
            on: {
              '': [{ target: 'enabled', cond: 'recordingOptional' }],
              WEBCAM_GRANTED: {
                target: 'enabled',
                cond: 'screenGrantedOrNotRequired',
              },
              SCREEN_GRANTED: {
                target: 'enabled',
                cond: 'webcamGrantedOrNotRequired',
              },
            },
          },
          enabled: {
            type: 'final',
          },
        },
      },
      shareWebcam: {
        initial: 'hidden',
        states: {
          hidden: {
            on: {
              '': [{ target: 'idle', cond: 'userMediaRequested' }],
            },
          },
          idle: {
            on: {
              REQUEST_WEBCAM: {
                target: 'requestingWebcam',
              },
            },
          },
          requestingWebcam: {
            on: {
              WEBCAM_GRANTED: {
                target: 'webcamGranted',
              },
              WEBCAM_DENIED: {
                target: 'webcamDenied',
              },
            },
          },
          webcamGranted: {
            on: {
              REVOKE_WEBCAM: {
                target: 'idle',
              },
            },
          },
          webcamDenied: {
            on: {
              RETRY_WEBCAM: {
                target: 'requestingWebcam',
              },
            },
          },
        },
      },
      shareScreen: {
        initial: 'hidden',
        states: {
          hidden: {
            on: {
              '': [{ target: 'idle', cond: 'screenMediaRequested' }],
            },
          },
          idle: {
            on: {
              REQUEST_SCREEN: {
                target: 'requestingScreen',
              },
            },
          },
          requestingScreen: {
            on: {
              SCREEN_GRANTED: {
                target: 'checkQRCode',
              },
              SCREEN_DENIED: {
                target: 'screenDenied',
              },
            },
          },
          checkQRCode: {
            on: {
              QR_CODE_DETECTED: {
                target: 'screenGranted',
              },
              QR_CODE_NOT_FOUND: {
                target: 'qrCodeNotFound',
              },
            },
          },
          qrCodeNotFound: {
            on: {
              RETRY_SCREEN: {
                target: 'requestingScreen',
              },
            },
          },
          screenGranted: {
            on: {
              REVOKE_SCREEN: {
                target: 'idle',
              },
            },
          },
          screenDenied: {
            type: 'final',
            on: {
              RETRY: {
                target: 'requestingScreen',
              },
            },
          },
        },
      },
    },
  },
  {
    guards: {
      recordingOptional: (context) => !context.required,
      userMediaRequested: (context) => context.webcam || context.mic,
      screenMediaRequested: (context) => context.screen,
      webcamGrantedOrNotRequired: (context, _, { state }) => {
        return (
          (state && state.matches('shareWebcam.webcamGranted')) ||
          !(context.webcam || context.mic)
        );
      },
      screenGrantedOrNotRequired: (context, _, { state }) => {
        return (
          (state && state.matches('shareScreen.screenGranted')) ||
          !context.screen
        );
      },
    },
  }
);