render asset upload progress

app/client/web/src/conversation/Conversation.module.css

@@ -34,13 +34,27 @@
     width: 100%;
   }
 
-  .divider {
+  .progressDivider {
-    width: calc(100% - 32px);
+    position: relative;
     margin-left: 16px;
     margin-right: 16px;
+    width: calc(100% - 32px);
+    height: 2px;
+  }
+
+  .divider {
+    width: 100%;
+    border-top: 1px solid var(--mantine-color-text-7);
     border-bottom: 1px solid var(--mantine-color-text-7);
   }
 
+  .progress {
+    position: absolute;
+    top: 0;
+    border-top: 1px solid var(--mantine-color-dbgreen-1);
+    border-bottom: 1px solid var(--mantine-color-dbgreen-1);
+  }
+
   .topSpinner {
     top: 64px;
     position: absolute;

app/client/web/src/conversation/Conversation.tsx

@@ -141,6 +141,9 @@ export function Conversation() {
     }
   });
 
+console.log("SEND? ", sending, state.progress);
+
+
   return (
     <div className={classes.conversation}>
       <div className={classes.header}>
@@ -198,7 +201,12 @@ export function Conversation() {
           </div>
         )}
       </div>
-      <div className={classes.divider} />
+      <div className={classes.progressDivider}>
+        <div className={classes.divider} />
+        { sending && (
+          <div className={classes.progress} style={{ width: `${state.progress}%` }}/>
+        )}
+      </div>
       <div className={classes.add}>
         <input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => addImage(e.target?.files?.[0])} style={{display: 'none'}}/>
         <input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => addVideo(e.target?.files?.[0])} style={{display: 'none'}}/>

app/client/web/src/conversation/useConversation.hook.ts

@@ -103,6 +103,7 @@ export function useConversation() {
     textColorSet: false,
     textSize: 16,
     textSizeSet: false,
+    progress: 0,
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -317,9 +318,9 @@ export function useConversation() {
           });
           return { text: state.message, textColor: state.textColorSet ? state.textColor : null, textSize: state.textSizeSet ? state.textSize : null, assets };
         }
-        const progress = (precent: number) => {};
+        const upload = (progress: number) => { updateState({ progress }) };
-        await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, progress);
+        await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, upload);
-        updateState({ message: '', assets: [] });
+        updateState({ message: '', assets: [], progress: 0 });
       }
     }, 
     addImage: (file: File) => {

app/sdk/src/focus.ts

@@ -281,7 +281,7 @@ export class FocusModule implements Focus {
       const xhr = new XMLHttpRequest();
       xhr.open('POST', url, true);
       xhr.setRequestHeader('Content-Type', 'text/plain');
-      xhr.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress(0) };
+      xhr.upload.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress((ev.loaded * 100) / ev.total) };
       xhr.onload = () => {
         if (xhr.status >= 200 && xhr.status < 300) {
           try {
@@ -314,7 +314,7 @@ export class FocusModule implements Focus {
     return new Promise(function (resolve, reject) {
       const xhr = new XMLHttpRequest();
       xhr.open('POST', url, true);
-      xhr.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress(0) };
+      xhr.upload.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress((ev.loaded * 100) / ev.total) };
       xhr.onload = () => {
         if (xhr.status >= 200 && xhr.status < 300) {
           try {
@@ -347,7 +347,7 @@ export class FocusModule implements Focus {
     return new Promise(function (resolve, reject) {
       const xhr = new XMLHttpRequest();
       xhr.open('POST', url, true);
-      xhr.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress(0) };
+      xhr.upload.onprogress = (ev: ProgressEvent<EventTarget>)=>{ progress((ev.loaded * 100) / ev.total) };
       xhr.onload = () => {
         if (xhr.status >= 200 && xhr.status < 300) {
           try {
@@ -389,6 +389,12 @@ export class FocusModule implements Focus {
         return await this.addRemoteChannelTopic(type, data, true);
       }
     } else {
+
+      let uploadCount = 0;
+      const assetProgress = (percent: number) => {
+        progress(Math.floor((uploadCount * 100 + percent) / files.length));
+      }
+
       const topicId = await this.addRemoteChannelTopic(type, {}, false);
       try {
         const appAsset = [] as {assetId: string, appId: string}[];
@@ -419,9 +425,13 @@ export class FocusModule implements Focus {
                   const base64Data = await mediaFile.getData(i * ENCRYPT_BLOCK_SIZE, length);
                   const { ivHex } = await crypto.aesIv();
                   const { encryptedDataB64 } = await crypto.aesEncrypt(base64Data, ivHex, channelKey);
-                  const partId = await this.uploadBlock(encryptedDataB64, topicId, progress);
+                  const partId = await this.uploadBlock(encryptedDataB64, topicId, (percent: number) => {
+                    const count = Math.ceil(mediaFile.size / ENCRYPT_BLOCK_SIZE);
+                    assetProgress(Math.floor((i * 100 + percent) / count));
+                  });
                   split.push({ partId, blockIv: ivHex });
                 }
+                uploadCount += 1;
                 const assetItem = {
                   assetId: `${assetItems.length}`,
                   encrypted: true,
@@ -466,7 +476,8 @@ export class FocusModule implements Focus {
                 transforms.push('acopy;audio');
                 transformMap.set('acopy;audio', transform.appId);
               } else if (transform.type === TransformType.Copy && asset.type === AssetType.Binary) {
-                const assetId = await this.mirrorFile(asset.source, topicId, progress);
+                const assetId = await this.mirrorFile(asset.source, topicId, assetProgress);
+                uploadCount += 1;
                 const assetItem = {
                   assetId: `${assetItems.length}`,
                   hosting: HostingMode.Basic,
@@ -479,7 +490,9 @@ export class FocusModule implements Focus {
               }
             }
             if (transforms.length > 0) {
-              const transformAssets = await this.transformFile(asset.source, topicId, transforms, progress);
+              const transformAssets = await this.transformFile(asset.source, topicId, transforms, assetProgress);
+              uploadCount += 1;
+
               for (let transformAsset of transformAssets) {
                 const assetItem = {
                   assetId: `${assetItems.length}`,