public/assets/js/assetConstructor.js

@@ -1,9 +1,9 @@
-const showFunctions = {
-    state: {},
-    setState: function(key, value) {
+const Asset = function () {
+    this.state = {};
+    this.setState = function(key, value) {
         this.state[key] = value;
-    },
-    addPlayPauseToVideo: function () {
+    };
+    this.addPlayPauseToVideo = function () {
         const that = this;
         const video = document.getElementById('video-asset');
         if (video) {
@@ -18,16 +18,16 @@ const showFunctions = {
                 }
             };
         }
-    },
-    playOrPause: function(video){
+    };
+    this.playOrPause = function(video){
         if (video.paused == true) {
             video.play();
         }
         else{
             video.pause();
         }
-    },
-    showAsset: function () {
+    };
+    this.showAsset = function () {
         this.hideAssetStatus();
         this.showAssetHolder();
         if (!this.state.src) {
@@ -41,33 +41,33 @@ const showFunctions = {
         } else {
             this.showImage();
         }
-    },
-    showVideo: function () {
+    };
+    this.showVideo = function () {
         console.log('showing video', this.state.src);
         const video = document.getElementById('video-asset');
         const source = document.createElement('source');
         source.setAttribute('src', this.state.src);
         video.appendChild(source);
         video.play();
-    },
-    showImage: function () {
+    };
+    this.showImage = function () {
         console.log('showing image', this.state.src);
         const asset = document.getElementById('image-asset');
         asset.setAttribute('src', this.state.src);
-    },
-    hideAssetStatus: function () {
+    };
+    this.hideAssetStatus = function () {
         const assetStatus = document.getElementById('asset-status');
         assetStatus.hidden = true;
-    },
-    showAssetHolder: function () {
+    };
+    this.showAssetHolder =function () {
         const assetHolder = document.getElementById('asset-holder');
         assetHolder.hidden = false;
-    },
-    showSearchMessage: function () {
+    };
+    this.showSearchMessage = function () {
         const searchMessage = document.getElementById('searching-message');
         searchMessage.hidden = false;
-    },
-    showFailureMessage: function (msg) {
+    };
+    this.showFailureMessage = function (msg) {
         console.log(msg);
         const searchMessage = document.getElementById('searching-message');
         const failureMessage = document.getElementById('failure-message');
@@ -75,8 +75,8 @@ const showFunctions = {
         searchMessage.hidden = true;
         failureMessage.hidden = false;
         errorMessage.innerText = msg;
-    },
-    checkClaimAvailability: function () {
+    };
+    this.checkClaimAvailability = function () {
         const that = this;
         const uri = `/api/local-file-available/${this.state.claimName}/${this.state.claimId}`;
         const xhr = new XMLHttpRequest();
@@ -100,8 +100,8 @@ const showFunctions = {
             }
         };
         xhr.send();
-    },
-    getAsset: function() {
+    };
+    this.getAsset = function() {
         const that = this;
         const uri = `/api/get-claim/${this.state.claimName}/${this.state.claimId}`;
         const xhr = new XMLHttpRequest();
@@ -120,5 +120,5 @@ const showFunctions = {
             }
         };
         xhr.send();
-    },
+    };
 };

public/assets/js/progressBarConstructor.js

@@ -0,0 +1,48 @@
+const ProgressBar = function() {
+    this.state = {
+        x: 0,
+        adder: 1,
+        bars: [],
+    };
+    this.setState = function (key, value) {
+        this.state[key] = value;
+    };
+    this.barHolder = document.getElementById('bar-holder');
+    this.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);
+        }
+    };
+    this.startProgressBar = function () {
+        this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
+    };
+    this.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);
+    };
+    this.stopProgressBar = function () {
+        clearInterval(this.updateInterval);
+    };
+};

views/layouts/show.handlebars

@@ -21,7 +21,7 @@
 <body id="show-body">
     <script src="/assets/js/generalFunctions.js"></script>
     <script src="/assets/js/navBarFunctions.js"></script>
-    <script src="/assets/js/showFunctions.js"></script>
+    <script src="/assets/js/assetConstructor.js"></script>
     {{> navBar}}
     {{{ body }}}
 </body>

views/layouts/showlite.handlebars

@@ -17,7 +17,7 @@
 	{{ googleAnalytics }}
 </head>
 <body id="showlite-body">
-    <script src="/assets/js/showFunctions.js"></script>
+    <script src="/assets/js/assetConstructor.js"></script>
     {{{ body }}}
 </body>
 </html>

views/partials/asset.handlebars

@@ -3,6 +3,7 @@
         <div id="searching-message" hidden="true">
             <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
             {{> progressBar}}
+            <p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
         </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>
@@ -24,12 +25,13 @@
 
 <script type="text/javascript">
 
-    showFunctions.setState('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
-    showFunctions.setState('claimName', '{{claimInfo.name}}');
-    showFunctions.setState('claimId', '{{claimInfo.claimId}}');
-    showFunctions.setState('fileExt', '{{claimInfo.fileExt}}');
-    showFunctions.setState('contentType', '{{claimInfo.contentType}}');
-    console.log(showFunctions.state);
-    showFunctions.checkClaimAvailability();
+    const asset = new Asset();
+    asset.setState('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
+    asset.setState('claimName', '{{claimInfo.name}}');
+    asset.setState('claimId', '{{claimInfo.claimId}}');
+    asset.setState('fileExt', '{{claimInfo.fileExt}}');
+    asset.setState('contentType', '{{claimInfo.contentType}}');
+    console.log('asset state:', asset.state);
+    asset.checkClaimAvailability();
 
 </script>

views/partials/progressBar.handlebars

@@ -1,55 +1,8 @@
 <p id="bar-holder"></p>
 
+<script src="/assets/js/progressBarConstructor.js"></script>
 <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();
+    const progressBar = new ProgressBar();
+    progressBar.createProgressBar(10);
+    progressBar.startProgressBar();
 </script>