Make the volume slider less silly

[robintown]

Previously, dragging it all the way to the left would not mute the participant but rather bottom out at 10% volume, and people have found this unintuitive. Let's make it less silly by giving the slider a range of 0% to 100%, and making the mute toggle button have the same effect as dragging the slider to zero. When unmuting, it will reset to the last non-zero "committed" volume, similar to how the volume sliders in desktop environments work.

[AndrewFerr]

IMO using a switch statement reads better:

Suggested change

	(state, event) =>
	event === "toggle mute"
	? { ...state, muted: !state.muted }
	: event === "commit"
	? { ...state, committedVolume: state.volume }
	: // Volume adjustment
	event === 0
	? // Dragging the slider to zero should have the same effect as
	// muting: reset the volume to the committed volume, as if it were
	// never dragged
	{ ...state, muted: true, volume: state.committedVolume }
	: { ...state, muted: false, volume: event },
	),
	(state, event) => {
	switch (event) {
	case "toggle mute":
	return { ...state, muted: !state.muted };
	case "commit":
	return { ...state, committedVolume: state.volume };
	case 0: // Volume adjustment
	// Dragging the slider to zero should have the same effect as
	// muting: reset the volume to the committed volume, as if it were
	// never dragged
	return { ...state, muted: true, volume: state.committedVolume };
	default:
	return { ...state, muted: false, volume: event };
	}
	}),

[AndrewFerr]

OOI where are onValueChangeProp & onValueCommit prop defined?

[AndrewFerr]

Why does this need to be optional?