padma.local -- toward a presentation tool

lists/views.py

@@ -2,6 +2,7 @@ import urllib
 from django.utils import simplejson
 from django.http import HttpResponse
 from django.shortcuts import render_to_response
+from settings import PADMA_URL
 
 def getHtmlFromUrl(url):
   try:
@@ -20,6 +21,16 @@ def fetchJson(request):
   else:
     return HttpResponse("{'error': True}", mimetype="application/javascript")
 
+def fetchSrt(request):
+  if request.GET['id']:
+    padmaId = request.GET['id']
+    track = request.GET['track'] or 'transcript'
+    url = "%s%s/export/%s.srt" % (PADMA_URL, padmaId, track,)
+    srt = getHtmlFromUrl(url)
+    return HttpResponse(srt)
+  else:
+    return HttpResponse("{'error': True}", mimetype="application/javascript")
+
 def index(request):
   return render_to_response("index.html")
 
@@ -28,4 +39,6 @@ def listDetail(request):
     rDict = {'listId': request.GET['id'] }
     return render_to_response("list.html", rDict)
   else:
-    return HttpResponse("Please pass me a list id:(")
+    return HttpResponse("Please pass me a list id")
+
+

settings.py

@@ -10,6 +10,7 @@ LOGGING_INTERCEPT_REDIRECTS = True
 LOGGING_LOG_SQL = True
 LOGGING_SHOW_METRICS = True
 LOGGING_OUTPUT_ENABLED = True
+PADMA_URL = "http://padma.local/"
 
 PROJECT_PATH = os.path.dirname(__file__)
 

static/css/padmaList.css

@@ -1,16 +1,78 @@
-#wrapper {
+html, body {
+  width: 100%;
+  font-size: 12px;
+}
+
+#wrapper, #floatWrapper {
   width: 100%;
   }
 
+#videos {
+  width: 40%;
+}
+
+.layerResult {
+  margin-bottom: 2px;
+  font-size: 10px;
+}
+
+.layerResult.keyword {
+  background: orange;
+}
+
+.layerResult.description {
+  background: blue;
+}
+
+.layerResult.transcript {
+  background: green;
+}
+
+.layerResult.location {
+  background: purple;
+}
+
+.layerResult a {
+  color: white;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.layerResult a:hover {
+  color: lightgrey;
+}
+
+.layerInOut {
+  color: yellow;
+  font-weight: bold;
+}
+
+.layerTrack {
+  font-weight: bold;
+}
 .videoWrapper {
   border: 1px solid #000;
-  width: 80%;
+  width: 100%;
   min-height: 180px;
+/*
   margin-left: auto;
   margin-right: auto;
+*/
   margin-bottom: 15px;
   }
 
+#playBin {
+  position: fixed;
+  height: 96%;
+  overflow: auto;
+  left: 45%;
+  top: 2%;
+  bottom: 2%;
+  right: 5%;
+  border: 1px solid #000;
+  height: 500px;
+}
+
 .videoTitle {
   font-weight: bold;
   text-align: center;
@@ -21,7 +83,7 @@
   }
 
 .videoMeta {
-  clear: left;
+/*  clear: left; */
   }
 
 .videoPoster {
@@ -40,6 +102,32 @@
   display: none;
   }
 
+.padmaClip {
+/*  height: 128px; */
+  padding: 5px;
+  margin-bottom: 2px;
+  background: #ccc;
+  position: relative;
+}
+
+
+.layerImages {
+  float: left;
+}
+
+.layerControls {
+  float: left;
+}
+
+.clipImage {
+  float: left;
+  width: 128px;
+  text-align: center;
+  color: #363636;
+  font-weight: bold;
+  margin-right: 6px;
+  height: 100px;
+}
 #searchDiv {
   margin-right: 20px;
   text-align: right;
@@ -62,3 +150,7 @@
   color: #ccc;
   clear: both;
   }
+
+#results {
+  z-index: 500;
+  }

static/js/padmaApi.js

@@ -1,8 +1,93 @@
-var local_json_url = "/jPadma?url=http://pad.ma";
+//REMOVE tmpl FROM HERE!!!
+/*
+John Resig's templating utility - http://ejohn.org/blog/javascript-micro-templating/
+Not updated code to resolve issue with single quotes from: http://www.west-wind.com/Weblog/posts/509108.aspx
+define templates inside <script type="text/html" id="foo"> tags
+get html of template with tmpl("foo", json)
+*/
+
+
+// Simple JavaScript Templating
+// John Resig - http://ejohn.org/ - MIT Licensed
+(function(){
+  var cache = {};
+ 
+  this.tmpl = function tmpl(str, data){
+    // Figure out if we're getting a template, or if we need to
+    // load the template - and be sure to cache the result.
+    var fn = !/\W/.test(str) ?
+      cache[str] = cache[str] ||
+        tmpl(document.getElementById(str).innerHTML) :
+     
+      // Generate a reusable function that will serve as a template
+      // generator (and which will be cached).
+      new Function("obj",
+        "var p=[],print=function(){p.push.apply(p,arguments);};" +
+       
+        // Introduce the data as local variables using with(){}
+        "with(obj){p.push('" +
+       
+        // Convert the template into pure JavaScript
+        str
+          .replace(/[\r\t\n]/g, " ")
+          .split("<%").join("\t")
+          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+          .replace(/\t=(.*?)%>/g, "',$1,'")
+          .split("\t").join("');")
+          .split("%>").join("p.push('")
+          .split("\r").join("\\'")
+      + "');}return p.join('');");
+   
+    // Provide some basic currying to the user
+    return data ? fn( data ) : fn;
+  };
+})();
+
+
+//  window.PADMA = new padmaApi();
   
   function callPadma(api, callback, extra_params) {
+    var local_json_url = "/jPadma?url=http://padma.local";
     var url = local_json_url + api;
     $.getJSON(url, function(json) {    
       callback(json, extra_params);
     });
   }
+
+  function getSRT(id, track, callback) {
+    var url = local_srt_url;
+    $.get(url, {
+      'id': id,
+      'track': track
+      }, function(srt) {
+      callback(srt);
+    });    
+  }
+  
+(function($) {
+  jQuery.fn.padma = function(id, options) {
+    var that = this;
+    var o = $.extend({
+      'videoSize': 320,
+      'startTime': '0:00:00',
+      'endTime': '0:00:00',
+      'tracks': ['description', 'transcript'],
+      'tmpl_id': '',
+      'baseUrl': 'http://pad.ma/',
+      'globalVar': 'PADMA',
+      'localUrl': '/padmaApi/'
+    }, options);
+    window[o.globalVar] = new P(id, o, that);
+  }
+
+  var P = function(id, options, container) {
+    this.o = options;
+    this.container = container;
+    this.init();            
+  }
+
+  P.prototype.init = function() {
+        
+  }
+
+})(jQuery);

static/js/padmaList.js

@@ -1,182 +1,20 @@
+var BASE_URL = "http://padma.local/";
+
 $(document).ready(function() {
   var apiUrl = "/list/videos?listId=" + listId;
   callPadma(apiUrl, initList);
   prevSearchTerms = [];
-  $('#search').keyup(function() {
+
-    var val = $(this).val();
-    if (val == '') {
-      $('#results').html('');
-      }
-    var words = val.split(" ");
-    for (var i = 0; i < words.length; i++) {
-      var thisWord = words[i];
-      if (!prevSearchTerms.inArray(thisWord) && thisWord.length > 3) {
-        doSearch(thisWord);
-        prevSearchTerms.push(thisWord);
-        }
-      } 
-    });
   });
 
-function doSearch(word) {
-  var matchingLayers = findMatchingLayers(word);
-  for (var l in matchingLayers) {
-    var layer = matchingLayers[l];
-    var imgPath = layer.firstFrame128;
-    var html = layer.getThumbElem();
-//    var imgHtml = "<img src='" + imgPath + "' />";
-    $('#results').append(html);
-    }
-  }
 
-function findMatchingLayers(word) {
-  var matchedLayers = [];
-  for (var v in padmaVideos) {
-    var layers = padmaVideos[v].layers;
-    for (var l in layers) {
-      if (layers[l].value) {
-        var val = layers[l].value;
-        if (val.indexOf(word) != -1) {
-          var matchedLayer = new padmaLayer(layers[l], v)
-          matchedLayers.push(matchedLayer);
-          }        
-        }      
-      }
-    }
-  return matchedLayers;
-  }
 
-Array.prototype.inArray = function(value) {
-// Returns true if the passed value is found in the
-// array. Returns false if it is not.
-  var i;
-  for (i=0; i < this.length; i++) {
-    if (this[i] == value) {
-      return true;
-      }
-    }
-  return false;
-  };
 
-var padmaLayer = function(json, videoIndex) {
-  this.id = json.id;
-  this.video = videoIndex;
-  this.time_in = json.time_in;
-  this.time_out = json.time_out;
-  this.track = json.track;
-  this.value = json.value;
-  this.value_html = json.value_html;
-  this.creator = json.creator;
-  var that = this;
-  this.firstFrameStr = "http://pad.ma/" + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_in);
-  this.firstFrame128 = this.firstFrameStr + ".128.jpg";
-  this.firstFrame320 = this.firstFrameStr + ".320.jpg";
-  this.lastFrameStr = "http://pad.ma/" + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_out);
-  this.lastFrame128 = this.lastFrameStr + ".128.jpg";
-  this.lastFrame320 = this.lastFrameStr + ".320.jpg";
-  }
-
-padmaLayer.prototype.getThumbElem = function() {
-  var that = this;
-  var e = $('<div />');
-  e.addClass('matchedLayer');
-  e.attr("id", that.id);
-  var img = $('<img />');
-  if (that.firstFrame128) {
-    img.attr("src", that.firstFrame128);
-    e.append(img);
-    }
-  e.attr("data-track", that.track);
-  e.attr("data-value", that.value_html);
-  e.mouseover(function() {
-    var html = '';    
-    html += padmaVideos[that.video].title;
-    html += "<br />";
-    html += $(this).attr('data-track');
-    html += '<br />';
-    html += $(this).attr('data-value');
-    $('#resultDetails').html(html);
-    }).mouseout(function() {
-    $('#resultDetails').html('');
-    });
-  return e;
-  }
-
-var padmaVideo = function(json, index) {
-  this.id = json.id;
-  this.index = index;
-  this.title = json.title; 
-  this.poster = "http://pad.ma/" + this.id + "/poster.jpg";
-  this.timeline = "http://pad.ma/" + this.id + "/timeline.png";
-  this.wrapperHtml = this.getWrapperHtml()
-  this.init();
-  this.dataLoaded = false;
-  }
-
-padmaVideo.prototype.getWrapperHtml = function() {
-  var that = this;
-  var videoElem = $('<div />');
-  videoElem.attr('id', that.id);
-  videoElem.addClass("videoWrapper");
-  var html = '';
-  html += "<div class='videoTitle'>";
-  html += this.title;
-  html += "</div>";
-  html += "<div class='videoPoster'>";
-  html += "<img src='" + this.poster + "' />";
-  html += "</div>";
-  html += "<div class='videoTimeline' data-index='" + this.index + "'>";
-  html += "<img src='" + this.timeline + "' class='timeline' />";
-  html += "</div>";
-  html += "<div class='videoMeta'>";
-  html += "Loading...";
-  html += "</div>";
-  videoElem.html(html);
-  return videoElem;
-  }
-
-padmaVideo.prototype.init = function() {
-  var that = this;
-  $('#videos').append(that.wrapperHtml);
-  this.loadData();
-  }
-
-padmaVideo.prototype.metaLoaded = function() {
-  var that = this;
-  $('#' + that.id + ' .videoMeta').html(that.meta.description_html);
-  }
-
-padmaVideo.prototype.layersLoaded = function() {
-  this.dataLoaded = true;
-  $('#bottomBar').fadeIn();
-/*  $('.videoTimeline').mousemove(function(e) {
-    var offset = $(this).offset();
-    var x = e.pageX - offset.left;
-    var y = e.pageY - offset.top;
-    var index = $(this).attr('data-id');
-    var thisVideo = padmaVideos[index];
-    });
-*/ 
- }
-
-padmaVideo.prototype.loadData = function() {
-  var that = this;
-  var metaUrl = "http://pad.ma/" + that.id + "/video.js";
-  $.getScript(metaUrl, function() {
-    that.meta = video;
-    that.metaLoaded();
-    var layersUrl = "http://pad.ma/" + that.id + "/layers.js";
-    $.getScript(layersUrl, function() {
-      that.layers = layers;
-      that.layersLoaded();
-      });
-    });
-  }
 
 var padmaVideos = [];
 function initList(json) {
   var videos = json.videos;
-  for (v in videos) {
+  for (var v=0; v < videos.length; v++) {
     var thisVideo = new padmaVideo(videos[v], v);
     padmaVideos.push(thisVideo);
     }
@@ -210,3 +48,4 @@ String.prototype.pad = function(pad, len, dir) {
     return str;
 }
 
+

static/js/padmaLists.js

@@ -1,3 +1,4 @@
+var BASE_URL = "http://padma.local/"
 var padmaLists = []
 
 $(document).ready(function() {
@@ -8,7 +9,7 @@ var padmaList = function(json) {
   this.listId = json.listId;
   this.description = json.description;
   this.iconId = json.iconId;
-  this.iconPath = "http://pad.ma/" + this.iconId + "/poster.jpg";
+  this.iconPath = BASE_URL + this.iconId + "/poster.jpg";
   this.title = json.title;
   this.html = this.getHtml();
   this.init();

templates/list.html

@@ -1,8 +1,12 @@
 {% extends 'base.html' %}
 {% block head %}
+<title>Pad.ma: Play</title>
 <link rel="stylesheet" type="text/css" href="/static/css/padmaList.css" />
 <script type="text/javascript" src="/static/js/padmaApi.js"></script>
 <script type="text/javascript" src="/static/js/padmaList.js"></script>
+<script type="text/javascript" src="/static/js/padmaVideo.js"></script>
+<script type="text/javascript" src="/static/js/padmaLayer.js"></script>
+<script type="text/javascript" src="/static/js/padmaSearch.js"></script>
 <script type="text/javascript">
 var listId = "{{ listId|escapejs }}"
 </script>
@@ -10,7 +14,7 @@ var listId = "{{ listId|escapejs }}"
 {% endblock %}
 
 {% block body %}
-<div id="wrapper">
+<!--
   <div id="resultWrapper">
     <div id="results">
     
@@ -18,6 +22,41 @@ var listId = "{{ listId|escapejs }}"
     <div id="resultDetails">
     </div>
   </div>
+-->
+<script type="text/html" id="tmpl_layerResult">
+    <div class="layerTitle">
+      <span class="layerTrack"><%= layer.track %> </span>: 
+      <span class="layerValue"><%= layer.shortValue %>... </span>
+      <span class="layerInOut"><%= layer.time_in_npt %> - <%= layer.time_out_npt %></span>
+      <span class="layerBtns">
+        <a href="#" class="addToClipBin" title="Add this clip to playlist.">&gt;&gt;</a> 
+      </span>
+    </div>
+</script>
+
+<script type="text/html" id="tmpl_clip">
+ <div class="clipMain">
+    <div class="clipImages">
+      <div class="clipInImage clipImage">
+        <img src="<%= layer.firstFrame128 %>" title="In: <%= layer.value %>" /><br />
+        <%= layer.time_in_npt %>
+      </div>
+      <div class="clipOutImage clipImage">
+        <img src="<%= layer.lastFrame128 %>" title="Out: <%= layer.value %>" /><br />
+        <%= layer.time_out_npt %>
+      </div>
+    </div>
+      <div class="layerControls">
+        foo bar
+      </div>
+    </div>
+  </div>
+</script>
+<div id="wrapper">
+    <div id="playBin">
+
+    </div>
+
     <div id="videos">
 
     </div>
@@ -26,7 +65,9 @@ var listId = "{{ listId|escapejs }}"
   </div>
 <div id="bottomBar">
   <div id="searchDiv">
+    <form id="searchForm" action="" method="">
       Search: <input type="text" id="search" />
+    </form>
   </div>
 </div>