From 59ab7ffcfba046d15adf9d175e821d0c9549fc8a Mon Sep 17 00:00:00 2001 From: sanj Date: Tue, 23 Nov 2010 18:02:10 +0100 Subject: [PATCH] added README, rationalized working tree --- README | 20 +++++++ text.css | 147 ------------------------------------------------ text.js | 166 ------------------------------------------------------- 3 files changed, 20 insertions(+), 313 deletions(-) create mode 100644 README delete mode 100644 text.css delete mode 100644 text.js diff --git a/README b/README new file mode 100644 index 0000000..afb0642 --- /dev/null +++ b/README @@ -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. + + + + diff --git a/text.css b/text.css deleted file mode 100644 index a3b57af..0000000 --- a/text.css +++ /dev/null @@ -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; -} diff --git a/text.js b/text.js deleted file mode 100644 index a78e055..0000000 --- a/text.js +++ /dev/null @@ -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 = $('
') - .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); -}