Permalink
Browse files

[#1256] Get Popcorn.soundcloud working with the HTMLSoundcloudAudioEl…

…ement wrapper
  • Loading branch information...
1 parent 61c1c05 commit c69cd4675500a59b60dcf91ac3da4ed2b911b250 @humphd humphd committed Aug 9, 2012
@@ -10,16 +10,11 @@
</style>
<script src="../../popcorn.js"></script>
<script src="../../modules/player/popcorn.player.js"></script>
+ <script src="../../wrappers/common/popcorn._MediaElementProto.js"></script>
+ <script src="../../wrappers/soundcloud/popcorn.HTMLSoundCloudAudioElement.js"></script>
<script type="text/javascript" src="popcorn.soundcloud.js"></script>
<!-- Plugins for demo purposes -->
<script src="../../plugins/footnote/popcorn.footnote.js"></script>
- <script src="../../plugins/flickr/popcorn.flickr.js"></script>
- <script src="../../plugins/attribution/popcorn.attribution.js"></script>
- <script src="../../plugins/webpage/popcorn.webpage.js"></script>
- <script src="../../plugins/googlefeed/popcorn.googlefeed.js"></script>
- <script src="../../plugins/image/popcorn.image.js"></script>
- <script src="../../plugins/subtitle/popcorn.subtitle.js"></script>
- <script src="../../plugins/twitter/popcorn.twitter.js"></script>
<script type="text/javascript">
document.addEventListener( "DOMContentLoaded", function() {
@@ -83,56 +78,13 @@
});
- popcorn.subtitle({
- start: 5,
- end: 15,
- text: "This is overlaid on top of the audio visualization. You can hightlight it!",
- display: "inline",
- language: "en"
- })
- .footnote({
+ popcorn.footnote({
start: 5,
end: 40,
text: "The song is 'Flickermood', by Forss",
target: "footnotediv"
- })
- .flickr({
- start: 20,
- end: 40,
- tags: "georgia",
- numberofimages: "8",
- target: "flickrdiv"
- })
- .twitter({
- start: 20,
- end: 45,
- title: "Oil Spill",
- src: "#oilspill",
- target: "twitterdiv"
- })
- .attribution({
- start: 5,
- end: 60,
- nameofwork: "Flickermood",
- nameofworkurl:"http://soundcloud.com/forss/flickermood",
- copyrightholder: "Eric Wahlforss",
- target: "attribdiv"
- })
- .googlefeed({
- start: 0,
- end: 15,
- target: "feeddiv",
- url: "http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml",
- title: "Planet Feed",
- orientation: "Vertical"
- })
- .image({
- start: 5,
- end: 15,
- href: "http://www.drumbeat.org/",
- src: "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
- target: "imagediv"
});
+
}, false);
</script>
</head>
@@ -156,24 +108,6 @@
<div id="footnotediv" width="50%" height="50%">
<strong>Footnote Area</strong><br />
</div>
- <div id="attribdiv" width="50%" height="50%">
- <strong>Attributions Area</strong><br />
- </div>
- <div id="flickrdiv" width="50%" height="50%">
- <strong>Flickr Area</strong><br />
- </div>
- <div id="twitterdiv" width="50%" height="50%">
- <strong>Twitter Area</strong><br />
- </div>
- <div id="imagediv" width="50%" height="50%">
- <strong>Image Area</strong><br />
- </div>
- <div id="feeddiv" width="50%" height="50%">
- <strong>Google Feed Area</strong><br />
- </div>
- <div id="webpagediv" width="100px" height="50px">
- <strong>Web Page Area</strong><br />
- </div>
</div>
</body>
</html>
@@ -1,241 +1,28 @@
-(function() {
+(function( window, Popcorn ) {
- var scriptLoaded = false,
- loading = false;
Popcorn.player( "soundcloud", {
_canPlayType: function( nodeName, url ) {
+ return ( typeof url === "string" &&
+ Popcorn.HTMLSoundCloudAudioElement.canPlayType( url ) &&
+ nodeName.toLowerCase() !== "audio" );
+ }
+ });
- return (/(?:http:\/\/www\.|http:\/\/|www\.|\.|^)(soundcloud)/).test( url ) && nodeName.toLowerCase() !== "video";
- },
- _setup: function( options ) {
-
- var media = this,
- container = document.createElement( "iframe" ),
- lastVolume = 1,
- currentTime = 0,
- paused = true,
- realPaused = true,
- widget,
- duration = 0,
- muted = false,
- playerQueue = Popcorn.player.playerQueue();
-
- options._container = container;
- media.style.visibility = "hidden";
-
- media.play = function() {
-
- paused = false;
- playerQueue.add(function() {
-
- if ( realPaused ) {
-
- widget && widget.play();
- } else {
- playerQueue.next();
- }
- });
- };
-
- media.pause = function() {
-
- paused = true;
-
- playerQueue.add(function() {
-
- if ( !realPaused ) {
-
- widget && widget.pause();
- } else {
- playerQueue.next();
- }
- });
- };
-
- // getter and setter for muted property, multiply volume by 100 as that is the scale soundcloud works on
- Object.defineProperties( media, {
- muted: {
- set: function( val ) {
- if ( val ) {
- widget && widget.getVolume(function( data ) {
- lastVolume = data / 100;
- });
- widget && widget.setVolume( 0 );
- muted = true;
- } else {
- widget && widget.setVolume( lastVolume * 100 );
- muted = false;
- }
- media.dispatchEvent( "volumechange" );
- },
- get: function() {
- return muted;
- }
- },
- volume: {
- set: function( val ) {
- widget && widget.setVolume( val * 100 );
- lastVolume = val ;
- media.dispatchEvent( "volumechange" );
- },
- get: function() {
- return muted ? 0 : lastVolume;
- }
- },
- currentTime: {
- set: function( val ) {
- currentTime = val;
- widget && widget.seekTo( val * 1000 );
- media.dispatchEvent( "seeked" );
- media.dispatchEvent( "timeupdate" );
- },
- get: function() {
- return currentTime;
- }
- },
- duration: {
- get: function() {
- return duration;
- }
- },
- paused: {
- get: function() {
- return paused;
- }
- }
- });
- // called when the SoundCloud api script has loaded
- function scriptReady() {
- scriptLoaded = true;
-
- SC.initialize({
- client_id: "PRaNFlda6Bhf5utPjUsptg"
- });
-
- SC.get( "/resolve", {
- url: media.src
- }, function( data ) {
- media.width = media.style.width ? "" + media.offsetWidth : "560";
- media.height = media.style.height ? "" + media.offsetHeight : "315";
- // TODO: There are quite a few options here that we should pass on to the user
- container.scrolling = "no";
- container.frameborder = "no";
- container.id = "soundcloud-" + Popcorn.guid();
- container.src = "http://w.soundcloud.com/player/?url=" + data.uri +
- "&show_artwork=false" +
- "&buying=false" +
- "&liking=false" +
- "&sharing=false";
-
- container.width = "100%";
- container.height = "100%";
-
- options.loadListener = function( e ) {
- options.widget = widget = SC.Widget( container.id );
- // setup all of our listeners
- widget.bind(SC.Widget.Events.FINISH, function() {
- media.pause();
-
- media.dispatchEvent( "ended" );
- });
-
- widget.bind(SC.Widget.Events.PLAY_PROGRESS, function( data ) {
-
- currentTime = data.currentPosition / 1000;
- media.dispatchEvent( "timeupdate" );
- });
-
- widget.bind(SC.Widget.Events.PLAY, function( data ) {
-
- paused = realPaused = false;
-
- media.dispatchEvent( "play" );
- media.dispatchEvent( "playing" );
- media.currentTime = currentTime;
-
- playerQueue.next();
- });
-
- widget.bind(SC.Widget.Events.PAUSE, function( data ) {
-
- paused = realPaused = true;
- media.dispatchEvent( "pause" );
-
- playerQueue.next();
- });
- widget.bind(SC.Widget.Events.READY, function( data ) {
- widget.getDuration(function( data ) {
-
- duration = data / 1000;
-
- media.style.visibility = "visible";
- media.dispatchEvent( "durationchange" );
- // update the readyState after we have the duration
- media.readyState = 4;
- media.dispatchEvent( "readystatechange" );
- media.dispatchEvent( "loadedmetadata" );
- media.dispatchEvent( "loadeddata" );
- media.dispatchEvent( "canplaythrough" );
- media.dispatchEvent( "load" );
- !media.paused && media.play();
- });
- widget.getVolume(function( data ) {
- lastVolume = data / 100;
- });
- });
- };
-
- container.addEventListener( "load", options.loadListener, false );
- media.appendChild( container );
- });
- }
-
- // load the SoundCloud API script if it doesn't exist
- function loadScript() {
- if ( !loading ) {
- loading = true;
- Popcorn.getScript( "http://w.soundcloud.com/player/api.js", function() {
- Popcorn.getScript( "http://connect.soundcloud.com/sdk.js", function() {
- scriptReady();
- });
- });
- } else {
- (function isReady() {
- setTimeout(function() {
- if ( !scriptLoaded ) {
- isReady();
- } else {
- scriptReady();
- }
- }, 100 );
- })();
- }
- }
+ Popcorn.soundcloud = function( container, url, options ) {
+ if ( typeof console !== "undefined" && console.warn ) {
+ console.warn( "Deprecated player 'soundcloud'. Please use Popcorn.HTMLSoundCloudAudioElement directly." );
+ }
- if ( !scriptLoaded ) {
- loadScript();
- } else {
- scriptReady();
- }
- },
- _teardown: function( options ) {
- var widget = options.widget,
- events = SC.Widget.Events,
- container = options._container,
- parentContainer = container.parentNode;
+ var media = Popcorn.HTMLSoundCloudAudioElement( container ),
+ popcorn = Popcorn( media, options );
- options.destroyed = true;
+ // Set the src "soon" but return popcorn instance first, so
+ // the caller can get get error events.
+ setTimeout( function() {
+ media.src = url;
+ }, 0 );
- // if the widget never got setup, remove the containers load listener and return
- if ( !widget ) {
- container.removeEventListener( "load", options.loadEventListener, false );
- return;
- }
+ return popcorn;
+ };
- // remove all bound soundcloud listeners
- for ( var prop in events ) {
- widget && widget.unbind( events[ prop ] );
- }
- }
- });
-})();
+}( window, Popcorn ));
Oops, something went wrong. Retry.

0 comments on commit c69cd46

Please sign in to comment.