owncast/web/components/stores/application-state.ts

140 lines
4.1 KiB
TypeScript

/*
This is a finite state machine model that is used by xstate. https://xstate.js.org/
You send events to it and it changes state based on the pre-determined
modeling.
This allows for a clean and reliable way to model the current state of the
web application, and a single place to determine the flow of states.
You can paste this code into https://stately.ai/viz to see a visual state
map or install the VS Code plugin:
https://marketplace.visualstudio.com/items?itemName=statelyai.stately-vscode
*/
import { createMachine } from 'xstate';
export interface AppStateOptions {
chatAvailable: boolean;
chatLoading?: boolean;
videoAvailable: boolean;
appLoading?: boolean;
}
export function makeEmptyAppState(): AppStateOptions {
return {
chatAvailable: false,
chatLoading: true,
videoAvailable: false,
appLoading: true,
};
}
const OFFLINE_STATE: AppStateOptions = {
chatAvailable: false,
chatLoading: false,
videoAvailable: false,
appLoading: false,
};
const ONLINE_STATE: AppStateOptions = {
chatAvailable: true,
chatLoading: false,
videoAvailable: true,
appLoading: false,
};
const LOADING_STATE: AppStateOptions = {
chatAvailable: false,
chatLoading: false,
videoAvailable: false,
appLoading: true,
};
const GOODBYE_STATE: AppStateOptions = {
chatAvailable: true,
chatLoading: false,
videoAvailable: false,
appLoading: false,
};
export enum AppStateEvent {
Loading = 'LOADING',
Loaded = 'LOADED',
Online = 'ONLINE',
Offline = 'OFFLINE', // Have not pulled configuration data from the server.
NeedsRegister = 'NEEDS_REGISTER',
Fail = 'FAIL',
}
const appStateModel =
/** @xstate-layout N4IgpgJg5mDOIC5QEMAOqDKAXZWwDoAbAe2QgEsA7KAYgCUBRAcQEkMAVBxgEUVFWKxyWcsUp8QAD0QBGAGwz8ABgCscpUoDsAZgAcKgEwrtATgA0IAJ6zNS-CZMLtcuQBY9Jg5t0BfHxbRMHDwiUgpqGgA5BgZuDAB9RlYOLgkBIRExCWkEGRVFVXUtPUNjcytEAxNXfB0DbSNNORMG119-EEDsXAISMipaABkAeQBBbli0wWFRcSQpWQVlNQ0dfSNTC2tc+vwZVwMZWxNbA5kDAz8A9G6QvvDaADFRlkGpjNns2VcCleL1spbRDaA74FS6ORVfYHTSObRXTo3YIEABOYCg5FgeBRA3ozDYnB47xmWXmOQOKj22hUnl02iajjk2iBCCqdgO2n2VRcbQhCK6yPwaIxWLAOIiz1exMyc1A5KMVJpBjpDJczIqCG0enwXk0MiUENMjiUBjk-KRPSFYDIlnwYkIVDANGGj0egxY0WlnzJiF0TXwulU9LqWhMMl0LIM7ipmguIIObU85qClrRNrtADMMw7KE7hpF3Z75ukSbKFgg5Pp7PSQdTXBp9uVtlHtDG464E7okx0BanrRBbVBiMQIAAjSxOyRYy3IDPYgAU2g0y4AlDReyE0wP8EOR+OwF7SXLff7A8ZNCHYeGWedW3qlDIWkz61rLgjKCO4BIN70wgND2W8o3pyyjKrCdZ6q4sYqMmtyouimLYv+xbTDKXyakuyiuHI+QmCoJquCo2FyCyS52PURzqI+mgqIYpqwYKW62vajoAehsJyFS+paPhfoRhqUa6PgTIuLoRznComiEWaPYWpu-bMVmOYHihHxHuWRQ6pCJz0sqGgNMBBjCfohiEUoIJ0kyDF9umu5jhObE+rkqh2BCLS8XhYa6K4wGUuGtEviYZ5qNZ8k2o5x4IJJnGmlUOixoG5kGCy+G1JyXgHGJJhKByrihQQsBigAbmKjzIOQhAAK5ohF5YXJx+q2MYbieFB4KkW0yj6NBfr6vU3n5fglWFSiGblVVNWqaW6H5HY4bNFJbhKI4HV3k0rgnNlS6xm+1wpngtU5NeGoALQXDqbVBct+g5Qofh+EAA */
createMachine({
id: 'appState',
initial: 'loading',
predictableActionArguments: true,
states: {
loading: {
meta: {
...LOADING_STATE,
},
on: {
NEEDS_REGISTER: {
target: 'loading',
},
LOADED: {
target: 'ready',
},
FAIL: {
target: 'serverFailure',
},
},
},
ready: {
initial: 'offline',
states: {
online: {
meta: {
...ONLINE_STATE,
},
on: {
OFFLINE: {
target: 'goodbye',
},
},
},
offline: {
meta: {
...OFFLINE_STATE,
},
on: {
ONLINE: {
target: 'online',
},
},
},
goodbye: {
on: {
ONLINE: {
target: 'online',
},
},
meta: {
...GOODBYE_STATE,
},
after: {
'300000': {
target: 'offline',
},
},
},
},
},
serverFailure: {
type: 'final',
},
userfailure: {
type: 'final',
},
},
});
export default appStateModel;