render speaker icon in Audio detail view

Author: jrief

client/common/DropDownMenu.tsx

@@ -48,15 +48,15 @@ export default function DropDownMenu(props) {
 		>{
 		props.tooltip ? (
 			<Tooltip>
-				<TooltipTrigger>{props.label ? props.label : ''}{props.icon && <i>{props.icon}</i>}</TooltipTrigger>
+				<TooltipTrigger>{props.icon && <i>{props.icon}</i>}{props.label ? props.label : ''}</TooltipTrigger>
 				<TooltipContent root={props.root}>{props.tooltip}</TooltipContent>
 				<ul role="listbox">
 					{props.children}
 				</ul>
 			</Tooltip>
 		) : (
 			<>
-				<div>{props.label ? props.label : ''}{props.icon && <i>{props.icon}</i>}</div>
+				<div>{props.icon && <i>{props.icon}</i>}{props.label ? props.label : ''}</div>
 				<ul role="listbox">
 					{props.children}
 				</ul>

client/common/VolumeControl.tsx

@@ -6,6 +6,17 @@ import SpeakerSilentIcon from '../icons/speaker-silent.svg';
 import SpeakerMutedicon from '../icons/speaker-muted.svg';
 
 
+export function renderSpeakerIcon(volume) {
+	if (volume === 0.0) {
+		return <SpeakerMutedicon/>;
+	}
+	if (volume < 0.33) {
+		return <SpeakerSilentIcon/>;
+	}
+	return <SpeakerLoudIcon/>;
+}
+
+
 export default function VolumeControl(props: any) {
 	const [audioSettings, setAudioSettings] = useAudioSettings();
 
@@ -15,19 +26,9 @@ export default function VolumeControl(props: any) {
 		props.webAudio.gainNode.gain.setValueAtTime(volume, props.webAudio.context.currentTime);
 	}
 
-	function renderSpeakerIcon() {
-		if (audioSettings.volume === 0.0) {
-			return <SpeakerMutedicon/>;
-		}
-		if (audioSettings.volume < 0.33) {
-			return <SpeakerSilentIcon/>;
-		}
-		return <SpeakerLoudIcon/>;
-	}
-
 	return (
 		<DropDownMenu
-			icon={renderSpeakerIcon()}
+			icon={renderSpeakerIcon(audioSettings.volume)}
 			role="menuitem"
 			className="volume-control"
 			tooltip={gettext("Change volume level")}

client/components/editor/Audio.tsx

@@ -4,6 +4,7 @@ import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.js';
 import FileDetails from '../../admin/FileDetails';
 import {useAudioSettings} from '../../common/Storage';
 import DropDownMenu from '../../common/DropDownMenu';
+import {renderSpeakerIcon} from '../../common/VolumeControl';
 import PauseIcon from '../../icons/pause.svg';
 import PlayIcon from '../../icons/play.svg';
 
@@ -56,7 +57,13 @@ export default function Audio(props) {
 			<button type="button" onClick={onPlayPause}><PauseIcon/>{gettext("Pause")}</button> :
 			<button type="button" onClick={onPlayPause}><PlayIcon/>{gettext("Play")}</button>
 		}</Fragment>,
-		<DropDownMenu key="volume-control" className="volume-control with-caret" label={gettext("Set Volume")}>
+		<DropDownMenu
+			key="volume-control"
+			className="volume-control with-caret"
+			label={gettext("Set Volume")}
+			icon={renderSpeakerIcon(audioSettings.volume)}
+			wrapperElement="div"
+		>
 			<li>
 				<label htmlFor="volume_level">{gettext("Volume level")}:</label>
 				<input name="volume_level" type="range" min="0.0" max="1.0" step="0.001" value={audioSettings.volume} onChange={setVolume}/>

client/scss/finder-admin.scss

@@ -724,8 +724,8 @@ ul.messagelist {
 			margin-bottom: 10px;
 			display: flex;
 			flex-wrap: wrap;
-			button, a {
-				display: block;
+			button, a, [role="combobox"] {
+				display: flex;
 				appearance: none;
 				border: none;
 				font-weight: 400;
@@ -745,6 +745,10 @@ ul.messagelist {
 					cursor: not-allowed;
 				}
 
+				i {
+					vertical-align: middle;
+				}
+
 				svg {
 					margin-right: 0.5rem;
 					vertical-align: text-bottom;