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;
         });

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]) => {

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}}');

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>