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 fully works with new DL button

Browse Source
This commit is contained in:
MathieuG-P
2022-06-09 22:09:46 +02:00
parent 878f165c66
commit 4c92ce144a
1 changed files with 9 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/pages/available-versions-list.components.tsx
+9 -20
View File
@@ -23,21 +23,10 @@ export function AvailableVersionsList() {
const [currentDownload, setCurrentDownload] = useState(null as BSVersion);
const [downloadProgress, setDownloadProgress] = useState(0);
const [downloadPending, setDownloadPending] = useState(false);
const [tempProgress, setTempProgress] = useState(0);
const startInstall = () => {
bsDownloaderService.download();
}
const startTest = () => {
setDownloadPending(true);
setTimeout(() => setTempProgress(10), 5000);
setTimeout(() => {
setDownloadPending(false); setTempProgress(0); setVersionSelected(null);
}, 10000)
}
useEffect(() => {
const versionSelectedSub = bsDownloaderService.selectedBsVersion$.subscribe(version => {
setVersionSelected(version);
@@ -64,25 +53,25 @@ export function AvailableVersionsList() {
<Slideshow className="absolute w-full h-full top-0" images={slideshowImages}></Slideshow>
<h1 className="text-gray-100 text-2xl mb-4 z-[1]">Select a Version</h1>
<AvailableVersionsSlider/>
<div onClick={startTest} className={
<div onClick={startInstall} className={
`
flex items-center content-center justify-center absolute bottom-9 z-10 rounded-lg bg-main-color-3 shadow-center shadow-black cursor-pointer transition-all duration-300
${versionSelected && !currentDownload && !downloadPending && "h-16 w-36"}
${versionSelected && !currentDownload && "h-16 w-36"}
${!versionSelected && !currentDownload && "translate-y-[100px]"}
${downloadPending && !tempProgress && "h-16 w-16 rounded-full"}
${downloadPending && !!tempProgress && "h-5 w-3/4 rounded-full p-[6px]"}
${currentDownload && !downloadProgress && "h-16 w-16 rounded-full"}
${currentDownload && !!downloadProgress && "h-5 w-3/4 rounded-full p-[6px]"}
`
}>
{downloadPending && !!tempProgress && (
{currentDownload && !!downloadProgress && (
<>
<div className="h-full w-full rounded-full overflow-hidden bg-main-color-1">
<div className="w-full h-full rounded-full download-progress -translate-x-full" style={{transform: `translate(-${100 - tempProgress}%, 0)`}}></div>
<div className="w-full h-full rounded-full download-progress -translate-x-full transition-transform" style={{transform: `translate(-${100 - downloadProgress}%, 0)`}}></div>
</div>
<img className="h-20 absolute -translate-x-8 -translate-y-1" style={{left: `${tempProgress}%`}} src={beatRunningImg} />
<img className="h-[70px] absolute -translate-x-8 -translate-y-1 transition-all" style={{left: `${downloadProgress}%`}} src={beatRunningImg} />
</>
)}
{!downloadPending && <span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl text-center leading-6">DOWNLOAD {versionSelected?.BSVersion}</span>}
{downloadPending && !tempProgress && <img className="w-14 h-14 spin-loading" src={beatWaitingImg}></img>}
{!currentDownload && <span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl text-center leading-6">DOWNLOAD {versionSelected?.BSVersion}</span>}
{currentDownload && !downloadProgress && <img className="w-14 h-14 spin-loading" src={beatWaitingImg}></img>}
</div>
</div>
)