From c406dfee7930ab592afddefd293a91eb3a058008 Mon Sep 17 00:00:00 2001 From: MathieuG-P Date: Sat, 4 Mar 2023 13:41:48 +0100 Subject: [PATCH] [feature-154] volume slider finished --- .../components/modal/modal.component.tsx | 4 +- .../svgs/icons/volume-down-icon.component.tsx | 2 +- .../svgs/icons/volume-off-icon.component.tsx | 2 +- .../svgs/icons/volume-up-icon.component.tsx | 2 +- .../title-bar/title-bar.component.tsx | 60 +++++++++---------- src/renderer/services/audio-player.service.ts | 60 +++++++++++++++---- 6 files changed, 84 insertions(+), 46 deletions(-) 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/svgs/icons/volume-down-icon.component.tsx b/src/renderer/components/svgs/icons/volume-down-icon.component.tsx index 55bd006d..6bfafc6a 100644 --- a/src/renderer/components/svgs/icons/volume-down-icon.component.tsx +++ b/src/renderer/components/svgs/icons/volume-down-icon.component.tsx @@ -3,7 +3,7 @@ import { CSSProperties } from "react"; export function VolumeDownIcon(props: {className?: string, style?: CSSProperties}) { return ( - + ) } diff --git a/src/renderer/components/svgs/icons/volume-off-icon.component.tsx b/src/renderer/components/svgs/icons/volume-off-icon.component.tsx index fd451cb5..3a4d059d 100644 --- a/src/renderer/components/svgs/icons/volume-off-icon.component.tsx +++ b/src/renderer/components/svgs/icons/volume-off-icon.component.tsx @@ -3,7 +3,7 @@ import { CSSProperties } from "react"; export function VolumeOffIcon(props: {className?: string, style?: CSSProperties}) { return ( - + ) } diff --git a/src/renderer/components/svgs/icons/volume-up-icon.component.tsx b/src/renderer/components/svgs/icons/volume-up-icon.component.tsx index e710d111..87885e3d 100644 --- a/src/renderer/components/svgs/icons/volume-up-icon.component.tsx +++ b/src/renderer/components/svgs/icons/volume-up-icon.component.tsx @@ -3,7 +3,7 @@ import { CSSProperties } from "react"; export function VolumeUpIcon(props: {className?: string, style?: CSSProperties}) { return ( - + ) } diff --git a/src/renderer/components/title-bar/title-bar.component.tsx b/src/renderer/components/title-bar/title-bar.component.tsx index 90ff86be..367cca8d 100644 --- a/src/renderer/components/title-bar/title-bar.component.tsx +++ b/src/renderer/components/title-bar/title-bar.component.tsx @@ -7,46 +7,46 @@ import { WindowManagerService } from 'renderer/services/window-manager.service'; import { AppWindow } from 'shared/models/window-manager/app-window.model'; import { BsmButton } from '../shared/bsm-button.component'; import { BsmRange } from '../shared/bsm-range.component'; -import { BsmIcon, BsmIconType } from '../svgs/bsm-icon.component'; +import { BsmIconType } from '../svgs/bsm-icon.component'; import './title-bar.component.css' export default function TitleBar({template = "index.html"} : {template: AppWindow}) { - const ipcService = IpcService.getInstance(); - const windows = WindowManagerService.getInstance(); - const audio = AudioPlayerService.getInstance(); + const ipcService = IpcService.getInstance(); + const windows = WindowManagerService.getInstance(); + const audio = AudioPlayerService.getInstance(); - const volume = useObservable(audio.volume$); - const playing = useObservable(audio.playing$); - const color = useThemeColor("first-color"); + const volume = useObservable(audio.volume$, audio.volume); + const playing = useObservable(audio.playing$); + const color = useThemeColor("first-color"); - const [maximized, setMaximized] = useState(false); + const [maximized, setMaximized] = useState(false); - const closeWindow = () => { - return windows.close(template); + const closeWindow = () => { + return windows.close(template); + } + + const maximizeWindow = () => { + ipcService.sendLazy('window.maximize'); } - const maximizeWindow = () => { - ipcService.sendLazy('window.maximize'); - } + const minimizeWindow = () => { + ipcService.sendLazy('window.minimize'); + } - const minimizeWindow = () => { - ipcService.sendLazy('window.minimize'); - } + const resetWindow = () => { + ipcService.sendLazy('window.reset'); + } - const resetWindow = () => { - ipcService.sendLazy('window.reset'); - } - - const toogleMaximize = () => { - if(maximized){ resetWindow(); } - else{ maximizeWindow(); } - setMaximized(!maximized); - } + const toogleMaximize = () => { + if(maximized){ resetWindow(); } + else{ maximizeWindow(); } + setMaximized(!maximized); + } const volumeIcon: BsmIconType = (() => { - if(volume === 0){ return "volume-off"; } - if(volume < 0.5){ return "volume-down"; } + if(volume.muted || !volume.volume){ return "volume-off"; } + if(volume.volume < .5){ return "volume-down"; } return "volume-up"; })() @@ -60,11 +60,11 @@ export default function TitleBar({template = "index.html"} : {template: AppWindo
-
+
- audio.setVolume(val[0])}/> + audio.setVolume(val[0])} onFinalChange={val => audio.setFinalVolume(val[0])}/>
- audio.setVolume(0)}/> + audio.toggleMute()}/>
diff --git a/src/renderer/services/audio-player.service.ts b/src/renderer/services/audio-player.service.ts index 92361363..7caecf0f 100644 --- a/src/renderer/services/audio-player.service.ts +++ b/src/renderer/services/audio-player.service.ts @@ -1,5 +1,4 @@ -import { Observable } from "rxjs"; -import { BehaviorSubject } from "rxjs"; +import { Observable, BehaviorSubject } from "rxjs"; import { ConfigurationService } from "./configuration.service"; export class AudioPlayerService{ @@ -18,24 +17,34 @@ export class AudioPlayerService{ private readonly _src$: BehaviorSubject = new BehaviorSubject(""); private readonly _playing$: BehaviorSubject = new BehaviorSubject(false); private readonly _bpm$: BehaviorSubject = new BehaviorSubject(0); - private readonly _volume$: 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.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; + 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{ @@ -56,7 +65,28 @@ export class AudioPlayerService{ } public setVolume(volume: number): void{ - this.player.volume = volume; + 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{ @@ -68,13 +98,19 @@ export class AudioPlayerService{ public get bpm$(): Observable{ return this._bpm$.asObservable(); } - public get volume$(): Observable{ + 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(): number{ return this._volume$.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