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")
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)

View File

@ -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__)

View File

@ -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;

View File

@ -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);

View File

@ -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);
}

View File

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

View File

@ -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);

View File

@ -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++) {

View File

@ -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>