Add message timeout state

Additionally, show a title text for all message state icons.

Refs #509

public/i18n/de.json

@@ -179,6 +179,20 @@
         "MUTED_SILENT": "Stumme Benachrichtigungen",
         "ALL": "Alle"
     },
+    "messageStates": {
+        "WE_ACK": "Sie haben ein Daumen-Hoch gesendet",
+        "WE_DEC": "Sie haben ein Daumen-Runter gesendet",
+        "USER_ACK": "Der Empfänger hat ein Daumen-Hoch gesendet",
+        "USER_DEC": "Der Empfänger hat ein Daumen-Runter gesendet",
+        "PENDING": "Die Nachricht wird auf Ihr Gerät übertragen",
+        "SENDING": "Die Nachricht wird an den Threema-Server übermittelt",
+        "SENT": "Die Nachricht wurde erfolgreich an den Server übermittelt",
+        "DELIVERED": "Die Nachricht ist beim Gerät des Empfängers angekommen",
+        "READ": "Die Nachricht wurde vom Empfänger gelesen",
+        "FAILED": "Die Nachricht konnte nicht gesendet werden",
+        "TIMEOUT": "Die Nachricht konnte nicht auf Ihr Gerät übertragen werden.",
+        "UNKNOWN": ""
+    },
     "messageTypes": {
         "AUDIO_MESSAGE": "Sprachnachricht",
         "FILE_MESSAGE": "Datei",

public/i18n/en.json

@@ -178,6 +178,20 @@
         "MUTED_SILENT": "Silent notifications",
         "ALL": "All"
     },
+    "messageStates": {
+        "WE_ACK": "You sent thumbs-up",
+        "WE_DEC": "You sent thumbs-down",
+        "USER_ACK": "Recipient sent thumbs-up",
+        "USER_DEC": "Recipient sent thumbs-down",
+        "PENDING": "The message is being transferred to your device",
+        "SENDING": "The message is being transferred to the Threema server",
+        "SENT": "The message was delivered to the Threema server",
+        "DELIVERED": "The message was delivered to the recipient's device",
+        "READ": "The message was read by the recipient",
+        "FAILED": "The message could not be sent",
+        "TIMEOUT": "The message could not be transferred to your device.",
+        "UNKNOWN": ""
+    },
     "messageTypes": {
         "AUDIO_MESSAGE": "Audio Message",
         "FILE_MESSAGE": "File Message",

src/directives/message.ts

@@ -45,6 +45,7 @@ export default [
             },
             controllerAs: 'ctrl',
             controller: [function() {
+                this.logTag = '[MessageDirective]';
                 // Return the contact
                 const getIdentity = function(message: threema.Message) {
                     if (message.isOutbox) {
@@ -120,10 +121,10 @@ export default [
                     try {
                         const successful = document.execCommand('copy');
                         if (!successful) {
-                            $log.warn('Could not copy text to clipboard');
+                            $log.warn(this.logTag, 'Could not copy text to clipboard');
                         }
                     } catch (err) {
-                        $log.warn('Could not copy text to clipboard:', err);
+                        $log.warn(this.logTag, 'Could not copy text to clipboard:', err);
                     }
                     document.body.removeChild(textArea);
                 };
@@ -143,12 +144,12 @@ export default [
                                         saveAs(new Blob([blobInfo.buffer]), blobInfo.filename);
                                         break;
                                     default:
-                                        $log.warn('Ignored download request for message type', this.message.type);
+                                        $log.warn(this.logTag, 'Ignored download request for message type', this.message.type);
                                 }
                             });
                         })
                         .catch((error) => {
-                            $log.error('Error downloading blob:', error);
+                            $log.error(this.logTag, 'Error downloading blob:', error);
                             this.downloading = false;
                         });
                 };

src/directives/message_state.ts

@@ -28,7 +28,7 @@ export default [
                 message: '=eeeMessage',
             },
             template: `
-                <i class="material-icons md-dark md-14 {{message.state}}">{{ message | messageStateIcon }}</i>
+                <i class="material-icons md-dark md-14 {{message.state}}" title="{{ message | messageStateTitleText | translate }}">{{ message | messageStateIcon }}</i>
             `,
         };
     },

src/filters.ts

@@ -324,11 +324,58 @@ angular.module('3ema.filters', [])
                 return 'thumb_up';
             case 'user-dec':
                 return 'thumb_down';
+            case 'timeout':
+                return 'sync_problem';
             default:
                 return '';
         }
     };
 })
+
+/**
+ * Convert message state to title text.
+ */
+.filter('messageStateTitleText', ['$translate', function($translate: ng.translate.ITranslateService) {
+    return (message: threema.Message) => {
+        if (!message) {
+            return null;
+        }
+
+        if (!message.isOutbox) {
+            switch (message.state) {
+                case 'user-ack':
+                    return 'messageStates.WE_ACK';
+                case 'user-dec':
+                    return 'messageStates.WE_DEC';
+                default:
+                    return 'messageStates.UNKNOWN';
+            }
+        }
+        switch (message.state) {
+            case 'pending':
+                return 'messageStates.PENDING';
+            case 'sending':
+                return 'messageStates.SENDING';
+            case 'sent':
+                return 'messageStates.SENT';
+            case 'delivered':
+                return 'messageStates.DELIVERED';
+            case 'read':
+                return 'messageStates.READ';
+            case 'send-failed':
+                return 'messageStates.FAILED';
+            case 'user-ack':
+                return 'messageStates.USER_ACK';
+            case 'user-dec':
+                return 'messageStates.USER_DEC';
+            case 'timeout':
+                return 'messageStates.TIMEOUT';
+            default:
+                return 'messageStates.UNKNOWN';
+        }
+    };
+}])
+
 .filter('fileSize', function() {
     return (size: number) => {
         if (!size) {

src/sass/sections/_conversation.scss

@@ -405,6 +405,9 @@
                     position: relative;
                     top: 2px;
                 }
+                i.timeout {
+                    color: $status-error;
+                }
             }
 
             md-icon {

src/services/message.ts

@@ -29,12 +29,20 @@ export class MessageAccess {
 
 export class MessageService {
 
+    // Angular services
     private $log: ng.ILogService;
+    private $timeout: ng.ITimeoutService;
+
+    // Own services
     private receiverService: ReceiverService;
 
-    public static $inject = ['$log', 'ReceiverService'];
-    constructor($log: ng.ILogService, receiverService: ReceiverService) {
+    // Other
+    private timeoutDelaySeconds = 30;
+
+    public static $inject = ['$log', '$timeout', 'ReceiverService'];
+    constructor($log: ng.ILogService, $timeout: ng.ITimeoutService, receiverService: ReceiverService) {
         this.$log = $log;
+        this.$timeout = $timeout;
         this.receiverService = receiverService;
     }
 
@@ -156,6 +164,17 @@ export class MessageService {
             message.quote = (messageData as threema.TextMessageData).quote;
         }
 
+        // Add delay for timeout checking
+        this.$timeout(() => {
+            // Set the state to timeout if it is still pending.
+            // Note: If sending the message worked, by now the message object
+            // will have been replaced by a new one and the state change would
+            // have no effect anyways...
+            if (message.state === 'pending') {
+                message.state = 'timeout';
+            }
+        }, this.timeoutDelaySeconds * 1000);
+
         return message;
     }
 }

src/threema.d.ts

@@ -39,7 +39,7 @@ declare namespace threema {
     type MessageType = 'text' | 'image' | 'video' | 'audio' | 'location' | 'contact' |
                        'status' | 'ballot' | 'file' | 'voipStatus' | 'unknown';
     type MessageState = 'delivered' | 'read' | 'send-failed' | 'sent' | 'user-ack' |
-                        'user-dec' | 'pending' | 'sending';
+                        'user-dec' | 'pending' | 'timeout' | 'sending';
 
     const enum InitializationStep {
         ClientInfo = 'client info',