added README, rationalized working tree
This commit is contained in:
sanj
parent
cf29a2561a
commit
59ab7ffcfb
20
README
Normal file
20
README
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
padmaEssay is a set of JS files you can include at the top of your page to convert links to clips in pad.ma into "embeds"
|
||||||
|
|
||||||
|
The links need to be in the format of: http://pad.ma/Vdy5qr4j/00:26:31.000-00:28:38.000 <-- link can be got by going to pad.ma (or a padma instance), going to a video, selecting an in and out-point and chosing Link To This Selection from the Actions Menu.
|
||||||
|
|
||||||
|
You need to include the following files at the top of your page:
|
||||||
|
jquery.js
|
||||||
|
jquery.tooltip.js
|
||||||
|
jquery.tooltip.css
|
||||||
|
padma.layers.js
|
||||||
|
padma.links.js
|
||||||
|
utils.js
|
||||||
|
test.js
|
||||||
|
|
||||||
|
To tweak some configuration options, look at the top of padma.layers.js
|
||||||
|
|
||||||
|
If you want to write your own custom function to handle the embedding, look at test.js, and re-write the setupPadmaLink function.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
147
text.css
147
text.css
|
|
@ -1,147 +0,0 @@
|
||||||
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;
|
|
||||||
}
|
|
||||||
166
text.js
166
text.js
|
|
@ -1,166 +0,0 @@
|
||||||
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":
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user