Convert multiple pages into SPA

svelte/src/filesystem/upload_widget/FSUploadWidget.svelte

@@ -11,14 +11,11 @@ export type UploadJob = {
 </script>
 <script lang="ts">
 import { tick } from "svelte";
-import { fade } from "svelte/transition";
 import UploadProgress from "./UploadProgress.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 
 export let nav: FSNavigator
 
-const max_concurrent_uploads = 5
-
 let file_input_field: HTMLInputElement
 let file_input_change = (e: Event) => {
 	// Start uploading the files async
@@ -91,22 +88,29 @@ let active_uploads = 0
 let state = "idle"
 
 const start_upload = async () => {
-	// Count the number of active uploads so we can know how many new uploads we
-	// can start
-	active_uploads = upload_queue.reduce((acc, val) => {
-		if (val.status === "uploading") {
-			acc++
-		}
-		return acc
-	}, 0)
-
-	for (let i = 0; i < upload_queue.length && active_uploads < max_concurrent_uploads; i++) {
+	active_uploads = 0
+	let uploading_size = 0
+	for (let i = 0; i < upload_queue.length; i++) {
 		if (upload_queue[i]) {
+			// If this file is queued, start the upload
 			if (upload_queue[i].status === "queued") {
-				active_uploads++
 				upload_queue[i].component.start()
 				upload_queue[i].status = "uploading"
 			}
+
+			// If this file is already uploading (or just started), count it
+			if (upload_queue[i].status === "uploading") {
+				uploading_size += upload_queue[i].total_size
+				active_uploads++
+			}
+
+			// If the size threshold or the concurrent upload limit is reached
+			// we break the loop. The system tries to keep an upload queue of
+			// 100 MB and a minimum of two concurrent uploads.
+			if ((uploading_size >= 100e6 && active_uploads >= 2) || active_uploads >= 10) {
+				console.debug("Current uploads", active_uploads, "uploads size", uploading_size)
+				break
+			}
 		}
 	}
 
@@ -153,7 +157,7 @@ const leave_confirmation = (e: BeforeUnloadEvent) => {
 />
 
 {#if visible}
-	<div class="upload_widget" transition:fade={{duration: 200}}>
+	<div class="upload_widget">
 		<div class="header">
 			{#if state === "idle"}
 				Waiting for files
@@ -184,7 +188,8 @@ const leave_confirmation = (e: BeforeUnloadEvent) => {
 	position: fixed;
 	display: flex;
 	flex-direction: column;
-	width: 500px;
+	width: auto;
+	min-width: 400px;
 	max-width: 80%;
 	height: auto;
 	max-height: 50%;

svelte/src/filesystem/upload_widget/UploadFunc.ts

@@ -9,7 +9,7 @@
 //
 // on_error is called when the upload has failed. The parameters are the error
 
-import { fs_path_url, type GenericResponse } from "filesystem/FilesystemAPI"
+import { fs_path_url, type GenericResponse } from "lib/FilesystemAPI"
 
 // code and an error message
 export const upload_file = (

svelte/src/filesystem/upload_widget/UploadProgress.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
-import { fade } from "svelte/transition";
 import { upload_file } from "./UploadFunc";
 import ProgressBar from "util/ProgressBar.svelte";
 import Button from "layout/Button.svelte"
@@ -56,14 +55,14 @@ const cancel = () => {
 }
 </script>
 
-<div class="prog" transition:fade={{duration: 200}} class:error={job.status === "error"}>
+<div class="prog" class:error={job.status === "error"}>
 	<div class="bar">
 		{job.file.name}<br/>
 		{#if error_code !== ""}
 			{error_message}<br/>
 			{error_code}<br/>
 		{/if}
-		<ProgressBar total={total} used={loaded}/>
+		<ProgressBar total={total} used={loaded} speed={500}/>
 	</div>
 	<div class="cancel">
 		<Button icon="cancel" click={cancel}/>