4 speaker symbols for muted, silent, medium, loud

Author: jrief

client/common/VolumeControl.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import {useAudioSettings} from '../common/Storage';
 import DropDownMenu from '../common/DropDownMenu';
-import SpeakerLoudIcon from '../icons/speaker-loud.svg';
-import SpeakerSilentIcon from '../icons/speaker-silent.svg';
 import SpeakerMutedicon from '../icons/speaker-muted.svg';
+import SpeakerSilentIcon from '../icons/speaker-silent.svg';
+import SpeakerMediumIcon from '../icons/speaker-medium.svg';
+import SpeakerLoudIcon from '../icons/speaker-loud.svg';
 
 
 export function renderSpeakerIcon(volume) {
@@ -13,6 +14,9 @@ export function renderSpeakerIcon(volume) {
 	if (volume < 0.33) {
 		return <SpeakerSilentIcon/>;
 	}
+	if (volume < 0.66) {
+		return <SpeakerMediumIcon/>;
+	}
 	return <SpeakerLoudIcon/>;
 }