More embedding refinements

clientapp/helpers/embedIt.js

@@ -4,6 +4,7 @@ var async = require('async');
 var templates = require('../templates');
 
 var embedQueue = window.embedQueue = async.cargo(function (embeds, cb) {
+    cb();
     var urls = [];
     _.each(embeds, function (embed) {
         var url = embed.find('a.source')[0].href;
@@ -12,7 +13,6 @@ var embedQueue = window.embedQueue = async.cargo(function (embeds, cb) {
             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
@@ -22,10 +22,11 @@ var embedQueue = window.embedQueue = async.cargo(function (embeds, cb) {
         dataType: 'jsonp',
         success: function (data) {
             var maxWidth = 500;
+            var maxTbWidth = 100;
             data = _.filter(data, function (item, i) {
                 item.original = urls[i].value;
                 item.el = urls[i].el;
-                return item.type === 'video' || item.type === 'photo';
+                return item.type === 'video' || item.type === 'photo' || item.type === 'link' || item.type === 'rich';
             });
             data.forEach(function (item) {
                 if (item.width && item.height && item.width > maxWidth) {
@@ -33,11 +34,16 @@ var embedQueue = window.embedQueue = async.cargo(function (embeds, cb) {
                     item.width = maxWidth;
                     item.height = parseInt(item.height * ratio, 10);
                 }
+                if (item.thumbnail_width && item.thumbnail_height && item.thumbnail_width > maxTbWidth) {
+                    var tbratio = maxTbWidth / item.thumbnail_width;
+                    item.thumbnail_width = maxTbWidth;
+                    item.thumbnail_height = parseInt(item.thumbnail_height * tbratio, 10);
+                }
                 $(item.el).replaceWith(templates.includes.embeds(item));
             });
         }
     });
-}, 10);
+}, 5);
 
 module.exports = function ($html, cb) {
     cb = cb || function () {};

clientapp/templates.js

@@ -136,9 +136,8 @@ 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({
+            buf.push('<section class="embed active"><a' + jade.attrs({
                 href: locals.original,
                 target: "_blank",
                 "class": "photo"
@@ -167,12 +166,12 @@ exports.includes.embeds = function anonymous(locals) {
                 }
                 buf.push("</div>");
             }
-            buf.push("</a>");
+            buf.push("</a></section>");
         } else if (locals.type === "video" && locals.thumbnail_url) {
-            buf.push("<a" + jade.attrs({
+            buf.push('<section class="embed active"><a' + jade.attrs({
                 href: locals.original,
                 target: "_blank",
-                "class": "embed" + " " + "preview"
+                "class": "preview"
             }, {
                 href: true,
                 target: true
@@ -198,9 +197,8 @@ exports.includes.embeds = function anonymous(locals) {
                 }
                 buf.push("</div>");
             }
-            buf.push("</a>");
+            buf.push("</a></section>");
         }
-        buf.push("</section>");
     }
     return buf.join("");
 };

clientapp/templates/includes/embeds.jade

@@ -1,5 +1,5 @@
-section.embed.active
-  - if (locals.type === 'photo')
+- if (locals.type === 'photo')
+  section.embed.active
     a.photo(href=locals.original, target="_blank")
       img.embedded(width=locals.width, height=locals.height, src=locals.url, alt=locals.title)
       -if (locals.title || locals.description)
@@ -8,8 +8,9 @@ section.embed.active
             h3= locals.title
           -if (locals.description)
             p= locals.description
-  - else if (locals.type === 'video' && locals.thumbnail_url)
-    a.embed.preview(href=locals.original, target="_blank")
+- else if (locals.type === 'video' && locals.thumbnail_url)
+  section.embed.active
+    a.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
@@ -17,3 +18,26 @@ section.embed.active
             h3= locals.title
           -if (locals.description)
             p= locals.description
+//- else if (locals.type === 'link' && locals.provider_name === 'Twitter')
+  section.embed.active
+    a.twitter(href=locals.original, target="_blank")
+      -if (locals.thumbnail_url)
+        img.embedded(width=100, src=locals.thumbnail_url, alt=locals.title)
+      -if (locals.title || locals.description)
+        .description
+          h4= '@' + locals.author_name
+          p= locals.description
+//- else if (locals.type === 'link' && locals.description && locals.thumbnail_url)
+  section.embed.active
+    a.link(href=locals.original, target="_blank")
+      -if (locals.thumbnail_url)
+        img.embedded(width=locals.thumbnail_width, height=locals.thumbnail_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
+//- else if (locals.type === 'rich')
+  section.embed.active
+    iframe(width=locals.width, height=300, seamless="seamless", frameborder="no", scolling="no", srcdoc=locals.html, sandbox="allow-scripts allow-same-origin allow-forms")

public/css/otalk.css

@@ -1323,6 +1323,13 @@ button.secondary:hover:not(:disabled) {
   margin: 0px;
   padding: 0px;
 }
+.embed {
+  max-width: 500px;
+}
+.embed a,
+.embed a:hover {
+  color: #34465a;
+}
 .embed.active {
   display: inline-block;
   margin: 5px;
@@ -1353,6 +1360,21 @@ button.secondary:hover:not(:disabled) {
   margin: 3px;
   padding: 2px;
 }
+.embed.active a.link img,
+.embed.active a.twitter img {
+  float: left;
+}
+.embed.active a.link img + .description,
+.embed.active a.twitter img + .description {
+  margin-left: 110px;
+  font-size: 12px;
+}
+.embed.active a.link h4,
+.embed.active a.twitter h4 {
+  font-size: 14px;
+  margin: 0px;
+  padding: 2px;
+}
 .embed.collapsed img {
   display: none;
 }

public/css/pages/chat.styl

@@ -424,6 +424,11 @@
   padding: 0px
 
 .embed
+  max-width: 500px
+
+  a, a:hover
+    color: #34465a
+
   &.active
     display: inline-block
     margin: 5px
@@ -454,6 +459,17 @@
         margin: 3px
         padding: 2px
 
+    a.link, a.twitter
+      img
+        float: left
+      img + .description
+        margin-left: 110px
+        font-size: 12px
+      h4
+        font-size: 14px
+        margin: 0px
+        padding: 2px
+
   &.collapsed
     img
       display: none

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1388653959496
+# 0.0.1 1388659662444
 
 CACHE:
 /app.js