From d61928190822dcc8263a80cc75a17c9ab6534f5a Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 29 Nov 2017 21:06:59 -0800
Subject: [PATCH] added progress bar component and fixed publish thumbnail bug

---
 controllers/serveController.js        |  2 +-
 routes/serve-routes.js                |  1 -
 views/partials/asset.handlebars       |  7 +++-
 views/partials/progressBar.handlebars | 55 +++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 views/partials/progressBar.handlebars

diff --git a/controllers/serveController.js b/controllers/serveController.js
index fdbfcd81..450d6ba8 100644
--- a/controllers/serveController.js
+++ b/controllers/serveController.js
@@ -105,7 +105,7 @@ module.exports = {
           if (!claim) {
             throw new Error('no record found in Claim table');
           }
-          claim.dataValues.thumbnail = module.exports.chooseThumbnail(claim.dataValues.thumbnail, DEFAULT_THUMBNAIL);
+          claim.dataValues.thumbnail = module.exports.chooseThumbnail(claim.dataValues, DEFAULT_THUMBNAIL);
           claim.dataValues.fileExt = module.exports.determineFileExtensionFromContentType(claim.dataValues.contentType);
           return claim.dataValues;
         });
diff --git a/routes/serve-routes.js b/routes/serve-routes.js
index fd45f3be..b0383bc5 100644
--- a/routes/serve-routes.js
+++ b/routes/serve-routes.js
@@ -172,7 +172,6 @@ function determineName (uri) {
 }
 
 function showAssetToClient (claimId, name, res) {
-    // check for local file info, resolve the claim, and get the short
   return Promise
       .all([getClaimRecord(claimId, name), db.Claim.getShortClaimIdFromLongClaimId(claimId, name)])
       .then(([claimInfo, shortClaimId]) => {
diff --git a/views/partials/asset.handlebars b/views/partials/asset.handlebars
index 7cc50511..96f06d0e 100644
--- a/views/partials/asset.handlebars
+++ b/views/partials/asset.handlebars
@@ -1,6 +1,9 @@
 <div id="asset-display-component">
     <div id="asset-status">
-        <p id="searching-message" hidden="true">Sit tight, we're searching the LBRY blockchain for your asset!</p>
+        <div id="searching-message" hidden="true">
+            <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
+            {{> progressBar}}
+        </div>
         <div id="failure-message" hidden="true">
             <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the below error message in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p>
             <i><p id="error-message"></p></i>
@@ -21,7 +24,7 @@
 
 <script type="text/javascript">
 
-    showFunctions.setState('src', '{{claimInfo.name}}', '{{claimInfo.claimId}}', '{{claimInfo.fileExt}}');
+    showFunctions.setState('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
     showFunctions.setState('claimName', '{{claimInfo.name}}');
     showFunctions.setState('claimId', '{{claimInfo.claimId}}');
     showFunctions.setState('fileExt', '{{claimInfo.fileExt}}');
diff --git a/views/partials/progressBar.handlebars b/views/partials/progressBar.handlebars
new file mode 100644
index 00000000..aa0dffc1
--- /dev/null
+++ b/views/partials/progressBar.handlebars
@@ -0,0 +1,55 @@
+<p id="bar-holder"></p>
+
+<script type="text/javascript">
+    const progressBarFunctions = {
+        state: {
+            x: 0,
+            adder: 1,
+            bars: [],
+        },
+        setState: function (key, value) {
+          this.state[key] = value;
+        },
+        barHolder: document.getElementById('bar-holder'),
+        createProgressBar: function (size) {
+            this.setState('size', size);
+            for (var i = 0; i < size; i++) {
+                const bar = document.createElement('span');
+                bar.innerText = '| ';
+                bar.setAttribute('class', 'progress-bar progress-bar--inactive');
+                this.barHolder.appendChild(bar);
+                this.state.bars.push(bar);
+            }
+        },
+        startProgressBar: function () {
+            this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
+        },
+        updateProgressBar: function () {
+            const x = this.state.x;
+            const adder = this.state.adder;
+            const size = this.state.size;
+            // update the appropriate bar
+            if (x > -1 && x < size){
+                if (adder === 1){
+                    this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--active');
+                } else {
+                    this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--inactive');
+                }
+            }
+            // update adder
+            if (x === size){
+                this.setState('adder', -1);
+            } else if ( x === -1){
+                this.setState('adder', 1);
+            }
+            // update x
+            this.setState('x', x + adder);
+        },
+        stopProgressBar: function () {
+            clearInterval(this.updateInterval);
+        },
+    }
+
+    progressBarFunctions.createProgressBar(10);
+    progressBarFunctions.startProgressBar();
+</script>
\ No newline at end of file