mirror of
https://github.com/Zagrios/bs-manager.git
synced 2026-07-03 14:08:25 +02:00
Merge pull request #169 from Zagrios/feature/volume-control/154
feature/volume-control/154
This commit is contained in:
MathieuG-P
@@ -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 (
|
||||
<AnimatePresence>
|
||||
{ModalComponent && (
|
||||
{ModalComponent && resolver && (
|
||||
<div className="top-0 absolute w-screen h-screen flex content-center items-center justify-center z-[90]">
|
||||
<motion.span key="modal-overlay" onClick={() => 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}}/>
|
||||
<motion.div key="modal" initial={{y: "100vh"}} animate={{y: 0}} exit={{y: "100vh"}}>
|
||||
|
||||
@@ -26,8 +26,8 @@ export function NavBar() {
|
||||
<nav id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-light-main-color-1 dark:bg-main-color-1'>
|
||||
<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/>
|
||||
<MapsNavBarItem/>
|
||||
<NavBarSpliter/>
|
||||
{installedVersions && installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
|
||||
</ol>
|
||||
<NavBarSpliter/>
|
||||
|
||||
@@ -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);
|
||||
@@ -35,10 +36,10 @@ export function BsmRange({colorType = "first-color", values, onChange, onFinalCh
|
||||
style={{
|
||||
...props.style,
|
||||
background: getTrackBackground({
|
||||
values: values,
|
||||
colors: ["#ccc", color, "#ccc"],
|
||||
min: min,
|
||||
max: max
|
||||
values,
|
||||
colors: colors ?? ["#ccc", color, "#ccc"],
|
||||
min,
|
||||
max
|
||||
}),
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -48,11 +48,14 @@ import { TwitterIcon } from "./icons/twitter-icon.component";
|
||||
import { Mee6Icon } from "./icons/mee6-icon.component";
|
||||
import { InfoIcon } from "./icons/info-icon.component";
|
||||
import { SyncIcon } from "./icons/sync-icon.component";
|
||||
import { VolumeUpIcon } from "./icons/volume-up-icon.component";
|
||||
import { VolumeOffIcon } from "./icons/volume-off-icon.component";
|
||||
import { VolumeDownIcon } from "./icons/volume-down-icon.component";
|
||||
|
||||
export type BsmIconType = BsvMapCharacteristic | (
|
||||
"settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|"discord"|"info"|
|
||||
"terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|"twitter"|"sync"|
|
||||
"copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|"filter"|"mee6"|
|
||||
"copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|"filter"|"mee6"|"volume-up"|"volume-off"|"volume-down"|
|
||||
"fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
|
||||
);
|
||||
|
||||
@@ -107,6 +110,9 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
|
||||
if(icon === "mee6"){ return <Mee6Icon className={className} style={style}/> }
|
||||
if(icon === "info"){ return <InfoIcon className={className} style={style}/> }
|
||||
if(icon === "sync"){ return <SyncIcon className={className} style={style}/> }
|
||||
if(icon === "volume-up"){ return <VolumeUpIcon className={className} style={style}/> }
|
||||
if(icon === "volume-down"){ return <VolumeDownIcon className={className} style={style}/> }
|
||||
if(icon === "volume-off"){ return <VolumeOffIcon className={className} style={style}/> }
|
||||
return <TrashIcon className={className} style={style}/>
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export function TwitterIcon(props: {className?: string, style?: CSSProperties})
|
||||
return (
|
||||
<svg className={props.className} style={props.style} viewBox="0 0 24 24" fill="currentColor">
|
||||
<g>
|
||||
<path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path>
|
||||
<path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
export function VolumeDownIcon(props: {className?: string, style?: CSSProperties}) {
|
||||
return (
|
||||
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" fill="currentColor">
|
||||
<path d="M251.283 675.999q-13.564 0-22.423-8.859-8.859-8.859-8.859-22.423V507.283q0-13.564 8.859-22.423 8.859-8.859 22.423-8.859h117.179L486.794 357.67q14.769-14.769 33.987-6.91 19.218 7.858 19.218 28.781v392.661q0 21.18-19.218 29.038-19.218 7.859-33.987-6.91L368.462 675.999H251.283Zm374.358 49.949V424.463q43.05 19.102 68.704 60.551 25.654 41.448 25.654 90.986 0 50.205-25.654 90.525-25.654 40.32-68.704 59.423ZM489.744 429.436l-99.129 96.82H270.256v99.488h120.359l99.129 97.23V429.436ZM378.923 576Z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
export function VolumeOffIcon(props: {className?: string, style?: CSSProperties}) {
|
||||
return (
|
||||
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" fill="currentColor">
|
||||
<path d="M770.974 963.435 663.179 855.64q-15.436 9.948-31.423 18.512-15.987 8.564-33.244 15-12.845 4.846-23.909-3.397-11.064-8.243-11.064-22.756 0-6.82 4.013-12.064 4.012-5.243 10.243-7.397 12.872-4.487 25.436-10.41t24-13.692L468.153 659.948v112.254q0 21.18-19.218 29.038-19.217 7.859-33.986-6.91L296.617 675.999H179.438q-13.564 0-22.423-8.859-8.859-8.859-8.859-22.423V507.283q0-13.564 8.859-22.423 8.859-8.859 22.423-8.859H283.54L94.155 286.36q-7.23-7.231-7.218-17.705.013-10.474 7.628-18.089 7.616-7.359 17.692-7.359 10.077 0 17.692 7.359l677.485 677.075q7.231 7.231 7.295 17.705.064 10.474-7.295 18.089-7.615 7.615-18.23 7.615t-18.23-7.615ZM598.512 260.591q97.769 38.231 157.551 123.423Q815.845 469.206 815.845 575q0 51.795-15.449 100.09t-44.398 90.217l-35.819-35.819q22.59-34.026 34-73.193Q765.59 617.129 765.59 575q0-91.743-51.308-165.628-51.308-73.885-136.487-103.321-6.82-2.153-10.538-7.692-3.718-5.538-3.718-12.358 0-14.051 11.269-22.025 11.269-7.974 23.704-3.385ZM376.257 568.718Zm257.28 74.129-69.998-69.999V427.847q40.461 22 62.538 61.961Q648.153 529.77 648.153 576q0 17.693-3.654 34.5-3.654 16.808-10.962 32.347ZM468.153 477.463l-86.306-86.692 33.102-33.101q14.769-14.769 33.986-6.782 19.218 7.987 19.218 28.653v97.922Zm-50.255 247.819V610.359l-84.103-84.103H198.411v99.488H318.36l99.538 99.538Z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
export function VolumeUpIcon(props: {className?: string, style?: CSSProperties}) {
|
||||
return (
|
||||
<svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" fill="currentColor">
|
||||
<path d="M596.512 889.152q-12.846 4.846-23.91-3.416-11.063-8.263-11.063-22.794 0-6.763 4.012-12.007 4.013-5.243 10.244-7.397 84.769-32 136.282-104.936Q763.589 665.667 763.589 575t-51.512-163.808q-51.513-73.141-136.282-104.73-6.821-2.154-10.539-7.965-3.717-5.812-3.717-12.587 0-13.96 11.268-21.934 11.269-7.974 23.705-3.385 97.64 38.231 157.486 123.339 59.846 85.107 59.846 191.07t-59.846 191.07q-59.846 85.108-157.486 123.082ZM177.438 675.999q-13.468 0-22.375-8.907t-8.907-22.375V507.283q0-13.468 8.907-22.375t22.375-8.907h117.178L412.948 357.67q14.769-14.769 33.987-6.722 19.218 8.047 19.218 28.593v392.661q0 20.803-19.218 28.85t-33.987-6.722L294.616 675.999H177.438Zm374.357 49.949V424.463q43.051 19.102 68.704 60.551 25.654 41.448 25.654 90.986 0 50.205-25.654 90.525-25.653 40.32-68.704 59.423ZM415.898 429.436l-99.128 96.82H196.411v99.488H316.77l99.128 97.23V429.436ZM318.872 576Z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -1,37 +1,54 @@
|
||||
import { useState } from 'react';
|
||||
import { useObservable } from 'renderer/hooks/use-observable.hook';
|
||||
import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
|
||||
import { AudioPlayerService } from 'renderer/services/audio-player.service';
|
||||
import { IpcService } from 'renderer/services/ipc.service';
|
||||
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 { 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 ipcService = IpcService.getInstance();
|
||||
const windows = WindowManagerService.getInstance();
|
||||
const audio = AudioPlayerService.getInstance();
|
||||
|
||||
const [maximized, setMaximized] = useState(false);
|
||||
const volume = useObservable(audio.volume$, audio.volume);
|
||||
const playing = useObservable(audio.playing$);
|
||||
const color = useThemeColor("first-color");
|
||||
|
||||
const closeWindow = () => {
|
||||
return windows.close(template);
|
||||
const [maximized, setMaximized] = useState(false);
|
||||
|
||||
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.muted || !volume.volume){ return "volume-off"; }
|
||||
if(volume.volume < .5){ return "volume-down"; }
|
||||
return "volume-up";
|
||||
})()
|
||||
|
||||
if(template === "index.html"){
|
||||
|
||||
@@ -42,7 +59,13 @@ export default function TitleBar({template = "index.html"} : {template: AppWindo
|
||||
<span className='text-gray-800 dark:text-gray-100 font-bold text-xs italic'>BSManager</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="window-controls" className="h-full flex shrink-0">
|
||||
<div id="window-controls" className="h-full flex shrink-0 items-center">
|
||||
<div className='h-full text-gray-800 dark:text-gray-200 pr-1 cursor-pointer flex flex-row justify-end items-center gap-2 group pl-5'>
|
||||
<div className='shrink-0 w-0 overflow-hidden transition-all group-hover:w-16 group-hover:overflow-visible group-active:w-16 group-active:overflow-visible text-main-color-3'>
|
||||
<BsmRange min={0} max={1} step={.01} values={[volume.muted ? 0 : volume.volume]} colors={[color, "currentColor"]} onChange={val => audio.setVolume(val[0])} onFinalChange={val => audio.setFinalVolume(val[0])}/>
|
||||
</div>
|
||||
<BsmButton className='shrink-0 h-[23px] w-[23px] aspect-square !bg-transparent flex items-start' iconClassName={volumeIcon === "volume-down" && "-translate-x-[1.8px]"} icon={volumeIcon} withBar={false} onClick={() => audio.toggleMute()}/>
|
||||
</div>
|
||||
<div onClick={minimizeWindow} className="text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-[#4F545C] cursor-pointer w-11 h-full shrink-0 flex justify-center items-center" id="min-button" >
|
||||
<svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"> </rect></svg>
|
||||
</div>
|
||||
|
||||
@@ -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<string> = new BehaviorSubject("");
|
||||
private readonly _playing$: BehaviorSubject<boolean> = new BehaviorSubject(false);
|
||||
private readonly _bpm$: BehaviorSubject<number> = new BehaviorSubject(0);
|
||||
private readonly _volume$: BehaviorSubject<PlayerVolume>;
|
||||
|
||||
private lastVolume: number;
|
||||
|
||||
private constructor(){
|
||||
|
||||
this.config = ConfigurationService.getInstance();
|
||||
|
||||
console.log("BBB", this.config.get<PlayerVolume>("audio-level"));
|
||||
|
||||
this._volume$ = new BehaviorSubject(
|
||||
this.config.get<PlayerVolume>("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<void>{
|
||||
@@ -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<string>{
|
||||
return this._src$.asObservable();
|
||||
}
|
||||
@@ -50,9 +98,19 @@ export class AudioPlayerService{
|
||||
public get bpm$(): Observable<number>{
|
||||
return this._bpm$.asObservable();
|
||||
}
|
||||
public get volume$(): Observable<PlayerVolume>{
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user