Improve embedding

clientapp/helpers/embedIt.js

@@ -3,20 +3,22 @@ var _ = require('underscore');
 var async = require('async');
 var templates = require('../templates');
 
-var embedQueue = async.cargo(function (links, cb) {
+var embedQueue = window.embedQueue = async.cargo(function (embeds, cb) {
     var urls = [];
-    _.each(links, function (link) {
+    _.each(embeds, function (embed) {
+        var url = embed.find('a.source')[0].href;
         urls.push({
-            value: link.href,
+            value: url,
-            el: link
+            el: embed[0]
         });
     });
+    cb();
     $.ajax({
         // We have to massage the data into the URL ourselves because
         // jQuery won't let us have unencoded commas between encoded URLs
         url: '/oembed?' + $.param({
             maxwidth: 500
-        }) + '&urls=' + _.map(urls, function (item) { return encodeURIComponent(item.value); }).join(','),
+        }) + '&urls=' +  _.map(urls, function (item) { return encodeURIComponent(item.value); }).join(','),
         dataType: 'jsonp',
         success: function (data) {
             var maxWidth = 500;
@@ -41,15 +43,13 @@ module.exports = function ($html, cb) {
     cb = cb || function () {};
 
     //if (!app.settings.chatEmbeds) return cb();
-    if (!$html.jquery) cb('$html is not a jQuery collection.');
     var $links;
     var batches = [];
     var allUrls = [];
-    var selector = 'a[target="_blank"]:not(".original")';
+    var embeds = $html.find('.embed');
-    $links = $html.find(selector);
+    if (!embeds.length) embeds = $html.filter('.embed');
-    if (!$links.length) $links = $html.filter(selector);
 
-    $links.each(function (idx, link) {
+    _.each(embeds, function (embed) {
-        embedQueue.push(link);
+        embedQueue.push(embeds);
     });
 };

clientapp/helpers/htmlify.js

@@ -2,6 +2,18 @@
 
 var _ = require('underscore');
 
+/*
+ * JavaScript Linkify - v0.3 - 6/27/2009
+ * http://benalman.com/projects/javascript-linkify/
+ *
+ * Copyright (c) 2009 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ *
+ * Some regexps adapted from http://userscripts.org/scripts/review/7122
+ */
+var parseLinks = (function(){var k="[a-z\\d.-]+://",h="(?:(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\.){3}(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])",c="(?:(?:[^\\s!@#$%^&*()_=+[\\]{}\\\\|;:'\",.<>/?]+)\\.)+",n="(?:ac|ad|aero|ae|af|ag|ai|al|am|an|ao|aq|arpa|ar|asia|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|biz|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|cat|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|coop|com|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|info|int|in|io|iq|ir|is|it|je|jm|jobs|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mil|mk|ml|mm|mn|mobi|mo|mp|mq|mr|ms|mt|museum|mu|mv|mw|mx|my|mz|name|na|nc|net|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pro|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tel|tf|tg|th|tj|tk|tl|tm|tn|to|tp|travel|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|xn--0zwm56d|xn--11b5bs3a9aj6g|xn--80akhbyknj4f|xn--9t4b11yi5a|xn--deba0ad|xn--g6w251d|xn--hgbk6aj7f53bba|xn--hlcj6aya9esc7a|xn--jxalpdlp|xn--kgbechtv|xn--zckzah|ye|yt|yu|za|zm|zw)",f="(?:"+c+n+"|"+h+")",o="(?:[;/][^#?<>\\s]*)?",e="(?:\\?[^#<>\\s]*)?(?:#[^<>\\s]*)?",d="\\b"+k+"[^<>\\s]+",a="\\b"+f+o+e+"(?!\\w)",m="mailto:",j="(?:"+m+")?[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@"+f+e+"(?!\\w)",l=new RegExp("(?:"+d+"|"+a+"|"+j+")","ig"),g=new RegExp("^"+k,"i"),b={"'":"`",">":"<",")":"(","]":"[","}":"{","B;":"B+","b:":"b9"},i={callback:function(q,p){return p?'<a href="'+p+'" title="'+p+'">'+q+"</a>":q},punct_regexp:/(?:[!?.,:;'"]|(?:&|&amp;)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)$/};return function(u,z){z=z||{};var w,v,A,p,x="",t=[],s,E,C,y,q,D,B,r;for(v in i){if(z[v]===undefined){z[v]=i[v]}}while(w=l.exec(u)){A=w[0];E=l.lastIndex;C=E-A.length;if(/[\/:]/.test(u.charAt(C-1))){continue}do{y=A;r=A.substr(-1);B=b[r];if(B){q=A.match(new RegExp("\\"+B+"(?!$)","g"));D=A.match(new RegExp("\\"+r,"g"));if((q?q.length:0)<(D?D.length:0)){A=A.substr(0,A.length-1);E--}}if(z.punct_regexp){A=A.replace(z.punct_regexp,function(F){E-=F.length;return""})}}while(A.length&&A!==y);p=A;if(!g.test(p)){p=(p.indexOf("@")!==-1?(!p.indexOf(m)?"":m):!p.indexOf("irc.")?"irc://":!p.indexOf("ftp.")?"ftp://":"http://")+p}if(s!=C){t.push([u.slice(s,C)]);s=E}t.push([A,p])}t.push([u.substr(s)]);for(v=0;v<t.length;v++){x+=z.callback.apply(window,t[v])}return x||u}})();
+
 
 module.exports = {
     toHTML: function (msg, team) {
@@ -12,27 +24,23 @@ module.exports = {
         html = this.linkify(html);
         return html;
     },
-
     linkify: function (text) {
-        /*
+        return parseLinks(text, {
-         * JavaScript Linkify - v0.3 - 6/27/2009
-         * http://benalman.com/projects/javascript-linkify/
-         *
-         * Copyright (c) 2009 "Cowboy" Ben Alman
-         * Dual licensed under the MIT and GPL licenses.
-         * http://benalman.com/about/license/
-         *
-         * Some regexps adapted from http://userscripts.org/scripts/review/7122
-         */
-        var linkify=(function(){var k="[a-z\\d.-]+://",h="(?:(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\.){3}(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])",c="(?:(?:[^\\s!@#$%^&*()_=+[\\]{}\\\\|;:'\",.<>/?]+)\\.)+",n="(?:ac|ad|aero|ae|af|ag|ai|al|am|an|ao|aq|arpa|ar|asia|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|biz|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|cat|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|coop|com|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|info|int|in|io|iq|ir|is|it|je|jm|jobs|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mil|mk|ml|mm|mn|mobi|mo|mp|mq|mr|ms|mt|museum|mu|mv|mw|mx|my|mz|name|na|nc|net|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pro|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tel|tf|tg|th|tj|tk|tl|tm|tn|to|tp|travel|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|xn--0zwm56d|xn--11b5bs3a9aj6g|xn--80akhbyknj4f|xn--9t4b11yi5a|xn--deba0ad|xn--g6w251d|xn--hgbk6aj7f53bba|xn--hlcj6aya9esc7a|xn--jxalpdlp|xn--kgbechtv|xn--zckzah|ye|yt|yu|za|zm|zw)",f="(?:"+c+n+"|"+h+")",o="(?:[;/][^#?<>\\s]*)?",e="(?:\\?[^#<>\\s]*)?(?:#[^<>\\s]*)?",d="\\b"+k+"[^<>\\s]+",a="\\b"+f+o+e+"(?!\\w)",m="mailto:",j="(?:"+m+")?[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@"+f+e+"(?!\\w)",l=new RegExp("(?:"+d+"|"+a+"|"+j+")","ig"),g=new RegExp("^"+k,"i"),b={"'":"`",">":"<",")":"(","]":"[","}":"{","B;":"B+","b:":"b9"},i={callback:function(q,p){return p?'<a href="'+p+'" title="'+p+'">'+q+"</a>":q},punct_regexp:/(?:[!?.,:;'"]|(?:&|&amp;)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)$/};return function(u,z){z=z||{};var w,v,A,p,x="",t=[],s,E,C,y,q,D,B,r;for(v in i){if(z[v]===undefined){z[v]=i[v]}}while(w=l.exec(u)){A=w[0];E=l.lastIndex;C=E-A.length;if(/[\/:]/.test(u.charAt(C-1))){continue}do{y=A;r=A.substr(-1);B=b[r];if(B){q=A.match(new RegExp("\\"+B+"(?!$)","g"));D=A.match(new RegExp("\\"+r,"g"));if((q?q.length:0)<(D?D.length:0)){A=A.substr(0,A.length-1);E--}}if(z.punct_regexp){A=A.replace(z.punct_regexp,function(F){E-=F.length;return""})}}while(A.length&&A!==y);p=A;if(!g.test(p)){p=(p.indexOf("@")!==-1?(!p.indexOf(m)?"":m):!p.indexOf("irc.")?"irc://":!p.indexOf("ftp.")?"ftp://":"http://")+p}if(s!=C){t.push([u.slice(s,C)]);s=E}t.push([A,p])}t.push([u.substr(s)]);for(v=0;v<t.length;v++){x+=z.callback.apply(window,t[v])}return x||u}})();    // '
-
-        return linkify(text, {
             callback: function (text, href) {
                 return href ? '<a href="' + href + '" target="_blank">' + text + '</a>' : text;
             }
         });
     },
-
+    collectLinks: function (text) {
+        var links = [];
+        parseLinks(text, {
+            callback: function (text, href) {
+                if (!href) return;
+                links.push(href);
+            }
+        });
+        return links;
+    },
     escapeHTML: function(s) {
         var re = /[&\"'<>]/g,  // "
             map = {"&": "&amp;", "\"": "&quot;", "'": "&apos;", "<": "&lt;", ">": "&gt;"};

clientapp/models/contact.js

@@ -206,7 +206,6 @@ module.exports = HumanModel.define({
     },
     setAvatar: function (id, type, source) {
         var self = this;
-        console.log('setAvatar', this.jid, id, type, source);
         fetchAvatar(this.jid, id, type, source, function (avatar) {
             if (source == 'vcard' && self.avatarSource == 'pubsub') return;
             self.avatarID = avatar.id;

clientapp/models/message.js

@@ -1,6 +1,7 @@
 /*global app, me*/
 "use strict";
 
+var _ = require('underscore');
 var uuid = require('node-uuid');
 var HumanModel = require('human-model');
 var templates = require('../templates');
@@ -21,7 +22,8 @@ var Message = module.exports = HumanModel.define({
         body: ['string', true, ''],
         type: ['string', true, 'normal'],
         acked: ['bool', true, false],
-        archivedId: ['string', true, '']
+        archivedId: ['string', true, ''],
+        oobURIs: ['array', false, []]
     },
     derived: {
         mine: {
@@ -109,7 +111,7 @@ var Message = module.exports = HumanModel.define({
             }
         },
         partialTemplateHtml: {
-            deps: ['edited', 'pending', 'body'],
+            deps: ['edited', 'pending', 'body', 'urls'],
             cache: false,
             fn: function () {
                 if (this.type === 'groupchat') {
@@ -120,7 +122,7 @@ var Message = module.exports = HumanModel.define({
             }
         },
         templateHtml: {
-            deps: ['edited', 'pending', 'body'],
+            deps: ['edited', 'pending', 'body', 'urls'],
             cache: false,
             fn: function () {
                 if (this.type === 'groupchat') {
@@ -149,6 +151,35 @@ var Message = module.exports = HumanModel.define({
             fn: function () {
                 return this.body.indexOf('/me') === 0;
             }
+        },
+        urls: {
+            deps: ['body', 'oobURIs'],
+            fn: function () {
+                var self = this;
+                var result = [];
+                var urls = htmlify.collectLinks(this.body);
+                var oobURIs = _.pluck(this.oobURIs || [], 'url');
+                var uniqueURIs = _.unique(result.concat(urls).concat(oobURIs));
+
+                _.each(uniqueURIs, function (url) {
+                    var oidx = oobURIs.indexOf(url);
+                    if (oidx >= 0) {
+                        result.push({
+                            href: url,
+                            desc: self.oobURIs[oidx].desc,
+                            source: 'oob'
+                        });
+                    } else {
+                        result.push({
+                            href: url,
+                            desc: url,
+                            source: 'body'
+                        });
+                    }
+                });
+
+                return result;
+            }
         }
     },
     session: {

clientapp/pages/chat.js

@@ -8,6 +8,7 @@ var templates = require('../templates');
 var Message = require('../views/message');
 var MessageModel = require('../models/message');
 var embedIt = require('../helpers/embedIt');
+var htmlify = require('../helpers/htmlify');
 var attachMediaStream = require('attachmediastream');
 
 
@@ -161,11 +162,16 @@ module.exports = BasePage.extend({
         if (val) {
             this.staydown.intend_down = true;
 
+            var links = _.map(htmlify.collectLinks(val), function (link) {
+                return {url: link};
+            });
+
             message = {
                 to: this.model.lockedResource || this.model.jid,
                 type: 'chat',
                 body: val,
-                chatState: 'active'
+                chatState: 'active',
+                oobURIs: links
             };
             if (this.editMode) {
                 message.replace = this.model.lastSentMessage.id;

clientapp/pages/groupchat.js

@@ -9,6 +9,7 @@ var MUCRosterItem = require('../views/mucRosterItem');
 var Message = require('../views/mucMessage');
 var MessageModel = require('../models/message');
 var embedIt = require('../helpers/embedIt');
+var htmlify = require('../helpers/htmlify');
 
 
 module.exports = BasePage.extend({
@@ -171,11 +172,16 @@ module.exports = BasePage.extend({
         if (val) {
             this.staydown.intend_down = true;
 
+            var links = _.map(htmlify.collectLinks(val), function (link) {
+                return {url: link};
+            });
+
             message = {
                 to: this.model.jid,
                 type: 'groupchat',
                 body: val,
-                chatState: 'active'
+                chatState: 'active',
+                oobURIs: links
             };
             if (this.editMode) {
                 message.replace = this.model.lastSentMessage.mid || this.model.lastSentMessage.cid;

clientapp/templates.js

@@ -37,7 +37,56 @@ exports.includes.bareMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p></div>");
+        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        var urls = message.urls;
+        buf.push('<section class="embeds">');
+        (function() {
+            var $$obj = urls;
+            if ("number" == typeof $$obj.length) {
+                for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) {
+                    var item = $$obj[$index];
+                    if (item.source == "body") {
+                        buf.push('<section class="embed hidden"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    } else {
+                        buf.push('<section class="embed"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    }
+                }
+            } else {
+                var $$l = 0;
+                for (var $index in $$obj) {
+                    $$l++;
+                    if ($$obj.hasOwnProperty($index)) {
+                        var item = $$obj[$index];
+                        if (item.source == "body") {
+                            buf.push('<section class="embed hidden"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        } else {
+                            buf.push('<section class="embed"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        }
+                    }
+                }
+            }
+        }).call(this);
+        buf.push("</section></div>");
     }
     return buf.join("");
 };
@@ -87,11 +136,12 @@ exports.includes.contactRequest = function anonymous(locals) {
 exports.includes.embeds = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
+        buf.push('<section class="embed active">');
         if (locals.type === "photo") {
             buf.push("<a" + jade.attrs({
                 href: locals.original,
                 target: "_blank",
-                "class": "embed" + " " + "photo"
+                "class": "photo"
             }, {
                 href: true,
                 target: true
@@ -106,14 +156,18 @@ exports.includes.embeds = function anonymous(locals) {
                 height: true,
                 src: true,
                 alt: true
-            }) + "/></a><br/><a" + jade.attrs({
+            }) + "/>");
-                href: locals.original,
+            if (locals.title || locals.description) {
-                target: "_blank",
+                buf.push('<div class="description">');
-                "class": "embed" + " " + "original"
+                if (locals.title) {
-            }, {
+                    buf.push("<h3>" + jade.escape(null == (jade.interp = locals.title) ? "" : jade.interp) + "</h3>");
-                href: true,
+                }
-                target: true
+                if (locals.description) {
-            }) + ">" + jade.escape(null == (jade.interp = locals.original) ? "" : jade.interp) + "</a>");
+                    buf.push("<p>" + jade.escape(null == (jade.interp = locals.description) ? "" : jade.interp) + "</p>");
+                }
+                buf.push("</div>");
+            }
+            buf.push("</a>");
         } else if (locals.type === "video" && locals.thumbnail_url) {
             buf.push("<a" + jade.attrs({
                 href: locals.original,
@@ -133,15 +187,20 @@ exports.includes.embeds = function anonymous(locals) {
                 height: true,
                 src: true,
                 alt: true
-            }) + "/></a><br/><a" + jade.attrs({
+            }) + "/>");
-                href: locals.original,
+            if (locals.title || locals.description) {
-                target: "_blank",
+                buf.push('<div class="description">');
-                "class": "embed" + " " + "original"
+                if (locals.title) {
-            }, {
+                    buf.push("<h3>" + jade.escape(null == (jade.interp = locals.title) ? "" : jade.interp) + "</h3>");
-                href: true,
+                }
-                target: true
+                if (locals.description) {
-            }) + ">" + jade.escape(null == (jade.interp = locals.original) ? "" : jade.interp) + "</a>");
+                    buf.push("<p>" + jade.escape(null == (jade.interp = locals.description) ? "" : jade.interp) + "</p>");
+                }
+                buf.push("</div>");
+            }
+            buf.push("</a>");
         }
+        buf.push("</section>");
     }
     return buf.join("");
 };
@@ -230,7 +289,56 @@ exports.includes.wrappedMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p></div></div></li>");
+        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        var urls = message.urls;
+        buf.push('<section class="embeds">');
+        (function() {
+            var $$obj = urls;
+            if ("number" == typeof $$obj.length) {
+                for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) {
+                    var item = $$obj[$index];
+                    if (item.source == "body") {
+                        buf.push('<section class="embed hidden"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    } else {
+                        buf.push('<section class="embed"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    }
+                }
+            } else {
+                var $$l = 0;
+                for (var $index in $$obj) {
+                    $$l++;
+                    if ($$obj.hasOwnProperty($index)) {
+                        var item = $$obj[$index];
+                        if (item.source == "body") {
+                            buf.push('<section class="embed hidden"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        } else {
+                            buf.push('<section class="embed"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        }
+                    }
+                }
+            }
+        }).call(this);
+        buf.push("</section></div></div></li>");
     }
     return buf.join("");
 };

clientapp/templates/includes/bareMessage.jade

@@ -1,3 +1,12 @@
 .message(id='chat'+message.cid, class=message.classList)
   span.timestamp=message.formattedTime
   p.body !{message.processedBody}
+  - var urls = message.urls
+  section.embeds
+    each item in urls
+      if item.source == 'body'
+        section.embed.hidden
+          a.source(href=item.href)= item.desc
+      else
+        section.embed
+          a.source(href=item.href)= item.desc

clientapp/templates/includes/embeds.jade

@@ -1,10 +1,19 @@
-- if (locals.type === 'photo')
+section.embed.active
-  a.embed.photo(href=locals.original, target="_blank")
+  - if (locals.type === 'photo')
-    img.embedded(width=locals.width, height=locals.height, src=locals.url, alt=locals.title)
+    a.photo(href=locals.original, target="_blank")
-  br
+      img.embedded(width=locals.width, height=locals.height, src=locals.url, alt=locals.title)
-  a.embed.original(href=locals.original, target="_blank")= locals.original
+      -if (locals.title || locals.description)
-- else if (locals.type === 'video' && locals.thumbnail_url)
+        .description
-  a.embed.preview(href=locals.original, target="_blank")
+          -if (locals.title)
-    img.embedded(width=locals.width, height=locals.height, src=locals.thumbnail_url, alt=locals.title);
+            h3= locals.title
-  br
+          -if (locals.description)
-  a.embed.original(href=locals.original, target="_blank")= locals.original
+            p= locals.description
+  - else if (locals.type === 'video' && locals.thumbnail_url)
+    a.embed.preview(href=locals.original, target="_blank")
+      img.embedded(width=locals.width, height=locals.height, src=locals.thumbnail_url, alt=locals.title);
+      -if (locals.title || locals.description)
+        .description
+          -if (locals.title)
+            h3= locals.title
+          -if (locals.description)
+            p= locals.description

clientapp/views/main.js

@@ -16,7 +16,7 @@ module.exports = HumanView.extend({
     },
     events: {
         'click a[href]': 'handleLinkClick',
-        'click a.embed img': 'handleEmbedClick',
+        'click .embed': 'handleEmbedClick',
         'click .reconnect': 'handleReconnect',
         'click .logout': 'handleLogout',
         'blur #me .status': 'handleStatusChange'
@@ -61,7 +61,8 @@ module.exports = HumanView.extend({
     handleEmbedClick: function (e) {
         if (e.shiftKey) {
             e.preventDefault();
-            $(e.target).hide();
+            console.log(e);
+            $(e.currentTarget).toggleClass('collapsed');
         }
     },
     handleTitle: function (e) {

package.json

@@ -26,8 +26,8 @@
         "oembed": "0.1.0",
         "semi-static": "0.0.4",
         "sound-effect-manager": "0.0.5",
-        "stanza.io": "2.11.0",
+        "stanza.io": "2.12.0",
-        "staydown": "legastero/staydown",
+        "staydown": "1.0.3",
         "templatizer": "0.1.2",
         "underscore": "1.5.1",
         "wildemitter": "0.0.5"

public/css/otalk.css

@@ -1319,6 +1319,44 @@ button.secondary:hover:not(:disabled) {
 .group.conversation .groupRoster li.idle:before {
   background: #ababab;
 }
+.embeds {
+  margin: 0px;
+  padding: 0px;
+}
+.embed.active {
+  display: inline-block;
+  margin: 5px;
+  padding: 10px;
+  border: 1px solid #eee;
+  background-color: #f7f7f7;
+  text-align: center;
+}
+.embed.active .description {
+  border: 1px solid #eee;
+  background-color: #fff;
+  margin: 0px;
+  margin-top: 5px;
+  padding: 10px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: normal;
+}
+.embed.active .description h3 {
+  font-size: 12px;
+  margin: 3px;
+  padding: 2px;
+  border-bottom: 1px solid #eee;
+}
+.embed.active .description p {
+  margin: 3px;
+  padding: 2px;
+}
+.embed.collapsed img {
+  display: none;
+}
+.embed.hidden {
+  display: none;
+}
 .main > div {
   padding: 20px;
   padding-top: 50px;

public/css/pages/chat.styl

@@ -418,3 +418,42 @@
       &.paused:before,
       &.idle:before
         background: lighten($gray-light, 30%)
+
+.embeds
+  margin: 0px
+  padding: 0px
+
+.embed
+  &.active
+    display: inline-block
+    margin: 5px
+    padding: 10px
+    border: 1px solid #eee
+    background-color: lighten($gray-lighter, 50%)
+    text-align: center
+
+    .description
+      border: 1px solid #eee
+      background-color: #fff
+      margin: 0px
+      margin-top: 5px
+      padding: 10px
+      text-align: left
+      font-size: 11px
+      font-weight: normal
+
+      h3
+        font-size: 12px
+        margin: 3px
+        padding: 2px
+        border-bottom: 1px solid #eee
+
+      p
+        margin: 3px
+        padding: 2px
+
+  &.collapsed
+    img
+      display: none
+  &.hidden
+    display: none

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1388637293800
+# 0.0.1 1388652517251
 
 CACHE:
 /app.js

server.js

@@ -19,7 +19,7 @@ if (!config.isDev) {
 app.use(helmet.iexss());
 app.use(helmet.contentTypeOptions());
 
-oembed.EMBEDLY_URL = config.embedly.url;
+oembed.EMBEDLY_URL = config.embedly.url || 'https://api.embed.ly/1/oembed';
 oembed.EMBEDLY_KEY = config.embedly.key;
 
 var clientApp = new Moonboots({