From 922caa76da8dd7f4f089458ec6ae5210432fd087 Mon Sep 17 00:00:00 2001 From: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Date: Sat, 11 Jun 2022 18:59:45 -0400 Subject: [PATCH 01/10] More Info in Torrents Module Added - ETA - Torrent Size - Paused state color in progress bar --- .../modules/downloads/DownloadsModule.tsx | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/modules/downloads/DownloadsModule.tsx b/src/components/modules/downloads/DownloadsModule.tsx index 3a4a4a65b..476c3c405 100644 --- a/src/components/modules/downloads/DownloadsModule.tsx +++ b/src/components/modules/downloads/DownloadsModule.tsx @@ -53,6 +53,7 @@ export default function DownloadComponent() { // Send one request with each download service inside axios.post('/api/modules/downloads', { config }).then((response) => { setTorrents(response.data); + console.log(response.data); setIsLoading(false); }); }, 5000); @@ -85,8 +86,10 @@ export default function DownloadComponent() { const ths = ( Name + Size Download Upload + ETA Progress ); @@ -96,6 +99,30 @@ export default function DownloadComponent() { .map((torrent) => { const downloadSpeed = torrent.downloadSpeed / 1024 / 1024; const uploadSpeed = torrent.uploadSpeed / 1024 / 1024; + const size = torrent.totalSelected / (1024 * 1024); + // 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 ( @@ -111,17 +138,23 @@ export default function DownloadComponent() { + + {size > 0 ? (size > 999 ? `${(size / 1024).toFixed(1)} GB` : `${size.toFixed(1)} MB`) : '-' } + {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} + + {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} + {(torrent.progress * 100).toFixed(1)}% From 0f56ead24f039278bfecd93e618b49bafa96ba09 Mon Sep 17 00:00:00 2001 From: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Date: Sat, 11 Jun 2022 19:00:50 -0400 Subject: [PATCH 02/10] Fixed Customization Spelling --- src/components/Settings/SettingsMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx index 78b968634..e6bcb2bed 100644 --- a/src/components/Settings/SettingsMenu.tsx +++ b/src/components/Settings/SettingsMenu.tsx @@ -11,7 +11,7 @@ function SettingsMenu(props: any) { - + From 06531e0fb8f7b8640998ad4a275400acb61d10b2 Mon Sep 17 00:00:00 2001 From: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Date: Sat, 11 Jun 2022 19:02:34 -0400 Subject: [PATCH 03/10] Removed Logging used during development --- src/components/modules/downloads/DownloadsModule.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/modules/downloads/DownloadsModule.tsx b/src/components/modules/downloads/DownloadsModule.tsx index 476c3c405..bd2a1664b 100644 --- a/src/components/modules/downloads/DownloadsModule.tsx +++ b/src/components/modules/downloads/DownloadsModule.tsx @@ -53,7 +53,6 @@ export default function DownloadComponent() { // Send one request with each download service inside axios.post('/api/modules/downloads', { config }).then((response) => { setTorrents(response.data); - console.log(response.data); setIsLoading(false); }); }, 5000); From 08799aac18940a8d3665c9dd2527a205b92bbae6 Mon Sep 17 00:00:00 2001 From: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Date: Sat, 11 Jun 2022 19:16:03 -0400 Subject: [PATCH 04/10] Fix build issue from pull request #193 --- src/components/modules/calendar/CalendarModule.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx index edde221ea..0455d1f5e 100644 --- a/src/components/modules/calendar/CalendarModule.tsx +++ b/src/components/modules/calendar/CalendarModule.tsx @@ -100,7 +100,7 @@ export default function CalendarComponent(props: any) { dayStyle={(date) => date.getDay() === today.getDay() && date.getDate() === today.getDate() ? { backgroundColor: '#2C2E33' } - : null + : {} } dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend }) From ec92a1d89c8f5e150f1953fbed881b63acea3be1 Mon Sep 17 00:00:00 2001 From: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Date: Sun, 12 Jun 2022 00:52:12 -0400 Subject: [PATCH 05/10] Removed new Features on Mobile (Temporary) --- .../modules/downloads/DownloadsModule.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/modules/downloads/DownloadsModule.tsx b/src/components/modules/downloads/DownloadsModule.tsx index bd2a1664b..5bc19d27a 100644 --- a/src/components/modules/downloads/DownloadsModule.tsx +++ b/src/components/modules/downloads/DownloadsModule.tsx @@ -18,6 +18,7 @@ import { IModule } from '../modules'; import { useConfig } from '../../../tools/state'; import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem'; import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval'; +import { useViewportSize } from '@mantine/hooks'; export const DownloadsModule: IModule = { title: 'Torrent', @@ -34,6 +35,7 @@ export const DownloadsModule: IModule = { export default function DownloadComponent() { const { config } = useConfig(); + const { height, width } = useViewportSize(); const downloadServices = config.services.filter( (service) => @@ -85,10 +87,10 @@ export default function DownloadComponent() { const ths = ( Name - Size - Download - Upload - ETA + {width > 576 ? Size : ``} + Down + Up + {width > 576 ? ETA : ``} Progress ); @@ -137,18 +139,22 @@ export default function DownloadComponent() { + {width > 576 ? - {size > 0 ? (size > 999 ? `${(size / 1024).toFixed(1)} GB` : `${size.toFixed(1)} MB`) : '-' } - + {size > 0 ? (size > 999 ? `${(size / 1024).toFixed(1)} GB` : `${size.toFixed(1)} MB`) : '-' } + : + ``} {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} + {width > 576 ? {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} - + : + ``} {(torrent.progress * 100).toFixed(1)}% Date: Sun, 12 Jun 2022 00:59:12 -0400 Subject: [PATCH 06/10] Change Elements hidden on Mobile --- .../modules/downloads/DownloadsModule.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/modules/downloads/DownloadsModule.tsx b/src/components/modules/downloads/DownloadsModule.tsx index 5bc19d27a..accbf4033 100644 --- a/src/components/modules/downloads/DownloadsModule.tsx +++ b/src/components/modules/downloads/DownloadsModule.tsx @@ -87,10 +87,10 @@ export default function DownloadComponent() { const ths = ( Name - {width > 576 ? Size : ``} - Down - Up - {width > 576 ? ETA : ``} + Size + {width > 576 ? Down : ``} + {width > 576 ? Up : ``} + ETA Progress ); @@ -139,22 +139,23 @@ export default function DownloadComponent() { - {width > 576 ? {size > 0 ? (size > 999 ? `${(size / 1024).toFixed(1)} GB` : `${size.toFixed(1)} MB`) : '-' } - : - ``} + + {width > 576 ? {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'} - - {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} - + : + ``} {width > 576 ? - {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} + {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'} : ``} + + {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)} + {(torrent.progress * 100).toFixed(1)}% Date: Sun, 12 Jun 2022 01:13:51 -0400 Subject: [PATCH 07/10] Create humanFileSize.ts --- src/tools/humanFileSize.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/tools/humanFileSize.ts diff --git a/src/tools/humanFileSize.ts b/src/tools/humanFileSize.ts new file mode 100644 index 000000000..3bc16f5ae --- /dev/null +++ b/src/tools/humanFileSize.ts @@ -0,0 +1,21 @@ +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]}`; + } From 433edafddd27468c841eb90ac7c346cd05add94c Mon Sep 17 00:00:00 2001 From: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Date: Sun, 12 Jun 2022 01:14:38 -0400 Subject: [PATCH 08/10] Remove humanFileSize --- .../downloads/TotalDownloadsModule.tsx | 22 +------------------ 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/src/components/modules/downloads/TotalDownloadsModule.tsx b/src/components/modules/downloads/TotalDownloadsModule.tsx index 41b5b5413..80fd072c9 100644 --- a/src/components/modules/downloads/TotalDownloadsModule.tsx +++ b/src/components/modules/downloads/TotalDownloadsModule.tsx @@ -8,6 +8,7 @@ import { Datum, ResponsiveLine } from '@nivo/line'; import { useListState } from '@mantine/hooks'; import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem'; import { useConfig } from '../../../tools/state'; +import { humanFileSize } from '../../../tools/humanFileSize'; import { IModule } from '../modules'; import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval'; @@ -21,27 +22,6 @@ import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval'; * * @return Formatted string. */ -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]}`; -} export const TotalDownloadsModule: IModule = { title: 'Download Speed', From 98eaee123430a9cc244407bbdd86c4497100ebe3 Mon Sep 17 00:00:00 2001 From: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Date: Sun, 12 Jun 2022 01:15:38 -0400 Subject: [PATCH 09/10] Use humanFileSize --- src/components/modules/downloads/DownloadsModule.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/modules/downloads/DownloadsModule.tsx b/src/components/modules/downloads/DownloadsModule.tsx index accbf4033..2062b5fb5 100644 --- a/src/components/modules/downloads/DownloadsModule.tsx +++ b/src/components/modules/downloads/DownloadsModule.tsx @@ -19,6 +19,7 @@ import { useConfig } from '../../../tools/state'; import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem'; import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval'; import { useViewportSize } from '@mantine/hooks'; +import { humanFileSize } from '../../../tools/humanFileSize'; export const DownloadsModule: IModule = { title: 'Torrent', @@ -100,7 +101,7 @@ export default function DownloadComponent() { .map((torrent) => { const downloadSpeed = torrent.downloadSpeed / 1024 / 1024; const uploadSpeed = torrent.uploadSpeed / 1024 / 1024; - const size = torrent.totalSelected / (1024 * 1024); + const size = torrent.totalSelected; // Convert Seconds to readable format. function calculateETA(givenSeconds: number) { if (givenSeconds > 86399) { // No @@ -140,7 +141,7 @@ export default function DownloadComponent() { - {size > 0 ? (size > 999 ? `${(size / 1024).toFixed(1)} GB` : `${size.toFixed(1)} MB`) : '-' } + {humanFileSize(size)} {width > 576 ? From df85fc6b7dbed3eb47a5e8f63277c1204020e498 Mon Sep 17 00:00:00 2001 From: ajnart Date: Sun, 12 Jun 2022 15:35:41 +0200 Subject: [PATCH 10/10] :bug: Fix multiple bugs and reformat code --- src/components/AppShelf/AppShelf.tsx | 4 +- .../modules/calendar/CalendarModule.tsx | 21 +++-- .../modules/downloads/DownloadsModule.tsx | 78 +++++++++---------- .../downloads/TotalDownloadsModule.tsx | 11 --- src/tools/humanFileSize.ts | 48 +++++++----- 5 files changed, 85 insertions(+), 77 deletions(-) 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]}`; +}