frontend: notification when upload is terminated, if upload dialog is closed

Massimo Melina committed Feb 22, 2023 at 07:09 UTC 278f606579e34ea140e81cb8553ac0b0c73ee127
3 files changed +20 -5
frontend/src/dialog.css
+1 -1
@@ -31,7 +31,7 @@
31 border-radius: .8em 0;
32 }
33 .dialog-title {
34 - margin-top: -.4em;
34 + margin-top: -.7em;
35 font-size: 110%;
36 }
37 .dialog-icon ~ .dialog-title {
frontend/src/upload.ts
+15 -3
@@ -1,6 +1,6 @@
1 // This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3 -import { createElement as h, useMemo, useState } from 'react'
3 +import { createElement as h, Fragment, useMemo, useState } from 'react'
4 import { Flex, FlexV } from './components'
5 import { closeDialog, DialogCloser, formatBytes, hIcon, newDialog, prefix, selectFiles } from './misc'
6 import _ from 'lodash'
@@ -55,6 +55,7 @@ setInterval(() => {
55 }, 1000)
56
57 let reloadOnClose = false
58 +let uploadDialogIsOpen = false
59
60 export function showUpload() {
61 if (!uploadState.qs.length)
@@ -63,12 +64,14 @@ export function showUpload() {
64 done: 0,
65 doneByte: 0,
66 })
67 + uploadDialogIsOpen = true
68 const close = newDialog({
69 dialogProps: { style: { minWidth: 'min(20em, 100vw - 1em)' } },
70 title: t`Upload`,
71 icon: () => hIcon('upload'),
72 Content,
73 onClose() {
74 + uploadDialogIsOpen = false
75 if (!reloadOnClose) return
76 reloadOnClose = false
77 reloadList()
@@ -77,7 +80,7 @@ export function showUpload() {
80
81 function Content(){
82 const [files, setFiles] = useState([] as File[])
80 - const { qs, done, doneByte, paused, errors, eta } = useSnapshot(uploadState)
83 + const { qs, paused, eta } = useSnapshot(uploadState)
84 const { can_upload } = useSnapState()
85 const etaStr = useMemo(() => !eta ? '' : formatTime(eta*1000, 0, 2), [eta])
86 const size = formatBytes(files.reduce((a, f) => a + f.size, 0))
@@ -104,7 +107,7 @@ export function showUpload() {
107 setFiles(files.filter(x => x !== f))
108 }
109 }),
107 - [done && `${done} finished (${formatBytes(doneByte)})`, errors && `${errors} failed`].filter(Boolean).join(' – '),
110 + h(UploadStatus),
111 qs.length > 0 && h('div', {},
112 h(Flex, { alignItems: 'center', justifyContent: 'center', borderTop: '1px dashed', padding: '.5em' },
113 `${_.sumBy(qs, q => q.files.length)} in queue${prefix(', ', etaStr)}`,
@@ -308,9 +311,18 @@ async function startUpload(f: File, to: string, resume=0) {
311 if (qs.length) return
312 setTimeout(reloadList, 500) // workaround: reloading too quickly can meet the new file still with its temp name
313 reloadOnClose = false
314 + if (!uploadDialogIsOpen)
315 + alertDialog(h('div', {}, t`Upload terminated`, h('div', {}, h(UploadStatus))), 'info')
316 }
317 }
318
319 +function UploadStatus() {
320 + const { done, doneByte, errors } = useSnapshot(uploadState)
321 + return h(Fragment, {},
322 + [done && `${done} finished (${formatBytes(doneByte)})`, errors && `${errors} failed`].filter(Boolean).join(' – '),
323 + )
324 +}
325 +
326 function abortCurrentUpload() {
327 req?.abort()
328 }
langs/hfs-lang-it.json
+4 -1
@@ -1,6 +1,7 @@
1 {
2 "author": "Massimo Melina",
3 - "version": 1,
3 + "version": 1.1,
4 + "hfs_version": "0.36.0",
5 "translate": {
6 "Select": "Seleziona",
7 "n_files": "{n} file",
@@ -91,6 +92,8 @@
92 "Not found": "Non trovato",
93 "Server error": "Errore del server",
94
95 + "Upload terminated": "Upload concluso",
96 +
97 "Hits: ": "D#"
98 }
99 }