added iframe

diff --git a/README.md b/README.md
index ffc38caee08f91574dc5ff0bffd372e7c991b92c..7c1fb708632c768abfdbc5247b71fae166f1b84f 100644 (file)
--- a/README.md
+++ b/README.md
@@ -16,4 +16,4 @@ Collections can be filtered by string.
 ![Overview](https://raw.github.com/quilime/visual-archive/gh-pages/images/filter.png)
 
 Video
-<iframe width="420" height="315" src="http://www.youtube.com/embed/tZ3a6gLevFo" frameborder="0" allowfullscreen></iframe>
+[![Video](https://raw.github.com/quilime/visual-archive/gh-pages/images/video.png)](http://www.youtube.com/watch?v=tZ3a6gLevFo)

diff --git a/app.js b/app.js
index 4425927cdbe18e1bd6b1304553c2ab054ca7c3c6..55b90c31147117d05e3e3dbe2a68dc4f4151f230 100644 (file)
--- a/app.js
+++ b/app.js
@@ -4,6 +4,7 @@ var express = require("express")
 ,   path    = require('path')
 ,   routes  = require('./routes')
 ,   thumbs  = require('./routes/thumbs')
+,   video  = require('./routes/video')
 ,   port    = 3000;
 
 var app = express();
@@ -29,6 +30,7 @@ app.configure('development', function(){
 
 app.get('/', routes.index);
 app.get('/thumbs/', thumbs.list);
+app.get('/video/', video.list);
 
 http.createServer(app).listen(app.get('port'), function(){
   console.log("Express server listening on port " + app.get('port'));

diff --git a/public/css/style.css b/public/css/style.css
index 5f631150d0e3ddc126a9d8c64d97330d8cd58a6d..de5d555a98149fc9c43080f768fe1a5701d8c68a 100644 (file)
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -80,3 +80,8 @@ ul.thumbs li img {
     padding:0.5em;
 
 }
+#videoplayer {
+    width:100%;
+    height:100%;
+    overflow: auto;
+}

diff --git a/public/js/script.js b/public/js/script.js
index 9acceaf5532f267f8ace7d4b2dc366aed133be4f..ffc8ac4b1a4ce634eb931ce6aa6c263627e92f70 100644 (file)
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -64,7 +64,7 @@ $(document).ready(function() {
 
         $('#subcontent .container').empty();
 
-        var offset = 150;
+        var offset = 225;
 
         $('#subcontent').css({
             width : window.innerWidth - offset + "px",
@@ -84,8 +84,17 @@ $(document).ready(function() {
             html: ""
           }).appendTo(destElem);
           $.each(data.links, function(key, thumb) {
-            $('<li><a target="_blank" href="'+thumb.url+'"><img src="' + thumb.img + '"></a></li>')
+            // thumb.url
+            $('<li><a href="#"><img src="' + thumb.img + '"></a></li>')
               .appendTo(destElem + ' ul.thumbs')
+              .click(function(){
+                var c = $('#subcontent .container');
+
+                //thumb.url
+                c.html('<iframe id="videoplayer" src="' + thumb.url + '"></iframe>');
+
+
+              })
           });
         });
 

diff --git a/routes/video.js b/routes/video.js
new file mode 100644 (file)
index 0000000..a91e720
--- /dev/null
+++ b/routes/video.js
@@ -0,0 +1,25 @@
+var jsdom   = require("jsdom")
+,   fs      = require("fs")
+,   jquery  = fs.readFileSync("./public/js/jquery-1.9.1.min.js").toString();
+
+exports.list = function(req, res) {
+  jsdom.env({
+    html : req.query["url"],
+    src : [jquery],
+    done: function (errors, window) {
+      var $ = window.$;
+      var thumbs = [];
+      var playcontainer = $("#avplaycontainer");
+      res.send(
+        JSON.stringify(
+        {
+          "contents" :  playcontainer.contents()
+        })
+      );
+      // res.send(JSON.stringify({
+      //   "url" : req.query["url"],
+      //   "links" : thumbs
+      // }));
+    }
+  });
+};