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

machine.js

const petting = {
	id: 'petting',
	initial: 'establish_token',
	states: {
		// check token with server
		establish_token: {
			initial: 'parse_token',
			meta: { screenId: 'welcome' },
			states: {
				parse_token: {
					entry: ['setTokenFromUrl'],
					on: {
						TOKEN_FOUND: 'waiting_for_server_to_check_token',
						TOKEN_NOT_FOUND: 'token_missing',
					},
				},
				waiting_for_server_to_check_token: {
					entry: ['checkToken'],
					on: {
						POSITIVE_RESPONSE: 'token_valid',
						// token invalid or expired
						// TODO: later handle out-of-hours case
						NEGATIVE_RESPONSE: 'server_said_no',
						// request timeout, network error, request cancelled, etc
						NO_RESPONSE: 'no_response',
					},
				},
				token_valid: {
					// forward to cam, mic, network check
					on: {
						'': '#petting.establish_tech',
					},
				},
				token_missing: {
					// FIXME: where to from here?
					type: 'final',
				},
				server_said_no: {
					type: 'final',
				},
				no_response: {
					on: {
						RETRY: 'waiting_for_server_to_check_token',
					},
				},
			},
		},
		// setup cam, mic, check network
		establish_tech: {
			initial: 'diagnose',
			meta: { screenId: 'diag' },
			entry: ['initOV'],
			states: {
				diagnose: {
					entry: ['diagnose'],
					on: {
						SUCCESS: 'tech_sufficient',
						FAILURE: 'tech_insufficient',
					},
				},
				tech_sufficient: {
					on: {
						// automatically
						'': '#petting.waiting_for_legals',
					},
				},
				tech_insufficient: {
					on: {
						RETRY: 'diagnose',
					},
				},
			},
		},
		waiting_for_legals: {
			meta: { screenId: 'legals' },
			on: {
				// user accepts legals
				LEGALS_ACCEPTED: 'qualified_to_call',
			},
		},
		qualified_to_call: {
			meta: { screenId: 'legals' },
			on: {
				// user initiates preview
				PREVIEW_INITIATED: 'preview',
			},
		},
		preview: {
			meta: { screenId: 'preview' },
			entry: ['displayLocalVideo'],
			exit: ['releaseDevices'],
			on: {
				// user initiates video call
				CALL_INITIATED: 'establish_session',
			},
		},
		establish_session: {
			initial: 'waiting_for_session_id',
			meta: { screenId: 'preview' },
			states: {
				waiting_for_session_id: {
					entry: ['getSession'],
					on: {
						// server responds with session ID
						POSITIVE_RESPONSE: 'got_session_id',
						// server responds, but we cannot proceed
						NEGATIVE_RESPONSE: 'server_said_no',
						// request timeout, network error, request cancelled, etc
						NO_RESPONSE: 'no_response',
					},
				},
				got_session_id: {
					// auto-transition forward
					on: {
						'': '#act',
					},
				},
				server_said_no: {
					type: 'final',
				},
				no_response: {
					on: {
						// user initiates a retry
						RETRY: '#petting.establish_session',
					},
				},
			},
		},
	},
};

const act = {
	id: 'act',
	initial: 'trying_to_join_the_session',
	meta: { screenId: 'video' },
	states: {
		trying_to_join_the_session: {
			entry: ['startJoiningSessionTimeout', 'joinSession'],
			exit: ['cancelJoiningSessionTimeout'],
			on: {
				LOCAL_STREAM_PUBLISHED:
					'waiting_for_parties_to_see_and_hear_each_other',
				// network error, request cancelled, etc
				FAILURE: 'failure',
				// user aborts
				QUIT_WAITING: '#petting.preview',
			},
		},
		failure: {
			on: {
				// user acknowledges notification
				ACK: '#petting.preview',
			},
		},
		waiting_for_parties_to_see_and_hear_each_other: {
			// entry: [{ type: 'startWaitingForOperatorTimeout', timeout: 3000 }],
			entry: ['startWaitingForOperatorTimeout'],
			exit: ['cancelWaitingForOperatorTimeout'],
			on: {
				// operator connected
				PARTIES_CONNECTED: 'in_call',
				// notify user if this takes longer than usual
				// TIMEOUT: 'operator_yet_to_connect',
				QUIT_WAITING: '#petting.preview',
				// FIXME: add event for session breaking up here
			},
		},
		in_call: {
			exit: ['leaveSessionIfThereIsASessionToLeave'],
			on: {
				// FIXME: handle network drops and reconnect attempts
				// see https://openvidu.io/docs/advanced-features/automatic-reconnection
				// user terminates the call
				USER_HANG_UP: '#after',
				// operator terminates the call
				OPERATOR_HANG_UP: '#after',
			},
		},
	},
};

const after = {
	id: 'after',
	meta: { screenId: 'thankYou' },
	type: 'final',
};

const videoMachine = Machine({id: 'video_pub',
	initial: 'petting',
	states: {
		petting, // video call prerequisites
		act, // parties connect, talk and disconnect
		after, // thank you note
	}});