Improved external embed support

2014-11-11 15:34:32 +03:00 · 2014-11-11 15:34:32 +03:00 · c78a402b37
commit c78a402b37
parent 272c67c1a7
4 changed files with 107 additions and 40 deletions
--- a/app/js/directives.js
+++ b/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 {
--- a/app/js/lib/ng_utils.js
+++ b/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
  }
 })

--- a/app/js/services.js
+++ b/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) {
--- a/app/partials/desktop/message.html
+++ b/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>