add upload details modal

src/blossom-drive-client/Upload.ts

@@ -23,6 +23,12 @@ export default class Upload extends EventEmitter {
 
   /** file id -> server -> status */
   progress: Record<string, Record<string, { blob?: BlobDescriptor; error?: Error }>> = {};
+  get totalProgress() {
+    return (
+      Object.values(this.progress).reduce((v, u) => v + Object.values(u).filter((s) => !!s.blob).length, 0) /
+      (this.files.length * this.servers.length)
+    );
+  }
 
   constructor(drive: Drive | EncryptedDrive, basePath: string, servers: string[], signer: Signer) {
     super();
@@ -71,6 +77,7 @@ export default class Upload extends EventEmitter {
       const token = await BlossomClient.getUploadAuth(_file, this.signer, `Upload ${_file.name}`);
 
       if (!this.progress[upload.id]) this.progress[upload.id] = {};
+      this.emit("progress", this.progress);
 
       for (const server of this.servers) {
         try {
@@ -81,10 +88,10 @@ export default class Upload extends EventEmitter {
             size: blob.size,
             type: upload.file.type || mime.getType(upload.file.name) || blob.type || "",
           });
-          this.emit("progress", this.progress);
         } catch (error) {
           if (error instanceof Error) this.progress[upload.id][server] = { error };
         }
+        this.emit("progress", this.progress);
       }
     }
 

src/components/UploadDetailsModal/UploadDetailsModal.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { Button, Modal, Progressbar } from "flowbite-svelte";
+  import { onMount } from "svelte";
+  import type Upload from "../../blossom-drive-client/Upload";
+  import { CheckOutline, ClockOutline } from "flowbite-svelte-icons";
+  import UploadFileDetails from "./UploadFileDetails.svelte";
+
+  export let open = false;
+  export let upload: Upload;
+
+  let running = upload.running;
+  function updateRunning() {
+    running = upload.running;
+  }
+  let complete = upload.complete;
+  function updateComplete() {
+    complete = upload.complete;
+  }
+
+  let progress = upload.progress;
+  function updateProgress() {
+    progress = upload.progress;
+  }
+
+  updateProgress();
+
+  onMount(() => {
+    upload.on("progress", updateProgress);
+    upload.on("complete", updateComplete);
+    upload.on("start", updateRunning);
+    return () => {
+      upload.off("progress", updateProgress);
+      upload.off("complete", updateComplete);
+      upload.on("start", updateRunning);
+    };
+  });
+</script>
+
+<Modal bind:open size="lg" title="Upload Progress" outsideclose>
+  <p class="text-base leading-relaxed text-gray-800 dark:text-gray-200">
+    Uploading {upload.files.length} files to {upload.drive.name}
+  </p>
+  <div class="flex flex-col gap-2">
+    {#each upload.files as file}
+      <UploadFileDetails {upload} {file} progress={progress[file.id]} />
+    {/each}
+  </div>
+  {#if !running}
+    <Button slot="footer" on:click={() => upload.upload()}>Start Upload</Button>
+  {/if}
+</Modal>

src/components/UploadDetailsModal/UploadFileDetails.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Progressbar, Spinner } from "flowbite-svelte";
+  import { CheckOutline, InfoCircleOutline } from "flowbite-svelte-icons";
+  import type Upload from "../../blossom-drive-client/Upload";
+
+  export let upload: Upload;
+  export let file: Upload["files"][0];
+  export let progress: Upload["progress"][string] | undefined;
+
+  $: servers = progress ? Object.keys(progress).length : 0;
+</script>
+
+<div class="flex flex-col gap-1">
+  <div class="flex gap-1">
+    <p>{file.path}</p>
+    <div class="flex-1" />
+    {#if progress}
+      {#each Object.entries(progress) as [url, status]}
+        {#if status.blob}
+          <CheckOutline class="h-6 w-6 text-green-500" />
+        {:else if status.error}
+          <InfoCircleOutline class="h-6 w-6 text-red-500" />
+        {:else}
+          <Spinner size="6" />
+        {/if}
+      {/each}
+    {:else}
+      <Spinner size="6" />
+    {/if}
+  </div>
+  {#if servers !== 0 && servers !== upload.servers.length}
+    <Progressbar progress={(servers / upload.servers.length) * 100} />
+  {/if}
+</div>

src/components/UploadDrawer.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import { ChevronDownOutline, ChevronUpOutline, UploadOutline } from "flowbite-svelte-icons";
   import { uploads, drawerOpen } from "../services/uploads";
-  import UploadFileRow from "./UploadFileRow.svelte";
+  import UploadRow from "./UploadRow.svelte";
+  import type Upload from "../blossom-drive-client/Upload";
+  import UploadDetailsModal from "./UploadDetailsModal/UploadDetailsModal.svelte";
+
+  let uploadDetails = false;
+  let selectedUpload: Upload;
 </script>
 
 {#if $uploads.length > 0}
@@ -21,13 +26,23 @@
     {#if $drawerOpen}
       <div class="flex h-96 flex-col gap-2 overflow-auto p-2">
         {#each $uploads as upload}
-          <UploadFileRow {upload} />
+          <UploadRow
+            {upload}
+            on:click={() => {
+              selectedUpload = upload;
+              uploadDetails = true;
+            }}
+          />
         {/each}
       </div>
     {/if}
   </div>
 {/if}
 
+{#if uploadDetails}
+  <UploadDetailsModal bind:open={uploadDetails} upload={selectedUpload} />
+{/if}
+
 <style>
   #upload-drawer {
     width: 25vw;

src/components/UploadRow.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Progressbar, Spinner } from "flowbite-svelte";
+  import type Upload from "../blossom-drive-client/Upload";
+  import { onMount } from "svelte";
+  import { CheckOutline } from "flowbite-svelte-icons";
+
+  export let upload: Upload;
+
+  let complete = upload.complete;
+  function updateComplete() {
+    complete = upload.complete;
+  }
+
+  let progress = upload.totalProgress;
+  function updateProgress() {
+    progress = upload.totalProgress;
+  }
+
+  updateProgress();
+
+  onMount(() => {
+    upload.on("progress", updateProgress);
+    upload.on("complete", updateComplete);
+    return () => {
+      upload.off("progress", updateProgress);
+      upload.off("complete", updateComplete);
+    };
+  });
+</script>
+
+<button class="flex flex-col gap-1 rounded-md p-2 hover:bg-gray-300 dark:hover:bg-gray-700" on:click>
+  <div class="flex justify-between">
+    <p>Uploaded {upload.files.length} files</p>
+    {#if complete}
+      <CheckOutline class="h-6 w-6 text-green-500" />
+    {:else}
+      <Spinner size="6" />
+    {/if}
+  </div>
+  {#if !complete}
+    <Progressbar progress={progress * 100} />
+  {/if}
+</button>

src/pages/Servers.svelte

@@ -18,7 +18,6 @@
   import { cloneEvent } from "../helpers/event";
   import { activeUser } from "../services/ndk";
   import LoginPage from "../components/LoginPage.svelte";
-  import { InfoCircleOutline } from "flowbite-svelte-icons";
 
   let server = "";
   let confirmModal = false;
@@ -33,13 +32,14 @@
     try {
       loading = true;
 
-      if (!server.startsWith("http")) throw new Error("Protocol must be http:// or https://");
+      if (!server.startsWith("http")) server = "https://" + server;
 
       const draft = cloneEvent($serverEvent, 10063);
       draft.tags.push(["r", new URL(server).toString()]);
       await draft.sign();
       await draft.publish();
       loading = false;
+      server = "";
     } catch (e) {
       if (e instanceof Error) alert(e.message);
       console.log(e);
@@ -110,16 +110,16 @@
     {/if}
 
     <form class="flex gap-2" on:submit={handleSubmit}>
-      <Input placeholder="https://cdn.example.com" bind:value={server} required />
+      <Input placeholder="https://cdn.example.com" bind:value={server} required type="url" />
       <Button class="shrink-0" disabled={loading} type="submit">Add Server</Button>
     </form>
 
     <Heading tag="h4">What are blossom servers?</Heading>
-    <P
-      ><a href="https://github.com/hzrd149/blossom/blob/master/Server.md" target="_blank" class="hover:underline"
+    <P>
+      <a href="https://github.com/hzrd149/blossom/blob/master/Server.md" target="_blank" class="hover:underline"
         >Blossom servers</a
-      > are servers that store your files and make them publicly available for anyone else on the internet</P
-    >
+      > are servers that store your files and make them publicly available for anyone else on the internet
+    </P>
   </div>
 
   {#if server}

src/services/ndk.ts

@@ -139,7 +139,7 @@ if (autoLogin) {
     } else if (autoLogin === "nsec") {
       const key = localStorage.getItem("private-key");
       if (key) await loginWithPrivateKey(key);
-    } else {
+    } else if (autoLogin.includes("@") || autoLogin.startsWith("bunker://") || autoLogin.includes("#")) {
       await loginWithNostrAddress(autoLogin).catch(() => {});
     }
   } catch (e) {}

src/services/uploads.ts

@@ -7,6 +7,4 @@ export const uploads = writable<Upload[]>([]);
 export function addUpload(upload: Upload) {
   uploads.update((arr) => [...arr, upload]);
   upload.upload();
-
-  console.log(`Uploading ${upload.files.length} files to ${upload.servers.map((s) => new URL(s).hostname).join(", ")}`);
 }