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

machine.js

const volumeMachine = Machine({
	id: 'volume',
	initial: 'init',
	context: {
		volume: 0.7,
		previousVolume: 0.7,
		isMuted: false,
	},
	states:{
		init:{
			entry: 'loadConfigDefaults',
			//TODO: XState v5
			// always:[
			// 	{ target: 'unmuted',
			// 	},
			// ],
			on: {
				'': [ // imediately invoke XState v4
					{ target: 'unmuted',
					},
				],
			},
		},
		unmuted:{
			on:{
				MUTE_TRIGGER:{
					target: 'muted',
				},
				VOLUME_CHANGE:{
					actions: 'volumeChange',
				},
			}
		},
		muted:{
			entry: 'mute',
			exit: 'unmute',
			on:{
				MUTE_TRIGGER:{
					target: 'unmuted',
				},
				VOLUME_CHANGE:{
					target: 'unmuted',
					actions: 'volumeChange',
				},
			},
		},
	}
});

//## Actions

const loadConfigDefaults = (ctx)=>{
	//TODO HTMLMediaElement.muted = ctx.isMuted
	//TODO HTMLMediaElement.volume = ctx.volume
	//TODO may have to assign values from an outside config, like cookie, profile, etc
}

const mute = assign((ctx, evt)=>{
	//TODO HTMLMediaElement.muted = true
	return {
		isMuted: true,
		previousVolume: ctx.volume,
		volume: 0,
	}
})

const unmute = assign((ctx, evt)=>{
	//TODO HTMLMediaElement.muted = false
	return {
		isMuted: false,
		volume: ctx.previousVolume,
	}
})

const volumeChange = assign((ctx, evt)=>{
	//TODO HTMLMediaElement.volume = evt.value
	return {
		volume: evt.value,
	}
})