Add playback scrubber

css/screen.css

@@ -209,3 +209,31 @@ article.upload {
 .advanced .direction select {
   margin-left: 0;
 }
+
+.playback-scrubber {
+  margin: 0.5em;
+  height: 1.5em;
+  width: 20%;
+  position: relative;
+  border: 2px solid white;
+  background-color: white;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.playback-scrubber .bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.playback-scrubber .loaded {
+  background-color: #EEEEEE;
+}
+
+.playback-scrubber .position {
+  background-color: #3399CC;
+}

js/app.js

@@ -238,6 +238,8 @@ Dig.TagsSelectorComponent = Em.Component.extend(CCC.ApiComponentMixin, {
   allTags: Em.computed.alias('apiData')
 });
 
+Dig.PlaybackScrubberComponent = MediaPlayer.PlaybackScrubberComponent.extend();
+
 soundManager.setup({
   url: 'soundmanagerv297a-20131201/swf/',
   debugMode: false

lib/js/ccc.js

@@ -52,6 +52,11 @@ CCC.Upload = Em.ObjectProxy.extend({
     return "images/" + this.get('license_name').dasherize() + '.png';
   }.property('license_name'),
 
+  purchaseLicenseUrl: function() {
+    var baseUrl = 'http://tunetrack.net/license/';
+    return baseUrl + this.get('file_page_url').replace('http://', '');
+  }.property('file_page_url'),
+
   media: function() {
     return MediaPlayer.Media.create({
       track:            this,

lib/js/player.js

@@ -33,6 +33,22 @@ MediaPlayer.Media = Em.Object.extend(Em.Evented, {
             item.set('isPlaying', false);
             item.trigger('onFinish');
           });
+        },
+        whileloading: function() {
+          Em.run(function() {
+            item.setProperties({
+              bytesLoaded: this.bytesLoaded,
+              bytesTotal: this.bytesTotal
+            });
+          }.bind(this));
+        },
+        whileplaying: function() {
+          Em.run(function() {
+            item.setProperties({
+              position: this.position,
+              duration: this.duration
+            });
+          }.bind(this));
         }
       });
     }
@@ -52,6 +68,15 @@ MediaPlayer.Media = Em.Object.extend(Em.Evented, {
     }
   },
 
+  setPosition: function(position) {
+    return this.get('sound').setPosition(position);
+  },
+
+  setPositionPercentage: function(percentage) {
+    var duration = this.get('duration');
+    return this.setPosition(duration * (percentage / 100));
+  },
+
   togglePlay: function() {
     if (this.get('isPlaying')) {
       this.stop();
@@ -85,23 +110,19 @@ MediaPlayer.TrackControllerMixin = Em.Mixin.create({
         });
       });
 
-      item.on('whiledownloading', function() {
+      function whilestuff() {
         Em.run(function() {
-          nowPlaying.setProperties({
+          item.setProperties({
             bytesLoaded: sound.bytesLoaded,
-            bytesTotal: sound.bytesTotal
-          });
-        });
-      });
-
-      item.on('whileplaying', function() {
-        Em.run(function() {
-          nowPlaying.setProperties({
+            bytesTotal: sound.bytesTotal,
             position: sound.position,
             duration: sound.duration
           });
         });
-      });
+      }
+
+      item.on('whiledownloading', whilestuff);
+      item.on('whileplaying', whilestuff);
     }
   }.observes('content').on('init'),
 
@@ -249,6 +270,47 @@ MediaPlayer.RouteMixin = Em.Mixin.create({
   }
 });
 
+MediaPlayer.PlaybackScrubberComponent = Em.Component.extend({
+  media: null,
+  classNames: ['playback-scrubber'],
+
+  mouseDown: function() {
+    this.set('isMouseDown', true);
+  },
+
+  mouseUp: function(evt) {
+    this.set('isMouseDown', false);
+    var ratio = evt.offsetX / this.$().width();
+    this.get('media').setPositionPercentage(ratio*100);
+  },
+
+  mouseMove: function(evt) {
+    if (this.get('isMouseDown')) {
+      var ratio = evt.offsetX / this.$().width();
+      this.get('media').setPositionPercentage(ratio*100);
+    }
+  },
+
+  loadingStyle: function() {
+    var loaded = this.get('media.bytesLoaded'),
+        total = this.get('media.bytesTotal'),
+        percent = 100 * (loaded / total);
+    return 'width: ' + percent + '%;';
+  }.property('media.bytesTotal', 'media.bytesLoaded'),
+
+  positionStyle: function() {
+    var position = this.get('media.position'),
+        duration = this.get('media.duration'),
+        percent = 100 * (position / duration);
+    return 'width: ' + percent + '%;';
+  }.property('media.position', 'media.duration'),
+
+  layout: Em.Handlebars.compile([
+    "<div class='loaded bar' {{bind-attr style=loadingStyle}}></div>",
+    "<div class='position bar' {{bind-attr style=positionStyle}}></div>"
+  ].join(''))
+});
+
 soundManager.onload = function() {
   $(document.body).addClass('sm2-load-success');
 };

templates/uploadsItem.html

@@ -29,6 +29,10 @@ <h4 class='media-heading'>{{unbound upload_name}}</h4>
     {{/unless}}
     {{/unless}}
     {{/if}}
+
+    {{#if isPlaying}}
+      {{playback-scrubber media=media classNames="pull-left"}}
+    {{/if}}
     <div class='clearfix'></div>
   </div>
   <div class='clearfix'></div>