зеркало из https://github.com/mozilla/popcorn-js.git
Implement Rdio Plugin, including test page and unit tests [#396]
This commit is contained in:
Christopher De Cairos
Коммит
61f65999cc
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Popcorn Rdio Plug-in Demo</title>
|
||||
<script src="../../popcorn.js"></script>
|
||||
<script src="popcorn.rdio.js"></script>
|
||||
<script>
|
||||
document.addEventListener( "DOMContentLoaded", function() {
|
||||
var p = Popcorn( "#video" )
|
||||
.volume( 0 )
|
||||
.play()
|
||||
.rdio({
|
||||
start: 2,
|
||||
end: 10,
|
||||
target: "rdiodiv",
|
||||
artist: "Erykah Badu",
|
||||
album: "Baduizm",
|
||||
type: "album"
|
||||
})
|
||||
.rdio ({
|
||||
start: 3,
|
||||
end: 10,
|
||||
target: "rdiodiv",
|
||||
artist: "Radiohead",
|
||||
album: "The Bends",
|
||||
type: "album"
|
||||
})
|
||||
.rdio ({
|
||||
start: 10,
|
||||
end: 20,
|
||||
target: "rdiodiv2",
|
||||
artist: "Jamiroquai",
|
||||
album: "Synkronized",
|
||||
type: "album"
|
||||
})
|
||||
.rdio({
|
||||
start: 20,
|
||||
end: 40,
|
||||
target: "rdiodiv3",
|
||||
person: "scottyhons",
|
||||
id: "236475",
|
||||
playlist: "Toronto Music",
|
||||
type: "playlist"
|
||||
})
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Popcorn Rdio Plug-in Demo</h1>
|
||||
<p>Album tracks from Erykah Badu's <span style='font-style:italic'>Baduizm</span> will appear at 2 seconds and disappear at 10 seconds<br />
|
||||
Album tracks from Radiohead's <span style='font-style:italic'>The Bends</span> will appear at 3 seconds and disappear at 10 seconds<br />
|
||||
Album tracks from Jamiroquai's <span style='font-style:italic'>Synkronized</span> will appear at 10 seconds and disappear at 20 seconds<br />
|
||||
Tracks from Scottyhons's playlist <span style='font-style:italic'>Toronto Music</span> will appear at 20 seconds and disappear at 40 seconds </p>
|
||||
<div>
|
||||
<video id="video"
|
||||
controls
|
||||
width="250px"
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id="mp4"
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id="ogv"
|
||||
src="../../test/trailer.ogv"
|
||||
type='video/ogg; codecs="theora, vorbis"'>
|
||||
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
|
||||
</video>
|
||||
</div>
|
||||
<div id="rdiodiv" width="50%" height="50%"></div>
|
||||
<div id="rdiodiv2" width="50%" height="50%" style="position: absolute; right: 100px; top: 50px"></div>
|
||||
<div id="rdiodiv3" width="50%" height="50%" style="position: absolute; left: 100px; top: 50px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
// Rdio Plug-in
|
||||
/**
|
||||
* Rdio popcorn plug-in
|
||||
* Appends Rdio album track listings to an element on the page.
|
||||
* Can also append a user's playlist to an element on the page.
|
||||
* Option paramter can be in two forms:
|
||||
* Options parameter will take a start, end, target, artist, album, and type or
|
||||
* Options parameter will take a start, end, target, person, id, playlist, and type
|
||||
* Start is the time that you want this plug-in to execute
|
||||
* End is the time that you want this plug-in to stop executing
|
||||
* Target is the id of the document element that the images are appended to
|
||||
* Artist is the name of who's album image will display
|
||||
* Album is the album that will display of the specified Artist
|
||||
* Person is the Rdio member who's playlist will display
|
||||
* ID is the playlist's unqiue Rdio playlist identifier
|
||||
* Playlist is the name of the playlist
|
||||
* Type specifies if the element is an album or playlist
|
||||
*
|
||||
|
||||
*
|
||||
* @param {Object} options
|
||||
*
|
||||
* Example 1:
|
||||
var p = Popcorn( "#video" )
|
||||
.rdio({
|
||||
start: 2,
|
||||
end: 10,
|
||||
target: "rdiodiv",
|
||||
artist: "Jamiroquai",
|
||||
album: "Synkronized",
|
||||
type: "album"
|
||||
})
|
||||
*
|
||||
* Example 2:
|
||||
var p = Popcorn( "#video" )
|
||||
.rdio({
|
||||
start: 10,
|
||||
end: 20,
|
||||
target: "rdiodiv",
|
||||
person: "diggywiggy",
|
||||
id: 413517,
|
||||
playlist: "sunday",
|
||||
type: "playlist"
|
||||
})
|
||||
**/
|
||||
|
||||
(function( Popcorn ) {
|
||||
var _album = {},
|
||||
_container = {},
|
||||
_target = {},
|
||||
_rdioURL = "http://www.rdio.com/api/oembed/?format=json&url=http://www.rdio.com/%23";
|
||||
|
||||
Popcorn.plugin( "rdio", (function( options ) {
|
||||
var _loadResults = function( data, options ) {
|
||||
var title = data.title,
|
||||
html = data.html;
|
||||
if ( data && title && html ) {
|
||||
_album[ options.containerid ].htmlString = "<div>" + html + "</div>";
|
||||
} else {
|
||||
if ( Popcorn.plugin.debug ) {
|
||||
throw new Error( "Did not receive data from server." );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Handle AJAX Request
|
||||
_getResults = function( options ) {
|
||||
var urlBuilder = function( type ) {
|
||||
var path = {
|
||||
playlist: function() {
|
||||
return "/people/" + ( options.person ) + "/playlists/" + options.id + "/";
|
||||
},
|
||||
album: function() {
|
||||
return "/artist/" + ( options.artist ) + "/album/";
|
||||
}
|
||||
}[ type ]();
|
||||
|
||||
return _rdioURL + path + options[ type ] + "/&callback=_loadResults";
|
||||
},
|
||||
url = urlBuilder( options.type );
|
||||
Popcorn.getJSONP( url, function( data ) {
|
||||
_loadResults( data, options );
|
||||
}, false );
|
||||
};
|
||||
|
||||
return {
|
||||
_setup: function( options ) {
|
||||
var key = options.containerid = Popcorn.guid(),
|
||||
container = _container[ key ] = document.createElement( "div" ),
|
||||
target = _target[ key ] = document.getElementById( options.target );
|
||||
if ( !target && Popcorn.plugin.debug ) {
|
||||
throw new Error( "Target container could not be found." );
|
||||
}
|
||||
container.style.display = "none";
|
||||
container.innerHTML = "";
|
||||
target.appendChild( container );
|
||||
_album[ key ] = {
|
||||
htmlString: ( options.playlist || "Unknown Source" ) || ( options.album || "Unknown Source" )
|
||||
};
|
||||
_getResults( options );
|
||||
},
|
||||
start: function( event, options ) {
|
||||
var key = options.containerid,
|
||||
container = _container[ key ];
|
||||
container.innerHTML = _album[ key ].htmlString;
|
||||
container.style.display = "inline";
|
||||
},
|
||||
end: function( event, options ) {
|
||||
container = _container[ options.containerid ];
|
||||
container.style.display = "none";
|
||||
container.innerHTML = "";
|
||||
},
|
||||
_teardown: function( options ) {
|
||||
var key = options.containerid,
|
||||
target = _target[ key ];
|
||||
if ( _album[ key ] ) {
|
||||
delete _album[ key ];
|
||||
}
|
||||
target && target.removeChild( _container[ key ] );
|
||||
delete _target[ key ];
|
||||
delete _container[ key ];
|
||||
}
|
||||
};
|
||||
})(),
|
||||
{
|
||||
manifest: {
|
||||
about: {
|
||||
name: "Popcorn Rdio Plugin",
|
||||
version: "0.1",
|
||||
author: "Denise Rigato"
|
||||
},
|
||||
options: {
|
||||
start: {
|
||||
elem: "input",
|
||||
type: "text",
|
||||
label: "In"
|
||||
},
|
||||
end: {
|
||||
elem: "input",
|
||||
type: "text",
|
||||
label: "Out"
|
||||
},
|
||||
target: "rdio",
|
||||
artist: {
|
||||
elem: "input",
|
||||
type: "text",
|
||||
label: "Artist"
|
||||
},
|
||||
album: {
|
||||
elem: "input",
|
||||
type: "text",
|
||||
label: "Album"
|
||||
},
|
||||
person: {
|
||||
elem: "input",
|
||||
type: "text",
|
||||
label: "Person"
|
||||
},
|
||||
id: {
|
||||
elem: "input",
|
||||
type: "text",
|
||||
label: "Id"
|
||||
},
|
||||
playlist: {
|
||||
elem: "input",
|
||||
type: "text",
|
||||
label: "Playlist"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}( Popcorn ));
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Popcorn API</title>
|
||||
<link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
|
||||
<script src="../../test/qunit/qunit.js"></script>
|
||||
<script src="../../popcorn.js"></script>
|
||||
<script src="../../test/jquery.js"></script>
|
||||
<script src="popcorn.rdio.js"></script>
|
||||
<script src="popcorn.rdio.unit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">Popcorn Rdio Plugin</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<video id="video"
|
||||
controls
|
||||
width="250px"
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id="mp4"
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id="ogv"
|
||||
src="../../test/trailer.ogv"
|
||||
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>
|
||||
|
||||
</video>
|
||||
<div id="rdiodiv" width="50%" height="50%"></div>
|
||||
<div id="rdiodiv2" width="50%" height="50%" style="position: absolute; right: 100px; top: 50px"></div>
|
||||
<div id="rdiodiv3" width="50%" height="50%" style="position: absolute; left: 100px; top: 50px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
test( "Popcorn Rdio Plugin", function() {
|
||||
var popped = Popcorn( "#video" ),
|
||||
expects = 12,
|
||||
count = 0,
|
||||
setupId,
|
||||
rdiodiv = document.getElementById( "rdiodiv" ),
|
||||
rdiodiv2 = document.getElementById( "rdiodiv2" ),
|
||||
rdiodiv3 = document.getElementById( "rdiodiv3" );
|
||||
|
||||
expect( expects );
|
||||
|
||||
function plus() {
|
||||
if ( ++count === expects ) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
|
||||
stop();
|
||||
|
||||
ok( "rdio" in popped, "rdio is a method of the popped instance" );
|
||||
plus();
|
||||
|
||||
equals( rdiodiv2.innerHTML, "", "initially, there is nothing inside the rdiodiv" );
|
||||
plus();
|
||||
|
||||
popped.rdio({
|
||||
start: 2,
|
||||
end: 4,
|
||||
target: "rdiodiv",
|
||||
artist: "Erykah Badu",
|
||||
album: "Baduizm",
|
||||
type: "album"
|
||||
})
|
||||
.rdio({
|
||||
start: 2,
|
||||
end: 7,
|
||||
target: "rdiodiv",
|
||||
person: "scottyhons",
|
||||
id: 236475,
|
||||
playlist: "Toronto Music",
|
||||
type: "playlist"
|
||||
})
|
||||
.rdio({
|
||||
start: 4,
|
||||
end: 7,
|
||||
target: "rdiodiv2",
|
||||
artist: "Radiohead",
|
||||
album: "some album",
|
||||
type: "album"
|
||||
})
|
||||
.rdio({
|
||||
start: 5,
|
||||
end: 8,
|
||||
target: "rdiodiv3",
|
||||
person: "",
|
||||
id: "",
|
||||
playlist: "",
|
||||
type: "playlist"
|
||||
});
|
||||
setupId = popped.getLastTrackEventId();
|
||||
popped.exec( 2, function() {
|
||||
equals( rdiodiv.childElementCount, 2, "rdiodiv now has two inner elements" );
|
||||
plus();
|
||||
equals( rdiodiv.children[ 0 ].style.display , "inline", "Erykah Badu div is visible on the page" );
|
||||
plus();
|
||||
});
|
||||
|
||||
popped.exec( 3, function() {
|
||||
equals( rdiodiv.children[ 0 ].style.display , "inline", "Erykah Badu div is still visible on the page" );
|
||||
plus();
|
||||
equals( rdiodiv.children[ 1 ].style.display , "inline", "Scottyhons div is visible on the page" );
|
||||
plus();
|
||||
equals( rdiodiv2.children[ 0 ].style.display , "none", "null div is not visible on the page" );
|
||||
plus();
|
||||
equals( rdiodiv3.children[ 0 ].style.display , "none", "null div is not visible on the page" );
|
||||
plus();
|
||||
});
|
||||
|
||||
popped.exec( 5, function() {
|
||||
equals( rdiodiv2.children[ 0 ].innerHTML , "Unknown Source", "Artist information could not be found" );
|
||||
plus();
|
||||
equals( rdiodiv3.children[ 0 ].innerHTML , "Unknown Source", "Playlist information could not be found" );
|
||||
plus();
|
||||
|
||||
popped.pause().removeTrackEvent( setupId );
|
||||
ok( !rdiodiv3.children[ 0 ], "removed rdio was properly destroyed" );
|
||||
plus();
|
||||
});
|
||||
|
||||
// empty track events should be safe
|
||||
popped.rdio({});
|
||||
// debug should log errors on empty track events
|
||||
Popcorn.plugin.debug = true;
|
||||
try {
|
||||
popped.rdio({});
|
||||
} catch( e ) {
|
||||
ok( true, "empty event was caught by debug" );
|
||||
plus();
|
||||
}
|
||||
|
||||
popped.volume( 0 ).play();
|
||||
});
|
||||
Загрузка…
Ссылка в новой задаче