diff --git a/src/renderer/components/modal/modal.component.tsx b/src/renderer/components/modal/modal.component.tsx index 67027e9e..f7ed71d9 100644 --- a/src/renderer/components/modal/modal.component.tsx +++ b/src/renderer/components/modal/modal.component.tsx @@ -16,6 +16,8 @@ export function Modal() { const {firstColor, secondColor} = useThemeColor(); + console.log(ModalComponent, resolver); + useEffect(() => { const onEscape = (e: KeyboardEvent) => { @@ -38,7 +40,7 @@ export function Modal() { return ( - {ModalComponent && ( + {ModalComponent && resolver && (
modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className="absolute top-0 bottom-0 right-0 left-0 bg-black" initial={{opacity: 0}} animate={{opacity: ModalComponent && .60}} exit={{opacity: 0}} transition={{duration: .2}}/> diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx index a6062ccd..dacd1493 100644 --- a/src/renderer/components/nav-bar/nav-bar.component.tsx +++ b/src/renderer/components/nav-bar/nav-bar.component.tsx @@ -26,8 +26,8 @@ export function NavBar() {
-
+
+
+
+ audio.setVolume(val[0])} onFinalChange={val => audio.setFinalVolume(val[0])}/> +
+ audio.toggleMute()}/> +
diff --git a/src/renderer/services/audio-player.service.ts b/src/renderer/services/audio-player.service.ts index 753d4679..7caecf0f 100644 --- a/src/renderer/services/audio-player.service.ts +++ b/src/renderer/services/audio-player.service.ts @@ -1,5 +1,5 @@ -import { Observable } from "rxjs"; -import { BehaviorSubject } from "rxjs"; +import { Observable, BehaviorSubject } from "rxjs"; +import { ConfigurationService } from "./configuration.service"; export class AudioPlayerService{ @@ -10,18 +10,41 @@ export class AudioPlayerService{ return AudioPlayerService.instance; } + private readonly config: ConfigurationService; + private readonly player: HTMLAudioElement; private readonly _src$: BehaviorSubject = new BehaviorSubject(""); private readonly _playing$: BehaviorSubject = new BehaviorSubject(false); private readonly _bpm$: BehaviorSubject = new BehaviorSubject(0); + private readonly _volume$: BehaviorSubject; + + private lastVolume: number; private constructor(){ + + this.config = ConfigurationService.getInstance(); + + console.log("BBB", this.config.get("audio-level")); + + this._volume$ = new BehaviorSubject( + this.config.get("audio-level") || { volume: 0.5, muted: false } + ); + + this.lastVolume = this._volume$.value.volume; + 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._volume$.subscribe(volume => { + console.log("AAA", volume); + this.player.volume = volume.volume; + this.player.muted = volume.muted; + this.config.set("audio-level", volume); + }); } public play(src: string, bpm = 0): Promise{ @@ -41,6 +64,31 @@ export class AudioPlayerService{ return this.player.play(); } + public setVolume(volume: number): void{ + const playerVolume: PlayerVolume = {muted: volume <= 0, volume}; + this._volume$.next(playerVolume); + } + + public setFinalVolume(volume: number): void{ + if(volume > 0){ this.lastVolume = volume; } + const playerVolume: PlayerVolume = {muted: volume <= 0, volume: this.lastVolume}; + this._volume$.next(playerVolume); + } + + public mute(): void{ + const playerVolume = {...this._volume$.value, muted: true}; + this._volume$.next(playerVolume); + } + + public unmute(): void{ + const playerVolume = {...this._volume$.value, muted: false}; + this._volume$.next(playerVolume); + } + + public toggleMute(): void{ + this.muted ? this.unmute() : this.mute(); + } + public get src$(): Observable{ return this._src$.asObservable(); } @@ -50,9 +98,19 @@ export class AudioPlayerService{ public get bpm$(): Observable{ return this._bpm$.asObservable(); } + public get volume$(): Observable{ + 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(): PlayerVolume{ return this._volume$.value; } + public get muted(): boolean{ return this.player.muted; } +} + +interface PlayerVolume{ + volume: number; + muted: boolean; } \ No newline at end of file