From bafd31b146e350bf581761e6d93dd904aa68a0e8 Mon Sep 17 00:00:00 2001
From: Igor Zhukov <igor.beatle@gmail.com>
Date: Wed, 13 Apr 2016 22:09:58 +0300
Subject: [PATCH] Improved message directives

---
 app/js/app.js                                 |   4 +
 app/js/directives.js                          | 699 +++++++++---------
 app/js/locales/en-us.json                     |   2 +
 app/less/app.less                             |   2 +-
 app/partials/desktop/dialog.html              |   2 +-
 app/partials/desktop/message.html             |  32 +-
 .../desktop/message_attach_contact.html       |   2 +-
 app/partials/mobile/message.html              |   4 +-
 .../mobile/message_attach_contact.html        |   2 +-
 9 files changed, 380 insertions(+), 369 deletions(-)

diff --git a/app/js/app.js b/app/js/app.js
index 338d3a70..f11ec6ab 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -36,6 +36,10 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', 'StorageProvi
   $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|filesystem|chrome-extension|app):|data:image\//);
   $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|file|tg|mailto|blob|filesystem|chrome-extension|app):|data:/);
 
+  /*PRODUCTION_ONLY_BEGIN
+  $compileProvider.debugInfoEnabled(false);
+  PRODUCTION_ONLY_END*/
+
   if (Config.Modes.test) {
     StorageProvider.setPrefix('t_');
   }
diff --git a/app/js/directives.js b/app/js/directives.js
index b3f4b868..49bd086e 100755
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -175,340 +175,16 @@ angular.module('myApp.directives', ['myApp.filters'])
       }
     }
   })
-  .directive('myExternalEmbed', function () {
-
-    var twitterAttached = false;
-    var facebookAttached = false;
-    var gplusAttached = false;
-    var twitterPendingWidgets = [];
-    var facebookPendingWidgets = [];
-    var embedTag = Config.Modes.chrome_packed ? 'webview' : 'iframe';
-
-    function link ($scope, element, attrs) {
-      var embedData = $scope.$eval(attrs.myExternalEmbed);
-      if (!embedData) {
-        return;
-      }
-      var html = '';
-      var callback = false;
-      var needTwitter = false;
-      switch (embedData[0]) {
-        case 'youtube':
-          var videoID = embedData[1];
-          html = '<div class="im_message_media_embed im_message_video_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
-                'src="https://www.youtube.com/embed/' + videoID +
-                '?autoplay=0&amp;controls=2" webkitallowfullscreen mozallowfullscreen allowfullscreen></' + embedTag + '></div>';
-          break;
-
-        case 'vimeo':
-          var videoID = embedData[1];
-          html = '<div class="im_message_media_embed im_message_video_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
-                'src="https://player.vimeo.com/video/' + videoID +
-                '?title=0&amp;byline=0&amp;portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></' + embedTag + '></div>';
-          break;
-
-        case 'instagram':
-          var instaID = embedData[1];
-          html = '<div class="im_message_media_embed im_message_insta_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
-                'src="https://instagram.com/p/' + instaID +
-                '/embed/"></' + embedTag + '></div>';
-          break;
-
-        case 'vine':
-          var vineID = embedData[1];
-          html = '<div class="im_message_media_embed im_message_vine_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
-                'src="https://vine.co/v/' + vineID + '/embed/simple"></' + embedTag + '></div>';
-          break;
-
-        case 'soundcloud':
-          var soundcloudUrl = embedData[1];
-          html = '<div class="im_message_media_embed im_message_soundcloud_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
-                'src="https://w.soundcloud.com/player/?url=' + encodeEntities(encodeURIComponent(soundcloudUrl)) +
-                '&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></' + embedTag + '></div>';
-          break;
-
-        case 'spotify':
-          var spotifyUrl = embedData[1];
-          html = '<div class="im_message_media_embed im_message_spotify_embed"><' + embedTag + ' type="text/html" frameborder="0" allowtransparency="true" ' +
-           'src="https://embed.spotify.com/?uri=spotify:' + encodeEntities(encodeURIComponent(spotifyUrl)) +
-           '"></' + embedTag + '></div>';
-          break;
-
-        case 'twitter':
-          html = '<div class="im_message_twitter_embed"><blockquote class="twitter-tweet" lang="en"><a href="' + embedData[1] + '"></a></blockquote></div>';
-
-          callback = function () {
-            if (!twitterAttached) {
-              twitterAttached = true;
-              $('<script>')
-                .appendTo('body')
-                .on('load', function () {
-                  twttr.events.bind('loaded', function (event) {
-                    for (var i = 0; i < twitterPendingWidgets.length; i++) {
-                      twitterPendingWidgets[i].$emit('ui_height');
-                    }
-                    twitterPendingWidgets = [];
-                  });
-                })
-                .attr('src', 'https://platform.twitter.com/widgets.js');
-            }
-            else if (window.twttr) {
-              twttr.widgets.load(element[0]);
-            }
-            twitterPendingWidgets.push($scope);
-          };
-          break;
-
-        case 'facebook':
-          html = '<div class="im_message_facebook_embed"><div class="fb-post" data-href="' + embedData[1] + '" data-width="300"></div></div>';
-
-          callback = function () {
-            if (!facebookAttached) {
-              facebookAttached = true;
-              $('<script>')
-                .appendTo('body')
-                .on('load', function () {
-                  FB.Event.subscribe('xfbml.render', function (event) {
-                    for (var i = 0; i < facebookPendingWidgets.length; i++) {
-                      facebookPendingWidgets[i].$emit('ui_height');
-                    }
-                    facebookPendingWidgets = [];
-                  });
-                })
-                .attr('src', 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&appId=254098051407226&version=v2.0');
-            }
-
-            else if (window.FB) {
-              FB.XFBML.parse(element[0]);
-            }
-            facebookPendingWidgets.push($scope);
-          };
-          break;
-
-        case 'gplus':
-          html = '<div class="im_message_gplus_embed"><div class="g-post" data-href="' + embedData[1] + '"></div></div>';
-
-          callback = function () {
-            if (!gplusAttached) {
-              gplusAttached = true;
-
-              window.___gcfg = {"parsetags": "explicit"};
-              $('<script>')
-                .appendTo('body')
-                .on('load', function () {
-                  gapi.post.go();
-                })
-                .attr('src', 'https://apis.google.com/js/plusone.js');
-            }
-            else if (window.gapi) {
-              gapi.post.go(element[0]);
-            }
-            element.one('load', function () {
-              $scope.$emit('ui_height');
-            });
-          };
-          break;
-      }
-
-      if (html) {
-        element[0].innerHTML = html;
-        if (callback) {
-          callback();
-        }
-      }
-    }
-
-    return {
-      link: link
-    };
-
-  })
-
-  .directive('myServiceMessage', function() {
-    return {
-      templateUrl: templateUrl('message_service')
-    };
-  })
-
-  .directive('myShortMessage', function() {
-    return {
-      scope: {
-        message: '=myShortMessage'
-      },
-      templateUrl: templateUrl('short_message')
-    };
-  })
-
-  .directive('myReplyMessage', function(AppMessagesManager, AppPeersManager, $rootScope) {
-
-    return {
-      templateUrl: templateUrl('reply_message'),
-      scope: {
-        'replyMessage': '=myReplyMessage'
-      },
-      link: link
-    };
-
-    function link ($scope, element, attrs) {
-      if (attrs.watch) {
-        $scope.$watch('replyMessage', function () {
-          checkMessage($scope, element);
-        });
-      } else {
-        checkMessage($scope, element);
-      }
-    }
-
-    function checkMessage ($scope, element) {
-      var message = $scope.replyMessage;
-      if (!message.loading) {
-        updateMessage($scope, element);
-      } else {
-        var mid = message.mid;
-        var stopWaiting = $scope.$on('messages_downloaded', function (e, mids) {
-          if (mids.indexOf(mid) != -1) {
-            $scope.replyMessage = AppMessagesManager.wrapForDialog(mid);
-            updateMessage($scope, element);
-            stopWaiting();
-          }
-        });
-      }
-    }
-
-    function updateMessage($scope, element) {
-      var message = $scope.replyMessage;
-      if (!message || message.deleted || !message.to_id) {
-        $(element).remove();
-        return;
-      }
-      $scope.thumb = AppMessagesManager.getMessageThumb(message, 42, 42);
-
-      if (element[0].tagName == 'A') {
-        element.on('click', function () {
-          var peerID = AppMessagesManager.getMessagePeer(message);
-          var peerString = AppPeersManager.getPeerString(peerID);
-
-          $rootScope.$broadcast('history_focus', {peerString: peerString, messageID: message.mid});
 
-        })
-      }
-
-      onContentLoaded(function () {
-        $scope.$emit('ui_height');
-      })
-    }
-
-  })
-
-  .directive('myPinnedMessage', function(AppMessagesManager, AppPeersManager, $rootScope) {
-
-    return {
-      templateUrl: templateUrl('pinned_message'),
-      scope: {
-        'pinnedMessage': '=myPinnedMessage'
-      },
-      link: link
-    };
-
-    function link ($scope, element, attrs) {
-      var message = $scope.pinnedMessage;
-      if (!message.loading) {
-        updateMessage($scope, element);
-      } else {
-        var mid = message.mid;
-        var stopWaiting = $scope.$on('messages_downloaded', function (e, mids) {
-          if (mids.indexOf(mid) != -1) {
-            $scope.pinnedMessage = AppMessagesManager.wrapForDialog(mid);
-            updateMessage($scope, element);
-            stopWaiting();
-          }
-        });
-      }
-    }
-
-    function updateMessage($scope, element) {
-      var message = $scope.pinnedMessage;
-      if (!message || message.deleted || !message.to_id) {
-        $(element).remove();
-        return;
-      }
-
-      if (element[0].tagName == 'A') {
-        element.on('click', function () {
-          var peerID = AppMessagesManager.getMessagePeer(message);
-          var peerString = AppPeersManager.getPeerString(peerID);
-
-          $rootScope.$broadcast('history_focus', {peerString: peerString, messageID: message.mid});
-        })
-      }
-
-      onContentLoaded(function () {
-        $scope.$emit('ui_height');
-      })
-    }
-
-  })
-
-  .directive('myForwardedMessages', function(AppPhotosManager, AppMessagesManager, AppPeersManager, $rootScope) {
-
-    return {
-      templateUrl: templateUrl('forwarded_messages'),
-      scope: {
-        'forwardMessages': '=myForwardedMessages'
-      },
-      link: link
-    };
-
-    function link ($scope, element, attrs) {
-      if (attrs.watch) {
-        $scope.$watch('forwardMessages', function () {
-          updateMessages($scope, element);
-        });
-      } else {
-        updateMessages($scope, element);
-      }
-    }
-
-    function updateMessages ($scope, element) {
-      var mids = $scope.forwardMessages;
-      var length = mids.length;
-      var fromID = false;
-      var single = length == 1;
-      $scope.thumb = false;
-      $scope.singleMessage = false;
-      angular.forEach(mids, function (mid) {
-        var message = AppMessagesManager.getMessage(mid);
-        if (fromID === false) {
-          fromID = message.fromID;
-        } else {
-          if (fromID !== message.fromID) {
-            fromID = AppMessagesManager.getMessagePeer(message);
-          }
-        }
-        if (single) {
-          $scope.thumb = AppMessagesManager.getMessageThumb(message, 42, 42);
-          $scope.singleMessage = AppMessagesManager.wrapForDialog(mid);
-        }
-      });
-      $scope.fromID = fromID;
-      $scope.count = length;
-
-      onContentLoaded(function () {
-        $scope.$emit('ui_height');
-      })
-    }
-
-  })
-
-  .directive('myMessageText', function(AppPeersManager, AppMessagesManager, AppChatsManager, AppUsersManager, RichTextProcessor) {
+  .directive('myMessageBody', function(AppPeersManager, AppMessagesManager, AppChatsManager, AppUsersManager, RichTextProcessor) {
     return {
       link: link,
       scope: {
-        message: '=myMessageText'
+        message: '=myMessageBody'
       }
     };
 
-    function updateHtml (message, element) {
+    function updateMessageText (message, element) {
       var entities = message.totalEntities;
       var fromUser = message.from_id && AppUsersManager.getUser(message.from_id);
       var fromBot = fromUser && fromUser.pFlags.bot && fromUser.username || false;
@@ -522,7 +198,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         fromBot: fromBot,
         entities: entities
       };
-      if (message.flags & 16) {
+      if (message.pFlags.mentioned) {
         var user = AppUsersManager.getSelf();
         if (user) {
           options.highlightUsername = user.username;
@@ -537,15 +213,14 @@ angular.module('myApp.directives', ['myApp.filters'])
     function link ($scope, element, attrs) {
       var message = $scope.message;
       var msgID = message.mid;
-      // var msgID = $scope.$eval(attrs.myMessageText);
-      // var message = AppMessagesManager.getMessage(msgID);
+      var textElement = $('.im_message_text', element);
 
-      updateHtml(message, element);
+      updateMessageText(message, textElement);
 
       if (message.pending) {
         var unlink = $scope.$on('messages_pending', function () {
           if (message.mid != msgID) {
-            updateHtml(message, element);
+            updateMessageText(message, textElement);
             unlink();
           }
         })
@@ -676,31 +351,207 @@ angular.module('myApp.directives', ['myApp.filters'])
   .directive('myMessageWebpage', function(AppWebPagesManager, AppPhotosManager) {
     return {
       scope: {
-        'webpage': '=myMessageWebpage',
-        'messageId': '=messageId'
+        'webpage': '=myMessageWebpage',
+        'messageId': '=messageId'
+      },
+      templateUrl: templateUrl('message_attach_webpage'),
+      link: function ($scope) {
+        $scope.openPhoto = AppPhotosManager.openPhoto;
+        $scope.openEmbed = function ($event) {
+          if ($scope.webpage && $scope.webpage.embed_url) {
+            AppWebPagesManager.openEmbed($scope.webpage.id, $scope.messageId);
+            return cancelEvent($event);
+          }
+        };
+
+        $scope.$on('webpage_updated', function (e, eventData) {
+          if ($scope.webpage && $scope.webpage.id == eventData.id) {
+            $scope.$emit('ui_height');
+          }
+        });
+      }
+    };
+  })
+  .directive('myMessagePending', function() {
+    return {
+      templateUrl: templateUrl('message_attach_pending')
+    };
+  })
+
+  .directive('myServiceMessage', function() {
+    return {
+      templateUrl: templateUrl('message_service')
+    };
+  })
+
+  .directive('myShortMessage', function() {
+    return {
+      scope: {
+        message: '=myShortMessage'
+      },
+      templateUrl: templateUrl('short_message')
+    };
+  })
+
+  .directive('myReplyMessage', function(AppMessagesManager, AppPeersManager, $rootScope) {
+
+    return {
+      templateUrl: templateUrl('reply_message'),
+      scope: {
+        'replyMessage': '=myReplyMessage'
+      },
+      link: link
+    };
+
+    function link ($scope, element, attrs) {
+      if (attrs.watch) {
+        $scope.$watch('replyMessage', function () {
+          checkMessage($scope, element);
+        });
+      } else {
+        checkMessage($scope, element);
+      }
+    }
+
+    function checkMessage ($scope, element) {
+      var message = $scope.replyMessage;
+      if (!message.loading) {
+        updateMessage($scope, element);
+      } else {
+        var mid = message.mid;
+        var stopWaiting = $scope.$on('messages_downloaded', function (e, mids) {
+          if (mids.indexOf(mid) != -1) {
+            $scope.replyMessage = AppMessagesManager.wrapForDialog(mid);
+            updateMessage($scope, element);
+            stopWaiting();
+          }
+        });
+      }
+    }
+
+    function updateMessage($scope, element) {
+      var message = $scope.replyMessage;
+      if (!message || message.deleted || !message.to_id) {
+        $(element).remove();
+        return;
+      }
+      $scope.thumb = AppMessagesManager.getMessageThumb(message, 42, 42);
+
+      if (element[0].tagName == 'A') {
+        element.on('click', function () {
+          var peerID = AppMessagesManager.getMessagePeer(message);
+          var peerString = AppPeersManager.getPeerString(peerID);
+
+          $rootScope.$broadcast('history_focus', {peerString: peerString, messageID: message.mid});
+
+        })
+      }
+
+      onContentLoaded(function () {
+        $scope.$emit('ui_height');
+      })
+    }
+
+  })
+
+  .directive('myPinnedMessage', function(AppMessagesManager, AppPeersManager, $rootScope) {
+
+    return {
+      templateUrl: templateUrl('pinned_message'),
+      scope: {
+        'pinnedMessage': '=myPinnedMessage'
       },
-      templateUrl: templateUrl('message_attach_webpage'),
-      link: function ($scope) {
-        $scope.openPhoto = AppPhotosManager.openPhoto;
-        $scope.openEmbed = function ($event) {
-          if ($scope.webpage && $scope.webpage.embed_url) {
-            AppWebPagesManager.openEmbed($scope.webpage.id, $scope.messageId);
-            return cancelEvent($event);
-          }
-        };
+      link: link
+    };
 
-        $scope.$on('webpage_updated', function (e, eventData) {
-          if ($scope.webpage && $scope.webpage.id == eventData.id) {
-            $scope.$emit('ui_height');
+    function link ($scope, element, attrs) {
+      var message = $scope.pinnedMessage;
+      if (!message.loading) {
+        updateMessage($scope, element);
+      } else {
+        var mid = message.mid;
+        var stopWaiting = $scope.$on('messages_downloaded', function (e, mids) {
+          if (mids.indexOf(mid) != -1) {
+            $scope.pinnedMessage = AppMessagesManager.wrapForDialog(mid);
+            updateMessage($scope, element);
+            stopWaiting();
           }
         });
       }
-    };
+    }
+
+    function updateMessage($scope, element) {
+      var message = $scope.pinnedMessage;
+      if (!message || message.deleted || !message.to_id) {
+        $(element).remove();
+        return;
+      }
+
+      if (element[0].tagName == 'A') {
+        element.on('click', function () {
+          var peerID = AppMessagesManager.getMessagePeer(message);
+          var peerString = AppPeersManager.getPeerString(peerID);
+
+          $rootScope.$broadcast('history_focus', {peerString: peerString, messageID: message.mid});
+        })
+      }
+
+      onContentLoaded(function () {
+        $scope.$emit('ui_height');
+      })
+    }
+
   })
-  .directive('myMessagePending', function() {
+
+  .directive('myForwardedMessages', function(AppPhotosManager, AppMessagesManager, AppPeersManager, $rootScope) {
+
     return {
-      templateUrl: templateUrl('message_attach_pending')
+      templateUrl: templateUrl('forwarded_messages'),
+      scope: {
+        'forwardMessages': '=myForwardedMessages'
+      },
+      link: link
     };
+
+    function link ($scope, element, attrs) {
+      if (attrs.watch) {
+        $scope.$watch('forwardMessages', function () {
+          updateMessages($scope, element);
+        });
+      } else {
+        updateMessages($scope, element);
+      }
+    }
+
+    function updateMessages ($scope, element) {
+      var mids = $scope.forwardMessages;
+      var length = mids.length;
+      var fromID = false;
+      var single = length == 1;
+      $scope.thumb = false;
+      $scope.singleMessage = false;
+      angular.forEach(mids, function (mid) {
+        var message = AppMessagesManager.getMessage(mid);
+        if (fromID === false) {
+          fromID = message.fromID;
+        } else {
+          if (fromID !== message.fromID) {
+            fromID = AppMessagesManager.getMessagePeer(message);
+          }
+        }
+        if (single) {
+          $scope.thumb = AppMessagesManager.getMessageThumb(message, 42, 42);
+          $scope.singleMessage = AppMessagesManager.wrapForDialog(mid);
+        }
+      });
+      $scope.fromID = fromID;
+      $scope.count = length;
+
+      onContentLoaded(function () {
+        $scope.$emit('ui_height');
+      })
+    }
+
   })
 
   .directive('myDialogs', function ($modalStack, $transition, $window, $timeout) {
@@ -3488,3 +3339,153 @@ angular.module('myApp.directives', ['myApp.filters'])
     }
   })
 
+
+  .directive('myExternalEmbed', function () {
+
+    var twitterAttached = false;
+    var facebookAttached = false;
+    var gplusAttached = false;
+    var twitterPendingWidgets = [];
+    var facebookPendingWidgets = [];
+    var embedTag = Config.Modes.chrome_packed ? 'webview' : 'iframe';
+
+    function link ($scope, element, attrs) {
+      var embedData = $scope.$eval(attrs.myExternalEmbed);
+      if (!embedData) {
+        return;
+      }
+      var html = '';
+      var callback = false;
+      var needTwitter = false;
+      switch (embedData[0]) {
+        case 'youtube':
+          var videoID = embedData[1];
+          html = '<div class="im_message_media_embed im_message_video_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
+                'src="https://www.youtube.com/embed/' + videoID +
+                '?autoplay=0&amp;controls=2" webkitallowfullscreen mozallowfullscreen allowfullscreen></' + embedTag + '></div>';
+          break;
+
+        case 'vimeo':
+          var videoID = embedData[1];
+          html = '<div class="im_message_media_embed im_message_video_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
+                'src="https://player.vimeo.com/video/' + videoID +
+                '?title=0&amp;byline=0&amp;portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></' + embedTag + '></div>';
+          break;
+
+        case 'instagram':
+          var instaID = embedData[1];
+          html = '<div class="im_message_media_embed im_message_insta_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
+                'src="https://instagram.com/p/' + instaID +
+                '/embed/"></' + embedTag + '></div>';
+          break;
+
+        case 'vine':
+          var vineID = embedData[1];
+          html = '<div class="im_message_media_embed im_message_vine_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
+                'src="https://vine.co/v/' + vineID + '/embed/simple"></' + embedTag + '></div>';
+          break;
+
+        case 'soundcloud':
+          var soundcloudUrl = embedData[1];
+          html = '<div class="im_message_media_embed im_message_soundcloud_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
+                'src="https://w.soundcloud.com/player/?url=' + encodeEntities(encodeURIComponent(soundcloudUrl)) +
+                '&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></' + embedTag + '></div>';
+          break;
+
+        case 'spotify':
+          var spotifyUrl = embedData[1];
+          html = '<div class="im_message_media_embed im_message_spotify_embed"><' + embedTag + ' type="text/html" frameborder="0" allowtransparency="true" ' +
+           'src="https://embed.spotify.com/?uri=spotify:' + encodeEntities(encodeURIComponent(spotifyUrl)) +
+           '"></' + embedTag + '></div>';
+          break;
+
+        case 'twitter':
+          html = '<div class="im_message_twitter_embed"><blockquote class="twitter-tweet" lang="en"><a href="' + embedData[1] + '"></a></blockquote></div>';
+
+          callback = function () {
+            if (!twitterAttached) {
+              twitterAttached = true;
+              $('<script>')
+                .appendTo('body')
+                .on('load', function () {
+                  twttr.events.bind('loaded', function (event) {
+                    for (var i = 0; i < twitterPendingWidgets.length; i++) {
+                      twitterPendingWidgets[i].$emit('ui_height');
+                    }
+                    twitterPendingWidgets = [];
+                  });
+                })
+                .attr('src', 'https://platform.twitter.com/widgets.js');
+            }
+            else if (window.twttr) {
+              twttr.widgets.load(element[0]);
+            }
+            twitterPendingWidgets.push($scope);
+          };
+          break;
+
+        case 'facebook':
+          html = '<div class="im_message_facebook_embed"><div class="fb-post" data-href="' + embedData[1] + '" data-width="300"></div></div>';
+
+          callback = function () {
+            if (!facebookAttached) {
+              facebookAttached = true;
+              $('<script>')
+                .appendTo('body')
+                .on('load', function () {
+                  FB.Event.subscribe('xfbml.render', function (event) {
+                    for (var i = 0; i < facebookPendingWidgets.length; i++) {
+                      facebookPendingWidgets[i].$emit('ui_height');
+                    }
+                    facebookPendingWidgets = [];
+                  });
+                })
+                .attr('src', 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&appId=254098051407226&version=v2.0');
+            }
+
+            else if (window.FB) {
+              FB.XFBML.parse(element[0]);
+            }
+            facebookPendingWidgets.push($scope);
+          };
+          break;
+
+        case 'gplus':
+          html = '<div class="im_message_gplus_embed"><div class="g-post" data-href="' + embedData[1] + '"></div></div>';
+
+          callback = function () {
+            if (!gplusAttached) {
+              gplusAttached = true;
+
+              window.___gcfg = {"parsetags": "explicit"};
+              $('<script>')
+                .appendTo('body')
+                .on('load', function () {
+                  gapi.post.go();
+                })
+                .attr('src', 'https://apis.google.com/js/plusone.js');
+            }
+            else if (window.gapi) {
+              gapi.post.go(element[0]);
+            }
+            element.one('load', function () {
+              $scope.$emit('ui_height');
+            });
+          };
+          break;
+      }
+
+      if (html) {
+        element[0].innerHTML = html;
+        if (callback) {
+          callback();
+        }
+      }
+    }
+
+    return {
+      link: link
+    };
+
+  })
+
diff --git a/app/js/locales/en-us.json b/app/js/locales/en-us.json
index dd539882..6e4fb4d6 100644
--- a/app/js/locales/en-us.json
+++ b/app/js/locales/en-us.json
@@ -542,6 +542,8 @@
 	"message_attach_video_save": "Save file",
 	"message_attach_video_play": "Play video",
 
+	"message_attach_unsupported": "The message is not supported on your version of Telegram Web. Update the app to view: {link}.",
+
 	"conversation_select_modal_title": "Select conversation",
 	"conversation_select_modal_contacts": "Contacts",
 	"conversation_one_selected": "{name1}",
diff --git a/app/less/app.less b/app/less/app.less
index 98f7eed6..0e283836 100644
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -1315,7 +1315,7 @@ a.im_dialog_selected {
 .active {
   a.im_dialog {
     .im_dialog_chat_from_wrap,
-    .im_dialog_message_media,
+    .im_short_message_media,
     .im_short_message_service,
     .im_short_message_text,
     .im_dialog_message {
diff --git a/app/partials/desktop/dialog.html b/app/partials/desktop/dialog.html
index 5c692e8f..b039d40a 100644
--- a/app/partials/desktop/dialog.html
+++ b/app/partials/desktop/dialog.html
@@ -23,7 +23,7 @@
     </div>
 
     <div ng-if="dialogMessage.typing > 0" class="im_dialog_message">
-      <span class="im_dialog_message_service" my-i18n="im_conversation_group_typing">
+      <span class="im_short_message_service" my-i18n="im_conversation_group_typing">
         <my-i18n-param name="name"><span my-peer-link="dialogMessage.typing" short="true" class="im_dialog_chat_from_wrap"></span></my-i18n-param><my-i18n-param name="dots"><span my-loading-dots></span></my-i18n-param>
       </span>
     </div>
diff --git a/app/partials/desktop/message.html b/app/partials/desktop/message.html
index 077b264d..8115d5e6 100644
--- a/app/partials/desktop/message.html
+++ b/app/partials/desktop/message.html
@@ -62,21 +62,25 @@
           </div>
         </div>
 
-        <div class="im_message_text" ng-if="::historyMessage.message.length || false" my-message-text="::historyMessage" dir="auto"></div>
-
-        <div ng-if="::historyMessage.media || historyMessage.mid < 0 ? true : false" class="im_message_media" ng-switch="historyMessage.media._">
-
-          <div ng-switch-when="messageMediaPhoto"     my-message-photo="historyMessage.media" message-id="historyMessage.mid"></div>
-          <div ng-switch-when="messageMediaDocument"  my-message-document="historyMessage.media" message-id="historyMessage.mid"></div>
-          <div ng-switch-when="messageMediaGeo"       my-message-geo="historyMessage.media"></div>
-          <div ng-switch-when="messageMediaVenue"     my-message-venue="historyMessage.media"></div>
-          <div ng-switch-when="messageMediaContact"   class="im_message_contact" my-message-contact></div>
-          <div ng-switch-when="messageMediaWebPage"   class="im_message_webpage" my-message-webpage="historyMessage.media.webpage" message-id="historyMessage.mid"></div>
-          <div ng-switch-when="messageMediaPending"   my-message-pending></div>
-          <div ng-switch-when="messageMediaUnsupported">
-            <div class="im_message_text">The message is not supported on your version of Telegram Web. Update the app to view: <a href="https://web.telegram.org" target="_blank">web.telegram.org</a>.</div>
-          </div>
+        <div my-message-body="historyMessage">
+          <div class="im_message_text" dir="auto"></div>
+
+          <div ng-if="::historyMessage.media || historyMessage.mid < 0 ? true : false" class="im_message_media" ng-switch="historyMessage.media._">
+
+            <div ng-switch-when="messageMediaPhoto"     my-message-photo="historyMessage.media" message-id="historyMessage.mid"></div>
+            <div ng-switch-when="messageMediaDocument"  my-message-document="historyMessage.media" message-id="historyMessage.mid"></div>
+            <div ng-switch-when="messageMediaGeo"       my-message-geo="historyMessage.media"></div>
+            <div ng-switch-when="messageMediaVenue"     my-message-venue="historyMessage.media"></div>
+            <div ng-switch-when="messageMediaContact"   my-message-contact></div>
+            <div ng-switch-when="messageMediaWebPage"   my-message-webpage="historyMessage.media.webpage" message-id="historyMessage.mid"></div>
+            <div ng-switch-when="messageMediaPending"   my-message-pending></div>
+            <div ng-switch-when="messageMediaUnsupported">
+              <div class="im_message_text" my-i18n="message_attach_unsupported">
+                <my-i18n-param name="link"><a href="https://web.telegram.org" target="_blank">web.telegram.org</a></my-i18n-param>
+              </div>
+            </div>
 
+          </div>
         </div>
 
 
diff --git a/app/partials/desktop/message_attach_contact.html b/app/partials/desktop/message_attach_contact.html
index c929079b..c978f78b 100644
--- a/app/partials/desktop/message_attach_contact.html
+++ b/app/partials/desktop/message_attach_contact.html
@@ -1,4 +1,4 @@
-<div>
+<div class="im_message_contact">
   <a ng-if="historyMessage.media.user_id > 0" class="im_message_contact_photo pull-left" my-peer-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo" user-override="historyMessage.media"></a>
   <div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
     <a ng-switch-when="true" my-peer-link="historyMessage.media.user_id" user-override="historyMessage.media"></a>
diff --git a/app/partials/mobile/message.html b/app/partials/mobile/message.html
index da61fa43..ad5c2c15 100644
--- a/app/partials/mobile/message.html
+++ b/app/partials/mobile/message.html
@@ -62,8 +62,8 @@
           <div ng-switch-when="messageMediaDocument"  my-message-document="historyMessage.media" message-id="historyMessage.mid"></div>
           <div ng-switch-when="messageMediaGeo"       my-message-geo="historyMessage.media"></div>
           <div ng-switch-when="messageMediaVenue"     my-message-venue="historyMessage.media"></div>
-          <div ng-switch-when="messageMediaContact"   class="im_message_contact" my-message-contact></div>
-          <div ng-switch-when="messageMediaWebPage"   class="im_message_webpage" my-message-webpage="historyMessage.media.webpage" message-id="historyMessage.mid"></div>
+          <div ng-switch-when="messageMediaContact"   my-message-contact></div>
+          <div ng-switch-when="messageMediaWebPage"   my-message-webpage="historyMessage.media.webpage" message-id="historyMessage.mid"></div>
           <div ng-switch-when="messageMediaPending"   my-message-pending></div>
           <div ng-switch-when="messageMediaUnsupported">
             <div class="im_message_text">
diff --git a/app/partials/mobile/message_attach_contact.html b/app/partials/mobile/message_attach_contact.html
index 12ce1a8a..bbf3d2de 100644
--- a/app/partials/mobile/message_attach_contact.html
+++ b/app/partials/mobile/message_attach_contact.html
@@ -1,4 +1,4 @@
-<div>
+<div class="im_message_contact">
   <a ng-if="historyMessage.media.user_id > 0"  class="im_message_contact_photo pull-left" my-peer-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo" user-override="historyMessage.media"></a>
   <div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
     <a ng-switch-when="true" my-peer-link="historyMessage.media.user_id" user-override="historyMessage.media"></a>