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

machine.js

const videoMachine = Machine({
  id: "video",
  initial: "loading",

  context: {
    video: null,
    duration: 0,
    elapsed: 0,
    lastAction: undefined,
    currentNote: ''
  },

  states: {
    loading: {
      on: {
        LOADED: {
          target: "ready",
          actions: ["setVideo"]
        },
        FAIL: "failure"
      }
    },
    ready: {
      initial: "paused",
      on: {
        TAKE_NOTE: {
          target: 'taking_note',
         
        }
      },
      states: {
        paused: {
          on: {
            PLAY: {
              target: "playing",
              actions: ["setElapsed", "playVideo", assign({lastAction: () => 'PLAY'})]
            }
          }
        },
        playing: {
          on: {
            TIMING: {
              target: "playing",
              actions: "setElapsed"
            },
            PAUSE: {
              target: "paused",
              actions: ["setElapsed", "pauseVideo", assign({lastAction: () => 'PAUSE'})]
            },
            END: "ended"
          }
        },
        ended: {
          on: {
            PLAY: {
              target: "playing",
              actions: "restartVideo"
            }
          }
        },
       
      }
    },
    taking_note: {
      initial: 'focused',
      on: {
        SUBMITTED: [{
          target: 'ready.playing',
          cond: (context) => context.lastAction === 'PLAY' && context.currentNote !== ''
        }, {
          target: 'ready',
          cond: (context) => context.lastAction !== 'PLAY' && context.currentNote !== ''
        }],
        CANCELLED: [{
          target: 'ready.playing',
          cond: (context) => context.lastAction === 'PLAY'
        }, {
          target: 'ready',
          cond: (context) => context.lastAction !== 'PLAY'
        }],
      },
      states: {
        focused: {
          on: {
            CHANGE: {
              target: 'typing'
            }
          }
        },
        typing: {
          entry: ["pauseVideo", assign({currentNote: (context, event) => event.currentNote})],

        },
       
      }
    },
    failure: {
      type: "final"
    }
  }
});