Browse Source

Improved external embed support

master
Igor Zhukov 10 years ago
parent
commit
c78a402b37
  1. 81
      app/js/directives.js
  2. 13
      app/js/lib/ng_utils.js
  3. 52
      app/js/services.js
  4. 1
      app/partials/desktop/message.html

81
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() { .directive('myServiceMessage', function() {
return { return {

13
app/js/lib/ng_utils.js

@ -727,7 +727,6 @@ angular.module('izhukov.utils', [])
.service('ExternalResourcesManager', function ($q, $http) { .service('ExternalResourcesManager', function ($q, $http) {
var urlPromises = {}; var urlPromises = {};
var twitterAttached = false;
function downloadImage (url) { function downloadImage (url) {
if (urlPromises[url] !== undefined) { 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 { return {
downloadImage: downloadImage, downloadImage: downloadImage
attachTwitterScript: attachTwitterScript
} }
}) })

52
app/js/services.js

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

1
app/partials/desktop/message.html

@ -61,6 +61,7 @@
</div> </div>
<div class="im_message_text" ng-if="::historyMessage.message.length || false" ng-bind-html="::historyMessage.richMessage"></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>
</div> </div>

Loading…
Cancel
Save