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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const playerMachine = Machine(
  {
    id: "player",
    initial: "idle",
    context: {
      duration: 3,
      currentTime: 0,
      refreshInterval: 333
    },
    on: {
      START_SEEKING: "seeking",
      SEEK_TO: {
        target: "idle.hist",
        actions: "seekTo"
      }
    },
    states: {
      idle: {
        initial: "paused",
        states: {
          paused: {
            on: {
              PLAY: "playing"
            }
          },
          playing: {
            entry: send("UPDATE_CURRENT_TIME", {
              delay: (ctx, e) => ctx.refreshInterval
            }),
            on: {
              UPDATE_CURRENT_TIME: [
                { target: "playing", actions: "updateCurrentTime", cond: "isNotFinished" },
                { target: "#player.ended", actions: "endPlayback" }
              ],
              PAUSE: "paused"
            }
          },
          hist: {
            type: "history"
          }
        }
      },
      ended: "ended",
      seeking: {
        on: {
          STOP_SEEKING: {
            target: "idle.hist",
            actions: "seekTo"
          }
        }
      }
    }
  },
  {
    actions: {
      seekTo: assign({
        currentTime: (ctx, e) =>
          (e.seekTime > 0 && e.seekTime < ctx.duration && e.seekTime) || undefined
      }),
      updateCurrentTime: assign({
        currentTime: (ctx, e) => ctx.currentTime + ctx.refreshInterval / 1000
      }),
      endPlayback: assign({
        currentTime: (ctx, e) => ctx.duration
      })
    },
    guards: {
      isNotFinished: (ctx, e) => ctx.currentTime + ctx.refreshInterval / 1000 < ctx.duration
    }
  }
);