Small tweaks

src/App.ts

@@ -8,6 +8,8 @@ import { log, logID, renderLog, setLogVisibility } from "log"
 declare let marked: any;
 declare let QRCode: any;
 
+type PeerID = string;
+
 class Post {
   post_timestamp: Date;
   post_id: string;
@@ -54,6 +56,63 @@ interface SyncItem {
 
 }
 
+class StatusBar {
+  peerStatus = new Map();
+  headless = false;
+
+  setMessageHTML(html:string) {
+    let statusBarElement = document.getElementById('status_bar');
+
+    if (!statusBarElement) {
+      return;
+    }
+
+      statusBarElement.innerHTML = html;
+
+  }
+
+  setHeadless(headless:boolean) {
+    this.headless = headless;
+  }
+  updatePeerMessage(peerID: string, message: string) {
+    this.peerStatus.set(peerID, {message, data:this.peerStatus.get(peerID)?.data});
+    this.render();
+  }
+
+  updatePeerData(peerID:PeerID, data:any) {
+    this.peerStatus.set(peerID, {message:this.peerStatus.get(peerID)?.message, data:data});
+  }
+
+  updatePeerStatus(peerID:PeerID, message:string="", data={}) {
+    this.peerStatus.set(peerID, {message, data});
+    this.render();
+  }
+
+  getPeerData(peerID:PeerID) {
+    let status = this.peerStatus.get(peerID);
+    if (status) {
+      return status.data;
+    }
+
+    return null;
+  }
+
+  render() {
+    if (this.headless) {
+      // TODO:Make a nice htop-like display for headless at some point
+      return;
+    }
+
+    let newStatus = "";
+    for (let [peerID, status] of this.peerStatus.entries()) {
+        let statusBarItem = `<span>(${logID(peerID)} | ${status.message}) </span>`;
+        newStatus += statusBarItem;
+    }
+
+    this.setMessageHTML(newStatus);
+  }
+}
+
 export class App {
   username: string = '';
   peername: string = '';
@@ -74,43 +133,43 @@ export class App {
   firstRun = false;
   peerManager: PeerManager | null = null;
   sync: Sync = new Sync();
-  renderTimer: ReturnType<typeof setTimeout>|null = null;
+  renderTimer: ReturnType<typeof setTimeout> | null = null;
   syncQueues: Map<string, SyncItem[]> = new Map();
   syncing: Set<string> = new Set();
-  statusBar = "";
+  statusBar = new StatusBar();
 
-  updateStatusBar() {
+  // updateStatusBar() {
 
-    let statusBarElement = document.getElementById('status_bar');
+  //   let statusBarElement = document.getElementById('status_bar');
 
-    if (!statusBarElement) {
+  //   if (!statusBarElement) {
-      return;
+  //     return;
-    }
+  //   }
 
-    let newStatusBar = "";
+  //   let newStatusBar = "";
 
 
-    for (let [userID, syncItems] of this.syncQueues.entries()) {
+  //   for (let [userID, syncItems] of this.syncQueues.entries()) {
-      for (let item of syncItems) {
+  //     for (let item of syncItems) {
-        let {peerID, postIDs} = item;
+  //       let {peerID, postIDs} = item;
-        let statusBarItem = `<span> checking ${postIDs.length} for user [${logID(userID)}] from peer [${logID(peerID)}]</span>`;
+  //       // let statusBarItem = `<span> 🤔(${postIDs.length})✉️ [${this.getUserFunkyName(userID)}]${logID(userID)} from [${this.getPeerFunkyName(peerID)}]${logID(peerID)} </span>`;
-        newStatusBar+= statusBarItem;
+  //       // let statusBarItem = `<span> 🤔(${postIDs.length})✉️ [${this.getUserFunkyName(userID)}] from [${this.getPeerFunkyName(peerID)}] </span>`;
-      }
+  //       let statusBarItem = `<span> (${this.getUserFunkyName(userID)}+${this.getPeerFunkyName(peerID)})🧐 </span>`;
+  //       newStatusBar+= statusBarItem;
+  //     }
 
-    }
+  //   }
 
-    this.statusBar += newStatusBar;
+  //   this.statusBar += newStatusBar;
-    statusBarElement.innerHTML = this.statusBar;
+  //   statusBarElement.innerHTML = this.statusBar;
-  }
+  // }
 
   async processSyncQueue(userID: string) {
 
     if (this.syncing.has(userID)) {
-      return;
+      return
     }
 
-    // this.updateStatusBar();
-
     let syncQueue = this.syncQueues.get(userID) as SyncItem[];
 
     while (syncQueue.length !== 0) {
@@ -127,12 +186,15 @@ export class App {
 
       if (neededPostIDs.length > 0) {
         console.log.apply(null, log(`[app] Need (${neededPostIDs.length}) posts for user ${logID(userID)} from peer ${logID(peerID)}`));
-        let neededPosts = await this.peerManager?.rpc.getPostsForUser(peerID, this.peerID, userID, neededPostIDs);
+        let neededPostCount = neededPostIDs.length;
-        // console.log(neededPosts);
+      this.statusBar.updatePeerStatus(peerID, `need(${logID(userID)} | ${neededPostCount})`, {havePostCount:0, neededPostCount:neededPostCount});
 
+        let neededPosts = await this.peerManager?.rpc.getPostsForUser(peerID, this.peerID, userID, neededPostIDs);
       }
       else {
         console.log.apply(null, log(`[app] Don't need any posts for user ${logID(userID)} from peer ${logID(peerID)}`));
+        this.statusBar.updatePeerStatus(peerID, `synced(${logID(userID)})`);
+
       }
     }
 
@@ -169,18 +231,22 @@ export class App {
 
     console.log.apply(null, log(`[app] got announceUsers from ${logID(sendingPeerID)}`, userIDs));
 
+    this.statusBar.updatePeerStatus(sendingPeerID, `announcePeers(${userIDs.length})⬇️`);
+
     for (let userID of userIDs) {
       // console.log.apply(null, log(`[app] announceUsers, got user:${userID} from peer ${sendingPeerID}`));
       this.sync.addUserPeer(userID, sendingPeerID);
       if (!(this.sync.shouldSyncUserID(userID) || (this.router.route === App.Route.USER && userID === this.router.userID))) {
         console.log.apply(null, log(`[app] announceUser_rpc_response skipping user[${logID(userID)}] from[${logID(sendingPeerID)}]`));
-
         continue;
       }
 
       console.log.apply(null, log(`[app] calling getPostIDsForUser for user [${logID(userID)}] on peer [${logID(sendingPeerID)}]`));
 
       let postIDs = await this.peerManager?.rpc.getPostIDsForUser(sendingPeerID, userID);
+      
+      this.statusBar.updatePeerStatus(sendingPeerID, `syncing(${logID(userID)} ${postIDs.length})`);
+
       console.log.apply(null, log(`[app] Got (${postIDs.length}) post IDs for user [${logID(userID)}] from peer [${logID(sendingPeerID)}]`));
       this.addPostIDsToSyncQueue(userID, sendingPeerID, postIDs);
     }
@@ -243,10 +309,12 @@ export class App {
     this.peerManager.registerRPC('getPostsForUser', async (requestingPeerID: string, userID: string, postIDs: string[]) => {
       let posts = await this.sync.getPostsForUser(userID, postIDs);
 
-
+      let i=0;
       for (let post of posts) {
         console.log.apply(null, log(`[app] sendPostForUser sending post [${logID(post.post_id)}] to [${logID(requestingPeerID)}]`, userID, post.author, post.text));
 
+        i++;
+        this.statusBar.updatePeerStatus(this.peerID, `⬆️${logID(requestingPeerID)} ${i}/${posts.length}`);
         await this.peerManager?.rpc.sendPostForUser(requestingPeerID, this.peerID, userID, post);
       }
 
@@ -261,9 +329,19 @@ export class App {
       // if (post.text === "image...") {
       //   debugger;
       // }
+      
+      let peerData = this.statusBar.getPeerData(sendingPeerID);
+      if (peerData) {
+        this.statusBar.updatePeerMessage(sendingPeerID, `⬇️${logID(userID)} ${peerData.havePostCount}/${peerData.neededPostCount}}`);
+      }
       await this.sync.writePostForUser(userID, post);
       // if (userID === this.userID) {
 
+      if (peerData) {
+        peerData.havePostCount++
+        this.statusBar.updatePeerMessage(sendingPeerID, `⬇️${logID(userID)} ${peerData.havePostCount}/${peerData.neededPostCount}}`);
+      }
+      
       if (this.renderTimer) {
         clearTimeout(this.renderTimer);
       }
@@ -275,8 +353,11 @@ export class App {
     });
 
 
+    this.statusBar.setMessageHTML("Connecting to ddln network...")
     await this.peerManager.connect();
     console.log.apply(null, log("*************** after peerManager.connect"));;
+    this.statusBar.setMessageHTML("Connected to ddln network...")
+
 
 
     if (this.isBootstrapPeer) {
@@ -699,6 +780,16 @@ export class App {
     return { first, second }
   }
 
+  getUserFunkyName(userID: string) {
+    let { first: adjective, second: animal } = this.funkyName(userID, this.adjectives, this.animals);
+    return `${adjective}_${animal}`
+  }
+
+  getPeerFunkyName(peerID: string) {
+    let { first: adjective, second: snake } = this.funkyName(peerID, this.adjectives, this.snakes);
+    return `${adjective}_${snake}`
+  }
+
   getUsername() {
     let username = localStorage.getItem("dandelion_username");
 
@@ -706,16 +797,15 @@ export class App {
       return username;
     }
 
-    let { first: adjective, second: animal } = this.funkyName(this.userID, this.adjectives, this.animals);
+    username = this.getUserFunkyName(this.userID);
-    username = `${adjective}_${animal}`
+
     localStorage.setItem("dandelion_username", username);
 
     return username;
   }
 
   getPeername() {
-    let { first: adjective, second: snake } = this.funkyName(this.peerID, this.adjectives, this.snakes);
+    let peername = this.getPeerFunkyName(this.peerID);
-    let peername = `${adjective}_${snake}`
     return peername;
   }
 
@@ -1107,6 +1197,10 @@ export class App {
 
     console.log(`[headless]${this.isHeadless} [archive] ${this.isArchivePeer} [bootstrap] ${this.isBootstrapPeer}`);
 
+    
+    this.statusBar.setHeadless(this.isHeadless);
+    
+
     let limitPostsParam = urlParams.get('limitPosts');
     if (limitPostsParam) {
       this.limitPosts = parseInt(limitPostsParam);

src/PeerManager.ts

@@ -520,10 +520,10 @@ class PeerConnection {
       { urls: "stun:ddln.app" },
       { urls: "turn:ddln.app", username: "a", credential: "b" },
       { urls: "stun:stun.l.google.com" }, // keeping this for now as my STUN server is not returning ipv6
-      //  { urls: "stun:stun1.l.google.com" },
+       { urls: "stun:stun1.l.google.com" },
-      //  { urls: "stun:stun2.l.google.com" },
+       { urls: "stun:stun2.l.google.com" },
-      //  { urls: "stun:stun3.l.google.com" },
+       { urls: "stun:stun3.l.google.com" },
-      //  { urls: "stun:stun4.l.google.com" },
+       { urls: "stun:stun4.l.google.com" },
     ],
   };
   // longMessageQueue: string[] = [];

static/index.html

@@ -42,7 +42,7 @@
 
 <body>
 
-  <div class="status-bar" id="status_bar"></div>
+  <div class="status-bar" id="status_bar">Connecting...</div>
 
   <div id="burger-menu-button" class="burger-menu">☰</div>
   <div class="nav-overlay"></div>

static/main.css

@@ -364,6 +364,9 @@ iframe {
 
 .status-bar {
     align-content: center;
+    padding-left: 55px;
+    font-size: 12px;
+    height:12px;
 }
 
 .spinner {