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 initialContext = {
  config: {
    videoBaseUrl: "",
    defaultVideos: {
      intro: "",
      loop: "",
      outro: ""
    }
  },
  //
  videoSrc: "",
  videoLoop: false,
  videoMuted: false,
  //
  startButtonVisible: false,
  chatVisible: false
};

const machineConfig = {
  id: "avatarChatMachine",
  initial: "initial",
  context: initialContext,
  states: {
    initial: {
      on: {
        INIT: {
          actions: assign((context, event) => ({ config: event.config })),
          target: "idle"
        }
      },
      exit: ["showStartButton"]
    },

    idle: {
      entry: ["playLoop"],
      on: {
        PLAY_INTRO: "intro",
        PLAY_QUESTION: "question",
        CHAT_FINISHED: "outro"
      },
      exit: ["hideStartButton"]
    },

    intro: {
      entry: ["hideChatWindow", "playIntro"],
      // onExitIntro must be provided to the machine from the callsite
      exit: ["onExitIntro"],
      on: {
        SKIP_VIDEO: { target: "idle", actions: ["showChatWindow"] },
        VIDEO_FINISHED: { target: "idle", actions: ["showChatWindow"] }
      }
    },

    question: {
      entry: ["playQuestion", "showChatWindow"],
      on: {
        SKIP_VIDEO: "idle",
        VIDEO_FINISHED: "idle",
        CHAT_FINISHED: "outro"
      }
    },

    outro: {
      type: "final",
      entry: ["hideChatWindow", "playOutro"]
    }
  }
};

const machineOptions = {
  actions: {
    showStartButton: assign(context => ({ startButtonVisible: true })),
    hideStartButton: assign(context => ({ startButtonVisible: false })),
    showChatWindow: assign(context => ({ chatVisible: true })),
    hideChatWindow: assign(context => ({ chatVisible: false })),
    //
    playQuestion: assign((context, event) => ({
      videoSrc: getVideoUrl(event.video, context.config.videoBaseUrl),
      videoLoop: false,
      videoMuted: false
    })),
    playIntro: assign(context => {
      const { intro: video } = context.config.defaultVideos;
      return {
        videoSrc: getVideoUrl(video, context.config.videoBaseUrl),
        videoMuted: false,
        videoLoop: false
      };
    }),
    playLoop: assign(context => {
      const { loop: video } = context.config.defaultVideos;
      return {
        videoSrc: getVideoUrl(video, context.config.videoBaseUrl),
        videoMuted: true,
        videoLoop: true
      };
    }),
    playOutro: assign(context => {
      const { outro: video } = context.config.defaultVideos;
      return {
        videoSrc: getVideoUrl(video, context.config.videoBaseUrl),
        videoMuted: false,
        videoLoop: false
      };
    })
  }
};

const machine = Machine(machineConfig, machineOptions);