[feature] add volume control

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -11,11 +11,16 @@ import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
 import Tippy from '@tippyjs/react';
 import { useTranslation } from 'renderer/hooks/use-translation.hook';
 import { I18nService } from 'renderer/services/i18n.service';
+import { BsmRange } from '../shared/bsm-range.component';
+import { AudioPlayerService } from 'renderer/services/audio-player.service';
 
 export function NavBar() {
 
     const bsVersionServoce =  BSVersionManagerService.getInstance();
+    const audio = AudioPlayerService.getInstance();
 
+    const playing = useObservable(audio.playing$);
+    const volume = useObservable(audio.volume$);
     const installedVersions = useObservable(bsVersionServoce.installedVersions$);
     const color = useThemeColor("first-color");
     const t = useTranslation();
@@ -27,7 +32,13 @@ export function NavBar() {
       <BsManagerIcon className='relative aspect-square w-16 h-16 mb-3'/>
       <ol id='versions' className='w-fit max-w-[120px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
          <MapsNavBarItem/>
-         <NavBarSpliter/>
+         {playing ? (
+            <div className='relative w-[calc(100%-25px)] mx-auto my-2'>
+                <BsmRange min={0} max={.5} values={[volume]} step={.01} colors={[color, "#40444b"]} onChange={vals => audio.setVolume(vals[0])}/>
+            </div>
+         ) : (
+            <NavBarSpliter/>
+         )}
          {installedVersions && installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
       </ol>
       <NavBarSpliter/>

src/renderer/components/shared/bsm-range.component.tsx

@@ -11,9 +11,10 @@ type Props = {
     max: number,
     step?: number,
     renderLabel?: (value: number) => JSX.Element,
+    colors?: string[]
 }
 
-export function BsmRange({colorType = "first-color", values, onChange, onFinalChange, min, max, renderLabel, step = 1} : Props) {
+export function BsmRange({colorType = "first-color", values, onChange, onFinalChange, min, max, renderLabel, step = 1, colors} : Props) {
 
     const color = useThemeColor(colorType);
     const labelTextColor = getCorrectTextColor(color);
@@ -36,7 +37,7 @@ export function BsmRange({colorType = "first-color", values, onChange, onFinalCh
                     ...props.style,
                     background: getTrackBackground({
                         values: values,
-                        colors: ["#ccc", color, "#ccc"],
+                        colors:  colors ?? ["#ccc", color, "#ccc"],
                         min: min,
                         max: max
                     }),

src/renderer/services/audio-player.service.ts

@@ -1,5 +1,6 @@
 import { Observable } from "rxjs";
 import { BehaviorSubject } from "rxjs";
+import { ConfigurationService } from "./configuration.service";
 
 export class AudioPlayerService{
 
@@ -10,18 +11,31 @@ export class AudioPlayerService{
         return AudioPlayerService.instance;
     }
 
+    private readonly config: ConfigurationService;
+
     private readonly player: HTMLAudioElement;
 
     private readonly _src$: BehaviorSubject<string> = new BehaviorSubject("");
     private readonly _playing$: BehaviorSubject<boolean> = new BehaviorSubject(false);
     private readonly _bpm$: BehaviorSubject<number> = new BehaviorSubject(0);
+    private readonly _volume$: BehaviorSubject<number> = new BehaviorSubject(0);
 
     private constructor(){
+
+        this.config = ConfigurationService.getInstance();
+
         this.player = new Audio();
 
         this.player.onplay = () => this._playing$.next(true);
         this.player.onpause = () => this._playing$.next(false);
         this.player.onended = () => this._playing$.next(false);
+
+        this.player.onvolumechange = () => {
+            this._volume$.next(this.player.volume);
+            this.config.set("audio-level", this.player.volume, true);
+        }
+
+        this.player.volume = this.config.get("audio-level") ?? 0.5;
     }
 
     public play(src: string, bpm = 0): Promise<void>{
@@ -41,6 +55,10 @@ export class AudioPlayerService{
         return this.player.play();
     }
 
+    public setVolume(volume: number): void{
+        this.player.volume = volume;
+    }
+
     public get src$(): Observable<string>{
         return this._src$.asObservable();
     }
@@ -50,9 +68,13 @@ export class AudioPlayerService{
     public get bpm$(): Observable<number>{
         return this._bpm$.asObservable();
     }
+    public get volume$(): Observable<number>{
+        return this._volume$.asObservable();
+    }
 
     public get src(): string{ return this._src$.value; }
     public get playing(): boolean{ return this._playing$.value; }
     public get bpm(): number{ return this._bpm$.value; }
+    public get volume(): number{ return this._volume$.value; }
 
 }