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

machine.js

const FS = {
  IDLE: 'idle',
  IN_VIEW: 'in_view',
  APPEARING: 'appearing',
  UNVEILING: 'unveiling',
  REVEALING: 'revealing',
  HIGHLIGHT_PLAYING: 'highlight_playing',
  REVEALED: 'revealed',
};

Machine(
  {
    id: 'packItem',
    initial: FS.IDLE,
     context: {
      // default values in context
      // these do not appear in codebase
      flags: {
        packOpeningRevealVideo: true,
      },
      autoAppearDelay: 1000,
    },
    states: {
      [FS.IDLE]: {
        on: {
          START: '#packItem.in_view',
          FORCE_REVEAL: '#packItem.revealed',
        },
      },
      [FS.IN_VIEW]: {
        after: {
          AUTO_APPEAR_DELAY: '#packItem.appearing',
        },
        on: {
          FORCE_REVEAL: '#packItem.revealed',
        },
      },
      [FS.APPEARING]: {
        on: {
          UNVEIL: '#packItem.unveiling',
          FORCE_REVEAL: '#packItem.revealed',
        },
      },
      [FS.UNVEILING]: {
        on: {
          REVEAL: '#packItem.revealing',
          FORCE_REVEAL: '#packItem.revealed',
        },
        entry: 'onUnveil',
      },
      [FS.REVEALING]: {
        on: {
          FINISH: [
            {
              target: '#packItem.highlight_playing',
              cond: 'isHighlightEnabled',
            },
            { target: '#packItem.revealed' },
          ],
          FORCE_REVEAL: '#packItem.revealed',
        },
      },
      [FS.HIGHLIGHT_PLAYING]: {
        on: {
          FINISH: '#packItem.revealed',
          FORCE_REVEAL: '#packItem.revealed',
        },
      },
      [FS.REVEALED]: {
        type: 'final',
        entry: 'onRevealed',
      },
    },
  },
  {
    delays: {
      AUTO_APPEAR_DELAY: (context) => {
        return context.autoAppearDelay;
      },
    },
    guards: {
      isHighlightEnabled: (context) => {
        const { flags } = context;
        const isHighlightAutoplayOn = flags.packOpeningRevealVideo;
        return isHighlightAutoplayOn;
      },
    },
  },
);