player open in new window, etc.

lists/views.py

@@ -32,12 +32,14 @@ def fetchSrt(request):
     return HttpResponse("{'error': True}", mimetype="application/javascript")
 
 def index(request):
-  return render_to_response("index.html")
+  return render_to_response("index.html", {
+    'padma_url': PADMA_URL
+  })
 
 def listDetail(request):
   if request.GET:
     rDict = {
-      'listId': request.GET['id'] },
+      'listId': request.GET['id'],
       'padma_url': PADMA_URL,
     }
     return render_to_response("list.html", rDict)

settings.py

@@ -10,7 +10,7 @@ LOGGING_INTERCEPT_REDIRECTS = True
 LOGGING_LOG_SQL = True
 LOGGING_SHOW_METRICS = True
 LOGGING_OUTPUT_ENABLED = True
-PADMA_URL = "http://padma.local"
+PADMA_URL = "http://padma.local" #defined without a trailing slash.
 
 PROJECT_PATH = os.path.dirname(__file__)
 

static/css/padmaList.css

@@ -3,6 +3,12 @@ html, body {
   font-size: 12px;
 }
 
+body {
+  background-image: -moz-linear-gradient(left top, #666, #ccc, #333);
+  background-image: -webkit-gradient(radial, 45px 45px 45deg, circle cover,
+				 #666 0%, #ccc 100%, #333 95%);
+}
+
 #wrapper, #floatWrapper {
   width: 100%;
   }
@@ -119,6 +125,26 @@ html, body {
   float: left;
 }
 
+.layerControl {
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.layerControl:hover {
+  color: yellow;
+}
+
+.removeClip {
+  font-size: 12px;
+  font-weight: bold;
+  color: red;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  cursor: pointer;
+}
+
 .clipImage {
   float: left;
   width: 128px;
@@ -128,16 +154,27 @@ html, body {
   margin-right: 6px;
   height: 100px;
 }
+
+.clipVideo {
+  width: 128px;
+}
+
 #searchDiv {
   margin-right: 20px;
-  text-align: right;
   }
 
 #search {
-  width: 75%;
+  width: 60%;
   height: 16px;
   }
 
+#resultStats {
+  margin-left: 20px;
+  color: #fff;
+  font-weight: bold;
+  font-size: 10px; 
+}
+
 #resultWrapper {
   position: fixed;
   top: 0px;

static/js/padmaApi.js

@@ -47,7 +47,7 @@ get html of template with tmpl("foo", json)
 //  window.PADMA = new padmaApi();
   
   function callPadma(api, callback, extra_params) {
-    var local_json_url = "/jPadma?url=" + PADMA_BASE_URL;
+    var local_json_url = "/jPadma/?url=" + PADMA_BASE_URL;
     var url = local_json_url + api;
     $.getJSON(url, function(json) {    
       callback(json, extra_params);

static/js/padmaLayer.js

@@ -4,22 +4,28 @@ var padmaLayer = function(json, video) {
   this.padmaVideo = video;
   this.time_in = json.time_in;
   this.time_out = json.time_out;
+  this.time_center = parseInt((this.time_in + this.time_out) / 2); 
   this.time_in_npt = ms2npt(this.time_in);
   this.time_out_npt = ms2npt(this.time_out);  
+  this.time_center_npt = ms2npt(this.time_center);
   this.track = json.track;
   this.value = json.value;
   this.shortValue = this.value.substring(0,100); //FIXME
   this.value_html = json.value_html;
   this.creator = json.creator;
   var that = this;
-  this.firstFrameStr = PADMA_BASE_URL + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_in);
+  this.downloadUrl = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/download/" + this.time_in_npt + "-" + this.time_out_npt + ".ogv";
+  this.firstFrameStr = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/frame/" + ms2npt(that.time_in);
   this.firstFrame128 = this.firstFrameStr + ".128.jpg";
   this.firstFrame320 = this.firstFrameStr + ".320.jpg";
-  this.lastFrameStr = PADMA_BASE_URL + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_out);
+  this.middleFrameStr = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/frame/" + ms2npt(that.time_center);
+  this.middleFrame128 = this.middleFrameStr + ".128.jpg";
+  this.middleFrame320 = this.middleFrameStr + ".320.jpg";
+  this.lastFrameStr = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/frame/" + ms2npt(that.time_out);
   this.lastFrame128 = this.lastFrameStr + ".128.jpg";
   this.lastFrame320 = this.lastFrameStr + ".320.jpg";
-  this.videoSrc128 = this.padmaVideo.meta.urls['128'] + "?t=" + ms2npt(that.time_in);
+  this.videoSrc128 = this.padmaVideo.meta.urls['128'] + "?t=" + this.time_in_npt;
-  this.videoSrc320 = this.padmaVideo.meta.urls['320'] + "?t=" + ms2npt(that.time_in);
+  this.videoSrc320 = this.padmaVideo.meta.urls['320'] + "?t=" + this.time_in_npt;
 //  this.videoSrc128 = PADMA_BASE_URL + "v/128/" + padmaVideos[this.video].id + ".ogv?t=" + ms2npt(that.time_in);
 //  this.videoSrc320 = PADMA_BASE_URL + "v/320/" + padmaVideos[this.video].id + ".ogv?t=" + ms2npt(that.time_in);
 }

static/js/padmaList.js

@@ -1,6 +1,7 @@
 
 $(document).ready(function() {
   var apiUrl = "/list/videos?listId=" + listId;
+//  console.log(apiUrl);
   callPadma(apiUrl, initList);
   prevSearchTerms = [];
 });

static/js/padmaSearch.js

@@ -1,9 +1,9 @@
 $(document).ready(function() {
   $('#searchForm').submit(function(e) {
     e.preventDefault();
+    $('.searchResults').html('');
     var val = $.trim($('#search').val());
     if (val == '') {
-      $('.searchResults').html('');
       return;
     }
     doSearch(val);
@@ -47,6 +47,8 @@ $('.addToClipBin').live("click", function(e) {
 
 function doSearch(word) {
   var matchingLayers = findMatchingLayers(word);
+  var noOfResults = matchingLayers.length;
+  $('#resultStats').html(noOfResults + " layers found");
   for (var l=0; l < matchingLayers.length; l++) {
     if (matchingLayers[l]) {
       var layer = matchingLayers[l];
@@ -80,7 +82,7 @@ function findMatchingLayers(word) {
       for (var l=0; l < layers.length; l++) {
         if (layers[l].value) {
           var val = layers[l].value;
-          if (val.indexOf(word) != -1) {
+          if (val.toLowerCase().indexOf(word.toLowerCase()) != -1) {
             var matchedLayer = padmaVideos[v].layers[l];
 //            var matchedLayer = new padmaLayer(layers[l], v)
             matchedLayers.push(matchedLayer);

static/js/padmaVideo.js

@@ -3,8 +3,8 @@ var padmaVideo = function(json, index) {
   this.index = index;
   this.title = json.title;
   this.jq = {};
-  this.poster = PADMA_BASE_URL + this.id + "/poster.jpg";
+  this.poster = PADMA_BASE_URL + "/" + this.id + "/poster.jpg";
-  this.timeline = PADMA_BASE_URL + this.id + "/timeline.png";
+  this.timeline = PADMA_BASE_URL + "/" + this.id + "/timeline.png";
   this.wrapperHtml = this.getWrapperHtml()
   this.init();
   this.dataLoaded = false;
@@ -51,6 +51,8 @@ padmaVideo.prototype.init = function() {
   $('#videos').append(that.wrapperHtml);
   this.jq = $('#' + that.id);
   this.loadData();
+//  console.log("hi");
+  return;
 }
 
 padmaVideo.prototype.getLayerById = function(id) {
@@ -84,11 +86,12 @@ padmaVideo.prototype.layersLoaded = function() {
 
 padmaVideo.prototype.loadData = function() {
   var that = this;
-  var metaUrl = PADMA_BASE_URL + that.id + "/video.js";
+  var metaUrl = PADMA_BASE_URL + "/" + that.id + "/video.js";
+//  console.log(metaUrl);
   $.getScript(metaUrl, function() {
     that.meta = video;
     that.metaLoaded();
-    var layersUrl = PADMA_BASE_URL + that.id + "/layers.js";
+    var layersUrl = PADMA_BASE_URL + "/" + that.id + "/layers.js";
     $.getScript(layersUrl, function() {
       var theseLayers = layers;
       for (var i=0; i < theseLayers.length; i++) {

templates/list.html

@@ -7,8 +7,9 @@
 <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" src="/static/js/liveFuncs.js"></script>
 <script type="text/javascript">
-var listId = "{{ listId|escapejs }}"
+var listId = "{{ listId|escapejs }}";
 </script>
 
 {% endblock %}
@@ -41,17 +42,74 @@ var listId = "{{ listId|escapejs }}"
         <img src="<%= layer.firstFrame128 %>" title="In: <%= layer.value %>" /><br />
         <%= layer.time_in_npt %>
       </div>
+      <div class="clipImage">
+            
+        <video class="clipVideo" src="<%= layer.videoSrc128 %>" poster="<%= layer.middleFrame128 %>" controls="controls">
+          um, browser?
+        </video>
+                
+      </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 class="clipView layerControl">
+          -->
+        </div>
+      </div>
+    </div>
+  <div class="removeClip">
+    X
   </div>
   </div>
 </script>
+<script type="text/html" id="tmpl_playerWindow">
+<html>
+  <head>
+    <style type="text/css">
+#wrapper {
+  width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+video {
+  width: 640px;
+  margin-left: 30px;
+}
+
+#text {
+  margin-top: 10px;
+  font-family: Arial, Verdana, sans-serif;
+  color: #363636;
+}
+
+#track {
+  font-weight: bold;
+}
+    </style>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="video">
+        <video src="<%= layer.videoSrc320 %>" poster="<%= layer.firstFrame320 %>" controls="controls">browser? open video? huh?</video>
+      </div>
+      <div id="text">
+        <div id="track">
+          <%= layer.track%>:
+        </div>
+        <div id="value">
+          <%= layer.value_html %>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+</script>
+
 <div id="wrapper">
     <div id="playBin">
 
@@ -66,7 +124,7 @@ var listId = "{{ listId|escapejs }}"
 <div id="bottomBar">
   <div id="searchDiv">
     <form id="searchForm" action="" method="">
-      Search: <input type="text" id="search" />
+      Search: <input type="text" id="search" /><span id="resultStats"></span>
     </form>
   </div>
 </div>