Browse Source

Modifications based on code review by cadecairos

master
Ari Bader-Natal 10 years ago
parent
commit
599f81e633
  1. 18
      popcorn.etherpad-playback.html
  2. 143
      popcorn.etherpad-playback.js
  3. 26
      popcorn.etherpad-playback.unit.html
  4. 28
      popcorn.etherpad-playback.unit.js

18
popcorn.etherpad-playback.html

@ -2,12 +2,12 @@
<html>
<head>
<title>Popcorn Etherpad-playback plug-in demo</title>
<script src="../../popcorn.js"></script>
<script src="popcorn.etherpad-playback.js"></script>
<script>
document.addEventListener( "DOMContentLoaded", function() {
var p = Popcorn( "#video" ).play();
var p = Popcorn( "#video" ).play();
for (var i=1; i<=73; i++) {
p.etherpad_playback({
start: i/3,
@ -24,22 +24,22 @@
<h1 id="qunit-header">Popcorn Etherpad-playback plug-in demo</h1>
<p> This plugin renders the contents of an existing Etherpad-Lite document at a specified point in its revision history. This is particularly useful for syncing the character-by-character edits in a document with the timeline of a screencast. (Note that this plugin does not embed an editable document, but the content of a previously-edited document.)</p>
<div>
<video id="video"
controls
<video id="video"
controls
width="250px"
poster="../../test/poster.png">
poster="../../test/poster.png">
<source id="mp4"
src="../../test/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>
type='video/mp4; codecs="avc1, mp4a"'>
<source id="ogv"
src="../../test/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>
type='video/ogg; codecs="theora, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</video>
</div>
<div id="etherpaddiv"> </div>
</body>

143
popcorn.etherpad-playback.js

@ -3,34 +3,34 @@
var etherpadcallback;
(function ( Popcorn ) {
(function( Popcorn ) {
/**
* Etherpad-playback Popcorn plug-in
* Etherpad-playback Popcorn plug-in
* Displays the contents of an Etherpad document in the target DOM element specified by the user.
* Etherpad automatically provides continuous version control, and this plugin allows access to any past revision of the document.
* -start is the point (in seconds) in the video timeline that you want the document contents rendered.
* -end is the time that you want the document contents removed.
* -start is the point (in seconds) in the video timeline that you want the document contents rendered.
* -end is the time that you want the document contents removed.
* -target is the id of the target DOM element in which the document contents will be added (must already exist in the DOM)
* -padId is the document's padId on the host Etherpad Lite server
* -hostName (optional, defaults to 'http://beta.etherpad.org') is the Etherpad Lite server accessed (Include port if necessary)
* -apiKey (optional, defaults to 'EtherpadFTW') is the API key for the specified Etherpad Lite server.
* -padId is the document's padId on the host Etherpad Lite server
* -hostName (optional, defaults to "http://beta.etherpad.org") is the Etherpad Lite server accessed (Include port if necessary)
* -apiKey (optional, defaults to "EtherpadFTW") is the API key for the specified Etherpad Lite server.
* -revNum (optional, defaults to most recent revision) is the revision number of the document to display.
* @param {Object} options
*
*
* Example:
var p = Popcorn("#video")
.etherpad_playback({
start: 5, // seconds
end: 15, // seconds
padId: "popcornjs-test",
padId: "popcornjs-test",
target: "etherpaddiv"
} )
})
*
*/
Popcorn.plugin( "etherpad_playback" , {
manifest: {
about:{
name: "Popcorn Etherpad-Playback Plugin",
@ -40,116 +40,115 @@ var etherpadcallback;
},
options:{
start: {
elem: "input",
type: "text",
elem: "input",
type: "text",
label: "In"
},
end: {
elem: "input",
type: "text",
elem: "input",
type: "text",
label: "Out"
},
padId: {
elem: "input",
type: "text",
elem: "input",
type: "text",
label: "Pad Id"
},
hostName : {
elem: "input",
type: "url",
elem: "input",
type: "url",
label: "Host"
},
revNum: {
elem: "input",
type: "text",
elem: "input",
type: "text",
label: "Revision"
},
apiKey: {
elem: "input",
type: "text",
elem: "input",
type: "text",
label: "API Key"
},
target: "etherpad-container"
}
},
/**
* @member etherpad_playback
* The setup function will get all of the needed
* items in place before the start function is called.
* This includes getting data from the Etherpad server.
* If the data is not received and processed before
* @member etherpad_playback
* The setup function will get all of the needed
* items in place before the start function is called.
* This includes getting data from the Etherpad server.
* If the data is not received and processed before
* start is called, it will not do anything
*/
_setup : function( options ) {
var _text, _guid = Popcorn.guid();
options.hostName = options.hostName || 'beta.etherpad.org';
options.apiKey = options.apiKey || 'EtherpadFTW';
_setup: function( options ) {
var _text, _guid = Popcorn.guid();
options.hostName = options.hostName || "beta.etherpad.org";
options.apiKey = options.apiKey || "EtherpadFTW";
options.revNum = options.revNum || null;
// global callback function with a unique id
// function gets the needed information from etherpad
// and stores it by appending values to the options object
window[ "etherpadcallback" + _guid ] = function ( data ) {
window[ "etherpadcallback" + _guid ] = function( data ) {
var link = document.createElement( "a" );
link.setAttribute( "href", "//" + options.hostName + '/p/' + options.padId + "/timeslider" );
link.setAttribute( "href", "//" + options.hostName + "/p/" + options.padId + "/timeslider" );
link.setAttribute( "target", "_blank" );
link.setAttribute( "class", "etherpad-link" );
link.innerHTML = options.title || options.padId;
// add the title of the article to the link
options._link = link;
// get the content of the pad
var desc = document.createElement( "p" );
desc.setAttribute( "class", "etherpad-text" );
try {
if (data.code == 0) {
if ( data.code === 0 ) {
var d = data.data;
desc.innerHTML = d.html;
} else {
Popcorn.errors ( data.message );
Popcorn.errors( data.message );
}
} catch (e) {
console.log(e);
} catch ( e ) {
console.log( e );
}
options._desc = desc;
options._fired = true;
};
if ( options.padId ) {
var optionalRevInfo = (options.revNum) ? "&rev="+options.revNum : "";
var optionalRevInfo = ( options.revNum ) ? "&rev=" + options.revNum : "";
var scriptUrl = "//" + options.hostName + "/api/1/getHTML?apikey=" + options.apiKey + "&padID=" + options.padId + optionalRevInfo + "&jsonp=etherpadcallback" + _guid;
Popcorn.getScript(scriptUrl);
Popcorn.getScript( scriptUrl );
} else if ( Popcorn.plugin.debug ) {
Popcorn.errors ( "Etherpad-playback plugin needs a 'padId'" );
Popcorn.errors( "Etherpad-playback plugin needs a \"padId\"" );
}
},
/**
* @member etherpad_playback
* The start function will be executed when the currentTime
* of the video reaches the start time provided by the
* @member etherpad_playback
* The start function will be executed when the currentTime
* of the video reaches the start time provided by the
* options variable
*/
start: function( event, options ){
start: function( event, options ) {
// dont do anything if the information didn't come back from pad
var isReady = function () {
var isReady = function() {
if ( !options._fired ) {
setTimeout( function () {
setTimeout(function() {
isReady();
}, 13);
} else {
var link = options._link;
var desc = options._desc;
var targ = options.target;
var link = options._link,
desc = options._desc,
targ = options.target;
if ( link && desc ) {
if ( document.getElementById( targ ) ) {
document.getElementById( targ ).innerHTML = "";
@ -160,17 +159,17 @@ var etherpadcallback;
}
}
};
isReady();
},
/**
* @member etherpad_playback
* The end function will be executed when the currentTime
* of the video reaches the end time provided by the
* @member etherpad_playback
* The end function will be executed when the currentTime
* of the video reaches the end time provided by the
* options variable
*/
end: function( event, options ){
// ensure that the data was actually added to the
end: function( event, options ) {
// ensure that the data was actually added to the
// DOM before removal
if ( options._added ) {
document.getElementById( options.target ).removeChild( options._link );
@ -178,7 +177,7 @@ var etherpadcallback;
}
},
_teardown: function( options ){
_teardown: function( options ) {
if ( options._added ) {
options._link.parentNode && document.getElementById( options.target ).removeChild( options._link );
@ -188,4 +187,4 @@ var etherpadcallback;
}
});
})( Popcorn );
})( Popcorn );

26
popcorn.etherpad-playback.unit.html

@ -4,11 +4,11 @@
<title>Popcorn API</title>
<link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
<script src="../../test/qunit/qunit.js"></script>
<!--
do not move - this must be called immediately prior to
<!--
do not move - this must be called immediately prior to
popcorn-api-draft.js
-->
<script src="../../popcorn.js"></script>
<script src="popcorn.etherpad-playback.js"></script>
@ -21,27 +21,27 @@
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"> </div>
<video id="video"
controls
<video id="video"
controls
width= "250px"
poster="../../test/poster.png">
poster="../../test/poster.png">
<source id="mp4"
src="../../test/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>
type='video/mp4; codecs="avc1, mp4a"'>
<source id="ogv"
src="../../test/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>
type='video/ogg; codecs="theora, vorbis"'>
<source id='webm'
src="../../test/trailer.webm"
type='video/webm; codecs="vp8, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="etherpaddiv"></div>
</video>
<div id="etherpaddiv"></div>
</body>
</html>

28
popcorn.etherpad-playback.unit.js

@ -1,32 +1,32 @@
test( "Popcorn Etherpad Plugin", function() {
var popped = Popcorn( "#video" ),
expects = 13,
expects = 13,
count = 0,
theArticle = document.getElementById( "etherpaddiv" );
expect( expects );
function plus() {
if ( ++count === expects ) {
start();
}
}
stop();
ok( "etherpad_playback" in popped, "etherpad_playback is a method of the popped instance" );
plus();
equals( theArticle.innerHTML, "", "initially, there is nothing in the etherpaddiv" );
plus();
popped.etherpad_playback({
start: 1,
end: 3,
padId: "popcornjs-test",
title: "this is the document",
revNum: 12,
revNum: 12,
target: "etherpaddiv"
});
@ -35,12 +35,12 @@ test( "Popcorn Etherpad Plugin", function() {
end: 5,
padId: "popcornjs-test",
target: "etherpaddiv",
revNum: 25,
revNum: 25,
numberofwords: 43
})
popped.volume( 0 ).play();
popped.exec( 2, function() {
notEqual( theArticle.innerHTML, "", "etherpaddiv now contains information" );
plus();
@ -52,12 +52,12 @@ test( "Popcorn Etherpad Plugin", function() {
equals( theArticle.children[ 1 ].innerHTML.split( " " ).length -1, 4, "etherpaddiv contains 4 words" );
plus();
});
popped.exec( 3, function() {
equals( theArticle.innerHTML, "", "etherpaddiv was cleared properly" );
plus();
});
popped.exec( 4, function() {
notEqual( theArticle.innerHTML, "", "etherpaddiv now contains information" );
plus();

Loading…
Cancel
Save