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

machine.js

const machine = Machine( 
   {
    id: "Stories",
    type: "parallel",
    states: {
      playback: {
        initial: "playing",
        states: {
          playing: {
            initial: "counting down",
            states: {
              "counting down": {
                after: {
                  countdown: {
                    target: "advancing",
                  },
                },
              },
              advancing: {
                entry: send("NEXT"),
                after: {
                  transition: {
                    target: "counting down",
                  },
                },
                // on: {
                //   "": [{ target: "counting down" }],
                // },
              },
            },
            on: { PAUSE: "paused" },
          },
          paused: {
            on: { RESUME: "playing" },
          },
        },
      },

      content: {
        initial: "part 1",
        states: {
          "part 1": {
            on: {
              NEXT: "part 2",
            },
            // after: {
            //   3000: "part 2",
            // },
          },

          "part 2": {
            on: {
              BACK: "part 1",
              NEXT: "part N",
            },
            // after: {
            //   5000: "part N",
            // },
          },

          "part N": {
            on: {
              BACK: "part 2",
              NEXT: "done",
            },
            // after: {
            //   3000: "done",
            // },
          },

          done: {
            on: {
              NEXT: "part 1",
            },
            // after: {
            //   5000: "part 1",
            // },
          },
        },
      },
    },
  },
  {
    delays: {
      countdown: 5000,
      transition: 1000,
    },
  }
  );