Enlarge single emoji

Fixes #97

src/directives/message_text.ts

@@ -17,6 +17,8 @@
 
 // tslint:disable:max-line-length
 
+import {WebClientService} from '../services/webclient';
+
 export default [
     function() {
         return {
@@ -27,7 +29,7 @@ export default [
                 multiLine: '=?eeeMultiLine',
             },
             controllerAs: 'ctrl',
-            controller: [function() {
+            controller: ['WebClientService', function(webClientService: WebClientService) {
                 // Get text depending on type
                 let rawText = null;
                 const message = this.message as threema.Message;
@@ -50,15 +52,18 @@ export default [
                         rawText = message.caption;
                         break;
                 }
+
                 // Escaping will be done in the HTML using filters
                 this.text = rawText;
                 if (this.multiLine === undefined) {
                     this.multiLine = true;
                 }
+
+                this.enlargeSingleEmoji = webClientService.appConfig.largeSingleEmoji;
             }],
             template: `
                 <span click-action
-                    ng-bind-html="ctrl.text | escapeHtml | markify | emojify | mentionify | linkify | nlToBr: ctrl.multiLine">
+                    ng-bind-html="ctrl.text | escapeHtml | markify | emojify | enlargeSingleEmoji:ctrl.enlargeSingleEmoji | mentionify | linkify | nlToBr:ctrl.multiLine">
                 </span>
             `,
         };

src/filters.ts

@@ -112,6 +112,27 @@ angular.module('3ema.filters', [])
     };
 })
 
+/**
+ * Enlarge 1-3 emoji.
+ */
+.filter('enlargeSingleEmoji', function() {
+    const pattern = /<span class="e1 ([^>]*>[^<]*)<\/span>/g;
+    const singleEmojiThreshold = 3;
+    const singleEmojiClassName = 'large-emoji';
+    return function(text, enlarge = false) {
+        if (!enlarge) {
+            return text;
+        }
+        const matches = text.match(pattern);
+        if (matches != null && matches.length >= 1 && matches.length <= singleEmojiThreshold) {
+            if (text.replace(pattern, '').length === 0) {
+                text = text.replace(pattern, '<span class="e1 ' + singleEmojiClassName + ' $1</span>');
+            }
+        }
+        return text;
+    };
+})
+
 /**
  * Convert markdown elements to html elements
  */

src/sass/sections/_conversation.scss

@@ -343,9 +343,13 @@
             line-height: 1.3em;
 
             a {
-
                 @include mouse-hand;
             }
+
+            span.e1.large-emoji {
+                transform: scale(1.0);
+                margin: 1px 4px 1px 0px;
+            }
         }
 
         .message-media {

tests/filters.js

@@ -380,4 +380,46 @@ describe('Filters', function() {
         });
     });
 
+    describe('enlargeSingleEmoji', function() {
+        let process = (text) => {
+            return $filter('enlargeSingleEmoji')(text, true)
+        };
+
+        const singleEmojiClassName = 'large-emoji';
+        const crazy = '<span class="e1 e1-people _1f92a" title=":crazy_face:">🤪</span>';
+        const crazyLarge = '<span class="e1 ' + singleEmojiClassName + ' e1-people _1f92a" title=":crazy_face:">🤪</span>';
+        const copyright = '<span class="e1 e1-symbols _00a9" title=":copyright:">©️</span>';
+        const copyrightLarge = '<span class="e1 ' + singleEmojiClassName + ' e1-symbols _00a9" title=":copyright:">©️</span>';
+
+        it('enlarges 1 emoji', () => {
+            expect(process(crazy)).toEqual(crazyLarge);
+        });
+
+        it('enlarges 2 emoji', () => {
+            expect(process(crazy + copyright)).toEqual(crazyLarge + copyrightLarge);
+        });
+
+        it('enlarges 3 emoji', () => {
+            expect(process(crazy + copyright + crazy)).toEqual(crazyLarge + copyrightLarge + crazyLarge);
+        });
+
+        it('does not enlarge 4 emoji', () => {
+            expect(process(crazy + copyright + crazy + copyright)).toEqual(crazy + copyright + crazy + copyright);
+        });
+
+        it('does not enlarge if non-emoji characters are contained', () => {
+            expect(process(crazy + ' ')).toEqual(crazy + ' ');
+            expect(process(crazy + 'a' + crazy)).toEqual(crazy + 'a' + crazy);
+        });
+
+        it('does not modify non emoji text', () => {
+            const text = 'emoji e1 e1-people hello';
+            expect(process(text)).toEqual(text);
+        });
+
+        it('does nothing if enlarge flag is set to false', () => {
+            expect($filter('enlargeSingleEmoji')(crazy, false)).toEqual(crazy);
+        });
+    });
+
 });