add global progress bar

src/renderer/App.tsx

@@ -5,6 +5,7 @@ import { AvailableVersionsList } from "./pages/available-versions-list.component
 import { VersionViewer } from "./pages/version-viewer.component";
 import { Modal } from "./components/modal/modal.component";
 import { SettingsPage } from "./pages/settings-page.component";
+import { BsmProgressBar } from "./components/progress-bar/bsm-progress-bar.component";
 
 export default function App() {
 
@@ -20,6 +21,7 @@ export default function App() {
             <Route path={"/settings"} element={<SettingsPage/>}/>
             <Route path="*" element={<AvailableVersionsList/>}/>
           </Routes>
+          <BsmProgressBar/>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react"
+import { ProgressBarService } from "renderer/services/progress-bar.service";
+import { AnimatePresence, motion } from "framer-motion";
+import BeatRunningImg from "../../../../assets/beat-running.png"
+import BeatWaitingImg from "../../../../assets/beat-waiting.png"
+
+export function BsmProgressBar() {
+
+    const progressBarService = ProgressBarService.getInstance();
+
+    const [progress, setProgress] = useState(0);
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+      
+        const progressSub = progressBarService.progression$.subscribe(val => setProgress(val));
+        const visibleSub = progressBarService.visible$.subscribe(state => setVisible(state));
+        
+        return () => {
+            progressSub.unsubscribe();
+            visibleSub.unsubscribe();
+        }
+    }, [])
+    
+
+  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">
+            <div className={`flex items-center content-center justify-center bottom-9 z-10 rounded-lg 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}%`}}>
+                        <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]">{`${progress}%`}</span>
+                </div>
+            </>
+            )}
+            { !progress && <img className="w-12 h-12 spin-loading" src={BeatWaitingImg}></img> }
+        </div>
+        </motion.div>
+    } </AnimatePresence>
+  )
+}

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

@@ -0,0 +1,50 @@
+import { BehaviorSubject, distinctUntilChanged, filter, Observable, Subscription } from "rxjs";
+
+export class ProgressBarService{
+
+    private static instance: ProgressBarService;
+
+    private readonly _progression$: BehaviorSubject<number>;
+    private readonly _visible$: BehaviorSubject<boolean>;
+
+    private subscription: Subscription;
+
+    public static getInstance(): ProgressBarService{
+        if(!ProgressBarService.instance){ ProgressBarService.instance = new ProgressBarService(); }
+        return ProgressBarService.instance;
+    }
+
+    private constructor(){
+        this._progression$ = new BehaviorSubject<number>(0);
+        this._visible$ = new BehaviorSubject<boolean>(false);
+    }
+
+    public subscribreTo(obs: Observable<number>){
+        if(this.subscription){ this.unsubscribe(); }
+        this.subscription = obs.pipe(distinctUntilChanged()).subscribe(value => {
+            this.progression$.next(value);
+        });
+    }
+
+    public unsubscribe(){
+        this.subscription.unsubscribe();
+        this.subscription = null;
+    }
+
+    public show(obs?: Observable<number>){
+        if(obs){ this.subscribreTo(obs); }
+        this.visible$.next(true); 
+    }
+    public hide(unsubscribe: boolean){
+        if(unsubscribe){ this.unsubscribe(); } 
+        this.visible$.next(false); 
+    }
+
+    public get progression$(): BehaviorSubject<number>{ return this._progression$; }
+    public get visible$(): BehaviorSubject<boolean>{ return this._visible$; }
+
+
+
+
+
+}