From: Gabriel Dunne <gdunne@quilime.com>
Date: Sat, 23 Mar 2013 23:25:47 +0000 (-0700)
Subject: added iframe
X-Git-Url: https://git.quilime.com/?a=commitdiff_plain;h=fa4a469832fcdf105fabadd31e2cbb44588a8446;p=visual-archive.git

added iframe
---

diff --git a/README.md b/README.md
index ffc38ca..7c1fb70 100644
--- 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 4425927..55b90c3 100644
--- 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 5f63115..de5d555 100644
--- 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 9acceaf..ffc8ac4 100644
--- 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
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
+      // }));
+    }
+  });
+};