zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

download animation when download

Browse Source
This commit is contained in:
MathieuG-P
2022-05-24 23:15:03 +02:00
parent 78403f17e6
commit 19f0074c0c
2 changed files with 51 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/nav-bar/bs-version-item.component.tsx
+31 -5
View File
@@ -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>
src/renderer/components/nav-bar/nav-bar.component.css
+20
View File
@@ -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; }
}