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

transition between download states

Browse Source
This commit is contained in:
MathieuG-P
2022-06-08 21:56:53 +02:00
parent eb4587d094
commit 3cd2e3ee3a
1 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/pages/available-versions-list.components.tsx
+32 -2
View File
@@ -3,6 +3,8 @@ import { BsDownloaderService } from "../services/bs-downloader.service";
import { Slideshow } from "renderer/components/slideshow/slideshow.component";
import { useEffect, useState } from "react";
import { BSVersion } from "main/services/bs-version-manager.service";
import beatWaitingImg from "../../../assets/beat-waiting.png";
import beatRunningImg from "../../../assets/beat-running.png"
export function AvailableVersionsList() {
@@ -21,10 +23,21 @@ 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);
@@ -51,8 +64,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 className={`flex items-center content-center justify-center h-10 w-36 absolute bottom-9 z-10 rounded-lg bg-main-color-3 shadow-md shadow-gray-800 cursor-pointer transition-all duration-300 ${!versionSelected && !currentDownload && "translate-y-[100px]"}`}>
<span className="flex justify-center items-center w-full h-full text-white font-bold tracking-wide text-xl">DOWNLOAD</span>
<div onClick={startTest} 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 && "translate-y-[100px]"}
${downloadPending && !tempProgress && "h-16 w-16 rounded-full"}
${downloadPending && !!tempProgress && "h-5 w-3/4 rounded-full p-[6px]"}
`
}>
{downloadPending && !!tempProgress && (
<>
<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>
<img className="h-20 absolute -translate-x-8 -translate-y-1" style={{left: `${tempProgress}%`}} 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>}
</div>
</div>
)