Implement display of VoIP message types (#282)

public/i18n/de.json

@@ -221,5 +221,13 @@
     "version": {
         "NEW_VERSION": "Neue Version Verfügbar",
         "NEW_VERSION_BODY": "Eine neue Version von Threema Web ({version}) ist verfügbar. Drücken Sie \"OK\" um die Seite neu zu laden."
+    },
+    "voip": {
+        "CALL_MISSED": "Verpasster Anruf",
+        "CALL_FINISHED_IN": "Eingehender Anruf",
+        "CALL_FINISHED_OUT": "Ausgehender Anruf",
+        "CALL_REJECTED": "Anruf abgelehnt",
+        "CALL_ABORTED": "Anruf abgebrochen"
     }
+
 }

public/i18n/en.json

@@ -223,5 +223,12 @@
     "version": {
         "NEW_VERSION": "New Version Available",
         "NEW_VERSION_BODY": "A new version of Threema Web ({version}) is available. Click \"OK\" to reload the page."
+    },
+    "voip": {
+        "CALL_MISSED": "Missed call",
+        "CALL_FINISHED_IN": "Incoming call",
+        "CALL_FINISHED_OUT": "Outgoing call",
+        "CALL_REJECTED": "Call rejected",
+        "CALL_ABORTED": "Call aborted"
     }
 }

src/directives.ts

@@ -42,6 +42,7 @@ import messageMeta from './directives/message_meta';
 import messageQuote from './directives/message_quote';
 import messageState from './directives/message_state';
 import messageText from './directives/message_text';
+import messageVoipStatus from './directives/message_voip_status';
 import myIdentity from './directives/my_identity';
 import searchbox from './directives/searchbox';
 import statusBar from './directives/status_bar';
@@ -68,6 +69,7 @@ angular.module('3ema.directives').directive('eeeMessageMeta', messageMeta);
 angular.module('3ema.directives').directive('eeeMessageQuote', messageQuote);
 angular.module('3ema.directives').directive('eeeMessageState', messageState);
 angular.module('3ema.directives').directive('eeeMessageText', messageText);
+angular.module('3ema.directives').directive('eeeMessageVoipStatus', messageVoipStatus);
 angular.module('3ema.directives').directive('eeeMyIdentity', myIdentity);
 angular.module('3ema.directives').directive('eeeVerificationLevel', verificationLevel);
 angular.module('3ema.directives').directive('includeReplace', includeReplace);

src/directives/message.html

@@ -27,6 +27,12 @@
             eee-receiver="ctrl.receiver">
         </eee-message-media>
 
+        <eee-message-voip-status
+            ng-if="ctrl.showVoipInfo"
+            class="message-voip-status"
+            eee-message="ctrl.message">
+        </eee-message-voip-status>
+
         <eee-message-quote
             ng-if="ctrl.showQuote"
             class="message-quote"

src/directives/message.ts

@@ -76,6 +76,7 @@ export default [
                 this.showMedia = this.message.type !== 'text';
                 this.showState = messageService.showStatusIcon(this.message as threema.Message, this.receiver);
                 this.showQuote = this.message.quote !== undefined;
+                this.showVoipInfo = this.message.type === 'voipStatus';
 
                 this.access = messageService.getAccess(this.message, this.receiver);
 

src/directives/message_meta.ts

@@ -31,17 +31,20 @@ export default [
                 this.type = msg.type;
                 this.isGif = msg.file !== undefined && msg.file.type === 'image/gif';
 
-                // For audio or video, retrieve the duration
+                // For audio, video or voip call, retrieve the duration
                 this.duration = null;
                 if (this.message.audio !== undefined) {
                     this.duration = this.message.audio.duration;
                 } else if (this.message.video !== undefined) {
                     this.duration = this.message.video.duration;
+                } else if (this.message.voip !== undefined && this.message.voip.duration) {
+                    this.duration = this.message.voip.duration;
                 }
             }],
             template: `
                 <span ng-if="ctrl.isGif" class="message-meta-item">GIF</span>
                 <span ng-if="ctrl.duration" class="message-meta-item message-duration">
+                    <md-icon class="material-icons">av_timer</md-icon>
                     {{ctrl.duration | duration}}
                 </span>
             `,

src/directives/message_voip_status.ts

@@ -0,0 +1,64 @@
+/**
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// tslint:disable:max-line-length
+
+export default [
+    function() {
+        return {
+            restrict: 'EA',
+            scope: {},
+            bindToController: {
+                message: '=eeeMessage',
+            },
+            controllerAs: 'ctrl',
+            controller: [function() {
+                this.status = this.message.voip.status;
+                this.duration = this.message.voip.duration;
+                this.reason = this.message.voip.reason;
+                this.incoming = !this.message.isOutbox;
+                this.outgoing = this.message.isOutbox;
+            }],
+            template: `
+                <p ng-if="ctrl.status === 1">
+                    <md-icon class="material-icons color-status-warning">call_missed</md-icon>
+                    <span translate>voip.CALL_MISSED</span>
+                </p>
+                <p ng-if="ctrl.status === 2 && ctrl.incoming">
+                    <md-icon class="material-icons color-status-ok">call_received</md-icon>
+                    <span translate>voip.CALL_FINISHED_IN</span>
+                </p>
+                <p ng-if="ctrl.status === 2 && ctrl.outgoing">
+                    <md-icon class="material-icons color-status-ok">call_made</md-icon>
+                    <span translate>voip.CALL_FINISHED_OUT</span>
+                </p>
+                <p ng-if="ctrl.status === 3 && ctrl.incoming">
+                    <md-icon class="material-icons color-status-error">call_missed</md-icon>
+                    <span translate>voip.CALL_REJECTED</span>
+                </p>
+                <p ng-if="ctrl.status === 3 && ctrl.outgoing">
+                    <md-icon class="material-icons color-status-error">call_missed_outgoing</md-icon>
+                    <span translate>voip.CALL_REJECTED</span>
+                </p>
+                <p ng-if="ctrl.status === 4">
+                    <md-icon class="material-icons color-status-warning">call_missed_outgoing</md-icon>
+                    <span translate>voip.CALL_ABORTED</span>
+                </p>
+            `,
+        };
+    },
+];

src/sass/helpers/_colors.scss

@@ -13,3 +13,15 @@ $bright-background-color: white;
 $material-card-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16),0px 2px 5px 0px rgba(0,0,0,0.23);
 
 $active-placeholder-color: lightgray;
+
+.color-status-ok {
+    color: $status-ok;
+}
+
+.color-status-warning {
+    color: $status-warning;
+}
+
+.color-status-error {
+    color: $status-error;
+}

src/sass/sections/_conversation.scss

@@ -348,6 +348,15 @@
                     top: 2px;
                 }
             }
+
+            md-icon {
+                font-size: 1em;
+                height: 1em;
+                width: 1em;
+                min-height: 1em;
+                min-width: 1em;
+                vertical-align: top;
+            }
         }
     }
 

src/threema.d.ts

@@ -42,7 +42,7 @@ declare namespace threema {
         data?: any;
     }
 
-    type MessageType = 'text' | 'image' | 'video' | 'audio' | 'location' | 'status' | 'ballot' | 'file';
+    type MessageType = 'text' | 'image' | 'video' | 'audio' | 'location' | 'status' | 'ballot' | 'file' | 'voipStatus';
     type MessageState = 'delivered' | 'read' | 'send-failed' | 'sent' | 'user-ack' | 'user-dec' | 'pending' | 'sending';
     type InitializationStep = 'client info' | 'conversations' | 'receivers';