diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx index 8a6d20807..dc0c6ab67 100644 --- a/src/components/AppShelf/AppShelf.tsx +++ b/src/components/AppShelf/AppShelf.tsx @@ -164,8 +164,9 @@ const AppShelf = (props: any) => { ) : null} - { ${(config.settings.appOpacity || 100) / 100}`, }} > + diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx index f483c2f77..a0b6574d1 100644 --- a/src/components/modules/calendar/CalendarModule.tsx +++ b/src/components/modules/calendar/CalendarModule.tsx @@ -1,5 +1,13 @@ /* eslint-disable react/no-children-prop */ -import { Box, Divider, Indicator, Popover, ScrollArea, createStyles, useMantineTheme } from '@mantine/core'; +import { + Box, + Divider, + Indicator, + Popover, + ScrollArea, + createStyles, + useMantineTheme, +} from '@mantine/core'; import React, { useEffect, useState } from 'react'; import { Calendar } from '@mantine/dates'; import { IconCalendar as CalendarIcon } from '@tabler/icons'; @@ -28,7 +36,7 @@ export default function CalendarComponent(props: any) { const theme = useMantineTheme(); const { secondaryColor } = useColorTheme(); const useStyles = createStyles((theme) => ({ - weekend: { + weekend: { color: `${secondaryColor} !important`, }, })); @@ -101,12 +109,13 @@ export default function CalendarComponent(props: any) { onChange={(day: any) => {}} dayStyle={(date) => date.getDay() === today.getDay() && date.getDate() === today.getDate() - ? { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0] } + ? { + backgroundColor: + theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0], + } : {} } - dayClassName={(date, modifiers) => - cx({ [classes.weekend]: modifiers.weekend }) - } + dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })} renderDay={(renderdate) => ( ); } - + const DEVICE_WIDTH = 576; const ths = ( Name Size - {width > 576 ? Down : ``} - {width > 576 ? Up : ``} + {width > 576 ? Down : ''} + {width > 576 ? Up : ''} ETA Progress ); + // Convert Seconds to readable format. + function calculateETA(givenSeconds: number) { + // If its superior than one day return > 1 day + if (givenSeconds > 86400) { + return '> 1 day'; + } + // Transform the givenSeconds into a readable format. e.g. 1h 2m 3s + const hours = Math.floor(givenSeconds / 3600); + const minutes = Math.floor((givenSeconds % 3600) / 60); + const seconds = Math.floor(givenSeconds % 60); + // Only show hours if it's greater than 0. + const hoursString = hours > 0 ? `${hours}h ` : ''; + const minutesString = minutes > 0 ? `${minutes}m ` : ''; + const secondsString = seconds > 0 ? `${seconds}s` : ''; + return `${hoursString}${minutesString}${secondsString}`; + } // Loop over qBittorrent torrents merging with deluge torrents const rows = torrents .filter((torrent) => !(torrent.progress === 1 && hideComplete)) @@ -102,29 +118,6 @@ export default function DownloadComponent() { const downloadSpeed = torrent.downloadSpeed / 1024 / 1024; const uploadSpeed = torrent.uploadSpeed / 1024 / 1024; const size = torrent.totalSelected; - // Convert Seconds to readable format. - function calculateETA(givenSeconds: number) { - if (givenSeconds > 86399) { // No - return ">1d" - } - const time = new Date(givenSeconds * 1000).toISOString(); - const hours = parseInt(time.substring(11,13)); - const minutes = parseInt(time.substring(14,16)); - const seconds = parseInt(time.substring(17,19)); - var str = ""; - // If tree go brr - if (hours > 0) { - str = `${hours}h `; - } - if (minutes > 0) { - str = `${str}${minutes}m ` - } - if (seconds > 0) { - str = `${str}${seconds}s`; - } - return str.trim(); - } - return ( @@ -141,19 +134,22 @@ export default function DownloadComponent() { - {humanFileSize(size)} + {humanFileSize(size)} - {width > 576 ? - - {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} - - : - ``} - {width > 576 ? - - {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} - : - ``} + {width > 576 ? ( + + {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} + + ) : ( + '' + )} + {width > 576 ? ( + + {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} + + ) : ( + '' + )} {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} @@ -161,7 +157,9 @@ export default function DownloadComponent() { {(torrent.progress * 100).toFixed(1)}% diff --git a/src/components/modules/downloads/TotalDownloadsModule.tsx b/src/components/modules/downloads/TotalDownloadsModule.tsx index 80fd072c9..55f9be34d 100644 --- a/src/components/modules/downloads/TotalDownloadsModule.tsx +++ b/src/components/modules/downloads/TotalDownloadsModule.tsx @@ -12,17 +12,6 @@ import { humanFileSize } from '../../../tools/humanFileSize'; import { IModule } from '../modules'; import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval'; -/** - * Format bytes as human-readable text. - * - * @param bytes Number of bytes. - * @param si True to use metric (SI) units, aka powers of 1000. False to use - * binary (IEC), aka powers of 1024. - * @param dp Number of decimal places to display. - * - * @return Formatted string. - */ - export const TotalDownloadsModule: IModule = { title: 'Download Speed', description: 'Show the current download speed of supported services', diff --git a/src/tools/humanFileSize.ts b/src/tools/humanFileSize.ts index 3bc16f5ae..dfd6c9c1f 100644 --- a/src/tools/humanFileSize.ts +++ b/src/tools/humanFileSize.ts @@ -1,21 +1,31 @@ +/** + * Format bytes as human-readable text. + * + * @param bytes Number of bytes. + * @param si True to use metric (SI) units, aka powers of 1000. False to use + * binary (IEC), aka powers of 1024. + * @param dp Number of decimal places to display. + * + * @return Formatted string. + */ export function humanFileSize(initialBytes: number, si = true, dp = 1) { - const thresh = si ? 1000 : 1024; - let bytes = initialBytes; - - if (Math.abs(bytes) < thresh) { - return `${bytes} B`; - } - - const units = si - ? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] - : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; - let u = -1; - const r = 10 ** dp; - - do { - bytes /= thresh; - u += 1; - } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1); - - return `${bytes.toFixed(dp)} ${units[u]}`; + const thresh = si ? 1000 : 1024; + let bytes = initialBytes; + + if (Math.abs(bytes) < thresh) { + return `${bytes} B`; } + + const units = si + ? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; + let u = -1; + const r = 10 ** dp; + + do { + bytes /= thresh; + u += 1; + } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1); + + return `${bytes.toFixed(dp)} ${units[u]}`; +}