Supported facebook posts and vimeo embeds

app/js/directives.js

@@ -169,15 +169,12 @@ 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 attachTwitterScript () {
-      twitterAttached = true;
-
-      $('<script>').appendTo('body').attr('src', '//platform.twitter.com/widgets.js');
-    }
-
     function link ($scope, element, attrs) {
       var embedData = $scope.$eval(attrs.myExternalEmbed);
       if (!embedData) {
@@ -191,7 +188,14 @@ angular.module('myApp.directives', ['myApp.filters'])
           var videoID = embedData[1];
           html = '<div class="im_message_media_embed im_message_video_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
                 'src="//www.youtube.com/embed/' + videoID +
-                '?autoplay=0&amp;controls=2"></' + embedTag + '></div>';
+                '?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="//player.vimeo.com/video/' + videoID +
+                '?title=0&amp;byline=0&amp;portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></' + embedTag + '></div>';
           break;
 
         case 'instagram':
@@ -231,6 +235,56 @@ angular.module('myApp.directives', ['myApp.filters'])
             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', '//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) {

app/js/services.js

@@ -3115,9 +3115,12 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   var regexAlphaNumericChars  = "0-9\.\_" + regexAlphaChars;
   var regExp = new RegExp('((?:(ftp|https?)://|(?:mailto:)?([A-Za-z0-9._%+-]+@))(\\S*\\.\\S*[^\\s.;,(){}<>"\']))|(\\n)|(' + emojiUtf.join('|') + ')|(^|\\s)(#[' + regexAlphaNumericChars + ']{3,20})', 'i');
   var youtubeRegex = /(?:https?:\/\/)?(?:www\.)?youtu(?:|.be|be.com|.b)(?:\/v\/|\/watch\\?v=|e\/|(?:\/\??#)?\/watch(?:.+)v=)(.{11})(?:\&[^\s]*)?/;
+  var vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;
   var instagramRegex = /https?:\/\/(?:instagr\.am\/p\/|instagram\.com\/p\/)([a-zA-Z0-9\-\_]+)/i;
   var vineRegex = /https?:\/\/vine\.co\/v\/([a-zA-Z0-9\-\_]+)/i;
   var twitterRegex = /https?:\/\/twitter\.com\/.+?\/status\/\d+/i;
+  var facebookRegex = /https?:\/\/(?:www\.)?facebook\.com\/.+?\/posts\/\d+/i;
+  var gplusRegex = /https?:\/\/plus\.google\.com\/\d+\/posts\/[a-zA-Z0-9\-\_]+/i;
 
   return {
     wrapRichText: wrapRichText,
@@ -3254,15 +3257,28 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     if (embedUrlMatches = text.match(youtubeRegex)) {
       return ['youtube', embedUrlMatches[1]];
     }
+    if (embedUrlMatches = text.match(vimeoRegex)) {
+      return ['vimeo', embedUrlMatches[1]];
+    }
     else if (embedUrlMatches = text.match(instagramRegex)) {
       return ['instagram', embedUrlMatches[1]];
     }
     else if (embedUrlMatches = text.match(vineRegex)) {
       return ['vine', embedUrlMatches[1]];
     }
-    else if (embedUrlMatches = !Config.Modes.chrome_packed && text.match(twitterRegex)) {
+
+    if (!Config.Modes.chrome_packed) { // Need external JS
+      if (embedUrlMatches = text.match(twitterRegex)) {
         return ['twitter', embedUrlMatches[0]];
       }
+      else if (embedUrlMatches = text.match(facebookRegex)) {
+        return ['facebook', embedUrlMatches[0]];
+      }
+      // Sorry, GPlus widget has no `xfbml.render` like callback and is too wide.
+      // else if (embedUrlMatches = text.match(gplusRegex)) {
+      //   return ['gplus', embedUrlMatches[0]];
+      // }
+    }
 
     return false;
   }