Fix displaying transfer progress

app/services/web-rtc.js

@@ -102,6 +102,7 @@ WebRTC.prototype._onBinaryData = function (data, connection) {
         chunksPerAck = WebRTC.CHUNKS_PER_ACK,
         nextChunkNum, lastChunkInFile, lastChunkInBlock;
 
+    // TODO move it after requesting a new block to speed things up
     connection.emit('receiving_progress', (receivedChunkNum + 1) / info.chunksTotal);
     // console.log('Got chunk no ' + (receivedChunkNum + 1) + ' out of ' + info.chunksTotal);
 

app/templates/peer.hbs

@@ -21,7 +21,7 @@
 {{/popover-confirm}}
 
 <div class="avatar">
-  {{view "progress-bar"}}
+  {{render "progress-bar" model.transfer}}
   {{view "peer-avatar"}}
 </div>
 

app/views/progress-bar.js

@@ -1,5 +1,7 @@
 import Ember from 'ember';
 
+var alias = Ember.computed.alias;
+
 export default Ember.View.extend({
     tagName: 'svg',
     templateName: 'progress_bar',
@@ -9,21 +11,27 @@ export default Ember.View.extend({
     height: "76",
     viewport: "0 0 76 76",
 
+    transfer: alias('controller.model'),
+
     didInsertElement: function () {
         this.set('path', this.$().find('path'));
     },
 
     sendingProgressDidChange: function () {
-        var progress = this.get('controller.model.transfer.sendingProgress');
+        var progress = this.get('transfer.sendingProgress');
 
-        this._calculateSVGAnim(progress);
-    }.observes('controller.model.transfer.sendingProgress'),
+        if (this.get('path')) {
+            this._calculateSVGAnim(progress);
+        }
+    }.observes('transfer.sendingProgress'),
 
     receivingProgressDidChange: function () {
-        var progress = this.get('controller.model.transfer.receivingProgress');
+        var progress = this.get('transfer.receivingProgress');
 
-        this._calculateSVGAnim(progress);
-    }.observes('controller.model.transfer.receivingProgress'),
+        if (this.get('path')) {
+            this._calculateSVGAnim(progress);
+        }
+    }.observes('transfer.receivingProgress'),
 
     _calculateSVGAnim: function (progress) {
         var π = Math.PI,
@@ -32,10 +40,7 @@ export default Ember.View.extend({
             mid = ( α > 180 ) ? 1 : 0,
             x = Math.sin( r ) * 38,
             y = Math.cos( r ) * - 38,
-            anim = 'M 0 0 v -38 A 38 38 1 '
-                 + mid + ' 1 '
-                 +  x  + ' '
-                 +  y  + ' z';
+            anim = 'M 0 0 v -38 A 38 38 1 ' + mid + ' 1 ' +  x  + ' ' +  y  + ' z';
 
         this.get('path').attr('d', anim);
     }