player open in new window, etc.

2010-07-15 05:32:35 +05:30 · 2010-07-15 05:32:35 +05:30 · 02ed3d75f8
commit 02ed3d75f8
parent 30b4f1aeee
9 changed files with 129 additions and 20 deletions
--- a/lists/views.py
+++ b/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)
--- a/settings.py
+++ b/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__)

--- a/static/css/padmaList.css
+++ b/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;
--- a/static/js/padmaApi.js
+++ b/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);
--- a/static/js/padmaLayer.js
+++ b/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.videoSrc320 = this.padmaVideo.meta.urls['320'] + "?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=" + 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);
 }
--- a/static/js/padmaList.js
+++ b/static/js/padmaList.js
@ -1,6 +1,7 @@

 $(document).ready(function() {
  var apiUrl = "/list/videos?listId=" + listId;
+//  console.log(apiUrl);
  callPadma(apiUrl, initList);
  prevSearchTerms = [];
 });
--- a/static/js/padmaSearch.js
+++ b/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);
--- a/static/js/padmaVideo.js
+++ b/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.timeline = PADMA_BASE_URL + this.id + "/timeline.png";
+  this.poster = PADMA_BASE_URL + "/" + this.id + "/poster.jpg";
+  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++) {
--- a/templates/list.html
+++ b/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>