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

machine.js

const video = Machine({
  id: 'video',
  initial: 'disconnected',
  context: {
    sessionId: null,
    session: null,
    publisher: null,
    streams: null,
    token: null
  },
  states: {
    disconnected: {
      id: 'disconnected',
      initial: 'idle',
      states: {
        'idle': {
          id: 'idle',
          on: {
            'START': 'init'
          }
        },
        'init': {
          id: 'init',
          entry: ['initSession'],
          invoke: [
            {
              id: 'initPublisher',
              src: 'invokeInitPublisher'
            },
            {
              id: 'createToken',
              src: 'invokeCreateToken',
              onDone: {
                actions: 'assignToken'
              }
            }
          ],
          on: {
            'VIDEO_ELEMENT_CREATED': {
              target: 'ready',
              cond: 'checkToken',
              actions: 'assignPublisher'
            }
          }
        },
        'ready': {
          id: 'ready',
          on: {
            'CONNECT': '#connected'
          }
        }
      }
    },
    connected: {
      id: 'connected',
      type: 'parallel',
      states: {
        'session': {
          id: 'session',
          invoke: {
            id: 'connectSession',
            src: 'invokeConnectSession'
          },          
          on: {
            'SESSION_DISCONNECTED': '#disconnected'
          }
        },
        'subscriber': {
          id: 'subscriber',
          on: {
            'SUBSCRIBER_ADDED': {
              actions: 'addNewSusbscriber'
            },
            'SUBSCRIBER_REMOVED': {
              actions: 'removeSusbscriber'
            },
            'AUDIO_LEVEL_UPDATE': {
              actions: 'updateAudioLevel'
            },
            'STREAM_PROPERTY_CHANGED': {
              actions: 'updateStreamProperty'
            },
            'VIDEO_ELEMENT_CREATED': {
              actions: 'updateSubscriberVideo'
            }
          }
        },
        'publisher': {
          id: 'publisher',
          on: {
            'AUDIO_LEVEL_UPDATE': {
              actions: 'updateAudioLevel'
            },
            'STREAM_PROPERTY_CHANGED': {
              actions: 'updateStreamProperty'
            }
          }
        }
      },
      on: {
        'DISCONNECT': '#disconnected'
      }
    }
  }
}, {
  actions: {
    addNewSusbscriber: () => (console.log('Subscriber Added')),
    assignToken: assign({ token: (ctx, e) => e.data.token }),
    assignPublisher: () => (console.log('Update Publisher')),
    initSession: () => (console.log('Initialize Session')),
    removeSusbscriber: () => (console.log('Subscriber Removed')),
    updateAudioLevel: () => (console.log('Audio Level Update')),
    updateStreamProperty: () => (console.log('Stream Property Updated')),
    updateSubscriberVideo: () => (console.log('Subscriber Video Updated'))
  },
  guards: {
    checkToken: () => true
  },
  services: {
    invokeInitPublisher: (ctx) => (cb) => (cb('VIDEO_ELEMENT_CREATED')),
    invokeCreateToken: () => { new Promise((resolve) => resolve({ token: 'token' })) },
    invokeConnectSession: (ctx) => (cb) => (cb('VIDEO_ELEMENT_CREATED'))
  }
});