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

machine.js

const videoUri = 'foo';

const createReviewMachine = new Machine({
  id: 'review',
  type: 'parallel',
  context: {
    video: null,
    videoUri,
    duration: 0,
    elapsed: 0,
    uploadProgress: {
      value: null,
      max: null,
    },
  },
  states: {
    playback: {
      initial: 'loading',
      states: {
        loading: {
          on: {
            LOADED: {
              target: 'ready',
              actions: ['setVideo'],
            },
            FAIL: 'failure',
          }
        },
        ready: {
          initial: 'playing',
          states: {
            playing: {
              on: {
                PAUSE: 'paused',
                TIMING: {
                  target: 'playing',
                  actions: ['setElapsed'],
                },
              }
            },
            paused: {
              on: {
                PLAY: 'playing',
              },
            },
          }
        },
        failure: {
          type: 'final'
        },
      },
    },
    upload: {
      initial: 'idle',
      onDone: {
        actions: 'uploadComplete',
      },
      states: {
        idle: {
          on: {
            INIT_UPLOAD: {
              target: 'pending',
            },
          },
        },
        pending: {
          entry: () => {
            console.log('pending')
          },
          invoke: {
            src: 'uploadVideo',
          },
          on: {
            UPLOAD_COMPLETE: 'success',
            UPLOAD_PROGRESS: {
              target: 'pending',
              actions: ['setProgress']
            }
          }
        },
        success: {
          type: 'final',
        },
        failure: {
          // TODO: handle upload failures
        },
      },
    },
  },
})