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