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

machine.js

const sceneStates = {
  initial: 'playingVideoCanvasScene',
  states: {
    playingVideoCanvasScene: {
      on: {
        COMPLETE_SCENES: 'done',
        NEXT_SCENE: {
          actions: assign({
            changeScene: (context, event) => {
              if (remainingOrderedScenes.length) {
                context.targetSceneId = context.remainingOrderedScenes[0]
                const newRemainingOrderedScenes = [...context.remainingOrderedScenes]
                newRemainingOrderedScenes.shift()
                context.remainingOrderedScenes = newRemainingOrderedScenes
              } else {
                  
              }
            }
          })
        },
        STOP_SCENE: {
          target: 'restartScene',
          actions: assign({
            elapsed: (context, event) => context.elapsed = 0,
          }),
          
        },
      }
    },
    done: {type: 'final'},
    restartScene: {
      on: {
        PLAY_SCENE: 'playingVideoCanvasScene'
      }
    },
    
  },
  onDone: {
      actions: 'stopPlayingVideoCanvasScene'
    }
}

const fetchMachine = Machine({
    id: 'videoProject',
    initial: 'ready',
    context: {
      targetSceneId: null,
      retries: 0,
      elapsed: 0,
      remainingOrderedScenes: [{
        sceneId: 'a1',
        duration: 10,
        order: 0
      },
      {
        sceneId: 'b1',
        duration: 20,
        order: 1
      },
      {
        sceneId: 'c1',
        duration: 5,
        order: 2
      }]
    },
    states: {
      
      loading: {
        on: {
          RESOLVE: 'ready',
          REJECT: 'failure'
        }
      },
      ready: {
        on: {
          PLAY: 'playingVideoCanvas'
        }
      },
      playingVideoCanvas: {
        on: {
          PAUSE: 'paused',
          TICK: {
            actions: assign({
              elapsed: (context, event) => context.elapsed + 1,
            })
          },
          RESET: {
            target: 'ready',
            actions: assign({
              elapsed: (context, event) => context.elapsed = 0
            })
          }
        },
        ...sceneStates
      },
      paused: {
        on: {
          PLAY: 'playingVideoCanvas',
          RESET: {
            target: 'ready',
            actions: assign({
              
            })
          }
        }
      },
      failure: {
        on: {
          RETRY: {
            target: 'loading',
            actions: assign({
              retries: (context, event) => context.retries + 1
            })
          }
        }
      }
    }
  });