add optional labels for progress-bar

src/renderer/components/progress-bar/bsm-progress-bar.component.tsx

@@ -9,27 +9,34 @@ export function BsmProgressBar() {
 
     const progressBarService = ProgressBarService.getInstance();
 
-    const progress = useObservable(progressBarService.progression$);
+    const progressData = useObservable(progressBarService.progressData$);
     const visible = useObservable(progressBarService.visible$);
     const style = useObservable(progressBarService.style$);
 
+    const progressLabel = (() => {
+        if(!progressData){ return ""; }
+        if(progressData?.label){ return progressData.label; }
+        return `${Math.floor(progressData.progression)}%`
+    })();
+    const progressValue: number = progressData?.progression;
+
     const {firstColor, secondColor} = useThemeColor();
 
-  return (
-    <AnimatePresence> { visible && 
-        <motion.div initial={{y: "120%"}} animate={{y:"0%"}} exit={{y:"120%"}} className="w-full absolute h-14 flex justify-center items-center bottom-2 pointer-events-none" style={style}>
-            <div className={`flex items-center content-center justify-center bottom-9 z-10 rounded-lg bg-light-main-color-2 dark:bg-main-color-2 shadow-center shadow-black cursor-pointer transition-all duration-300 ${!progress && "h-14 w-14 !rounded-full"} ${!!progress && "h-5 w-3/4 !rounded-full p-[6px]"}`}>
-            { !!progress && (
-                <div className="relative flex items-center h-full w-full rounded-full bg-black">
-                    <div className="w-0 h-full relative rounded-full download-progress flex items-center transition-all" style={{width: `${progress}%`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}>
-                        <img className="h-[70px] w-[70px] min-w-fit absolute z-[1] -translate-y-1 -right-8 transition-all" src={BeatRunningImg} />
-                    </div>
-                    <span className="absolute w-full text-center text-white -top-[3px] left-0 text-[10px]">{`${Math.floor(progress)}%`}</span>
+    return (
+        <AnimatePresence> { visible && 
+            <motion.div initial={{y: "120%"}} animate={{y:"0%"}} exit={{y:"120%"}} className="w-full absolute h-14 flex justify-center items-center bottom-2 pointer-events-none" style={style}>
+                <div className={`flex items-center content-center justify-center bottom-9 z-10 rounded-lg bg-light-main-color-2 dark:bg-main-color-2 shadow-center shadow-black cursor-pointer transition-all duration-300 ${!progressValue && "h-14 w-14 !rounded-full"} ${!!progressValue && "h-5 w-3/4 !rounded-full p-[6px]"}`}>
+                    { !!progressValue && (
+                        <div className="relative flex items-center h-full w-full rounded-full bg-black">
+                            <div className="w-0 h-full relative rounded-full download-progress flex items-center transition-all" style={{width: `${progressValue}%`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}>
+                                <img className="h-[70px] w-[70px] min-w-fit absolute z-[1] -translate-y-1 -right-8 transition-all" src={BeatRunningImg} />
+                            </div>
+                            <span className="absolute w-full text-center text-white -top-[3px] left-0 text-[10px]">{progressLabel}</span>
+                        </div>
+                    )}
+                    { !progressValue && <img className="w-12 h-12 spin-loading" src={BeatWaitingImg}></img> }
                 </div>
-            )}
-            { !progress && <img className="w-12 h-12 spin-loading" src={BeatWaitingImg}></img> }
-        </div>
-        </motion.div>
-    } </AnimatePresence>
+            </motion.div>
+        } </AnimatePresence>
   )
 }

src/renderer/services/bs-mods-manager.service.ts

@@ -1,8 +1,10 @@
+import { Observable } from "rxjs";
 import { BehaviorSubject } from "rxjs";
 import { map } from "rxjs/operators";
 import { BSVersion } from "shared/bs-version.interface";
 import { InstallModsResult, UninstallModsResult } from "shared/models/mods";
 import { Mod, ModInstallProgression } from "shared/models/mods";
+import { ProgressionInterface } from "shared/models/progress-bar";
 import { IpcService } from "./ipc.service";
 import { ModalExitCode, ModalService, ModalType } from "./modale.service";
 import { NotificationService, NotificationType } from "./notification.service";
@@ -42,10 +44,13 @@ export class BsModsManagerService {
         return this.ipcService.send<Mod[], BSVersion>("get-installed-mods", {args: version}).then(res => res.data);
     }
 
-    public installMods(mods: Mod[], version: BSVersion){
-        if(!this.progressBar.require()){ return; }
+    public installMods(mods: Mod[], version: BSVersion): Promise<void>{
+        if(!this.progressBar.require()){ return undefined; }
+
+        const progress$: Observable<ProgressionInterface> = this.ipcService.watch<ModInstallProgression>("mod-installed").pipe(map(res => {
+            return {progression: res.data.progression, label: res.data.name} as ProgressionInterface
+        }));
 
-        const progress$ = this.ipcService.watch<ModInstallProgression>("mod-installed").pipe(map(res => res.data.progression));
         this.progressBar.show(progress$, true, {paddingLeft: "190px", paddingRight: "190px", bottom: "20px"});
 
         this.isInstalling$.next(true);
@@ -65,7 +70,7 @@ export class BsModsManagerService {
             this.progressBar.hide();
         });
     }
-    public async uninstallMod(mod: Mod, version: BSVersion){
+    public async uninstallMod(mod: Mod, version: BSVersion): Promise<void>{
 
         if(!this.progressBar.require()){ return; }
 
@@ -117,9 +122,4 @@ export class BsModsManagerService {
         });
 
     }
-
-    public isModsAvailable(version: BSVersion): Promise<boolean>{
-        throw "NOT IMPLEMENTED YET";
-    }
-
 }

src/renderer/services/progress-bar.service.ts

@@ -3,6 +3,7 @@ import { BehaviorSubject, Observable, Subscription, timer } from "rxjs";
 import { IpcService } from "./ipc.service";
 import { NotificationService } from "./notification.service";
 import { CSSProperties } from "react";
+import { ProgressionInterface } from "shared/models/progress-bar";
 
 export class ProgressBarService{
 
@@ -11,7 +12,7 @@ export class ProgressBarService{
     private readonly ipcService: IpcService;
     private notificationService: NotificationService;
 
-    private readonly _progression$: BehaviorSubject<number>;
+    private readonly _progression$: BehaviorSubject<ProgressionInterface>;
     private readonly _visible$: BehaviorSubject<boolean>;
     private readonly _style$: BehaviorSubject<CSSProperties>; 
 
@@ -26,53 +27,55 @@ export class ProgressBarService{
         this.ipcService = IpcService.getInstance();
         this.notificationService = NotificationService.getInstance();
 
-        this._progression$ = new BehaviorSubject<number>(0);
+        this._progression$ = new BehaviorSubject<ProgressionInterface>({progression: 0});
         this._visible$ = new BehaviorSubject<boolean>(false);
         this._style$ = new BehaviorSubject<CSSProperties>(undefined);
 
-        this.progression$.subscribe(progression => this.setSystemProgression(progression));
+        this.progress$.subscribe(value => this.setSystemProgression(value));
     }
 
     private setSystemProgression(progression: number){
         this.ipcService.sendLazy("window.progression", {args: progression});
     }
 
-    public subscribreTo(obs: Observable<number>){
+    public subscribreTo(obs: Observable<ProgressionInterface|number>){
         if(this.subscription){ this.unsubscribe(); }
         this.subscription = obs.pipe(distinctUntilChanged()).subscribe(value => {
-            this.progression$.next(value);
+            if(typeof value === "number"){ return this._progression$.next({progression: value}); }
+            this._progression$.next(value);
         });
     }
 
     public unsubscribe(){
-        this._progression$.next(0);
+        this._progression$.next({progression: 0});
         this.subscription && this.subscription.unsubscribe();
         this.subscription = null;
     }
 
-    public show(obs?: Observable<number>, unsubscribe? : boolean, style?: CSSProperties){
+    public show(obs?: Observable<ProgressionInterface|number>, unsubscribe? : boolean, style?: CSSProperties){
         if(unsubscribe){ this.unsubscribe(); }
         if(obs){ this.subscribreTo(obs); }
-        this.visible$.next(true);
+        this._visible$.next(true);
         this._style$.next(style);
     }
 
     public showFake(speed: number, style?: CSSProperties): void{
-        const obs = timer(1000, 100).pipe(map(val => {
-            if(this.progression$.value >= 100){ return 100; }
+        const obs: Observable<ProgressionInterface> = timer(1000, 100).pipe(map(val => {
+            if(this._progression$.value.progression >= 100){ return {progression: 100}; }
             const currentProgress = speed * (val + 1);
-            return Math.round(Math.atan(currentProgress) / (Math.PI / 2) * 100 * 1000) / 1000;
+            const progress = Math.round(Math.atan(currentProgress) / (Math.PI / 2) * 100 * 1000) / 1000;
+            return {progression: progress} as ProgressionInterface;
         }));
-        this.show(obs, true);
+        this.show(obs, true, style);
     }
 
     public complete(): void{
-        this.progression$.next(100);
+        this._progression$.next({progression: 100});
     }
 
     public hide(unsubscribe: boolean = true){
         if(unsubscribe){ this.unsubscribe(); } 
-        this.visible$.next(false); 
+        this._visible$.next(false); 
     }
 
     public require(): boolean{
@@ -83,10 +86,13 @@ export class ProgressBarService{
         return true;
     }
 
-    public get progression$(): BehaviorSubject<number>{ return this._progression$; }
-    public get visible$(): BehaviorSubject<boolean>{ return this._visible$; }
+    public get progressData$(): Observable<ProgressionInterface>{ return this._progression$.asObservable(); }
+    public get progress$(): Observable<number>{ return this._progression$.pipe(map(data => data.progression)); }
+    public get progressLabel(): Observable<string>{ return this._progression$.pipe(map(data => data?.label)); }
+
+    public get visible$(): Observable<boolean>{ return this._visible$.asObservable(); }
     public get isVisible(): boolean{ return this._visible$.value; }
-    public get style$(): BehaviorSubject<CSSProperties>{ return this._style$; }
+    public get style$(): Observable<CSSProperties>{ return this._style$.asObservable(); }
 
 
 

src/shared/models/progress-bar/index.ts

@@ -0,0 +1 @@
+export { ProgressionInterface } from "./progress-bar.model"

src/shared/models/progress-bar/progress-bar.model.ts

@@ -0,0 +1,4 @@
+export interface ProgressionInterface {
+    progression: number,
+    label?: string
+};