From 02ed3d75f87d66ce3b5d3d36ae43c5e0c2f4d1fc Mon Sep 17 00:00:00 2001 From: sanj Date: Thu, 15 Jul 2010 05:32:35 +0530 Subject: [PATCH] player open in new window, etc. --- lists/views.py | 6 ++-- settings.py | 2 +- static/css/padmaList.css | 41 +++++++++++++++++++++++-- static/js/padmaApi.js | 2 +- static/js/padmaLayer.js | 16 ++++++---- static/js/padmaList.js | 1 + static/js/padmaSearch.js | 6 ++-- static/js/padmaVideo.js | 11 ++++--- templates/list.html | 64 ++++++++++++++++++++++++++++++++++++++-- 9 files changed, 129 insertions(+), 20 deletions(-) diff --git a/lists/views.py b/lists/views.py index 2b01e51..2d88d1d 100644 --- 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) diff --git a/settings.py b/settings.py index 6d164de..b0eb157 100644 --- 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__) diff --git a/static/css/padmaList.css b/static/css/padmaList.css index b797930..5631727 100644 --- 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; diff --git a/static/js/padmaApi.js b/static/js/padmaApi.js index d4847ed..431119f 100644 --- 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); diff --git a/static/js/padmaLayer.js b/static/js/padmaLayer.js index 2e47200..9758118 100644 --- 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_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); } diff --git a/static/js/padmaList.js b/static/js/padmaList.js index 353ec3f..ee13796 100644 --- 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 = []; }); diff --git a/static/js/padmaSearch.js b/static/js/padmaSearch.js index be7df03..43c6a4b 100644 --- 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); diff --git a/static/js/padmaVideo.js b/static/js/padmaVideo.js index 2359892..351582d 100644 --- 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++) { diff --git a/templates/list.html b/templates/list.html index fa797e6..389b874 100644 --- a/templates/list.html +++ b/templates/list.html @@ -7,8 +7,9 @@ + {% endblock %} @@ -41,17 +42,74 @@ var listId = "{{ listId|escapejs }}"
<%= layer.time_in_npt %> +
+ + + +

<%= layer.time_out_npt %>
- foo bar +
+
+ --> +
+
+ X +
+ +
@@ -66,7 +124,7 @@ var listId = "{{ listId|escapejs }}"
- Search: + Search: