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

machine.js

const VolumeStreamsMachine = Machine({
  id: 'VolumeStreams',
  type: 'parallel',
  on: {
    volume_changed: {
      actions: 'forward_to_parent',
    },
    volume_muted: {
      actions: 'forward_to_parent',
    },
    volume_unmuted: {
      actions: 'forward_to_parent',
    },
  },
  states: {
    surroundings: {
      invoke: {
        id: 'surroundings_volume',
        src: 'collapsible_volume',
      },
    },
    streaming: {
      initial: 'not_streaming',
      states: {
        not_streaming: {
          on: {
            streaming_started: 'volume',
          },
        },
        volume: {
          invoke: {
            id: 'streaming_volume',
            src: 'collapsible_volume',
          },
          on: {
            streaming_ended: 'not_streaming',
          },
        },
      },
    },
    program: {
      initial: 'no_volume',
      states: {
        no_volume: {
          on: {
            streaming_ended: {
              cond: 'program_has_volume',
              target: 'volume',
            },
            program_switched: {
              cond: 'program_has_volume',
              target: 'volume',
            },
          },
        },
        volume: {
          invoke: {
            id: 'program_volume',
            src: 'collapsible_volume',
          },
          on: {
            streaming_started: 'no_volume',
            program_switched: {
              cond: 'program_has_no_volume',
              target: 'no_volume',
            },
          },
        },
      },
    },
  },
});