Show own ID as "me" (#776)

Add a new filter called "displayName" that shows "Me" for own contact,
and the `displayName` property for all other contacts.

public/i18n/de.json

@@ -192,7 +192,8 @@
         "PINNED_CONVERSATION_OK": "Unterhaltung angepinnt",
         "PINNED_CONVERSATION_ERROR": "Unterhaltung konnte nicht angepinnt werden",
         "UNPINNED_CONVERSATION_OK": "Unterhaltung entpinnt",
-        "UNPINNED_CONVERSATION_ERROR": "Unterhaltung konnte nicht entpinnt werden"
+        "UNPINNED_CONVERSATION_ERROR": "Unterhaltung konnte nicht entpinnt werden",
+        "ME": "Ich"
     },
     "messageStates": {
         "WE_ACK": "Sie haben ein Daumen-Hoch gesendet",

public/i18n/en.json

@@ -192,7 +192,8 @@
         "PINNED_CONVERSATION_OK": "Conversation pinned",
         "PINNED_CONVERSATION_ERROR": "Conversation could not be pinned",
         "UNPINNED_CONVERSATION_OK": "Conversation unpinned",
-        "UNPINNED_CONVERSATION_ERROR": "Conversation could not be unpinned"
+        "UNPINNED_CONVERSATION_ERROR": "Conversation could not be unpinned",
+        "ME": "Me"
     },
     "messageStates": {
         "WE_ACK": "You sent thumbs-up",

public/i18n/fr.json

@@ -189,7 +189,8 @@
         "PINNED_CONVERSATION_OK": "Les conversations épinglées",
         "PINNED_CONVERSATION_ERROR": "Les conversations n'ont pas pu être épinglées",
         "UNPINNED_CONVERSATION_OK": "Les conversations non épinglées",
-        "UNPINNED_CONVERSATION_ERROR": "La conversation n'a pas pu être désépinglé"
+        "UNPINNED_CONVERSATION_ERROR": "La conversation n'a pas pu être désépinglé",
+        "ME": "Moi"
     },
     "messageStates": {
         "WE_ACK": "Vous avez envoyé un pouce levé",

src/directives/contact_badge.ts

@@ -90,7 +90,7 @@ export default [
                         <eee-avatar eee-receiver="ctrl.contactReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
-                    <div class="receiver-badge-name" ng-bind-html="ctrl.contactReceiver.displayName | escapeHtml | emojify"></div>
+                    <div class="receiver-badge-name" ng-bind-html="ctrl.contactReceiver | displayName | escapeHtml | emojify"></div>
                     <div class="contact-badge-identity">{{ ctrl.contactReceiver.id }}</div>
                     <div class="contact-badge-actions" ng-if="ctrl.showActions">
                         <md-button aria-label="Remove" class="md-icon-button" ng-click="ctrl.onRemove(ctrl.contactReceiver)">

src/directives/message_contact.ts

@@ -26,7 +26,7 @@ export default [
             template: `
                 <span class="message-name"
                     ng-style="colored && {'color': contact.color}"
-                       ng-bind-html="contact.displayName | escapeHtml | emojify">
+                       ng-bind-html="contact | displayName | escapeHtml | emojify">
                 </span>
             `,
         };

src/filters.ts

@@ -339,15 +339,15 @@ angular.module('3ema.filters', [])
 }])
 
 /**
- * Convert ID-Array to (Display-)Name-String, separated by ','
+ * Convert ID-Array to (Display-)Name-String, separated by ','. Invokes the displayName filter.
  */
-.filter('idsToNames', ['WebClientService', function(webClientService: WebClientService) {
+.filter('idsToNames', ['WebClientService', '$filter', function(webClientService: WebClientService, $filter) {
     return(ids: string[]) => {
         const names: string[] = [];
         for (const id of ids) {
             const contactReceiver = webClientService.contacts.get(id);
             if (hasValue(contactReceiver)) {
-                names.push(contactReceiver.displayName);
+                names.push($filter('displayName')(contactReceiver));
             } else {
                 names.push('Unknown');
             }
@@ -431,4 +431,18 @@ angular.module('3ema.filters', [])
     return $sce.trustAsResourceUrl;
 }])
 
+/**
+ * Show 'Me' for own contact, for all other contacts show displayName
+ */
+.filter('displayName', ['WebClientService', '$translate',
+    function(webClientService: WebClientService, $translate: ng.translate.ITranslateService) {
+        return function(contact: threema.Receiver) {
+            if (contact.id === webClientService.me.id) {
+                return $translate.instant('messenger.ME');
+            } else {
+                return contact.displayName;
+            }
+        };
+}])
+
 ;

tests/filters.js

@@ -13,21 +13,25 @@ describe('Filters', function() {
             get: function(id) {
                 if (id === 'AAAAAAAA') {
                     return {
+                        id: 'AAAAAAAA',
                         displayName: 'ContactA'
                     }
                 }
                 else if (id === 'XXXXXXXX') {
                     return {
+                        id: 'XXXXXXXX',
                         displayName: 'ContactX'
                     }
                 }
                 else if (id === '*AAAAAAA') {
                     return {
+                        id: '*AAAAAAA',
                         displayName: 'GWContactA'
                     }
                 }
                 else if (id === 'BAD0BAD1') {
                     return {
+                        id: 'BAD0BAD1',
                         displayName: '<b>< script >foo&ndash;</b>< script>',
                     }
                 }
@@ -236,4 +240,22 @@ describe('Filters', function() {
         });
     });
 
+    describe('displayName', function() {
+
+        let process = (id) => {
+            return $filter('displayName')(id)
+        };
+
+        it('own contact/nickname to me', () => {
+            expect(process(webClientServiceMock.me)).toEqual('messenger.ME');
+        });
+
+        it('other contacts to displayName', () => {
+            expect(process(webClientServiceMock.contacts.get('AAAAAAAA'))).toEqual('ContactA');
+            expect(process(webClientServiceMock.contacts.get('XXXXXXXX'))).toEqual('ContactX');
+            expect(process(webClientServiceMock.contacts.get('*AAAAAAA'))).toEqual('GWContactA');
+        });
+
+    });
+
 });