add volume control to Audio detail view

Author: jrief

client/common/DropDownMenu.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useRef} from 'react';
 import {Tooltip, TooltipTrigger, TooltipContent} from '../common/Tooltip';
 
 
-export default function DropDownMenu(props){
+export default function DropDownMenu(props) {
 	const ref = useRef(null);
 	const WrapperElement = props.wrapperElement ?? 'li';
 
@@ -45,14 +45,23 @@ export default function DropDownMenu(props){
 			aria-haspopup="listbox"
 			aria-expanded="false"
 			className={props.className}
-		>
+		>{
+		props.tooltip ? (
 			<Tooltip>
 				<TooltipTrigger>{props.label ? props.label : ''}{props.icon && <i>{props.icon}</i>}</TooltipTrigger>
 				<TooltipContent root={props.root}>{props.tooltip}</TooltipContent>
 				<ul role="listbox">
 					{props.children}
 				</ul>
 			</Tooltip>
-		</WrapperElement>
+		) : (
+			<>
+				<div>{props.label ? props.label : ''}{props.icon && <i>{props.icon}</i>}</div>
+				<ul role="listbox">
+					{props.children}
+				</ul>
+			</>
+		)
+		}</WrapperElement>
 	)
 }

client/components/editor/Audio.tsx

@@ -2,6 +2,8 @@ import React, {Fragment, useState} from 'react';
 import WavesurferPlayer from '@wavesurfer/react';
 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 PauseIcon from '../../icons/pause.svg';
 import PlayIcon from '../../icons/play.svg';
 
@@ -14,6 +16,7 @@ export default function Audio(props) {
 	};
 	const [wavesurfer, setWavesurfer] = useState(null);
 	const [isPlaying, setIsPlaying] = useState(false);
+	const [audioSettings, setAudioSettings] = useAudioSettings();
 
 	const onReady = (ws) => {
 		document.getElementById('wavesurfer-initializing')?.remove();
@@ -42,11 +45,23 @@ export default function Audio(props) {
 		wavesurfer && wavesurfer.playPause();
 	};
 
+	function setVolume(event) {
+		const volume = parseFloat(event.target.value);
+		setAudioSettings({volume: volume});
+		wavesurfer && wavesurfer.setVolume(volume);
+	}
+
 	const controlButtons = [
 		<Fragment key="play-pause">{isPlaying ?
 			<button type="button" onClick={onPlayPause}><PauseIcon/>{gettext("Pause")}</button> :
 			<button type="button" onClick={onPlayPause}><PlayIcon/>{gettext("Play")}</button>
-		}</Fragment>
+		}</Fragment>,
+		<DropDownMenu key="volume-control" className="volume-control with-caret" label={gettext("Set Volume")}>
+			<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}/>
+			</li>
+		</DropDownMenu>,
 	];
 
 	const placeholderStyle: React.CSSProperties = {

client/scss/_menubar.scss

@@ -1,4 +1,5 @@
 @use "colors";
+@use "volume-control";
 
 @mixin menubar {
 	[role="menubar"] {
@@ -106,25 +107,15 @@
 				margin-left: 1rem;
 				margin-right: auto;
 
-				ul > li {
-					padding: 0.5rem 0.75rem;
-
-					label {
-						display: block;
-					}
-
-					input[type="range"] {
-						vertical-align: initial;
-						padding: 0;
-					}
-				}
+				@include volume-control.volume-control;
 			}
 
 			&[aria-haspopup="listbox"]:has(>[role~="listbox"]) {
 				width: auto;
 			}
 
 			&.sorting-options {
+				margin-left: auto;
 				&:not(:has(+.filter-by-label)) {
 					margin-right: auto;
 				}

client/scss/_volume-control.scss

@@ -0,0 +1,15 @@
+@mixin volume-control {
+	ul > li {
+		padding: 0.5rem 0.75rem;
+
+		label {
+			display: block;
+			color: inherit;
+		}
+
+		input[type="range"] {
+			vertical-align: initial;
+			padding: 0;
+		}
+	}
+}

client/scss/finder-admin.scss

@@ -5,6 +5,7 @@
 @use "progress";
 @use "labels";
 @use "tooltip";
+@use "volume-control";
 
 // messagelist appears after saving a file
 ul.messagelist {
@@ -759,20 +760,27 @@ ul.messagelist {
 				background: var(--default-button-bg);
 				margin-right: 10px;
 				margin-bottom: 10px;
+
 				&[aria-expanded="false"] {
 					cursor: pointer;
 					&:hover {
 						background: var(--default-button-hover-bg);
 					}
 				}
+
 				&::after {
 					margin-left: 10px;
 					border-top-color: var(--button-fg);
 				}
+				&.volume-control {
+					@include volume-control.volume-control;
+				}
+
 				[role="listbox"] {
 					color: inherit;
 					background-color: inherit;
 					padding: 5px;
+
 					> li {
 						padding: 0 30px 0 10px;
 						cursor: pointer;