mozilla
/
popcorn-js
зеркало из https://github.com/mozilla/popcorn-js.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge commit 'bea611bdf327d4015a470d69cc5d' into 0.3

This commit is contained in:
Anna Sobiepanek 2011-01-24 17:25:55 -05:00
Родитель 6b4c6288fc bea611bdf3
Коммит 02481e6a0a
4 изменённых файлов: 315 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

73
plugins/lastfm/popcorn.lastfm.html Normal file
Просмотреть файл

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>Popcorn LastFM Plug-in Demo</title>
<script src="../../popcorn.js"></script>
<script src="popcorn.lastfm.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var p = Popcorn('#video')
.play()
.lastfm({
start: 5, // seconds
end: 15, // seconds
artist: 'yacht',
target: 'lastfmdiv'
} )
.lastfm({
start: 10, // seconds
end: 20, // seconds
artist: 'the beatles',
target: 'lastfmdiv'
} )
.lastfm({
start: 15, // seconds
end: 30, // seconds
artist: 'sdfsdfsdfdsddfsdfsdfsddfsf',
target: 'lastfmdiv'
} )
.lastfm({
start: 20, // seconds
end: 45, // seconds
artist: 'Coldplay',
target: 'lastfmdiv'
} )
.lastfm({
start: 25, // seconds
end: 40, // seconds
artist: 'yacht',
target: 'lastfmdiv'
} )
}, false);
</script>
</head>
<body>
<h1 id="qunit-header">Popcorn LastFM Plug-in Demo</h1>
<p> Artist information for 'yacht' will appear at 5 seconds and disappear at 15 seconds.</p>
<p> Artist information for 'The Beatles' will appear at 10 seconds and disappear at 20 seconds.</p>
<p> 'Unknown Artist' will appear at 15 seconds and disappear at 30 seconds.</p>
<p> Artist information for 'Coldplay' will appear at 20 seconds and disappear at 45 seconds.</p>
<p> Artist information for 'yacht' will appear at 25 seconds and disappear at 40 seconds.</p>
<div>
<video id='video'
controls preload='none'
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="lastfmdiv" width="50%" height="50%">
</div>
</body>
</html>

118
plugins/lastfm/popcorn.lastfm.js Normal file
Просмотреть файл

@ -0,0 +1,118 @@
// PLUGIN: LASTFM
var lastFMcallback;
(function (Popcorn) {
/**
* LastFM popcorn plug-in
* Appends information about a LastFM artist to an element on the page.
* Options parameter will need a start, end, target and artist.
* 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
* Artist is the name of who's LastFM information you wish to show
* Target is the id of the document element that the images are
* appended to, this target element must exist on the DOM
*
* @param {Object} options
*
* Example:
var p = Popcorn('#video')
.lastfm({
start: 5, // seconds, mandatory
end: 15, // seconds, mandatory
artist: 'yacht', // mandatory
target: 'lastfmdiv' // mandatory
} )
*
*/
Popcorn.plugin( "lastfm" , (function(){
var _artists = [];
return {
manifest: {
about:{
name: "Popcorn LastFM Plugin",
version: "0.1",
author: "Steven Weerdenburg",
website: "http://sweerdenburg.wordpress.com/"
},
options:{
start : {elem:'input', type:'text', label:'In'},
end : {elem:'input', type:'text', label:'Out'},
target : 'lastfm-container',
artist : {elem:'input', type:'text', label:'Artist'}
}
},
_setup: function( options ) {
options._container = document.createElement( 'div' );
options._container.style.display = "none";
options._container.innerHTML = "";
options.artist = options.artist.toLowerCase();
if ( document.getElementById( options.target ) ) {
document.getElementById( options.target ).appendChild( options._container );
}
if(!_artists[options.artist]) {
var loadScriptTime = (new Date).getTime();
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = "http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist="+ options.artist +"&api_key=30ac38340e8be75f9268727cb4526b3d&format=json&callback=lastFMcallback";
script.type = "text/javascript";
head.insertBefore( script, head.firstChild );
_artists[options.artist] = "Unknown Artist";
}
lastFMcallback = function(data){
if (data.artist) {
var htmlString = '<h3>'+data.artist.name+'</h3>';
htmlString += '<a href="'+data.artist.url+'" target="_blank" style="float:left;margin:0 10px 0 0;"><img src="'+ data.artist.image[2]['#text'] +'" alt=""></a>';
htmlString += '<p>'+ data.artist.bio.summary +'</p>';
htmlString += '<hr /><p><h4>Tags</h4><ul>';
Popcorn.forEach( data.artist.tags.tag, function( val, i) {
htmlString += '<li><a href="'+ val.url +'">'+ val.name +'</a></li>';
});
htmlString += '</ul></p>';
htmlString += '<hr /><p><h4>Similar</h4><ul>';
Popcorn.forEach( data.artist.similar.artist, function( val, i) {
htmlString += '<li><a href="'+ val.url +'">'+ val.name +'</a></li>';
});
htmlString += '</ul></p>';
_artists[data.artist.name.toLowerCase()] = htmlString;
}
};
},
/**
* @member LastFM
* 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 ) {
options._container.innerHTML = _artists[options.artist];
options._container.style.display = "inline";
},
/**
* @member LastFM
* 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 ) {
options._container.style.display = "none";
options._container.innerHTML = "";
}
};
})());
})( Popcorn );

45
plugins/lastfm/popcorn.lastfm.unit.html Normal file
Просмотреть файл

@ -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>
<!--
do not move - this must be called immediately prior to
popcorn-api-draft.js
-->
<script src="../../popcorn.js"></script>
<script src="../../test/jquery.js"></script>
<script src="popcorn.lastfm.js"></script>
<script src="popcorn.lastfm.unit.js"></script>
</head>
<body>
<h1 id="qunit-header">Popcorn LastFM 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"'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="lastfmdiv"></div>
</body>
</html>

79
plugins/lastfm/popcorn.lastfm.unit.js Normal file
Просмотреть файл

@ -0,0 +1,79 @@
test("Popcorn LastFM Plugin", function () {
var popped = Popcorn("#video"),
expects = 8,
count = 0,
interval,
interval2,
interval3,
lastfmdiv = document.getElementById('lastfmdiv');
expect( expects );
function plus() {
if ( ++count === expects) {
start();
}
}
stop();
ok('lastfm' in popped, "lastfm is a method of the popped instance");
plus();
equals ( lastfmdiv.innerHTML, "", "initially, there is nothing inside the lastfmdiv" );
plus();
popped.lastfm({
start: 1, // seconds
end: 4, // seconds
artist: 'yacht',
target: 'lastfmdiv'
} )
.lastfm({
start: 2.5, // seconds
end: 7, // seconds
artist: 'the beatles',
target: 'lastfmdiv'
} )
.lastfm({
start: 4.5, // seconds
end: 7, // seconds
artist: '',
target: 'lastfmdiv'
} );
interval = setInterval( function() {
if( popped.currentTime() > 1 && popped.currentTime() < 4 ) {
equals ( lastfmdiv.childElementCount, 3, "lastfmdiv now has three inner elements" );
plus();
equals (lastfmdiv.children[0].style.display , "inline", "yachtdiv is visible on the page" );
plus();
clearInterval( interval );
}
}, 1000);
interval2 = setInterval( function() {
if( popped.currentTime() > 2.5 && popped.currentTime() < 3 ) {
equals (lastfmdiv.children[0].style.display , "inline", "yachtdiv is visible on the page" );
plus();
equals (lastfmdiv.children[1].style.display , "inline", "beatlesdiv is visible on the page" );
plus();
equals (lastfmdiv.children[2].style.display , "none", "nulldiv is not visible on the page" );
plus();
clearInterval( interval2 );
}
}, 1000);
interval3 = setInterval( function() {
if( popped.currentTime() > 4.5 && popped.currentTime() < 7 ) {
equals (lastfmdiv.children[2].innerHTML , "Unknown Artist", "Artist information could not be found" );
plus();
clearInterval( interval3 );
}
}, 1000);
popped.volume(0);
popped.play();
});