soundcloud-custom-player-rails 1.0.0

data/vendor/assets/javascripts/soundcloud.player.api.js

@@ -0,0 +1,140 @@
+/*
+*   JavaScript interface for the SoundCloud Player widget
+*   Author: Matas Petrikas, matas@soundcloud.com
+*   Copyright (c) 2009  SoundCloud Ltd.
+*   Licensed under the MIT license:
+*   http://www.opensource.org/licenses/mit-license.php
+*/
+(function(){
+  var isIE = (/msie/i).test(navigator.userAgent) && !(/opera/i).test(navigator.userAgent);
+  
+  var soundcloud = window.soundcloud = {
+    version: "0.1",
+    debug: false,
+    _listeners: [],
+    // re-dispatches widget events in the DOM, using JS library support, the events also should bubble up the DOM
+    _redispatch: function(eventType, flashId, data) {
+      var playerNode,
+          lsnrs  = this._listeners[eventType] || [],
+          // construct the custom eventType  e.g. 'soundcloud:onPlayerReady'
+          customEventType = 'soundcloud:' + eventType;
+
+      try{
+        // find the flash player, might throw an exception
+        playerNode = this.getPlayer(flashId);
+      }catch(e){
+        if(this.debug && window.console){
+          console.error('unable to dispatch widget event ' + eventType + ' for the widget id ' + flashId, data, e);
+        }
+        return;
+      }
+      // re-dispatch SoundCloud events up in the DOM
+      if(window.jQuery){
+        // if jQuery is available, trigger the custom event
+        jQuery(playerNode).trigger(customEventType, [data]);
+      }else if(window.Prototype){
+        // if Prototype.js is available, fire the custom event
+        $(playerNode).fire(customEventType, data);
+      }else{
+        // TODO add more JS libraries that support custom DOM events
+      }
+      // if there are any listeners registered to this event, trigger them all
+      for(var i = 0, l = lsnrs.length; i < l; i += 1) {
+        lsnrs[i].apply(playerNode, [playerNode, data]);
+      }
+      // log the events in debug mode
+      if(this.debug && window.console){
+        console.log(customEventType, eventType, flashId, data);
+      }
+
+    },
+    // you can add multiple listeners to a certain event
+    // e.g. soundcloud.addEventListener('onPlayerReady', myFunctionOne);
+    //      soundcloud.addEventListener('onPlayerReady', myFunctionTwo);
+    addEventListener: function(eventType, callback) {
+      if(!this._listeners[eventType]){
+        this._listeners[eventType] = [];
+      }
+      this._listeners[eventType].push(callback);
+    },
+    // you can also remove the function listener if e.g you want to trigger it only once
+    // soundcloud.removeEventListener('onMediaPlay', myFunctionOne);
+    removeEventListener: function(eventType, callback) {
+      var lsnrs = this._listeners[eventType] || [];
+      for(var i = 0, l = lsnrs.length; i < l; i += 1) {
+        if(lsnrs[i] === callback){
+          lsnrs.splice(i, 1);
+        }
+      }
+    },
+    // get widget node based on its id (if object tag) or name (if embed tag)
+    // if you're using SWFObject or other dynamic Flash generators, please make sure that you set the id parameter
+    //  only if the DOM has an id/name it's possible to call player's methods.
+    // Important!: because of the bug in Opera browser, the Flash can't get its own id
+    // so the generator should set it additionally through flashvars parameter 'object_id'
+    getPlayer: function(id){
+      var flash;
+      try{
+        if(!id){
+          throw "The SoundCloud Widget DOM object needs an id atribute, please refer to SoundCloud Widget API documentation.";
+        }
+        flash = isIE ? window[id] : document[id];
+        if(flash){
+          if(flash.api_getFlashId){
+            return flash;
+          }else{
+            throw "The SoundCloud Widget External Interface is not accessible. Check that allowscriptaccess is set to 'always' in embed code";
+          }
+        }else{
+          throw "The SoundCloud Widget with an id " + id + " couldn't be found";
+        }
+      }catch(e){
+        if (console && console.error) {
+         console.error(e);
+        }
+        throw e;
+      }
+    },
+    // fired when widget has loaded its data and is ready to accept calls from outside
+    // the widget will call these functions only if in it's flashvars there's a parameter enable_api=true
+    // @flashId: the widget id, basically the Flash node should be accessible to JS with soundcloud.getPlayer(flashId)
+    // @data: an object containing .mediaUri (eg. 'http://api.soundcloud.com/tracks/49931') .mediaId (e.g. '4532')
+    // in buffering events data contains also .percent = (e.g. '99')
+    onPlayerReady: function(flashId, data) {
+      this._redispatch('onPlayerReady', flashId, data);
+    },
+    // fired when widget starts playing current track (fired only once per track)
+    onMediaStart : function(flashId, data) {
+      this._redispatch('onMediaStart', flashId, data);
+    },
+    // fired when the track/playlist has finished playing
+    onMediaEnd : function(flashId, data) {
+      this._redispatch('onMediaEnd', flashId, data);
+    },
+    // fired when widget starts playing current track (fired on every play, seek)
+    onMediaPlay : function(flashId, data) {
+      this._redispatch('onMediaPlay', flashId, data);
+    },
+    // fired when track was paused
+    onMediaPause : function(flashId, data) {
+      this._redispatch('onMediaPause', flashId, data);
+    },
+    // fired when the widget is still buffering, means you can't seek in the track fully yet
+    onMediaBuffering : function(flashId, data) {
+      this._redispatch('onMediaBuffering', flashId, data);
+    },
+    // fired when the user seeks in the track
+    onMediaSeek : function(flashId, data) {
+      this._redispatch('onMediaSeek', flashId, data);
+    },
+    // fired when the widget is done buffering and the whole track length is seekable
+    onMediaDoneBuffering : function(flashId, data) {
+      this._redispatch('onMediaDoneBuffering', flashId, data);
+    },
+    // fired when the widget can't get the requested data from the server (the resource is removed, hidden, etc.)
+    onPlayerError : function(flashId, data) {
+      this._redispatch('onPlayerError', flashId, data);
+    }
+  };
+  
+})();

data/vendor/assets/stylesheets/sc-player-artwork/colors.css

@@ -0,0 +1,130 @@
+.sc-player {
+  font: 12px Arial, sans-serif;
+  color: #000;
+  font-size: 0.8em;
+  font-weight: bold;
+  line-height: 1.6em;
+}
+
+.sc-player a {
+  text-decoration: none;
+  color: #000;
+}
+
+/* scrubber */
+
+.sc-scrubber {
+  background-color: #e5e5e5;
+  border-top: 2px solid #000;
+  border-bottom: 2px solid #000;
+}
+
+.sc-scrubber .sc-time-span {
+  background-color: #fff;
+}
+
+.sc-scrubber .sc-time-span img {
+  background-color: #59C5C7;
+  background: -moz-linear-gradient(top, black, #96d8d9 0px, #59C5C7 90%);
+  background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #59C5C7), to(#96d8d9));
+}
+
+.sc-scrubber .sc-buffer, .sc-scrubber .sc-played {
+  background-color: #fff;
+  opacity: 0.4;
+}
+
+.sc-scrubber .sc-played {
+  background-color: #000;
+  opacity: 0.4;
+}
+
+/* controls */
+
+.sc-player .sc-controls a {
+  color: transparent;
+  background: url('sc-player-artwork/play.png');
+}
+
+.sc-player .sc-controls a:hover {
+  background: url('sc-player-artwork/play-hover.png');
+}
+
+.sc-player .sc-controls a.sc-pause {
+  background: url('sc-player-artwork/play.png');
+}
+
+.sc-player .sc-controls a.sc-pause:hover{
+  background: url('sc-player-artwork/play-hover.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause{
+  background: url('sc-player-artwork/pause.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause:hover{
+  background: url('sc-player-artwork/pause-hover.png');
+}
+
+.sc-scrubber .sc-time-indicators{
+  color: #000;
+  font-size: 0.8em;
+}
+
+/* Track listings*/
+
+.sc-player ol.sc-trackslist li, .sc-player ol.sc-trackslist a {
+  color: transparent;
+}
+
+.sc-player ol.sc-trackslist li.active, .sc-player ol.sc-trackslist li:hover {
+  background-color: #59C5C7;
+  color: #000;
+  background: -moz-linear-gradient(top, black, #96d8d9 0px, #59C5C7 90%);
+  background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #59C5C7), to(#96d8d9));
+  -moz-box-shadow: 1px 1px 4px #333;
+  -webkit-box-shadow: 1px 1px 4px #333;
+  opacity: 0.8;
+}
+
+.sc-player ol.sc-trackslist li.active a, .sc-player ol.sc-trackslist li:hover a {
+  color: #000;
+}
+
+.sc-track-duration {
+  text-align: right;
+  float: right;
+  padding: 0 5px;
+  margin-left: 5px;
+}
+
+/* Track info*/
+
+.sc-player .sc-info{
+  background: #fff;
+  opacity: 0.9;
+}
+
+.sc-player .sc-info-toggle{
+  background: #fff;
+  color: #003399;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-box-shadow: 1px 1px 4px #ccc;
+  -webkit-box-shadow: 1px 1px 4px #ccc;
+  padding: 4px;
+}
+
+.sc-player .sc-info-toggle:hover{
+  background: #003399;
+  color: #eee;
+}
+
+.sc-player .sc-info-close{
+  background: #003399;
+  color: #fff;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  padding: 2px 4px;
+  font-weight: bold;
+}

data/vendor/assets/stylesheets/sc-player-artwork/standards.css

@@ -0,0 +1,18 @@
+body {
+  font-family: 'arial', helvetica, sans serif;
+  width: 1000px;
+  margin: 0 auto;
+  background: #fff;
+  color: #000;
+}
+
+h1 {
+  border-bottom: 5px solid #000;
+  padding: 20px 0;
+}
+
+.footer {
+  border-top: 5px solid #000;
+  padding: 10px 0;
+  text-align: right;
+}

data/vendor/assets/stylesheets/sc-player-artwork/structure.css

@@ -0,0 +1,173 @@
+.sc-player{
+  width: 1000px;
+  height: 300px;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.sc-player ol, .sc-player li{
+  margin: 0;
+  padding: 0;
+  list-style-position: inside;
+}
+
+/* Artworks */
+
+.sc-player .sc-artwork-list{
+  width: 100%;
+  height: 50%;
+  background-color: transparent;
+  list-style-type: none;
+  position: relative;
+}
+
+.sc-player .sc-artwork-list li{
+  list-style-type: none;
+  float: left;
+  width: 200px;
+}
+
+.sc-player .sc-artwork-list li.active{
+  list-style-type: none;
+  display: block;
+}
+
+.sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div{
+  list-style-type: none;
+  width: 200px;
+  height: 200px;
+}
+
+/* controls */
+
+.sc-player .sc-controls{
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  top: 242px;
+  left: 0;
+
+}
+
+.sc-player .sc-controls a{
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+
+.sc-player .sc-controls a.sc-pause{
+  display: none;
+}
+
+.sc-player.playing .sc-controls a.sc-play{
+  display: none;
+}
+
+.sc-player.playing .sc-controls a.sc-pause{
+  display: block;
+}
+
+/* scrubber */
+
+.sc-scrubber {
+  position: absolute;
+  left: 50px;
+  top: 240px;
+  height: 40px;
+  width: 950px;
+  display: block;
+}
+
+.sc-scrubber .sc-time-span{
+  height: 30px;
+  margin: 5px;
+  position: relative;
+}
+
+.sc-scrubber .sc-time-span img {
+  height: 30px;
+  width: 940px;
+}
+
+.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{
+  height: 30px;
+  position: absolute;
+  top: 0;
+}
+
+.sc-scrubber .sc-time-indicators{
+  position: absolute;
+  right: 0;
+  top: -30px;
+}
+
+/* tracks */
+
+/* Track listings*/
+
+.sc-player ol.sc-trackslist{
+  position: absolute;
+  float: left;
+  width: 100%;
+  top: 0;
+}
+
+.sc-player ol.sc-trackslist li{
+  float: left;
+  width: 190px;
+  height: 60px;
+  cursor: pointer;
+  margin: 0px;
+  padding: 150px 5px 5px 5px;
+  list-style: none;
+}
+
+/* Track info*/
+
+.sc-player .sc-info{
+  position: absolute;
+  top: 10px;
+  left: -5000px;
+  width : 400px;
+  padding: 5px;
+  height: 200px;
+  z-index: 500;
+  margin-left: -200px;
+}
+
+.sc-player .sc-info.active{
+  left: 50%;
+  top: 12%;
+}
+
+
+.sc-player .sc-info-toggle{
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: none;
+}
+
+.sc-player .sc-info-toggle.active{
+  left: -5000px;
+}
+
+.sc-player .sc-info-close{
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
+
+/* utilities */
+
+.sc-player .hidden {
+  display: none;
+}
+
+.sc-player-engine-container{
+  width: 1px;
+  height: 1px;
+  position: fixed;
+  top: 2px;
+  left: 2px;
+}