separated client functions into availability and get

helpers/serveHelpers.js

@@ -47,9 +47,8 @@ module.exports = {
     if (filePath) {
       res.status(200).sendFile(filePath, options);
     } else {
-      // 'get' the file
+      // res.status(307).redirect(`/api/get/${name}/${claimId}`);
-      // send the file
+      res.status(400).json({success: false, message: 'that claim is not hosted locally by Spee<ch yet'});
-      res.status(307).redirect(`/api/get/${name}/${claimId}`);
     }
   },
   showFile (fileInfo, claimInfo, shortId, res) {

public/assets/css/general.css

@@ -99,6 +99,10 @@ h3, p {
 	font-size: small;
 }
 
+#show-body > .fine-print {
+	text-align: center;
+}
+
 .blue {
 	color: #4156C5;
 }
@@ -153,9 +157,7 @@ a, a:visited {
 .link--primary, .link--primary:visited {
 	color: #4156C5;
 }
-.link--primary.fine-print {
+
-    text-align: center;
-}
 .link--nav {
 	color: black;
 	border-bottom: 2px solid white;
@@ -513,24 +515,25 @@ table {
 
 /* Show page */
 
-.video-show, .gifv-show, .image-show {
+#video-player {
-	display: block;
-	width: 100%;
-}
-#video-player, .showlite-asset {
    	display: block;
    	margin: 0 auto;
-    	background-color: #fff;
+    background-color: #fff;
 	cursor: pointer;
 }
 #showlite-body #video-player {
   	margin-top: 2%;    	
-    	padding: 6px;   	
+    padding: 6px;
-    	max-width: 50%;
+    max-width: 50%;
 	border: 1px solid #d0d0d0;
 }
-.showlite-asset {
+
-    	max-width: 100%;
+.asset {
+	max-width: 100%;
+}
+
+#showlite-body > .asset {
+    max-width: 50%;
 }
 
 /* item lists */

public/assets/css/mediaQueries.css

@@ -36,7 +36,7 @@
 		padding-right: 1.5em;
 	}
 
-	.showlite-asset {
+	#showlite-body > asset {
 		max-width: 100%;
 	}
 

routes/api-routes.js

@@ -30,57 +30,6 @@ function createFileRecord ({ name, claimId, outpoint, height, address, nsfw, con
   };
 }
 
-// function getAssetByLongClaimId (fullClaimId, name) {
-//   logger.debug('...getting asset by claim Id...');
-//   return new Promise((resolve, reject) => {
-//     // 1. check locally for claim
-//     checkForLocalAssetByClaimId(fullClaimId, name)
-//       .then(dataValues => {
-//           // if a result was found, return early with the result
-//         if (dataValues) {
-//           logger.debug('found a local file for this name and claimId');
-//           resolve(dataValues);
-//           return;
-//         }
-//         logger.debug('no local file found for this name and claimId');
-//           // 2. if no local claim, resolve and get the claim
-//         db.Claim
-//               .resolveClaim(name, fullClaimId)
-//               .then(resolveResult => {
-//                   // if no result, return early (claim doesn't exist or isn't free)
-//                 if (!resolveResult) {
-//                   resolve(NO_CLAIM);
-//                   return;
-//                 }
-//                 logger.debug('resolve result >> ', resolveResult.dataValues);
-//                 let fileRecord = {};
-//                   // get the claim
-//                 lbryApi.getClaim(`${name}#${fullClaimId}`)
-//                       .then(getResult => {
-//                         logger.debug('getResult >>', getResult);
-//                         fileRecord = createFileRecord(resolveResult);
-//                         fileRecord = addGetResultsToFileRecord(fileRecord, getResult);
-//                           // insert a record in the File table & Update Claim table
-//                         return db.File.create(fileRecord);
-//                       })
-//                       .then(() => {
-//                         logger.debug('File record successfully updated');
-//                         resolve(fileRecord);
-//                       })
-//                       .catch(error => {
-//                         reject(error);
-//                       });
-//               })
-//               .catch(error => {
-//                 reject(error);
-//               });
-//       })
-//       .catch(error => {
-//         reject(error);
-//       });
-//   });
-// }
-
 module.exports = (app) => {
   // route to run a claim_list request on the daemon
   app.get('/api/claim_list/:name', ({ ip, originalUrl, params }, res) => {
@@ -93,30 +42,42 @@ module.exports = (app) => {
       errorHandlers.handleApiError('claim_list', originalUrl, ip, error, res);
     });
   });
+  // route to see if asset is available locally
+  app.get('/api/local/:name/:claimId', ({ ip, originalUrl, params }, res) => {
+    const name = params.name;
+    const claimId = params.claimId;
+    let isLocalFileAvailable = false;
+    db.File.findOne({where: {name, claimId}})
+      .then(result => {
+        if (result) {
+          isLocalFileAvailable = true;
+        }
+        res.status(200).json({status: 'success', isLocalFileAvailable});
+      })
+      .catch(error => {
+        errorHandlers.handleApiError('get', originalUrl, ip, error, res);
+      });
+  });
   // route to get an asset
   app.get('/api/get/:name/:claimId', ({ ip, originalUrl, params }, res) => {
-    if (!params.name || !params.claimId) {
-      res.status(400).json({success: false, message: 'provide a claimId and/or a name'});
-    }
     let fileRecord;
-    // 1. resolve the claim
+    // resolve and get the claim
     db.Claim.resolveClaim(params.name, params.claimId)
       .then(resolveResult => {
         if (!resolveResult) {
           throw new Error('No matching uri found in Claim table');
         }
         fileRecord = createFileRecord(resolveResult);
-        // 2. get the claim
+        // get the claim
         return getClaim(`${params.name}#${params.claimId}`);
       })
       .then(getResult => {
-        res.status(200).json({status: 'success', message: getResult});
-        logger.debug('response was sent to the client');
         fileRecord = addGetResultsToFileRecord(fileRecord, getResult);
-        // 3. insert a record for the claim into the File table
+        // insert a record for the claim into the File table
         return db.File.create(fileRecord);
       })
       .then(() => {
+        res.status(200).json({status: 'success', message: 'content was successfully retrieved via lbrynet'});
         logger.debug('File record successfully created');
       })
       .catch(error => {

views/layouts/showlite.handlebars

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

views/partials/asset.handlebars

@@ -1,41 +1,26 @@
-{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
+<div id="asset-display-component">
-    {{#ifConditional claimInfo.fileExt '===' 'gifv'}}
+    <p id="search-message" hidden="true">We're currently combing the blockchain for your asset!</p>
-        <video class="gifv-show" autoplay loop muted>
+    <p id="failure-message" hidden="true"></p>
-            <source src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
+    <div id="asset-holder" hidden="true">
-            {{!--fallback--}}
+        {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
-            Your browser does not support the <code>video</code> element.
+            <video id="video-player" controls poster="{{claimInfo.thumbnail}}">
-        </video>
+                <source id="asset">
-    {{else}}
+                <!--fallback-->
-        <video id="video-player" class="video-show video" controls poster="{{claimInfo.thumbnail}}">
+                Your browser does not support the <code>video</code> element.
-            <source src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
+            </video>
-            {{!--fallback--}}
+            <!--dynamically resize video player-->
-            Your browser does not support the <code>video</code> element.
+            <script type="text/javascript">
-        </video>
+                document.addEventListener('DOMContentLoaded', resizeVideoPlayer)
-        <script type="text/javascript">
+                window.addEventListener("resize", resizeVideoPlayer);
-            document.addEventListener('DOMContentLoaded', resizeVideoPlayer)
+                function resizeVideoPlayer() {
-            window.addEventListener("resize", resizeVideoPlayer);
+                    const div = document.getElementById('video-player');
-            function resizeVideoPlayer() {
+                    const width = div.offsetWidth;
-                const div = document.getElementById('video-player');
+                    div.height = (width * 9 / 16);
-                const width = div.offsetWidth;
+                }
-                div.height = (width * 9 / 16);
-            }
             </script>
-    {{/ifConditional}}
+        {{else}}
-{{else}}
+            <img  id="asset" class="asset" />
-    <a href="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
+        {{/ifConditional}}
-        <img  class="image-show" src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}" />
-    </a>
-{{/ifConditional}}
-
-<div id="asset-holder">
-    <div id="search-message" hidden="true">
-        <p>We're currently combing the blockchain for your asset!</p>
-    </div>
-    <div id="failure-message" hidden="true">
-        <p>Hmmm, looks like no peers have your content.  How anti-social!</p>
-    </div>
-    <div id="asset" hidden="true">
-
     </div>
 </div>
 
@@ -44,9 +29,16 @@
     const getAssetFunctions = {
         showAsset: function () {
             const searchMessage = document.getElementById('search-message');
+            const assetHolder = document.getElementById('asset-holder');
             const asset = document.getElementById('asset');
             searchMessage.hidden = true;
-            asset.hidden = false;
+            assetHolder.hidden = false;
+            asset.setAttribute('src', `/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}`);
+        },
+        showSearchMessage: function (msg) {
+            console.log(msg);
+            const searchMessage = document.getElementById('search-message');
+            searchMessage.hidden = false;
         },
         showFailureMessage: function (msg) {
             console.log(msg);
@@ -54,26 +46,49 @@
             const failureMessage = document.getElementById('failure-message');
             searchMessage.hidden = true;
             failureMessage.hidden = false;
+            failureMessage.innerText(msg);
         },
-        displayAsset: function(contentType, source) {
+        checkClaimAvailability: function (claimName, claimId) {
-
+            console.log(`getting ${claimName}#${claimId}}`)
+            var uri = `/api/get/${claimName}/${claimId}`;
+            var xhr = new XMLHttpRequest();
+            var that = this;
+            xhr.open("GET", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4) {
+                    const response = JSON.parse(xhr.response);
+                    if (xhr.status == 200 && response.message === false) {
+                        that.showSearchMessage();
+                        that.getAsset(claimName, claimId)
+                    } else {
+                        console.log('get failed:', response);
+                        that.showFailureMessage('Well this sucks, but we can\'t seem to phone home');
+                    }
+                } else {
+                    console.log('xhr.readyState', xhr.readyState);
+                }
+            };
+            // Initiate a multipart/form-data upload
+            xhr.send();
         },
         getAsset: function(claimName, claimId) {
             console.log(`getting ${claimName}#${claimId}}`)
             var uri = `/api/get/${claimName}/${claimId}`;
             var xhr = new XMLHttpRequest();
+            var that = this;
             xhr.open("GET", uri, true);
             xhr.onreadystatechange = function() {
                 if (xhr.readyState == 4) {
+                    const response = JSON.parse(xhr.response);
                     if (xhr.status == 200) {
-                        console.log('get returned successfully', xhr.response);
+                        console.log('get returned successfully', response);
-                        this.showAsset();
+                        that.showAsset();
                     } else {
-                        console.log('get failed:', xhr.response);
+                        console.log('get failed:', response);
+                        that.showFailureMessage('Hmmm, looks like no peers have your content.  How anti-social!');
                     }
                 } else {
                     console.log('xhr.readyState', xhr.readyState);
-                    this.showFailureMessage(xhr.readyState.message);
                 }
             };
             // Initiate a multipart/form-data upload
@@ -81,4 +96,6 @@
         },
     }
 
+    getAssetFunctions.checkClaimAvailability('{{claimInfo.name}}', '{{claimInfo.claimId}}');
+
 </script>

views/show-local.handlebars

@@ -1,17 +0,0 @@
-<div class="row row--tall row--padded">
-    <div class="column column--10">
-        <!-- title -->
-        <span class="text--large">{{claimInfo.title}}</span>
-    </div>
-    <div class="column column--5 column--sml-10 align-content-top">
-        <!-- asset -->
-        <div class="row row--padded">
-            {{> asset}}
-        </div>
-    </div><div class="column column--5 column--sml-10 align-content-top">
-        <!-- details -->
-        <div class="row row--padded">
-            {{> assetInfo}}
-        </div>
-    </div>
-</div>

views/showLite-local.handlebars

@@ -1,2 +0,0 @@
-{{> asset }}
-<a class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via spee&lt;h</a>

views/showLite.handlebars

@@ -1,2 +1,2 @@
 {{> asset }}
-<a class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via spee&lt;h</a>
+<a class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>