From b16f7150e8bdd6d554cca0fb533b71b2404557cf Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Fri, 3 Mar 2023 01:46:28 +0100 Subject: [PATCH 1/3] [feature] add volume control --- .../components/nav-bar/nav-bar.component.tsx | 13 ++++++++++- .../components/shared/bsm-range.component.tsx | 5 +++-- src/renderer/services/audio-player.service.ts | 22 +++++++++++++++++++ 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx index a6062ccd..6eb5fa14 100644 --- a/src/renderer/components/nav-bar/nav-bar.component.tsx +++ b/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() {
    - + {playing ? ( +
    + audio.setVolume(vals[0])}/> +
    + ) : ( + + )} {installedVersions && installedVersions.map((version) => )}
diff --git a/src/renderer/components/shared/bsm-range.component.tsx b/src/renderer/components/shared/bsm-range.component.tsx index 62eb3b88..89e02cf4 100644 --- a/src/renderer/components/shared/bsm-range.component.tsx +++ b/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 }), diff --git a/src/renderer/services/audio-player.service.ts b/src/renderer/services/audio-player.service.ts index 753d4679..92361363 100644 --- a/src/renderer/services/audio-player.service.ts +++ b/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 = new BehaviorSubject(""); private readonly _playing$: BehaviorSubject = new BehaviorSubject(false); private readonly _bpm$: BehaviorSubject = new BehaviorSubject(0); + private readonly _volume$: BehaviorSubject = 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{ @@ -41,6 +55,10 @@ export class AudioPlayerService{ return this.player.play(); } + public setVolume(volume: number): void{ + this.player.volume = volume; + } + public get src$(): Observable{ return this._src$.asObservable(); } @@ -50,9 +68,13 @@ 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(): number{ return this._volume$.value; } } \ No newline at end of file From 8a168d20b3b63de94e529fb8839a10bf2fbfa654 Mon Sep 17 00:00:00 2001 From: MathieuG-P Date: Fri, 3 Mar 2023 23:59:57 +0100 Subject: [PATCH 2/3] [feature] sound control in title bar --- .../components/nav-bar/nav-bar.component.tsx | 15 ++--------- .../components/shared/bsm-range.component.tsx | 6 ++--- .../components/svgs/bsm-icon.component.tsx | 8 +++++- .../svgs/icons/twitter-icon.component.tsx | 2 +- .../svgs/icons/volume-down-icon.component.tsx | 9 +++++++ .../svgs/icons/volume-off-icon.component.tsx | 9 +++++++ .../svgs/icons/volume-up-icon.component.tsx | 9 +++++++ .../title-bar/title-bar.component.tsx | 25 ++++++++++++++++++- 8 files changed, 64 insertions(+), 19 deletions(-) create mode 100644 src/renderer/components/svgs/icons/volume-down-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/volume-off-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/volume-up-icon.component.tsx diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx index 6eb5fa14..dacd1493 100644 --- a/src/renderer/components/nav-bar/nav-bar.component.tsx +++ b/src/renderer/components/nav-bar/nav-bar.component.tsx @@ -11,16 +11,11 @@ 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(); @@ -31,14 +26,8 @@ export function NavBar() {