sanj
14 years ago
3 changed files with 20 additions and 313 deletions
@ -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. |
|||
|
|||
|
|||
|
|||
|
|||
@ -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; |
|||
} |
|||
@ -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