Improved external embed support

app/js/directives.js

@@ -166,6 +166,87 @@ angular.module('myApp.directives', ['myApp.filters'])
       }
     }
   })
+  .directive('myExternalEmbed', function () {
+
+    var twitterAttached = false;
+    var twitterPendingWidgets = [];
+    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) {
+        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="//www.youtube.com/embed/' + videoID +
+                '?autoplay=0&amp;controls=2"></' + 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="//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="//vine.co/v/' + vineID + '/embed/simple"></' + 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) {
+                    console.log('loaded');
+                    for (var i = 0; i < twitterPendingWidgets.length; i++) {
+                      twitterPendingWidgets[i].$emit('ui_height');
+                    }
+                    twitterPendingWidgets = [];
+                  });
+                })
+                .attr('src', '//platform.twitter.com/widgets.js');
+            }
+            else if (window.twttr) {
+              twttr.widgets.load(element[0]);
+            }
+            twitterPendingWidgets.push($scope);
+          };
+          break;
+      }
+
+      if (html) {
+        element[0].innerHTML = html;
+        if (callback) {
+          callback();
+        }
+      }
+    }
+
+    return {
+      link: link
+    };
+
+  })
 
   .directive('myServiceMessage', function() {
     return {

app/js/lib/ng_utils.js

@@ -727,7 +727,6 @@ angular.module('izhukov.utils', [])
 
 .service('ExternalResourcesManager', function ($q, $http) {
   var urlPromises = {};
-  var twitterAttached = false;
 
   function downloadImage (url) {
     if (urlPromises[url] !== undefined) {
@@ -741,18 +740,8 @@ angular.module('izhukov.utils', [])
       });
   }
 
-  function attachTwitterScript () {
-    twitterAttached = true;
-
-    $('<script>').appendTo('body')
-    // .on('load', function() {
-    // })
-    .attr('src', '//platform.twitter.com/widgets.js');
-  }
-
   return {
-    downloadImage: downloadImage,
-    attachTwitterScript: attachTwitterScript
+    downloadImage: downloadImage
   }
 })
 

app/js/services.js

@@ -1721,6 +1721,9 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 
     if (message.message && message.message.length) {
       message.richMessage = RichTextProcessor.wrapRichText(message.message);
+      if (!Config.Navigator.mobile) {
+        message.richUrlEmbed = RichTextProcessor.extractExternalEmbed(message.message);
+      }
     }
 
     return messagesForHistory[msgID] = message;
@@ -3062,7 +3065,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   }
 })
 
-.service('RichTextProcessor', function ($sce, $sanitize, ExternalResourcesManager) {
+.service('RichTextProcessor', function ($sce, $sanitize) {
 
   var emojiUtf = [],
       emojiMap = {},
@@ -3111,7 +3114,8 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 
   return {
     wrapRichText: wrapRichText,
-    wrapPlainText: wrapPlainText
+    wrapPlainText: wrapPlainText,
+    extractExternalEmbed: extractExternalEmbed
   };
 
   function getEmojiSpritesheetCoords(emojiCode) {
@@ -3233,35 +3237,27 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
                           '<span class="emoji emoji-spritesheet-$1" style="background-position: -$2px -$3px;" $4</span>');
     }
 
-    // console.log(4, text, html);
-    if (!options.noLinks && !Config.Navigator.mobile) {
-      var embedUrlMatches,
-          embedTag = Config.Modes.chrome_packed ? 'webview' : 'iframe';
+    return $sce.trustAs('html', text);
+  }
 
-      if (embedUrlMatches = text.match(youtubeRegex)) {
-        var videoID = embedUrlMatches[1]
-        text = text + '<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>'
-      }
-      else if (embedUrlMatches = text.match(instagramRegex)) {
-        var instaID = embedUrlMatches[1];
-        text = text + '<div class="im_message_media_embed im_message_insta_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
-              'src="//instagram.com/p/' + instaID +
-              '/embed/"></' + embedTag + '></div>';
-      }
-      else if (embedUrlMatches = text.match(vineRegex)) {
-        var vineID = embedUrlMatches[1];
-        text = text + '<div class="im_message_media_embed im_message_vine_embed"><' + embedTag + ' type="text/html" frameborder="0" ' +
-              'src="//vine.co/v/' + vineID + '/embed/simple"></' + embedTag + '></div>';
-      }
-      else if (embedUrlMatches = !Config.Modes.chrome_packed && text.match(twitterRegex)) {
-        text = text + '<div class="im_message_twitter_embed"><blockquote class="twitter-tweet" lang="en"><a href="' + embedUrlMatches[0] + '"></a></blockquote></div>';
-        onContentLoaded(ExternalResourcesManager.attachTwitterScript);
-      }
+  function extractExternalEmbed (text) {
+    var embedUrlMatches,
+        result;
+
+    if (embedUrlMatches = text.match(youtubeRegex)) {
+      return ['youtube', 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)) {
+      return ['twitter', embedUrlMatches[0]];
     }
 
-    return $sce.trustAs('html', text);
+    return false;
   }
 
   function wrapPlainText (text, options) {

app/partials/desktop/message.html

@@ -61,6 +61,7 @@
         </div>
 
         <div class="im_message_text" ng-if="::historyMessage.message.length || false" ng-bind-html="::historyMessage.richMessage"></div>
+        <div class="im_message_external_embed_wrap" ng-if="::historyMessage.richUrlEmbed || false" my-external-embed="historyMessage.richUrlEmbed"></div>
       </div>
 
     </div>