add functional volume control element to menubar

Author: jrief

client/admin/FolderAdmin.tsx

@@ -14,7 +14,7 @@ import {
 	useSensors
 } from '@dnd-kit/core';
 import {restrictToWindowEdges} from '@dnd-kit/modifiers';
-import {useCookie, useSessionStorage} from '../common/Storage';
+import {useAudioSettings, useCookie, useSessionStorage} from '../common/Storage';
 import FileUploader from '../common/FileUploader';
 import FinderSettings from './FinderSettings';
 import FolderTabs from './FolderTabs';
@@ -33,6 +33,8 @@ const useClipboard = useSessionStorage('filer-clipboard', []);
 
 export default function FolderAdmin() {
 	const settings = useContext(FinderSettings);
+	const [audioSettings] = useAudioSettings();
+	const [webAudio, setWebAudio] = useState(null);
 	const menuBarRef = useRef(null);
 	const folderTabsRef = useRef(null);
 	const uploaderRef = useRef(null);
@@ -70,6 +72,18 @@ export default function FolderAdmin() {
 				messagelist.remove();
 			}, 5000);
 		}
+
+		const context = new window.AudioContext();
+		const gainNode = context.createGain();
+		gainNode.connect(context.destination);
+		gainNode.gain.value = audioSettings.volume;
+		setWebAudio({context, gainNode});
+
+		return () => {
+			if (webAudio) {
+				webAudio.context.close();
+			}
+		};
 	}, []);
 
 	function modifyMovement(args) {
@@ -352,6 +366,7 @@ export default function FolderAdmin() {
 									menuBarRef={menuBarRef}
 									folderTabsRef={folderTabsRef}
 									layout={layout}
+									webAudio={webAudio}
 									clipboard={clipboard}
 									setClipboard={setClipboard}
 									clearClipboard={clearClipboard}
@@ -397,6 +412,7 @@ export default function FolderAdmin() {
 			downloadFiles={downloadFiles}
 			layout={layout}
 			setLayout={setLayout}
+			webAudio={webAudio}
 			deselectAll={deselectAll}
 			refreshColumns={refreshColumns}
 			clipboard={clipboard}

client/admin/MenuBar.tsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import SearchField from './SearchField';
 import DropDownMenu from '../common/DropDownMenu';
+import VolumeControl from '../common/VolumeControl';
 import FilterByLabel from '../common/FilterByLabel';
 import SortingOptions from '../common/SortingOptions';
 import {Tooltip, TooltipContent, TooltipTrigger} from '../common/Tooltip';
@@ -349,9 +350,10 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 	return (
 		// <nav aria-label={gettext("Finder List View")}>
 			<ul role="menubar">
-				<li className="search-field" role="menuitem" style={{marginRight: 'auto'}}>
+				<li className="search-field" role="menuitem">
 					<SearchField columnRefs={columnRefs} setSearchResult={setSearchResult} settings={settings}/>
 				</li>
+				<VolumeControl {...props} />
 				<MenuItem aria-selected={layout === 'tiles'} onClick={() => setLayout('tiles')} tooltip={gettext("Tiles view")}>
 					<TilesIcon/>
 				</MenuItem>

client/common/Storage.ts

@@ -61,3 +61,4 @@ export function useCookie(key, initial) : [any, (value: any) => any] {
 
 
 export const useSearchZone = initial => useCookie('django-finder-search-zone', initial);
+export const useAudioSettings = useSessionStorage('filer-audio-settings', {volume: 0.5});

client/common/VolumeControl.tsx

@@ -0,0 +1,42 @@
+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';
+
+
+export default function VolumeControl(props: any) {
+	const [audioSettings, setAudioSettings] = useAudioSettings();
+
+	function handleChange(event) {
+		const volume = parseFloat(event.target.value);
+		setAudioSettings({volume: volume});
+		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()}
+			role="menuitem"
+			className="volume-control"
+			tooltip={gettext("Change volume level")}
+			root={props.root}
+		>
+			<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={handleChange}/>
+			</li>
+		</DropDownMenu>
+	);
+}

client/components/folderitem/Audio.tsx

@@ -2,21 +2,31 @@ import React, {useEffect, useState} from 'react';
 
 
 export default function Audio(props) {
-	const [mouseOver, setMouseOver] = useState(false);
+	const [audioElement, setAudioElement] = useState<HTMLAudioElement>();
 
 	useEffect(() => {
-		if (!mouseOver || !props.sample_url)
+		if (!props.sample_url || !props.webAudio)
 			return;
-		const audio = new window.Audio(props.sample_url);
-		const playPromise = audio.play();
-
+		const audioElement = new window.Audio(props.sample_url);
+		const track = props.webAudio.context.createMediaElementSource(audioElement);
+		track.connect(props.webAudio.gainNode).connect(props.webAudio.context.destination);
+		setAudioElement(audioElement);
 		return () => {
-			playPromise.then(() => audio.pause());
+			track.disconnect();
 		};
-	}, [mouseOver]);
+	}, []);
+
+	function handleMouseOver() {
+		if (!audioElement || !props.webAudio)
+			return;
+		if (props.webAudio.context.state === 'suspended') {
+			props.webAudio.context.resume();
+		}
+		audioElement.play();
+	}
 
 	return (
-		<div onMouseEnter={() => setMouseOver(true)} onMouseLeave={() => setMouseOver(false)}>
+		<div onMouseEnter={() => handleMouseOver()} onMouseLeave={() => audioElement?.pause()}>
 			{props.children}
 		</div>
 	);

client/components/folderitem/Video.tsx

@@ -1,18 +1,22 @@
-import React, {useRef, useEffect} from 'react';
+import React, {useRef, useState, useEffect} from 'react';
 import FigureLabels from '../../common/FigureLabels';
 
 
 export default function Video(props) {
 	const videoRef = useRef(null);
 
 	useEffect(() => {
-		if (!(videoRef.current?.parentElement instanceof HTMLElement))
+		if (!(videoRef.current?.parentElement instanceof HTMLElement) || !props.webAudio)
 			return;
+
 		const wrapper = videoRef.current.parentElement;
 		let timeout = null;
 
 		const play = () => {
 			timeout && clearTimeout(timeout);
+			if (props.webAudio.context.state === 'suspended') {
+				props.webAudio.context.resume();
+			}
 			videoRef.current.play();
 		};
 
@@ -24,6 +28,9 @@ export default function Video(props) {
 			}, 1000);
 		};
 
+		const track = props.webAudio.context.createMediaElementSource(videoRef.current);
+		track.connect(props.webAudio.gainNode).connect(props.webAudio.context.destination);
+
 		wrapper.addEventListener('mouseenter', play);
 		wrapper.addEventListener('mouseleave', pause);
 

client/icons/speaker-loud.svg

@@ -102,12 +102,29 @@
 				}
 			}
 
+			&.volume-control {
+				margin-left: 1rem;
+				margin-right: auto;
+
+				ul > li {
+					padding: 0.5rem 0.75rem;
+
+					label {
+						display: block;
+					}
+
+					input[type="range"] {
+						vertical-align: initial;
+						padding: 0;
+					}
+				}
+			}
+
 			&[aria-haspopup="listbox"]:has(>[role~="listbox"]) {
 				width: auto;
 			}
 
 			&.sorting-options {
-				margin-left: auto;
 				&:not(:has(+.filter-by-label)) {
 					margin-right: auto;
 				}