From 19f0074c0ce004d99e96cc5391554cd13a6fd5bd Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 24 May 2022 23:15:03 +0200
Subject: [PATCH] download animation when download

---
 .../nav-bar/bs-version-item.component.tsx     | 36 ++++++++++++++++---
 .../components/nav-bar/nav-bar.component.css  | 20 +++++++++++
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/nav-bar/bs-version-item.component.tsx b/src/renderer/components/nav-bar/bs-version-item.component.tsx
index c2ef0bb7..041e06ed 100644
--- a/src/renderer/components/nav-bar/bs-version-item.component.tsx
+++ b/src/renderer/components/nav-bar/bs-version-item.component.tsx
@@ -2,14 +2,40 @@ import { BSVersion } from "main/services/bs-version-manager.service";
 import { Link } from "react-router-dom";
 import { BsNoteFill } from "../svgs/bs-note-fill.component";
 import { SteamIcon } from "../svgs/steam-icon.component";
+import { BsDownloaderService } from "renderer/services/bs-downloader.service";
+import { useEffect, useState } from "react";
+import { combineLatest, distinctUntilChanged, merge } from "rxjs";
 
 export default function BsVersionItem(props: {version: BSVersion}) {
+
+  const [downloading, setDownloading] = useState(false);
+  const [downloadPercent, setDownloadPercent] = useState(0);
+
+  const downloaderService = BsDownloaderService.getInstance();
+
+  console.log(props.version.BSVersion === downloaderService.currentBsVersionDownload$.value?.BSVersion, props.version.BSVersion);
+
+  useEffect(() => {
+    console.log("oéoéoé", props.version.BSVersion);
+    combineLatest([downloaderService.currentBsVersionDownload$, downloaderService.downloadProgress$]).subscribe(vals => {
+      if(vals[0]?.BSVersion === props.version.BSVersion){ 
+        setDownloading(true); 
+        setDownloadPercent(vals[1]);
+      }
+      else{ 
+        setDownloading(false); 
+        setDownloadPercent(0);
+      }
+    })
+  }, [])
+  
+
   return (
-    <div className="relative p-[1px] overflow-hidden rounded-full flex justify-center content-center items-center mb-1">
-      <div className="absolute top-0 w-full h-full bg-red-400" style={{transform: 'translate(-50%, 0)'}}></div>
-      <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className='z-[1] bg-main-color-1 flex cursor-pointer w-full justify-center content-center rounded-full items-center pr-1 pl-2 pt-1 pb-1'>
-        {props.version.steam && <SteamIcon className="w-[19px] h-[19px]"/>}
-        {!props.version.steam && <BsNoteFill className="w-[19px] h-[19px] text-red-600"/>}
+    <div className={`relative p-[1px] overflow-hidden rounded-full flex justify-center content-center items-center mb-1 ${downloading && "nav-item-download"}`}>
+      <div className="test absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
+      <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className='z-[1] bg-main-color-1 flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2'>
+        {props.version.steam && <SteamIcon className="w-[19px] h-[19px] mr-1"/>}
+        {!props.version.steam && <BsNoteFill className="w-[19px] h-[19px] mr-1 text-red-600"/>}
         <span className="flex items-center justify-center content-center shrink-0 grow text-lg text-gray-200 font-bold min-w-0">{props.version.BSVersion}</span>
       </Link>
     </div>
diff --git a/src/renderer/components/nav-bar/nav-bar.component.css b/src/renderer/components/nav-bar/nav-bar.component.css
index 1a015b5c..3b9fa0ca 100644
--- a/src/renderer/components/nav-bar/nav-bar.component.css
+++ b/src/renderer/components/nav-bar/nav-bar.component.css
@@ -26,4 +26,24 @@
   scrollbar-gutter: stable;
 }
 
+.nav-item-download > div{
+  background-size: 500% !important;
+  background: linear-gradient(90deg, rgb(62, 51, 255), rgb(255, 0, 0), rgb(62, 51, 255), rgb(255, 0, 0));
+  animation: rainbow 2s linear 0s infinite;
+}
+
+.nav-item-download > a > *{
+  animation: opacity 3s ease-in-out 0s infinite;
+}
+
+@keyframes rainbow {
+  0% { background-position: 84% 0 }
+  100% { background-position: 0 0% }
+}
+@keyframes opacity{
+  0% { opacity: 1; }
+  50% { opacity: .6; }
+  100% { opacity: 1; }
+}
+