Displaying reactions within html post

epicyon-profile.css

@@ -51,6 +51,8 @@
     --font-size-pgp-key2: 18px;
     --font-size-tox: 16px;
     --font-size-tox2: 18px;
+    --font-size-emoji-reaction: 16px;
+    --font-size-emoji-reaction-mobile: 24px;
     --time-color: #aaa;
     --time-vertical-align: 0%;
     --time-vertical-align-mobile: 1.5%;
@@ -1740,6 +1742,26 @@ div.container {
 	stroke-width: 10;
 	stroke: var(--voteresult-border-color)
     }
+    .emojiReactionBar {
+    }
+    .emojiReactionButton {
+	display: -webkit-inline-box;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+	line-height: 2rem;
+	margin-right: 6px;
+	padding: 1px 6px;
+	border: 1px solid var(--border-color);
+	border-radius: 10px;
+	background-color: var(--main-bg-color);
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	vertical-align: middle;
+	font-size: var(--font-size-emoji-reaction);
+    }
 }
 
 @media screen and (min-width: 2200px) {
@@ -2455,4 +2477,24 @@ div.container {
 	stroke-width: 10;
 	stroke: var(--voteresult-border-color)
     }
+    .emojiReactionBar {
+    }
+    .emojiReactionButton {
+	display: -webkit-inline-box;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+	line-height: 2rem;
+	margin-right: 6px;
+	padding: 1px 6px;
+	border: 1px solid var(--border-color);
+	border-radius: 10px;
+	background-color: var(--main-bg-color);
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	vertical-align: middle;
+	font-size: var(--font-size-emoji-reaction-mobile);
+    }
 }

reaction.py

@@ -51,28 +51,6 @@ def validEmojiContent(emojiContent: str) -> bool:
     return True
 
 
-def noOfReactions(postJsonObject: {}, emojiContent: str) -> int:
-    """Returns the number of emoji reactions of a given content type on a post
-    """
-    obj = postJsonObject
-    if hasObjectDict(postJsonObject):
-        obj = postJsonObject['object']
-    if not obj.get('reactions'):
-        return 0
-    if not isinstance(obj['reactions'], dict):
-        return 0
-    if not obj['reactions'].get('items'):
-        obj['reactions']['items'] = []
-        obj['reactions']['totalItems'] = 0
-    ctr = 0
-    for item in obj['reactions']['items']:
-        if not item.get('content'):
-            continue
-        if item['content'] == emojiContent:
-            ctr += 1
-    return ctr
-
-
 def _reaction(recentPostsCache: {},
               session, baseDir: str, federationList: [],
               nickname: str, domain: str, port: int,
@@ -521,3 +499,43 @@ def updateReactionCollection(recentPostsCache: {},
         print('DEBUG: saving post with emoji reaction added')
         pprint(postJsonObject)
     saveJson(postJsonObject, postFilename)
+
+
+def htmlEmojiReactions(postJsonObject: {}, interactive: bool,
+                       actor: str) -> str:
+    """html containing row of emoji reactions
+    """
+    if not hasObjectDict(postJsonObject):
+        return ''
+    if not postJsonObject['object'].get('reactions'):
+        return ''
+    if not postJsonObject['object']['reactions'].get('items'):
+        return ''
+    reactions = {}
+    for item in postJsonObject['object']['reactions']['items']:
+        emojiContent = item['content']
+        if not reactions.get(emojiContent):
+            reactions[emojiContent] = 1
+        else:
+            reactions[emojiContent] += 1
+    if len(reactions.items()) == 0:
+        return ''
+    baseUrl = actor + '?reactUrl=' + postJsonObject['object']['id'] + ';emoj='
+    htmlStr = '<div class="emojiReactionBar">\n'
+    for emojiContent, count in reactions.items():
+        htmlStr += '  <div class="emojiReactionButton">\n'
+        if count < 100:
+            countStr = str(count)
+        else:
+            countStr = '99+'
+        emojiContentStr = emojiContent + countStr
+        if interactive:
+            # urlencode the emoji
+            emojiContentEncoded = emojiContent
+            emojiContentStr = \
+                '    <a href="' + baseUrl + emojiContentEncoded + '">' + \
+                emojiContentStr + '</a>\n'
+        htmlStr += emojiContentStr
+        htmlStr += '  </div>\n'
+    htmlStr += '</div>\n'
+    return htmlStr

tests.py

@@ -4652,8 +4652,7 @@ def _testFunctions():
         'E2EEremoveDevice',
         'setOrganizationScheme',
         'fill_headers',
-        '_nothing',
-        'noOfReactions'
+        '_nothing'
     ]
     excludeImports = [
         'link',

webapp_post.py

@@ -79,6 +79,7 @@ from speaker import updateSpeaker
 from languages import autoTranslatePost
 from blocking import isBlocked
 from blocking import addCWfromLists
+from reaction import htmlEmojiReactions
 
 
 def _htmlPostMetadataOpenGraph(domain: str, postJsonObject: {}) -> str:
@@ -1879,13 +1880,18 @@ def individualPostAsHtml(signingPrivateKeyPem: str,
 
     postHtml = ''
     if boxName != 'tlmedia':
+        reactionStr = ''
+        if showIcons:
+            reactionStr = htmlEmojiReactions(postJsonObject, True, personUrl)
+            if postIsSensitive and reactionStr:
+                reactionStr = '<br>' + reactionStr
         postHtml = '    <div id="' + timelinePostBookmark + \
             '" class="' + containerClass + '">\n'
         postHtml += avatarImageInPost
         postHtml += '      <div class="post-title">\n' + \
             '        ' + titleStr + \
             replyAvatarImageInPost + '      </div>\n'
-        postHtml += contentStr + citationsStr + footerStr + '\n'
+        postHtml += contentStr + citationsStr + reactionStr + footerStr + '\n'
         postHtml += '    </div>\n'
     else:
         postHtml = galleryStr