robut-rdio 0.1.0 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -45,6 +45,22 @@ h2 {
45
45
  visibility: hidden;
46
46
  }
47
47
 
48
+ #player_state {
49
+ float: left;
50
+ vertical-align: middle;
51
+ padding-top: 5px;
52
+ padding-right: 20px;
53
+ }
54
+
55
+ #current_track {
56
+ min-height: 66px;
57
+ }
58
+
59
+ #current_track_name {
60
+ padding-top: 6px;
61
+ }
62
+
63
+
48
64
  #filter {
49
65
  background: none; /* Old browsers */
50
66
 
@@ -1,5 +1,10 @@
1
1
  <!doctype html>
2
- <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
2
+ <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
3
+ <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
4
+ <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
5
+ <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
6
+ <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
7
+ <head>
3
8
  <meta charset="UTF-8">
4
9
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5
10
 
@@ -11,13 +16,17 @@
11
16
  <link rel="stylesheet" href="css/rdio.css">
12
17
  <link rel="stylesheet" href="css/style_after.css?v=2">
13
18
 
14
- <script src="js/libs/modernizr-1.7.min.js"></script>
15
- <body>
19
+ <script src="js/libs/modernizr-1.7.min.js"></script>
20
+ </head>
21
+ <body>
16
22
  <div id="apiswf"></div>
17
-
18
23
  <div id="content">
19
24
  <div id="player">
20
- <h1 id="current_track">Now Playing: </h1>
25
+ <h1 id="current_track">
26
+ <div id="player_state"><img src="images/buffering.png"/>
27
+ <img src="images/circle-play.png"/></div>
28
+ <div id="current_track_name"></div>
29
+ </h1>
21
30
  <div id="controls">
22
31
  <img id="album_art" src="images/no-album.png" />
23
32
  <div id="filter" >
@@ -39,5 +48,6 @@
39
48
  <!--[if lt IE 7 ]>
40
49
  <script src="js/libs/dd_belatedpng.js"></script>
41
50
  <script> DD_belatedPNG.fix('img, .png_bg');</script>
42
- <![endif]-->
51
+ <![endif]-->
52
+ </body>
43
53
  </html>
@@ -1,170 +1,300 @@
1
- RdioPlayer = (function () {
2
-
3
- function initPlayer (options) {
4
- // on page load use SWFObject to load the API swf into div#apiswf
5
- var flashvars = {
6
- 'playbackToken': options.token, // from token.js
7
- 'domain': options.domain, // from token.js
8
- 'listener': options.callbackName // the global name of the object that will receive callbacks from the SWF
9
- };
10
- var params = {
11
- 'allowScriptAccess': 'always'
12
- };
13
- var attributes = {};
14
- swfobject.embedSWF('http://www.rdio.com/api/swf/', // the location of the Rdio Playback API SWF
15
- options.elementId, // the ID of the element that will be replaced with the SWF
16
- 1, 1, '9.0.0', 'expressInstall.swf', flashvars, params, attributes);
17
- }
18
-
19
- var checkCommand = function (callbackObject, element) {
20
-
21
- $.ajax({
22
- url: '/command.json',
23
- dataType: 'json',
24
- success: function (data) {
25
- if (data.length > 0) {
26
-
27
- if (data[0] == "pause") {
28
- element.rdio_pause();
29
- }
30
-
31
- if (data[0] == "unpause" || data[0] == "play") {
32
- element.rdio_play();
33
- }
34
- if (data[0] == "next") {
35
- element.rdio_next();
36
- }
37
-
38
- if (data[0] == "restart") {
39
- element.rdio_previous();
40
- }
41
-
42
- if(command == "clear") {
43
- element.rdio_clearQueue();
44
- element.rdio_next(true);
45
- }
46
-
47
-
48
- }
49
- }
50
-
51
- });
52
-
53
- setTimeout(function () {
54
- checkCommand(callbackObject, element)
55
- }, 2000);
56
-
57
- }
58
-
59
- var updateQueue = function (callbackObject, element) {
60
-
61
- $.ajax({
62
- url: '/queue.json',
63
- dataType: 'json',
64
- success: function (data) {
65
- if (data.length > 0) {
66
-
67
- if (!callbackObject.playing) {
68
- element.rdio_play(data[0]);
69
- data = data.slice(1);
70
- }
71
-
72
- for (var i = 0, _length = data.length; i < _length; i++) {
73
- element.rdio_queue(data[i]);
74
- }
75
-
76
- }
77
- }
78
- });
79
-
80
- setTimeout(function () {
81
- updateQueue(callbackObject, element)
82
- }, 5000);
83
- };
84
-
85
- function createCallback(rdio, callbackName, elementId) {
86
- var callback = {};
87
-
88
- callback.ready = function () {
89
- self.ready = true;
90
- var element = document.getElementById(elementId);
91
- rdio.player = element;
92
- updateQueue(callback, element);
93
- checkCommand(callback, element);
94
- }
95
-
96
- callback.playStateChanged = function (playState) {
97
- if (playState === 1 || playState === 3) {
98
- callback.playing = true;
99
- } else {
100
- callback.playing = false;
101
- }
102
- }
103
-
104
- callback.sourceTitle = function (source) {
105
- return source.artist + " - " + source.name;
106
- }
107
-
108
- callback.sourceList = function (source) {
109
- var queue = "";
110
- for (var i = 0, _length = source.length; i < _length; i++) {
111
- queue += "<li class=\"source\">" +
112
- callback.sourceTitle(source[i]) +
113
- "</li>";
114
- }
115
- return queue;
116
- }
117
-
118
- callback.queueChanged = function (newQueue) {
119
- $('#queue').html(callback.sourceList(newQueue));
120
- if (newQueue.length > 0) {
121
- $('#queue_header').show().html('Queue (' + newQueue.length + ')');
122
- } else {
123
- $('#queue_header').hide();
124
- }
125
- }
126
-
127
- callback.playingSourceChanged = function (playingSource) {
128
- var source = []
129
- if (playingSource.tracks) {
130
- source = playingSource.tracks;
131
- } else {
132
- source = [playingSource];
133
- }
134
- $('#now_playing').html(callback.sourceList(source));
135
- $('#album_art').attr('src', playingSource.icon);
136
- }
137
-
138
- callback.playingTrackChanged = function(playingTrack, sourcePosition) {
139
- if (playingTrack) {
140
- $('#now_playing li').removeClass('playing');
141
- $('#now_playing li').eq(sourcePosition).addClass('playing');
142
- $('title').html(callback.sourceTitle(playingTrack) + " - Powered by Rdio");
143
- $('#current_track').show().html("Now Playing: " + callback.sourceTitle(playingTrack));
144
- } else {
145
- $('#current_track').hide();
146
- }
147
- }
148
-
149
- window[callbackName] = callback;
150
- return callback;
151
- }
152
-
153
- function RdioPlayer (options) {
154
- this.options = options;
155
- this.callback = createCallback(this, options.callbackName, options.elementId);
156
- initPlayer(options);
157
- }
158
-
159
- return RdioPlayer;
160
- })();
161
-
162
- $(document).ready(function () {
163
- window.rdio = new RdioPlayer({
164
- token: rdio_token,
165
- domain: rdio_domain,
166
- elementId: 'apiswf',
167
- callbackName: 'rdio_callback'
168
- });
169
- });
170
-
1
+ RdioPlayer = (function () {
2
+
3
+ var playerElement = {};
4
+
5
+ function initPlayer (options) {
6
+ // on page load use SWFObject to load the API swf into div#apiswf
7
+ var flashvars = {
8
+ 'playbackToken': options.token, // from token.js
9
+ 'domain': options.domain, // from token.js
10
+ 'listener': options.callbackName // the global name of the object that will receive callbacks from the SWF
11
+ };
12
+
13
+ var params = {
14
+ 'allowScriptAccess': 'always'
15
+ };
16
+
17
+ var attributes = {};
18
+
19
+ playerElement = options.elementId;
20
+
21
+ swfobject.embedSWF('http://www.rdio.com/api/swf/', // the location of the Rdio Playback API SWF
22
+ options.elementId, // the ID of the element that will be replaced with the SWF
23
+ 1, 1, '9.0.0', 'expressInstall.swf', flashvars, params, attributes);
24
+ }
25
+
26
+ function establishControls(rdio) {
27
+
28
+ rdio.isPlaying = function () {
29
+ return rdio.callback.playing;
30
+ }
31
+
32
+ rdio.isPaused = function () {
33
+ return !rdio.callback.playing;
34
+ }
35
+
36
+ rdio.play = function () {
37
+ rdio.player.rdio_play();
38
+ $(rdio.player).attr("playingState","playing");
39
+ }
40
+
41
+ rdio.pause = function () {
42
+ rdio.player.rdio_pause();
43
+ $(rdio.player).attr("playingState","paused");
44
+ }
45
+
46
+ rdio.toggle = function () {
47
+ if ( rdio.isPlaying() ) {
48
+ rdio.pause();
49
+ } else {
50
+ rdio.play();
51
+ }
52
+ }
53
+ }
54
+
55
+ function reporting(rdio) {
56
+
57
+ rdio.announce = function(message,announcementType) {
58
+
59
+ announcementType = typeof(announcementType) != 'undefined' ? announcementType : 'announcement';
60
+
61
+ $.ajax({
62
+ url: '/' + announcementType + '/' + message,
63
+ dataType: 'json'
64
+ });
65
+ }
66
+
67
+
68
+ }
69
+
70
+ var checkCommand = function (callbackObject, element) {
71
+
72
+ $.ajax({
73
+ url: '/command.json',
74
+ dataType: 'json',
75
+ success: function (data) {
76
+ if (data.length > 0) {
77
+ var command = data[0];
78
+ if(command == 'next_album'){
79
+ element.rdio_next(true);
80
+ }
81
+
82
+ if (command == "pause") {
83
+ element.rdio_pause();
84
+ }
85
+
86
+ if (command == "unpause" || command == "play") {
87
+ element.rdio_play();
88
+ }
89
+
90
+ if (command == "next") {
91
+ element.rdio_next();
92
+ }
93
+
94
+ if (command == "restart") {
95
+ element.rdio_previous();
96
+ }
97
+
98
+ if(command == "clear") {
99
+ element.rdio_clearQueue();
100
+ element.rdio_next(true);
101
+ }
102
+
103
+
104
+ }
105
+ }
106
+
107
+ });
108
+
109
+ setTimeout(function () {
110
+ checkCommand(callbackObject, element)
111
+ }, 2000);
112
+
113
+ }
114
+
115
+ var updateQueue = function (callbackObject, element) {
116
+
117
+ $.ajax({
118
+ url: '/queue.json',
119
+ dataType: 'json',
120
+ success: function (data) {
121
+ if (data.length > 0) {
122
+
123
+ if (!callbackObject.playing) {
124
+ element.rdio_play(data[0]);
125
+ data = data.slice(1);
126
+ }
127
+
128
+ for (var i = 0, _length = data.length; i < _length; i++) {
129
+ element.rdio_queue(data[i]);
130
+ }
131
+
132
+ }
133
+ }
134
+ });
135
+
136
+ setTimeout(function () {
137
+ updateQueue(callbackObject, element)
138
+ }, 5000);
139
+ };
140
+
141
+ function createCallback(rdio, callbackName, elementId) {
142
+ var callback = {};
143
+
144
+ callback.ready = function () {
145
+ self.ready = true;
146
+ var element = document.getElementById(elementId);
147
+ rdio.player = element;
148
+ updateQueue(callback, element);
149
+ checkCommand(callback, element);
150
+ }
151
+
152
+ callback.playStateChanged = function (playState) {
153
+ if (playState === 0 || playState === 4) {
154
+ callback.playing = false;
155
+ $('#player_state').html("<img src=\"images/circle-pause.png\">");
156
+ rdio.announce("Pausing for station identification.");
157
+ } else if (playState === 1) {
158
+ callback.playing = true;
159
+ $('#player_state').html("<img src=\"images/circle-play.png\">");
160
+ } else if (playState === 2) {
161
+ callback.playing = false;
162
+ $('#player_state').html("<img src=\"images/circle-stop.png\">");
163
+ rdio.announce("Stopping for station identification.");
164
+ } else if (playState === 3) {
165
+ callback.playing = true;
166
+ $('#player_state').html("<img src=\"images/buffering.png\">");
167
+ //rdio.announce("We'll continue this song after we go to Traffic with our in the sky Chopper Dave!")
168
+ }
169
+ }
170
+
171
+ callback.playingSomewhereElse = function() {
172
+ rdio.announce("The FCC has called our bluff and we are being taken off the air. Good night and good luck!");
173
+ $('#player_state').html("<img src=\"images/disconnected.png\">");
174
+ }
175
+
176
+ callback.sourceTitle = function (source) {
177
+ return source.artist + " - " + source.name;
178
+ }
179
+
180
+ callback.sourceList = function (source) {
181
+ var queue = "";
182
+ for (var i = 0, _length = source.length; i < _length; i++) {
183
+ queue += "<li class=\"source\">" +
184
+ callback.sourceTitle(source[i]) +
185
+ "</li>";
186
+ }
187
+ return queue;
188
+ }
189
+
190
+ callback.queueChanged = function (newQueue) {
191
+ $('#queue').html(callback.sourceList(newQueue));
192
+ if (newQueue.length > 0) {
193
+ $('#queue_header').show().html('Queue (' + newQueue.length + ')');
194
+ } else {
195
+ $('#queue_header').hide();
196
+ }
197
+ }
198
+
199
+ callback.playingSourceChanged = function (playingSource) {
200
+ var source = []
201
+ if (playingSource.tracks) {
202
+ source = playingSource.tracks;
203
+ } else {
204
+ source = [playingSource];
205
+ }
206
+ $('#now_playing').html(callback.sourceList(source));
207
+ $('#album_art').attr('src', playingSource.icon);
208
+ }
209
+
210
+ callback.playingTrackChanged = function(playingTrack, sourcePosition) {
211
+ if (playingTrack) {
212
+ var title = callback.sourceTitle(playingTrack);
213
+
214
+ // Remove the current playing highlight on the current track and move it
215
+ // to the correct track.
216
+
217
+ $('#now_playing li').removeClass('playing');
218
+ $('#now_playing li').eq(sourcePosition).addClass('playing');
219
+
220
+ // Update the browser page title
221
+
222
+ $('title').html(title + " - Powered by Rdio");
223
+
224
+ // Update the playing header
225
+ $('#current_track').show();
226
+ $('#current_track_name').html(title);
227
+
228
+ rdio.announce(encodeURIComponent(title),"now_playing");
229
+
230
+ } else {
231
+ $('#current_track').hide();
232
+ }
233
+ }
234
+
235
+ window[callbackName] = callback;
236
+ return callback;
237
+ }
238
+
239
+ function RdioPlayer (options) {
240
+ this.options = options;
241
+ this.callback = createCallback(this, options.callbackName, options.elementId);
242
+
243
+ establishControls(this);
244
+ reporting(this);
245
+
246
+ initPlayer(options);
247
+ }
248
+
249
+ return RdioPlayer;
250
+ })();
251
+
252
+ function playerKeyboardShortcuts() {
253
+ if (window.top.frames.main) return;
254
+
255
+ $(document).keydown(function(evt) {
256
+
257
+ if (evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) return;
258
+
259
+ if (typeof evt.target !== "undefined" &&
260
+ (evt.target.nodeName == "INPUT" ||
261
+ evt.target.nodeName == "TEXTAREA")) return;
262
+
263
+ switch (evt.keyCode) {
264
+
265
+ // Space Bar is play/pause
266
+ case 32:
267
+ window.rdio.toggle();
268
+ return false;
269
+ break;
270
+
271
+ // Previous Track - Left Arrow, P
272
+ case 37: case 80: case 112:
273
+ window.rdio.player.rdio_previous();
274
+ return false;
275
+ break;
276
+
277
+ // Next Track - Right Arrow, N
278
+ case 39: case 78: case 110:
279
+ window.rdio.player.rdio_next();
280
+ return false;
281
+ break;
282
+
283
+ }
284
+
285
+ });
286
+
287
+ }
288
+
289
+
290
+ $(document).ready(function () {
291
+ window.rdio = new RdioPlayer({
292
+ token: rdio_token,
293
+ domain: rdio_domain,
294
+ elementId: 'apiswf',
295
+ callbackName: 'rdio_callback'
296
+ });
297
+
298
+ $(playerKeyboardShortcuts);
299
+ });
300
+