Merge pull request #43 from Mikunj/feature/pow-loading-icon

PoW loading icon.

app/sql.js

@@ -96,6 +96,7 @@ module.exports = {
   getMessageById,
   getAllMessages,
   getAllMessageIds,
+  getAllUnsentMessages,
   getMessagesBySentAt,
   getExpiredMessages,
   getOutgoingWithoutExpiresAt,
@@ -203,6 +204,7 @@ async function updateToSchemaVersion1(currentVersion, instance) {
 
       unread INTEGER,
       expires_at INTEGER,
+      sent BOOLEAN,
       sent_at INTEGER,
       schemaVersion INTEGER,
       conversationId STRING,
@@ -1115,6 +1117,7 @@ async function saveMessage(data, { forceSave } = {}) {
     received_at,
     schemaVersion,
     // eslint-disable-next-line camelcase
+    sent,
     sent_at,
     source,
     sourceDevice,
@@ -1137,6 +1140,7 @@ async function saveMessage(data, { forceSave } = {}) {
     $hasVisualMediaAttachments: hasVisualMediaAttachments,
     $received_at: received_at,
     $schemaVersion: schemaVersion,
+    $sent: sent,
     $sent_at: sent_at,
     $source: source,
     $sourceDevice: sourceDevice,
@@ -1158,6 +1162,7 @@ async function saveMessage(data, { forceSave } = {}) {
         id = $id,
         received_at = $received_at,
         schemaVersion = $schemaVersion,
+        sent = $sent,
         sent_at = $sent_at,
         source = $source,
         sourceDevice = $sourceDevice,
@@ -1189,6 +1194,7 @@ async function saveMessage(data, { forceSave } = {}) {
     hasVisualMediaAttachments,
     received_at,
     schemaVersion,
+    sent,
     sent_at,
     source,
     sourceDevice,
@@ -1207,6 +1213,7 @@ async function saveMessage(data, { forceSave } = {}) {
     $hasVisualMediaAttachments,
     $received_at,
     $schemaVersion,
+    $sent,
     $sent_at,
     $source,
     $sourceDevice,
@@ -1293,6 +1300,14 @@ async function getMessageBySender({ source, sourceDevice, sent_at }) {
   return map(rows, row => jsonToObject(row.json));
 }
 
+async function getAllUnsentMessages() {
+  const rows = await db.all(`
+    SELECT json FROM messages WHERE NOT sent
+    ORDER BY sent_at DESC;
+  `);
+  return map(rows, row => jsonToObject(row.json));
+}
+
 async function getUnreadByConversation(conversationId) {
   const rows = await db.all(
     `SELECT json FROM messages WHERE

images/pow.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="12px" height="12px">
+<g id="surface1">
+<path style=" " d="M 6.570313 1 L 6.328125 2.289063 C 5.398438 2.5625 4.570313 3.046875 3.890625 3.695313 L 2.652344 3.261719 L 1.222656 5.738281 L 2.210938 6.585938 C 2.097656 7.042969 2 7.507813 2 8 C 2 8.492188 2.097656 8.957031 2.210938 9.414063 L 1.222656 10.261719 L 2.652344 12.738281 L 3.886719 12.300781 C 4.570313 12.957031 5.398438 13.4375 6.328125 13.714844 L 6.570313 15 L 9.429688 15 L 9.671875 13.714844 C 10.601563 13.4375 11.429688 12.953125 12.109375 12.300781 L 13.34375 12.738281 L 14.777344 10.261719 L 13.785156 9.414063 C 13.898438 8.957031 14 8.492188 14 8 C 14 7.507813 13.902344 7.042969 13.789063 6.585938 L 14.777344 5.738281 L 13.347656 3.261719 L 12.113281 3.695313 C 11.429688 3.042969 10.601563 2.5625 9.671875 2.289063 L 9.429688 1 Z M 7.398438 2 L 8.601563 2 L 8.796875 3.054688 L 9.117188 3.132813 C 10.109375 3.359375 10.984375 3.878906 11.65625 4.597656 L 11.878906 4.835938 L 12.894531 4.480469 L 13.496094 5.519531 L 12.683594 6.21875 L 12.78125 6.53125 C 12.921875 6.992188 13 7.488281 13 8 C 13 8.511719 12.921875 9.003906 12.78125 9.46875 L 12.683594 9.78125 L 13.496094 10.480469 L 12.894531 11.519531 L 11.878906 11.160156 L 11.65625 11.402344 C 10.984375 12.121094 10.109375 12.640625 9.117188 12.871094 L 8.796875 12.941406 L 8.601563 14 L 7.398438 14 L 7.203125 12.941406 L 6.882813 12.871094 C 5.890625 12.640625 5.015625 12.121094 4.34375 11.402344 L 4.117188 11.160156 L 3.101563 11.519531 L 2.503906 10.480469 L 3.316406 9.78125 L 3.21875 9.46875 C 3.078125 9.007813 3 8.511719 3 8 C 3 7.488281 3.078125 6.992188 3.21875 6.53125 L 3.316406 6.21875 L 2.503906 5.519531 L 3.101563 4.480469 L 4.121094 4.835938 L 4.34375 4.597656 C 5.015625 3.878906 5.890625 3.359375 6.882813 3.132813 L 7.203125 3.054688 Z M 8 5 C 6.347656 5 5 6.347656 5 8 C 5 9.652344 6.347656 11 8 11 C 9.652344 11 11 9.652344 11 8 C 11 6.347656 9.652344 5 8 5 Z M 8 6 C 9.109375 6 10 6.890625 10 8 C 10 9.109375 9.109375 10 8 10 C 6.890625 10 6 9.109375 6 8 C 6 6.890625 6.890625 6 8 6 Z "/>
+</g>
+</svg>

js/background.js

@@ -318,11 +318,14 @@
     Views.Initialization.setMessage(window.i18n('optimizingApplication'));
 
     window.log.info('Cleanup: starting...');
-    const messagesForCleanup = await window.Signal.Data.getOutgoingWithoutExpiresAt(
+    const results = await Promise.all([
-      {
+      window.Signal.Data.getOutgoingWithoutExpiresAt({ MessageCollection: Whisper.MessageCollection }),
-        MessageCollection: Whisper.MessageCollection,
+      window.Signal.Data.getAllUnsentMessages({ MessageCollection: Whisper.MessageCollection }),
-      }
+    ]);
-    );
+
+    // Combine the models
+    const messagesForCleanup = results.reduce((array, current) => array.concat(current.toArray()), []);
+    
     window.log.info(
       `Cleanup: Found ${messagesForCleanup.length} messages for cleanup`
     );
@@ -562,6 +565,13 @@
         appView.showFriendRequest(friendRequest);
       }
     });
+
+    Whisper.events.on('calculatingPoW', ({ pubKey, timestamp}) => {
+      try {
+        const conversation = ConversationController.get(pubKey);
+        conversation.onCalculatingPoW(pubKey, timestamp);
+      } catch (e) {}
+    });
   }
 
   window.getSyncRequest = () =>

js/models/conversations.js

@@ -198,6 +198,13 @@
       await this.inProgressFetch;
       removeMessage();
     },
+    async onCalculatingPoW(pubKey, timestamp) {
+      if (this.id !== pubKey) return;
+
+      // Go through our messages and find the one that we need to update
+      const messages = this.messageCollection.models.filter(m => m.get('sent_at') === timestamp);
+      await Promise.all(messages.map(m => m.setCalculatingPoW()));
+    },
 
     addSingleMessage(message, setToExpire = true) {
       const model = this.messageCollection.add(message, { merge: true });
@@ -909,6 +916,26 @@
       return current;
     },
 
+    queueMessageSend(callback) {
+      const previous = this.pendingSend || Promise.resolve();
+
+      const taskWithTimeout = textsecure.createTaskWithTimeout(
+        callback,
+        `conversation ${this.idForLogging()}`
+      );
+
+      this.pendingSend = previous.then(taskWithTimeout, taskWithTimeout);
+      const current = this.pendingSend;
+
+      current.then(() => {
+        if (this.pendingSend === current) {
+          delete this.pendingSend;
+        }
+      });
+
+      return current;
+    },
+
     getRecipients() {
       if (this.isPrivate()) {
         return [this.id];
@@ -1078,20 +1105,26 @@
         );
 
         const options = this.getSendOptions();
-        return message.send(
+
-          this.wrapSend(
+        // Add the message sending on another queue so that our UI doesn't get blocked
-            sendFunction(
+        this.queueMessageSend(async () => {
-              destination,
+          return message.send(
-              body,
+            this.wrapSend(
-              attachmentsWithData,
+              sendFunction(
-              quote,
+                destination,
-              now,
+                body,
-              expireTimer,
+                attachmentsWithData,
-              profileKey,
+                quote,
-              options
+                now,
+                expireTimer,
+                profileKey,
+                options
+              )
             )
-          )
+          );
-        );
+        });
+
+        return true;
       });
     },
     async updateTextInputState() {

js/models/messages.js

@@ -93,6 +93,7 @@
       return {
         timestamp: new Date().getTime(),
         attachments: [],
+        sent: false,
       };
     },
     validate(attributes) {
@@ -439,6 +440,8 @@
       if (sent || sentTo.length > 0) {
         return 'sent';
       }
+      const calculatingPoW = this.get('calculatingPoW');
+      if (calculatingPoW) return 'pow';
 
       return 'sending';
     },
@@ -930,7 +933,17 @@
 
       return null;
     },
+    async setCalculatingPoW() {
+      if (this.calculatingPoW) return;
 
+      this.set({
+        calculatingPoW: true,
+      });
+
+      await window.Signal.Data.saveMessage(this.attributes, {
+        Message: Whisper.Message,
+      });
+    },
     send(promise) {
       this.trigger('pending');
       return promise

js/modules/data.js

@@ -133,6 +133,7 @@ module.exports = {
   getMessageBySender,
   getMessageById,
   getAllMessages,
+  getAllUnsentMessages,
   getAllMessageIds,
   getMessagesBySentAt,
   getExpiredMessages,
@@ -810,6 +811,12 @@ async function getAllMessages({ MessageCollection }) {
   return new MessageCollection(encoded);
 }
 
+async function getAllUnsentMessages({ MessageCollection }) {
+  const messages = await channels.getAllUnsentMessages();
+  const encoded = messages.map(m => keysToArrayBuffer(MESSAGE_PRE_KEYS, m));
+  return new MessageCollection(encoded);
+}
+
 async function getAllMessageIds() {
   const ids = await channels.getAllMessageIds();
   return ids;

js/modules/loki_message_api.js

@@ -46,7 +46,7 @@ class LokiServer {
     });
   }
 
-  async sendMessage(pubKey, data, ttl) {
+  async sendMessage(pubKey, data, messageTimeStamp, ttl) {
     const data64 = dcodeIO.ByteBuffer.wrap(data).toString('base64');
     // Hardcoded to use a single node/server for now
     const currentNode = this.nodes[0];
@@ -55,6 +55,10 @@ class LokiServer {
     // Nonce is returned as a base64 string to include in header
     let nonce;
     try {
+      window.Whisper.events.trigger('calculatingPoW', {
+        pubKey,
+        timestamp: messageTimeStamp,
+      });
       nonce = await getPoWNonce(timestamp, ttl, pubKey, data64);
     } catch (err) {
       // Something went horribly wrong

libtextsecure/outgoing_message.js

@@ -177,7 +177,7 @@ OutgoingMessage.prototype = {
   async transmitMessage(number, data, timestamp, ttl = 24 * 60 * 60) {
     const pubKey = number;
     try {
-      const result = await this.lokiserver.sendMessage(pubKey, data, ttl);
+      const result = await this.lokiserver.sendMessage(pubKey, data, timestamp, ttl);
       return result;
     } catch (e) {
       if (e.name === 'HTTPError' && (e.code !== 409 && e.code !== 410)) {

stylesheets/_ios.scss

@@ -48,6 +48,10 @@
     @include color-svg('../images/sending.svg', $color-white);
   }
 
+  .module-message__metadata__status-icon--pow {
+    @include color-svg('../images/pow.svg', $color-white);
+  }
+
   .module-message__metadata__status-icon--sent {
     @include color-svg('../images/check-circle-outline.svg', $color-white-08);
   }
@@ -153,6 +157,10 @@
       @include color-svg('../images/sending.svg', $color-white);
     }
 
+    .module-message__metadata__status-icon--pow {
+      @include color-svg('../images/pow.svg', $color-white);
+    }
+
     .module-message__metadata__status-icon--sent {
       @include color-svg('../images/check-circle-outline.svg', $color-white-08);
     }

stylesheets/_modules.scss

@@ -535,6 +535,11 @@
   animation: module-message__metdata__status-icon--spinning 4s linear infinite;
 }
 
+.module-message__metadata__status-icon--pow {
+  @include color-svg('../images/pow.svg', $color-gray-60);
+  animation: module-message__metdata__status-icon--spinning 4s linear infinite;
+}
+
 @keyframes module-message__metdata__status-icon--spinning {
   100% {
     -webkit-transform: rotate(360deg);

stylesheets/_theme_dark.scss

@@ -770,6 +770,10 @@ body.dark-theme {
     @include color-svg('../images/sending.svg', $color-white-08);
   }
 
+  .module-message__metadata__status-icon--pow {
+    @include color-svg('../images/pow.svg', $color-white-08);
+  }
+
   .module-message__metadata__status-icon--sent {
     @include color-svg('../images/check-circle-outline.svg', $color-white-08);
   }