From 47142ca820859cb3fb0bce490f42fa5e91e90a58 Mon Sep 17 00:00:00 2001
From: Szymon Nowak <szimek@gmail.com>
Date: Mon, 27 Jul 2015 21:33:02 +0200
Subject: [PATCH] Fix displaying transfer progress

---
 app/services/web-rtc.js   |  1 +
 app/templates/peer.hbs    |  2 +-
 app/views/progress-bar.js | 25 +++++++++++++++----------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/services/web-rtc.js b/app/services/web-rtc.js
index 64c226a..54993f2 100644
--- a/app/services/web-rtc.js
+++ b/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);
 
diff --git a/app/templates/peer.hbs b/app/templates/peer.hbs
index 96a2703..63bd72e 100644
--- a/app/templates/peer.hbs
+++ b/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>
 
diff --git a/app/views/progress-bar.js b/app/views/progress-bar.js
index 3e7a87f..19183ab 100644
--- a/app/views/progress-bar.js
+++ b/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);
     }