Sync player and scatterplot when remix track is playing

henpe · Dec 11, 2012 · 5cbc370 · 5cbc370
1 parent 11b802b
commit 5cbc370
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 41 deletions.
diff --git a/app/scripts/collections/tracks.js b/app/scripts/collections/tracks.js
@@ -12,7 +12,7 @@ whitburn.Collections.Tracks = Backbone.Collection.extend({
     this.timestamps = {};
     _.each(response, function(track) {
       if (track.audio && track.audio.timestamp) {
-        this.timestamps[Math.round(track.audio.timestamp)] = track.id || track.title;
+        this.timestamps[Math.round(track.audio.timestamp)] = track.year + "-" + track.yearly_rank;
       }
     }, this);
     return response;

diff --git a/app/scripts/models/track.js b/app/scripts/models/track.js
@@ -47,13 +47,8 @@ whitburn.Models.Track = Backbone.Model.extend({
       });
     }
 
-    if (response.trackdata_7digital) {
-      var xmlDoc = $.parseXML(response.trackdata_7digital),
-          xml = $(xmlDoc),
-          link = xml.find( "track > url" ).text();
-      if (link) {
-        response.sevendigital_link = link;
-      }
+    if (response.sevendigital) {
+      response.sevendigital_link = response.sevendigital.track_url;
     }
 
     var date;

diff --git a/app/scripts/templates/player.ejs b/app/scripts/templates/player.ejs
@@ -5,8 +5,8 @@
 
 <div class="soundcloud-container">
     <object height="81" width="100%" id="mainPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
-      <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Findeox%2Fremix-of-the-century-1&enable_api=true&object_id=mainPlayer&auto_play=false"></param>
+      <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fhenpe%2Fremix-of-the-century-iii&enable_api=true&object_id=mainPlayer&auto_play=false"></param>
       <param name="allowscriptaccess" value="always"></param>
-      <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Findeox%2Fremix-of-the-century-1&enable_api=true&object_id=mainPlayer&auto_play=false" type="application/x-shockwave-flash" width="100%" name="mainPlayer"></embed>
+      <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=https%3A%2F%2Fsoundcloud.com%2Fhenpe%2Fremix-of-the-century-iii&enable_api=true&object_id=mainPlayer&auto_play=false" type="application/x-shockwave-flash" width="100%" name="mainPlayer"></embed>
     </object>
 </div>
diff --git a/app/scripts/templates/track_metadata.ejs b/app/scripts/templates/track_metadata.ejs
@@ -1,18 +1,20 @@
 <p>Entered chart on <span class="track-date"><%= date_entered %></span></p>
 <p>Yearly rank: <span class="track-rank"><%= rank %></span></p>
-<div class="section">
-	<table class="track-audio-summary">
-		<tr>
-			<th>Key</th>
-			<th>Mode</th>
-			<th>Tempo</th>
-			<th>Time signature</th>
-		</tr>
-		<tr>
-			<td><%= audio_summary.key.label %></td>
-			<td><%= audio_summary.mode.label %></td>
-			<td><%= audio_summary.tempo %> BPM</td>
-			<td><%= audio_summary.time_signature %> beats per measure</td>
-		</tr>
-	</table>
-</div>
+<% if (audio_summary) { %>
+	<div class="section">
+		<table class="track-audio-summary">
+			<tr>
+				<th>Key</th>
+				<th>Mode</th>
+				<th>Tempo</th>
+				<th>Time signature</th>
+			</tr>
+			<tr>
+				<td><%= audio_summary.key.label %></td>
+				<td><%= audio_summary.mode.label %></td>
+				<td><%= audio_summary.tempo %> BPM</td>
+				<td><%= audio_summary.time_signature %> beats per measure</td>
+			</tr>
+		</table>
+	</div>
+<% } %>
diff --git a/app/scripts/views/player.js b/app/scripts/views/player.js
@@ -66,8 +66,9 @@ whitburn.Views.Player = Backbone.View.extend({
 
   goToTrack: function(position) {
       var track = this.collection.getTrackAtTime(position);
-      if (track) {
-        this.model.trigger('player:track', track);
+      if (track && track !== this.currentTrack) {
+        this.currentTrack = track;
+        this.model.set('currentTrack', track);
       }
   },
 

diff --git a/app/scripts/views/scatterplot.js b/app/scripts/views/scatterplot.js
@@ -7,13 +7,15 @@ whitburn.Views.ScatterPlot = Backbone.View.extend({
       'render',
       'renderPlot',
       'updateAudioElements',
+      'selectTrack',
       'changeY',
       'changeColour',
       'changeSize',
       'onClick'
     );
 
     this.model.bind('change:isPlaying', this.updateAudioElements);
+    this.model.bind('change:currentTrack', this.selectTrack);
     this.model.bind('change:param_x', this.render);
     this.model.bind('change:param_y', this.changeY);
     this.model.bind('change:param_color', this.changeColour);
@@ -161,7 +163,7 @@ whitburn.Views.ScatterPlot = Backbone.View.extend({
           .ease('linear')
           .duration(800)
           .style('fill', '#bbb')
-          .style('opacity', 0.8);
+          .style('opacity', 0.2);
     } else {
       this.svg.selectAll('.dot')
           .transition()
@@ -172,6 +174,13 @@ whitburn.Views.ScatterPlot = Backbone.View.extend({
     }
   },
 
+  selectTrack: function(model, value, options) {
+    this.svg.selectAll('circle.active').classed('active', false);
+    if (value) {
+      this.svg.selectAll('#t-' + value).classed('active', true);
+    }
+  },
+
   changeY: function() {
     var self = this,
         param_y = this.model.get('param_y');

diff --git a/app/scripts/views/sidebar.js b/app/scripts/views/sidebar.js
@@ -59,21 +59,26 @@ whitburn.Views.Sidebar = Backbone.View.extend({
 
       // Do not use template for the bars in order
       // to do CSS animation
-      var node = this.$el.find('.track-metric-energy');
-      node.find('.bar span').css({width: audio_summary.energy * 100 + '%'});
-      node.find('.value').text(audio_summary.energy);
+      if (audio_summary) {
+        this.$el.find('.track-audio-metrics').show();
+        var node = this.$el.find('.track-metric-energy');
+        node.find('.bar span').css({width: audio_summary.energy * 100 + '%'});
+        node.find('.value').text(audio_summary.energy);
 
-      node = this.$el.find('.track-metric-danceability');
-      node.find('.bar span').css({width: audio_summary.danceability * 100 + '%'});
-      node.find('.value').text(audio_summary.danceability);
+        node = this.$el.find('.track-metric-danceability');
+        node.find('.bar span').css({width: audio_summary.danceability * 100 + '%'});
+        node.find('.value').text(audio_summary.danceability);
 
-      node = this.$el.find('.track-metric-speechiness');
-      node.find('.bar span').css({width: audio_summary.speechiness * 100 + '%'});
-      node.find('.value').text(audio_summary.speechiness);
+        node = this.$el.find('.track-metric-speechiness');
+        node.find('.bar span').css({width: audio_summary.speechiness * 100 + '%'});
+        node.find('.value').text(audio_summary.speechiness);
 
-      node = this.$el.find('.track-metric-liveness');
-      node.find('.bar span').css({width: audio_summary.liveness * 100 + '%'});
-      node.find('.value').text(audio_summary.liveness);
+        node = this.$el.find('.track-metric-liveness');
+        node.find('.bar span').css({width: audio_summary.liveness * 100 + '%'});
+        node.find('.value').text(audio_summary.liveness);
+      } else {
+        this.$el.find('.track-audio-metrics').hide();
+      }
 
       // Buy and external player links
       this.$el.find('.track-buy').html(