From 5abfb66b782cf516554c7d5ce6b2e3e8d80c1e5c Mon Sep 17 00:00:00 2001
From: krjn <51929404+krjn@users.noreply.github.com>
Date: Thu, 18 Jul 2019 14:23:41 +0000
Subject: [PATCH] [MM-16389] Enable emojis for profile icons from webhooks
 (#2961)

* [MM-16389] Enable emojis for profile icons from webhooks

Removes borders from profile icons when it is from a custom URL.

* feat: reapply border for all profile pictures and shrink emojis

* feat: remove border from emoji profile pictures

* feat: decide if post has emoji icon through props instead of url

* refactor: better checking of potentially undefined property

Co-Authored-By: Elias Nahum <nahumhbl@gmail.com>
---
 app/components/post_profile_picture/index.js  |  6 +++++-
 .../post_profile_picture.js                   | 21 +++++++++++++++----
 app/constants/view.js                         |  1 +
 app/screens/notification/notification.js      |  4 +++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/components/post_profile_picture/index.js b/app/components/post_profile_picture/index.js
index efe99e165..c74c36a60 100644
--- a/app/components/post_profile_picture/index.js
+++ b/app/components/post_profile_picture/index.js
@@ -4,6 +4,7 @@
 import {connect} from 'react-redux';
 
 import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
+import {Client4} from 'mattermost-redux/client';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
@@ -19,14 +20,17 @@ function mapStateToProps(state, ownProps) {
     const post = ownProps.post;
     const user = getUser(state, post.user_id);
 
+    const overrideIconUrl = Client4.getAbsoluteUrl(post?.props?.override_icon_url); // eslint-disable-line camelcase
+
     return {
         enablePostIconOverride: config.EnablePostIconOverride === 'true' && post?.props?.use_user_icon !== 'true', // eslint-disable-line camelcase
         fromWebHook: post?.props?.from_webhook === 'true', // eslint-disable-line camelcase
         isSystemMessage: isSystemMessage(post),
         fromAutoResponder: fromAutoResponder(post),
-        overrideIconUrl: post?.props?.override_icon_url, // eslint-disable-line camelcase
+        overrideIconUrl,
         userId: post.user_id,
         isBot: (user ? user.is_bot : false),
+        isEmoji: Boolean(post?.props?.override_icon_emoji), // eslint-disable-line camelcase
         theme: getTheme(state),
     };
 }
diff --git a/app/components/post_profile_picture/post_profile_picture.js b/app/components/post_profile_picture/post_profile_picture.js
index 1e33b18bd..d985f8d11 100644
--- a/app/components/post_profile_picture/post_profile_picture.js
+++ b/app/components/post_profile_picture/post_profile_picture.js
@@ -22,6 +22,7 @@ export default class PostProfilePicture extends PureComponent {
         theme: PropTypes.object,
         userId: PropTypes.string,
         isBot: PropTypes.bool,
+        isEmoji: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -39,6 +40,7 @@ export default class PostProfilePicture extends PureComponent {
             theme,
             userId,
             isBot,
+            isEmoji,
         } = this.props;
 
         if (isSystemMessage && !fromAutoResponder && !isBot) {
@@ -55,15 +57,26 @@ export default class PostProfilePicture extends PureComponent {
 
         if (fromWebHook && enablePostIconOverride) {
             const icon = overrideIconUrl ? {uri: overrideIconUrl} : webhookIcon;
+            const frameSize = ViewTypes.PROFILE_PICTURE_SIZE;
+            const pictureSize = isEmoji ? ViewTypes.PROFILE_PICTURE_EMOJI_SIZE : ViewTypes.PROFILE_PICTURE_SIZE;
+            const borderRadius = isEmoji ? 0 : ViewTypes.PROFILE_PICTURE_SIZE / 2;
 
             return (
-                <View>
+                <View
+                    style={{
+                        borderRadius,
+                        overflow: 'hidden',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: frameSize,
+                        width: frameSize,
+                    }}
+                >
                     <Image
                         source={icon}
                         style={{
-                            height: ViewTypes.PROFILE_PICTURE_SIZE,
-                            width: ViewTypes.PROFILE_PICTURE_SIZE,
-                            borderRadius: ViewTypes.PROFILE_PICTURE_SIZE / 2,
+                            height: pictureSize,
+                            width: pictureSize,
                         }}
                     />
                 </View>
diff --git a/app/constants/view.js b/app/constants/view.js
index 010944a69..7881ef1a6 100644
--- a/app/constants/view.js
+++ b/app/constants/view.js
@@ -110,6 +110,7 @@ export default {
     IOSX_TOP_PORTRAIT: 88,
     STATUS_BAR_HEIGHT: 20,
     PROFILE_PICTURE_SIZE: 32,
+    PROFILE_PICTURE_EMOJI_SIZE: 28,
     DATA_SOURCE_USERS: 'users',
     DATA_SOURCE_CHANNELS: 'channels',
     NotificationLevels,
diff --git a/app/screens/notification/notification.js b/app/screens/notification/notification.js
index 732796e12..4ae79b031 100644
--- a/app/screens/notification/notification.js
+++ b/app/screens/notification/notification.js
@@ -16,6 +16,7 @@ import {Navigation} from 'react-native-navigation';
 import * as Animatable from 'react-native-animatable';
 import {PanGestureHandler} from 'react-native-gesture-handler';
 
+import {Client4} from 'mattermost-redux/client';
 import {isDirectChannel} from 'mattermost-redux/utils/channel_utils';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
@@ -167,7 +168,8 @@ export default class Notification extends PureComponent {
         );
 
         if (data.from_webhook && config.EnablePostIconOverride === 'true' && data.use_user_icon !== 'true') {
-            const wsIcon = data.override_icon_url ? {uri: data.override_icon_url} : webhookIcon;
+            const overrideIconURL = Client4.getAbsoluteUrl(data.override_icon_url); // eslint-disable-line camelcase
+            const wsIcon = data.override_icon_url ? {uri: overrideIconURL} : webhookIcon;
             icon = (
                 <Image
                     source={wsIcon}