added license, some optimizations

This commit is contained in:
sanj 2010-11-14 07:27:18 +05:30
parent d986588f0e
commit 829f1a31b3
5 changed files with 379 additions and 13 deletions

14
COPYING Normal file
View File

@ -0,0 +1,14 @@
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.

View File

@ -8,7 +8,9 @@ var padmaVideo = function(videoId) {
this.hasLayersData = false;
this.hasAllData = false;
this.video = {};
this.layers = {};
this.layers = {};
var that = this;
padmaVideo.cache.push(that);
}
padmaVideo.prototype.getAllData = function(callback, data) {
@ -55,20 +57,31 @@ padmaVideo.prototype.noop = function() {
}
padmaVideo.prototype.getVideoData = function(callback, data) {
var that = this;
$.getScript(that.videoUrl, function() {
that.video = video;
that.hasVideoData = true;
if (this.hasVideoData) {
callback(that, data);
});
} else {
$.getScript(that.videoUrl, function() {
that.video = video;
that.hasVideoData = true;
callback(that, data);
});
}
}
padmaVideo.prototype.getLayersData = function() {
padmaVideo.prototype.getLayersData = function(callback, data) {
var that = this;
$.getScript(layersUrl, function() {
that.layers = layers;
that.hasLayersData = true;
});
if (this.hasLayersData) {
callback(that, data);
} else {
$.getScript(that.layersUrl, function() {
that.layers = layers;
that.hasLayersData = true;
callback(that, data);
});
}
}
padmaVideo.prototype.getLayerById = function(id) {
@ -124,3 +137,16 @@ function filterLayersByContributors(layers, users) {
}
return matchedLayers;
}
padmaVideo.cache = [];
padmaVideo.getFromCache = function(videoId) {
var cache = padmaVideo.cache;
for (var i=0; i<cache.length; i++) {
var v = cache[i];
if (v.id === videoId) {
return v;
}
}
return false;
}

View File

@ -8,15 +8,27 @@
if ($(this).attr("href") === undefined) {
return;
}
var href = $(this).attr("href");
if (href.indexOf('#') != -1) {
return;
}
$(this).attr("target", "_blank");
var link = $(this).attr("href");
var link = href;
if (link.indexOf(PADMA_URL) != -1) {
$(that).addClass('padmaLink');
var linkData = parsePadmaUrl(link, PADMA_URL);
if (linkData) {
//Don't fetch data twice if video id already exists
var videoId = linkData.videoId;
var cacheVideo = padmaVideo.getFromCache(videoId);
if (cacheVideo) {
var videoObj = cacheVideo;
} else {
var videoObj = new padmaVideo(videoId);
}
// console.log(linkData);
var v = new padmaVideo(linkData.videoId);
v.getAllData(setupPadmaLink, {'linkData': linkData, 'jq': that});
videoObj.getVideoData(setupPadmaLink, {'linkData': linkData, 'jq': that});
// v.getVideoData(setupSidenotes, {'linkData': linkData, 'jq': that});
// getPadmaData(linkData, that, {});
}

147
text.css Normal file
View File

@ -0,0 +1,147 @@
body {
background: #F0EBE2;
color: #363636;
font-family: "DejaVu Sans", Arial, Verdana, sans-serif;
}
.padmaWrapper {
width: 100%;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
/* margin-left: 10%; */
border: 1px solid #333;
background: #000;
padding: 4px;
}
#essay {
width: 60%;
}
.para {
padding: 8px;
border-left: 1px solid #000;
}
h1 {
font-size: 220%;
font-family: "Times New Roman", Times, serif;
}
#loading {
position: fixed;
right: 0px;
bottom: 40%;
top: 40%;
width: 320px;
height: 20%;
font-size: 24px;
font-weight: bold;
color: #fff;
background: #898989;
opacity: 0;
z-index: 1000;
}
#padmaSidebar {
width: 320px;
height: 100%;
margin-right: 10px;
position: fixed;
top: 0px;
right: 0px;
background-color: rgb(187,187,87);
background-color: rgba(187,187,87,1);
bottom: 0px;
}
#aboutTxt {
color: #363636;
padding: 15px;
height: 90%;
margin-top: 10%;
overflow-y: scroll;
}
#padmaSidebarRelative {
position: relative;
}
.padmaVideo {
}
.annotationText {
color: #363636;
margin-top: 8px;
margin-bottom: 8px;
font-size: 13px;
height: 300px;
overflow-y: auto;
width: 90%;
margin-left: auto;
margin-right: auto;
/* padding: 8px;
margin-right: 2px; */
overflow-y: auto;
}
.padmaViewer {
position: relative;
width: 320px;
height: 100%;
padding: 6px;
color: #fff;
}
.padmaViewer video {
width: 320px;
margin-top: 10px;
margin-left: -6px;
}
.padmaLink {
text-decoration: none;
font-style: italic;
font-size: 90%;
color: #666;
}
.padmaLink:hover {
color: red;
}
.padmaViewer .close {
position: absolute;
top: 2px;
left: 2px;
width: 15px;
height: 15px;
font-size: 12px;
color: #f00;
cursor: pointer;
}
.viewOnPadma {
margin-top: 6px;
width: 100%;
text-align: center;
}
.viewOnPadma a {
color: #666;
text-decoration: none;
font-weight: bold;
border: 2px outset #666;
padding: 2px;
}
.viewOnPadma a:hover {
color: #fff;
}
.viewOnPadma a:active {
border: 2px inset #666;
}

167
text.js Normal file
View File

@ -0,0 +1,167 @@
var padmaContainer;
$(function() {
padmaContainer = $('#padmaSidebar');
padmaContainer.data("currentVideo", false);
var docWidth = $(document).width();
var essayWidth = docWidth - 360;
$('#essay').css("width", essayWidth);
});
function setupPadmaLink(videoObj, data) {
var $a = $(data.jq);
// $a.data("isDisplayed", false);
var linkData = data.linkData;
if (linkData.type != 'tcRange') {
return false;
}
//FIXME: put this as a variable, option somewhere?
var $container = padmaContainer;
videoObj.currentLayers = [];
switch (linkData.type) {
case "tcRange":
console.log("hi");
var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
// console.log(mid_frame_npt);
var thumbUrl = videoObj.getFrame(mid_frame_npt);
break;
default:
var frame_npt = ms2npt(videoObj.video.poster_frame);
var thumbUrl = videoObj.getFrame(frame_npt);
}
//FIXME: Html may need to be conditional on linkData.type, probably put html in switch case above.
var html = tmpl("tmpl_tooltip", {'video': videoObj, 'thumbUrl': thumbUrl, 'linkData': linkData});
// $a.attr("title", title);
$a.tooltip({
bodyHandler: function() {
return html;
},
showURL: false
});
$a.click(function(e) {
// sidebarAnimateIn();
e.preventDefault();
var currentVideo = padmaContainer.data("currentVideo");
if (currentVideo == videoObj) {
/*
if (!isSidebarVisible()) {
sidebarAnimateIn();
}
*/
return;
}
if (currentVideo) {
cleanupVideo(currentVideo);
}
$container.data("currentVideo", videoObj);
if (!isSidebarVisible()) {
sidebarAnimateIn();
}
videoObj.getLayersData(displayLayer, {'linkData': linkData});
$('#loading').fadeTo(0.5);
function displayLayer(videoObj, data) {
$('#loading').fadeOut();
var linkData = data.linkData;
var html = tmpl("tmpl_sidebar", {'video': videoObj, 'linkData': linkData});
$('#padmaSidebarWrapper').html(html);
$('#aboutTxt').hide();
//FIXME: should be a better way to deal with displaying default layer.
var currentLayers = videoObj.getLayersAtTimecode(npt2ms(linkData.tcIn));
var transcripts = filterLayersByTracks(currentLayers, ['transcript']);
// console.log(transcripts);
if (transcripts.length > 0) {
var annotHtml = transcripts[0].value_html;
} else {
var annotHtml = '';
}
$('.annotationText').html(annotHtml);
/*
var closeBtn = $('<div />')
.addClass("close")
.click(function() {
sidebarAnimateOut();
})
.text("x")
.appendTo('.padmaViewer');
*/
var videoElem = $('video');
// var videoObj = video;
videoElem.bind("play", function() {
var that = this
videoObj.interval = setInterval(function() {
var currentTime = parseInt(that.currentTime * 1000);
var time_ms = currentTime + npt2ms(linkData.tcIn);
var allLayers = videoObj.getLayersAtTimecode(time_ms);
if (videoObj.currentLayers == allLayers) {
return;
}
// GLOBAL_FOO = allLayers;
var transcript = filterLayersByTracks(allLayers, ['transcript'])[0].value_html;
if (transcript != $('.annotationText').html()) {
$('.annotationText').html(transcript);
}
}, 150);
});
videoElem.bind("pause", function() {
clearInterval(videoObj.interval);
});
videoElem.bind("ended", function() {
clearInterval(videoObj.interval);
// cleanupVideo(videoObj);
sidebarAnimateOut();
});
}
function sidebarAnimateIn() {
/*
$container.animate({'width': '400px'}, function() {
$(this).animate({'backgroundColor': '#000000'});
});
var docWidth = $(document).width();
var newWidth = docWidth - 440;
$('#essay').animate({'width': newWidth + "px"});
*/
// $container.show();
$('#aboutTxt').fadeOut();
}
function sidebarAnimateOut() {
$container.find('.padmaViewer').empty();
$('#aboutTxt').show();
/*
$container.animate({'width': '0px'}, function() {
$(this).animate({'backgroundColor': '#ffffff'});
});
$('#essay').animate({'width': '100%'});
*/
}
function isSidebarVisible() {
if (padmaContainer.width() > 0) {
return true;
} else {
return false;
}
}
});
}
//All functions that destroy the video must call this to ensure clean-ups are handled
//FIXME: actually handle the cleanups.
// parameter is a padmaVideo object.
function cleanupVideo(videoObj) {
$('video')[0].pause();
clearInterval(videoObj.interval);
$('.padmaViewer').remove();
padmaContainer.data("currentVideo", false);
}