Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-10-31 10:37:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

Display downloads progress bar and percentage

Browse Source
This commit is contained in:
Zoe Roux 2023-12-19 23:18:08 +01:00
parent 55a246d806
commit c0c39ab4d0
1 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
front/packages/ui/src/downloads/page.tsx
View File

@ -64,7 +64,7 @@ const DownloadedItem = ({
const { css } = useYoshiki(); const { css } = useYoshiki();
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { error, status, pause, resume, remove, play } = useAtomValue(statusAtom); const { error, status, progress, pause, resume, remove, play, retry } = useAtomValue(statusAtom);
return ( return (
<PressableFeedback <PressableFeedback
@ -90,8 +90,8 @@ const DownloadedItem = ({
gradient={false} gradient={false}
hideLoad={false} hideLoad={false}
layout={{ layout={{
width: percent(18), width: percent(25),
aspectRatio: 16 / 9, aspectRatio: kind === "episode" ? 16 / 9 : 2 / 3,
}} }}
{...(css({ flexShrink: 0, m: ts(1) }) as { style: ImageStyle })} {...(css({ flexShrink: 0, m: ts(1) }) as { style: ImageStyle })}
> >
@ -131,10 +131,34 @@ const DownloadedItem = ({
{name ?? t("show.episodeNoMetadata")} {name ?? t("show.episodeNoMetadata")}
</H6> </H6>
{status === "FAILED" && <P>{t("downloads.error", { error: error ?? "Unknow error" })}</P>} {status === "FAILED" && <P>{t("downloads.error", { error: error ?? "Unknow error" })}</P>}
{runtime && status !== "FAILED" && <SubP>{displayRuntime(runtime)}</SubP>} {runtime && status === "DONE" && <SubP>{displayRuntime(runtime)}</SubP>}
{progress !== 100 && (
<View {...css({ flexDirection: "row", alignItems: "center" })}>
<SubP {...css({ flexShrink: 0 })}>{progress}%</SubP>
<View
{...css({
flexGrow: 1,
flexShrink: 1,
marginLeft: ts(0.5),
height: ts(0.5),
backgroundColor: (theme) => theme.user.overlay0,
})}
>
<View
{...css({
backgroundColor: (theme) => theme.user.accent,
width: percent(progress),
height: percent(100),
})}
/>
</View>
</View>
)}
</View> </View>
<Menu Trigger={IconButton} icon={downloadIcon(status)}> <Menu Trigger={IconButton} icon={downloadIcon(status)}>
{status === "FAILED" && <Menu.Item label={t("downloads.retry")} onSelect={() => {}} />} {status === "FAILED" && (
<Menu.Item label={t("downloads.retry")} onSelect={() => retry?.()} />
)}
{status === "DOWNLOADING" && ( {status === "DOWNLOADING" && (
<Menu.Item label={t("downloads.pause")} onSelect={() => pause?.()} /> <Menu.Item label={t("downloads.pause")} onSelect={() => pause?.()} />
)} )}