player open in new window, etc.

This commit is contained in:
sanj 2010-07-15 05:32:35 +05:30
parent 30b4f1aeee
commit 02ed3d75f8
9 changed files with 129 additions and 20 deletions

View File

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

View File

@ -10,7 +10,7 @@ LOGGING_INTERCEPT_REDIRECTS = True
LOGGING_LOG_SQL = True LOGGING_LOG_SQL = True
LOGGING_SHOW_METRICS = True LOGGING_SHOW_METRICS = True
LOGGING_OUTPUT_ENABLED = 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__) PROJECT_PATH = os.path.dirname(__file__)

View File

@ -3,6 +3,12 @@ html, body {
font-size: 12px; 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 { #wrapper, #floatWrapper {
width: 100%; width: 100%;
} }
@ -119,6 +125,26 @@ html, body {
float: left; 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 { .clipImage {
float: left; float: left;
width: 128px; width: 128px;
@ -128,16 +154,27 @@ html, body {
margin-right: 6px; margin-right: 6px;
height: 100px; height: 100px;
} }
.clipVideo {
width: 128px;
}
#searchDiv { #searchDiv {
margin-right: 20px; margin-right: 20px;
text-align: right;
} }
#search { #search {
width: 75%; width: 60%;
height: 16px; height: 16px;
} }
#resultStats {
margin-left: 20px;
color: #fff;
font-weight: bold;
font-size: 10px;
}
#resultWrapper { #resultWrapper {
position: fixed; position: fixed;
top: 0px; top: 0px;

View File

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

View File

@ -4,22 +4,28 @@ var padmaLayer = function(json, video) {
this.padmaVideo = video; this.padmaVideo = video;
this.time_in = json.time_in; this.time_in = json.time_in;
this.time_out = json.time_out; 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_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.track = json.track;
this.value = json.value; this.value = json.value;
this.shortValue = this.value.substring(0,100); //FIXME this.shortValue = this.value.substring(0,100); //FIXME
this.value_html = json.value_html; this.value_html = json.value_html;
this.creator = json.creator; this.creator = json.creator;
var that = this; 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.firstFrame128 = this.firstFrameStr + ".128.jpg";
this.firstFrame320 = this.firstFrameStr + ".320.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.lastFrame128 = this.lastFrameStr + ".128.jpg";
this.lastFrame320 = this.lastFrameStr + ".320.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.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); // this.videoSrc320 = PADMA_BASE_URL + "v/320/" + padmaVideos[this.video].id + ".ogv?t=" + ms2npt(that.time_in);
} }

View File

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

View File

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

View File

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

View File

@ -7,8 +7,9 @@
<script type="text/javascript" src="/static/js/padmaVideo.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/padmaLayer.js"></script>
<script type="text/javascript" src="/static/js/padmaSearch.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"> <script type="text/javascript">
var listId = "{{ listId|escapejs }}" var listId = "{{ listId|escapejs }}";
</script> </script>
{% endblock %} {% endblock %}
@ -41,17 +42,74 @@ var listId = "{{ listId|escapejs }}"
<img src="<%= layer.firstFrame128 %>" title="In: <%= layer.value %>" /><br /> <img src="<%= layer.firstFrame128 %>" title="In: <%= layer.value %>" /><br />
<%= layer.time_in_npt %> <%= layer.time_in_npt %>
</div> </div>
<div class="clipImage">
<video class="clipVideo" src="<%= layer.videoSrc128 %>" poster="<%= layer.middleFrame128 %>" controls="controls">
um, browser?
</video>
</div>
<div class="clipOutImage clipImage"> <div class="clipOutImage clipImage">
<img src="<%= layer.lastFrame128 %>" title="Out: <%= layer.value %>" /><br /> <img src="<%= layer.lastFrame128 %>" title="Out: <%= layer.value %>" /><br />
<%= layer.time_out_npt %> <%= layer.time_out_npt %>
</div> </div>
</div> </div>
<div class="layerControls"> <div class="layerControls">
foo bar
</div> </div>
<div class="clipView layerControl">
-->
</div>
</div>
</div>
<div class="removeClip">
X
</div> </div>
</div> </div>
</script> </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="wrapper">
<div id="playBin"> <div id="playBin">
@ -66,7 +124,7 @@ var listId = "{{ listId|escapejs }}"
<div id="bottomBar"> <div id="bottomBar">
<div id="searchDiv"> <div id="searchDiv">
<form id="searchForm" action="" method=""> <form id="searchForm" action="" method="">
Search: <input type="text" id="search" /> Search: <input type="text" id="search" /><span id="resultStats"></span>
</form> </form>
</div> </div>
</div> </div>