youtube thumbz

4 files changed, 123 insertions, 9 deletions

diff --git a/src/site.clj b/src/site.clj
index bcb2914..a16a43c 100644
--- a/src/site.clj
+++ b/src/site.clj
@@ -268,7 +268,7 @@
    })
 
 ;;  User-id/nick cache
-;;  I keep needing to grab user-id from a nick or nick from a user-id so I thought I'd cache them
+;;  I keep needing to grab user-id from a nick so I thought I'd cache them
 
 (def user-id-cache (ref {}))
 (def *user-id-cache-size* 500)
diff --git a/static/css/header.css b/static/css/header.css
index 2caa474..5b3c023 100755
--- a/static/css/header.css
+++ b/static/css/header.css
@@ -323,3 +323,20 @@ img.thumb {
   width: 16px;
   display: block;
 }
+
+a.youtube {
+  position: relative;
+}
+
+.youtube .youtube-thumb {
+  width: 130px;
+  height: 97px;
+  padding-bottom: 22px;
+  margin: 0;
+}
+.youtube .youtube-controls {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/static/img/youtube.controls.png b/static/img/youtube.controls.png
new file mode 100644
index 0000000..77e5d04
--- /dev/null
+++ b/static/img/youtube.controls.png
diff --git a/static/js/pichat.js b/static/js/pichat.js
index d5ffbee..62b9549 100644
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -6,6 +6,7 @@ var RawFavs = {}
 var MaxImagePosts = 40
 
 // todo: preload these. also, look into image sprites (no go on animating their sizes tho)
+// css clipping perhaps?
 Imgs = {
   "chatThumb": "/static/img/thumbs/color.right.gif",
   "chatThumbBig": "/static/img/thumbs/color.right.4x.gif",
@@ -73,19 +74,71 @@ function linkify(text) {
 // durty hack to use a global to check this... but otherwise i'd have to rewrite the String.replace function? :/
 var LastMsgContainsImage = false
 function linkReplace(url) {
-    var urlWithoutParams = url.replace(/\?.*$/i, "");
+    //var urlWithoutParams = url.replace(/\?.*$/i, "");
     
     if (url.indexOf('http://') == 0 || url.indexOf('https://') == 0 || url.indexOf('ftp://') == 0)
         linkUrl = url;
     else
         linkUrl = 'http://' + url;
     
-    if (PicRegex.test(urlWithoutParams)){
-        LastMsgContainsImage = true
-        return "<a target='_blank' href='" + linkUrl + "'><img src='" + linkUrl + "'></a>"
-    } else {
-        return "<a target='_blank' href='" + linkUrl + "'>" + url + "</a>"
+    var uri = parseUri(url)
+    switch(getUriType(uri)) {
+      case 'image':
+        LastMsgContainsImage = true;
+        return "<a target='_blank' href='" + linkUrl + "'><img src='" + linkUrl + "'></a>"; break;
+      case 'youtube': 
+        Youtube.startAnimation();
+        return "<a target='_blank' class='youtube' href='" + linkUrl + "'>" +
+               "<img class='youtube-thumb' width='130' height='97' src='"+Youtube.nextThumbUrl(uri.queryKey.v)+"'>" + 
+               "<img class='youtube-controls' src='/static/img/youtube.controls.png'></a>"; break;
+      default:
+        return "<a target='_blank' href='" + linkUrl + "'>" + url + "</a>";
     }
+    
+}
+
+Youtube = {
+  "timer": 0,
+  
+  "startAnimation": function(){
+    if (!Youtube.timer)
+      Youtube.timer = setTimeout(Youtube.animate, 1000)
+  },
+  
+  "animate": function(){
+    var thumbs = $(".youtube-thumb")
+    thumbs.each(Youtube.nextThumb)
+    if (thumbs.length == 0){
+      clearTimeout(Youtube.timer)
+      Youtube.timer = 0
+    } else Youtube.timer = setTimeout(Youtube.animate, 1000);
+  },
+  
+  "nextThumb": function(){
+    var img = $(this);
+    // yt thumb url is http://i.ytimg.com/vi/0123456789A/1.jpg
+    var v = img.attr("src").substr(22,11)
+    var num = img.attr("src").charAt(34);
+    img.attr("src", (Youtube.nextThumbUrl(v, num)))
+  },
+  
+  "nextThumbUrl": function(v, num){
+    if (!num) num = 0;
+    num = (parseInt(num) % 3) + 1 // cycle over 1,2,3
+    return "http://i.ytimg.com/vi/" + v + "/" + num + ".jpg"
+  },
+  
+}
+
+
+function getUriType(uri){
+  if (PicRegex.test(uri.file.toLowerCase()))
+    return "image";
+    
+  if (parseDomain(uri.host) == "youtube.com" && 'v' in uri.queryKey)
+    return "youtube";
+    
+  return "link";
 }
 
 function linkifyWithoutImage(text) {
@@ -758,7 +811,8 @@ function initBigHand(id){
     
 }
 
-// grab message id etc from some element e that's inside a message
+// grab message id etc from some element e that's inside a dump
+// (messages have something like id="message-0001" class="dump" )
 function getMessageInfo(e){
     var message = $(e).parents(".dump")
     var id = message.attr("id").substr(8) // cut "message-001" to "001"
@@ -807,7 +861,7 @@ Tag = {
     if (favorited) {
       Tag.rm(message.id, "favorite")
       $(button).parents(".dump").removeClass("favorite")
-      if (RawFavs && RawFavs[message.id]) {
+      if (RawFavs[message.id]) {
         delete RawFavs[message.id]
         paletteImageCache = false
       }
@@ -865,3 +919,46 @@ function MM_swapImage() { //v3.0
   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
 }
+
+function timeFunc(f){
+  var start = new Date().getTime();
+  var res = f();
+  console.log((new Date().getTime()) - start + " msecs");
+  return res;
+}
+
+// parseUri 1.2.2 from http://blog.stevenlevithan.com/archives/parseuri
+// (c) Steven Levithan <stevenlevithan.com>, MIT License
+function parseUri (str) {
+	var	o   = parseUri.options,
+		m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
+		uri = {},
+		i   = 14;
+
+	while (i--) uri[o.key[i]] = m[i] || "";
+
+	uri[o.q.name] = {};
+	uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
+		if ($1) uri[o.q.name][$1] = $2;
+	});
+
+	return uri;
+};
+
+parseUri.options = {
+	strictMode: false,
+	key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
+	q:   {
+		name:   "queryKey",
+		parser: /(?:^|&)([^&=]*)=?([^&]*)/g
+	},
+	parser: {
+		strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
+		loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
+	}
+};
+// end parseUri
+
+function parseDomain(host){
+  return host.toLowerCase().replace(/^www\./, "")
+}
\ No newline at end of file