controllers/showController.js

@@ -28,6 +28,7 @@ module.exports = {
               // 3. if a matching record is found locally, serve it
               if (result) {
                 // return the data for the file to be served
+                result.dataValues['fileExt'] = result.fileName.substring(result.fileName.lastIndexOf('.'));
                 serveHelpers.getShortUrlByClaimId(name, claimId)
                   .then(shortUrl => {
                     result.dataValues['shortUrl'] = shortUrl;
@@ -64,6 +65,7 @@ module.exports = {
           if (result) {
             logger.debug('local result found');
             // return the data for the file to be served
+            result.dataValues['fileExt'] = result.fileName.substring(result.fileName.lastIndexOf('.'));
             serveHelpers.getShortUrlByClaimId(name, claimId)
               .then(shortUrl => {
                 result.dataValues['shortUrl'] = shortUrl;
@@ -123,6 +125,7 @@ module.exports = {
           // 3. if a match is found locally, serve that claim
           if (result) {
             // return the data for the file to be served
+            result.dataValues['fileExt'] = result.fileName.substring(result.fileName.lastIndexOf('.'));
             result.dataValues['shortUrl'] = shortUrl;
             resolve(result.dataValues);
             // update the file, as needed

public/assets/css/componentStyle.css

@@ -12,6 +12,11 @@
 	margin: 2px 5px 2px 5px;
 }
 
+.top-bar-right {
+	float: right;
+	margin-left: 1em;
+}
+
 /* publish */
 #drop-zone {
 	border: 1px dashed lightgrey;

routes/serve-routes.js

@@ -2,8 +2,10 @@ const { serveClaimByName, serveClaimByClaimId, serveClaimByShortUrl } = require(
 const { postToStats, sendGoogleAnalytics } = require('../controllers/statsController.js');
 const errorHandlers = require('../helpers/libraries/errorHandlers.js');
 const { serveFile } = require('../helpers/libraries/serveHelpers.js');
+const { showClaimByName, showClaimByClaimId, showClaimByShortUrl } = require('../controllers/showController.js');
+const logger = require('winston');
 
-function retrieveAssetInfo (name, claimId) {
+function retrieveAssetServeInfo (name, claimId) {
   const deferred = new Promise((resolve, reject) => {
     // if claim id is full 40 chars, retrieve the shortest possible url
     if (claimId.length === 40) {
@@ -18,44 +20,24 @@ function retrieveAssetInfo (name, claimId) {
   return deferred;
 }
 
-module.exports = (app) => {
+function retrieveAssetShowInfo (name, claimId) {
-  // route to serve a specific asset
+  const deferred = new Promise((resolve, reject) => {
-  app.get('/:name/:claim_id', ({ headers, ip, originalUrl, params }, res) => {
+    // if claim id is full 40 chars, retrieve the shortest possible url
-    // google analytics
+    if (claimId.length === 40) {
-    sendGoogleAnalytics('serve', headers, ip, originalUrl);
+      resolve(showClaimByClaimId(name, claimId));
-    // begin image-serve processes
+    // if the claim id is shorter than 40, retrieve the full claim id & shortest possible url
-    retrieveAssetInfo(params.name, params.claim_id)
+    } else if (claimId.length < 40) {
-      .then((fileInfo) => {
+      resolve(showClaimByShortUrl(name, claimId));
-        // check to make sure a file was found
-        if (!fileInfo) {
-          res.status(307).render('noClaims');
-          return;
-        }
-        // serve the file or the show route
-        if (headers['accept']) {
-          const mimetypes = headers['accept'].split(',');
-          if (mimetypes.includes('text/html')) {
-            postToStats('show', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
-            res.status(200).render('showLite', { layout: 'show', fileInfo });
     } else {
-            postToStats('serve', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
+      reject(new Error('That Claim Id is longer than 40 characters.'));
-            serveFile(fileInfo, res);
     }
-        } else {
-          postToStats('serve', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
-          serveFile(fileInfo, res);
-        }
-      })
-      .catch(error => {
-        errorHandlers.handleRequestError('serve', originalUrl, ip, error, res);
   });
-  });
+  return deferred;
-  // route to serve the winning asset at a claim
+}
-  app.get('/:name', ({ headers, ip, originalUrl, params }, res) => {
+
-    // google analytics
+function serveClaimByNameWrapper (name, headers, originalUrl, ip, res) {
-    sendGoogleAnalytics('serve', headers, ip, originalUrl);
   // begin image-serve processes
-    serveClaimByName(params.name)
+  serveClaimByName(name)
     .then(fileInfo => {
       // check to make sure a file was found
       if (!fileInfo) {
@@ -80,5 +62,123 @@ module.exports = (app) => {
     .catch(error => {
       errorHandlers.handleRequestError('serve', originalUrl, ip, error, res);
     });
+}
+
+function serveAssetByClaimIdWrapper (name, claimId, headers, originalUrl, ip, res) {
+  retrieveAssetServeInfo(name, claimId)
+    .then((fileInfo) => {
+      // check to make sure a file was found
+      if (!fileInfo) {
+        res.status(307).render('noClaims');
+        return;
+      }
+      // serve the file or the show route
+      if (headers['accept']) {
+        const mimetypes = headers['accept'].split(',');
+        if (mimetypes.includes('text/html')) {
+          postToStats('show', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
+          res.status(200).render('showLite', { layout: 'show', fileInfo });
+        } else {
+          postToStats('serve', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
+          serveFile(fileInfo, res);
+        }
+      } else {
+        postToStats('serve', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
+        serveFile(fileInfo, res);
+      }
+    })
+    .catch(error => {
+      errorHandlers.handleRequestError('serve', originalUrl, ip, error, res);
+    });
+}
+
+module.exports = (app) => {
+  // route to serve a specific asset
+  app.get('/:name/:claim_id', ({ headers, ip, originalUrl, params }, res) => {
+    // decide to serve or show
+    const dotIndex = params.claim_id.lastIndexOf('.');
+    if (dotIndex === 0) {
+      logger.error('a file extension with no name was submitted');
+      errorHandlers.handleRequestError('serve', originalUrl, ip, new Error('no claim id provided'), res);
+    // if an image extension was given, serve the image directly
+    } else if (dotIndex > 0) {
+      // google analytics
+      sendGoogleAnalytics('serve', headers, ip, originalUrl);
+      // parse params
+      const fileExtension = params.claim_id.substring(dotIndex);
+      const claimId = params.claim_id.substring(0, dotIndex);
+      logger.debug('file extension is:', fileExtension);
+      // start image-serve processes
+      serveAssetByClaimIdWrapper(params.name, claimId, headers, originalUrl, ip, res);
+    // if no image extension was given, show the asset with details
+    } else if (dotIndex === -1) {
+      // google analytics
+      sendGoogleAnalytics('show', headers, ip, originalUrl);
+      // for backwards compatability: make sure the client can acept html, if not serve the file.
+      if (headers['accept'] && headers['accept'].split(',').includes('text/html')) {
+        // begin image-show processes
+        retrieveAssetShowInfo(params.name, params.claim_id)
+          .then((fileInfo) => {
+            // check to make sure a file was found
+            if (!fileInfo) {
+              res.status(307).render('noClaims');
+              return;
+            }
+            // serve the file or the show route
+            postToStats('show', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
+            res.status(200).render('show', { layout: 'show', fileInfo });
+          })
+          .catch(error => {
+            errorHandlers.handleRequestError('show', originalUrl, ip, error, res);
+          });
+      } else {
+        // start image-serve processes
+        serveAssetByClaimIdWrapper(params.name, params.claim_id, headers, originalUrl, ip, res);
+      }
+    }
+  });
+  // route to serve the winning asset at a claim
+  app.get('/:name', ({ headers, ip, originalUrl, params }, res) => {
+    // decide to serve or show
+    const dotIndex = params.name.lastIndexOf('.');
+    if (dotIndex === 0) {
+      logger.error('a file extension with no name was submitted');
+      errorHandlers.handleRequestError('serve', originalUrl, ip, new Error('no name provided'), res);
+    // if an image extension was given, serve the image directly
+    } else if (dotIndex > 0) {
+      // google analytics
+      sendGoogleAnalytics('serve', headers, ip, originalUrl);
+      // parse name param
+      const fileExtension = params.name.substring(dotIndex);
+      const claimName = params.name.substring(0, dotIndex);
+      logger.debug('file extension is:', fileExtension);
+      // start image-serve processes
+      serveClaimByNameWrapper(claimName, headers, originalUrl, ip, res);
+    // if no image extension was given, show the asset with details
+    } else if (dotIndex === -1) {
+      // google analytics
+      sendGoogleAnalytics('show', headers, ip, originalUrl);
+      // for backwards compatability: make sure the client can receive text/html, or else serve the asset directly
+      if (headers['accept'] && headers['accept'].split(',').includes('text/html')) {
+        // begin image-show process
+        showClaimByName(params.name)
+          .then(fileInfo => {
+            // check to make sure a file was found
+            if (!fileInfo) {
+              res.status(307).render('noClaims');
+              return;
+            }
+            // serve the show route
+            postToStats('show', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
+            res.status(200).render('show', { layout: 'show', fileInfo });
+          })
+          .catch(error => {
+            errorHandlers.handleRequestError('show', originalUrl, ip, error, res);
+          });
+      } else {
+        // start image serve process
+        serveClaimByNameWrapper(params.name, headers, originalUrl, ip, res);
+      }
+    }
   });
 };

routes/show-routes.js

@@ -1,22 +1,7 @@
 const errorHandlers = require('../helpers/libraries/errorHandlers.js');
-const { showClaimByName, showClaimByClaimId, showClaimByShortUrl, showAllClaims } = require('../controllers/showController.js');
+const { showAllClaims } = require('../controllers/showController.js');
 const { postToStats, getStatsSummary, getTrendingClaims } = require('../controllers/statsController.js');
 
-function retrieveAssetInfo (name, claimId) {
-  const deferred = new Promise((resolve, reject) => {
-    // if claim id is full 40 chars, retrieve the shortest possible url
-    if (claimId.length === 40) {
-      resolve(showClaimByClaimId(name, claimId));
-    // if the claim id is shorter than 40, retrieve the full claim id & shortest possible url
-    } else if (claimId.length < 40) {
-      resolve(showClaimByShortUrl(name, claimId));
-    } else {
-      reject(new Error('That Claim Id is longer than 40 characters.'));
-    }
-  });
-  return deferred;
-}
-
 module.exports = (app) => {
   // route to show 'about' page for spee.ch
   app.get('/about', ({ ip, originalUrl }, res) => {
@@ -66,41 +51,4 @@ module.exports = (app) => {
         errorHandlers.handleRequestError('show', originalUrl, ip, error, res);
       });
   });
-  // route to show a specific asset
-  app.get('/show/:name/:claim_id', ({ ip, originalUrl, params }, res) => {
-    // begin image-serve processes
-    retrieveAssetInfo(params.name, params.claim_id)
-      .then((fileInfo) => {
-        console.log('SHORT URL:', fileInfo.shortUrl);
-        // check to make sure a file was found
-        if (!fileInfo) {
-          res.status(307).render('noClaims');
-          return;
-        }
-        // serve the file or the show route
-        postToStats('show', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
-        res.status(200).render('show', { layout: 'show', fileInfo });
-      })
-      .catch(error => {
-        errorHandlers.handleRequestError('show', originalUrl, ip, error, res);
-      });
-  });
-  // route to show the winning free, public claim
-  app.get('/show/:name', ({ ip, originalUrl, params }, res) => {
-    // get and render the content
-    showClaimByName(params.name)
-      .then(fileInfo => {
-        // check to make sure a file was found
-        if (!fileInfo) {
-          res.status(307).render('noClaims');
-          return;
-        }
-        // serve the show route
-        postToStats('show', originalUrl, ip, fileInfo.name, fileInfo.claimId, 'success');
-        res.status(200).render('show', { layout: 'show', fileInfo });
-      })
-      .catch(error => {
-        errorHandlers.handleRequestError('show', originalUrl, ip, error, res);
-      });
-  });
 };

views/index.handlebars

@@ -50,7 +50,7 @@
 	});
 	socket.on('publish-complete', function(msg){
 		var publishResults;
-		var showUrl = '/show/' + msg.name + '/' + msg.result.claim_id;
+		var showUrl = msg.name + '/' + msg.result.claim_id;
 		// build new publish area
 		publishResults = '<p>Your publish is complete! You are being redirected to it now.</p>';
 		publishResults += '<p><a target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>';

views/partials/assetInfo.handlebars

@@ -6,20 +6,20 @@
 	<h2 class="subheader">Links</h2>
 	{{!--short direct link to asset--}}
 	<div class="share-option">
-		<a href="/{{fileInfo.name}}/{{fileInfo.shortUrl}}">Permanent Short Link</a>
+		<a href="/{{fileInfo.name}}/{{fileInfo.shortUrl}}{{fileInfo.fileExt}}">Permanent Short Link</a>
 		(most convenient)
 		<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
 		<br/>
-		<input type="text" id="short-link" class="link" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.shortUrl}}" onclick="select()"/>
+		<input type="text" id="short-link" class="link" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.shortUrl}}{{fileInfo.fileExt}}" onclick="select()"/>
 		<button class="copy-button" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
 	</div>
 	{{!-- link to show route for asset--}}
 	<div class="share-option">
-		<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">Permanent Long Link</a>
+		<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}{{fileInfo.fileExt}}">Permanent Long Link</a>
 		(fastest service)
 		<div class="input-error" id="input-error-copy-long-link" hidden="true"></div>
 		</br>
-		<input type="text" id="long-link" class="link" readonly onclick="select()" spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
+		<input type="text" id="long-link" class="link" readonly onclick="select()" spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}{{fileInfo.fileExt}}"/>
 		<button class="copy-button" data-elementtocopy="long-link" onclick="copyToClipboard(event)">copy</button>
 	</div>
 	{{!-- html text for embedding asset--}}
@@ -28,9 +28,9 @@
 		<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
 		<br/>
 		{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
-			<input type="text" id="embed-text" class="link" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls>&lt;source src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />&lt;/video>'/>
+			<input type="text" id="embed-text" class="link" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls>&lt;source src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}{{fileInfo.fileExt}}" />&lt;/video>'/>
 		{{else}}
-			<input type="text" id="embed-text" class="link" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />'/>
+			<input type="text" id="embed-text" class="link" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}{{fileInfo.fileExt}}" />'/>
 		{{/ifConditional}}
 		<button class="copy-button" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
 	</div>
@@ -41,7 +41,7 @@
 		Markdown
 		<div class="input-error" id="input-error-copy-markdown-text" hidden="true"></div>
 		<br/>
-		<input type="text" id="markdown-text" class="link" readonly onclick="select()" spellcheck="false" value='![{{fileInfo.name}}](https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}})'/>
+		<input type="text" id="markdown-text" class="link" readonly onclick="select()" spellcheck="false" value='![{{fileInfo.name}}](https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}{{fileInfo.fileExt}})'/>
 		<button class="copy-button" data-elementtocopy="markdown-text" onclick="copyToClipboard(event)">copy</button>
 	</div>
 	{{/ifConditional}}

views/partials/contribute.handlebars

@@ -1,6 +1,6 @@
 <div>
 	<h2>Contribute
-		<a href="https://github.com/lbryio/spee.ch" target="_blank"><img id="github-logo" class="img-right" src="/assets/img/GitHub-Mark-32px.png"/></a>
+		<a href="https://github.com/lbryio/spee.ch" target="_blank"><img id="github-logo" src="/assets/img/GitHub-Mark-32px.png"/></a>
 	</h2>
 	<p><strong>Spee.ch is an open source project. Please contribute to the existing site, or fork it and make your own!</strong></p>
 	<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>

views/partials/documentation.handlebars

@@ -7,26 +7,26 @@
 		<ul>
 			<li>Learn about Spee.ch and publish your own media</li>
 		</ul>
+		<code>https://spee.ch/:name.ext</code>
+		<ul>
+			<li >Serves the winning free, public claim at this name directly</li>
+			<li >E.g. <a href="/doitlive.png">spee.ch/doitlive.png</a></li>
+		</ul>
 		<code>https://spee.ch/:name</code>
 		<ul>
-			<li >Serves the winning free, public claim at this name</li>
+			<li >Serves an HTML page which shows the winning claim at this name with additional details</li>
 			<li >E.g. <a href="/doitlive">spee.ch/doitlive</a></li>
 		</ul>
-		<code>https://spee.ch/show/:name</code>
+		<code>https://spee.ch/:name/:claim_id.ext</code>
 		<ul>
-			<li >Serves the winning claim at this name with additional details</li>
+			<li >Serves a specific image or video file directly</li>
-			<li >E.g. <a href="/show/doitlive">spee.ch/show/doitlive</a></li>
+			<li >E.g. <a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0.jpg">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0.jpg</a></li>
 		</ul>
 		<code>https://spee.ch/:name/:claim_id</code>
 		<ul>
-			<li >Serves a specific claim</li>
+			<li >Serves an HTML page with this specific claim and additional details</li>
 			<li >E.g. <a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
 		</ul>
-		<code>https://spee.ch/show/:name/:claim_id</code>
-		<ul>
-			<li >Serves a specific claim with additional details</li>
-			<li >E.g. <a href="/show/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/show/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
-		</ul>
 		<code>https://spee.ch/:name/all</code>
 		<ul>
 			<li >Displays a list of all files at a claim</li>

views/partials/examples.handlebars

@@ -5,13 +5,13 @@
 	<div id="examples-detail" hidden="true">
 		<div class="example">
 			<h4>Use spee.ch to embed a specific image:</h4>
-			<a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"><img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/></a>
+			<a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0.jpg"><img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0.jpg"/></a>
-			<div class="example-code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</div>
+			<div class="example-code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0.jpg"/&gt;</div>
 		</div>
 		<div class="example">
-			<h4>Use spee.ch to serve a top LBRY claim:</h4>
+			<h4>Use spee.ch to serve the top free image at a claim:</h4>
-			<a href="/doitlive"><img class="example-image" src="/doitlive"/></a>
+			<a href="/doitlive.png"><img class="example-image" src="/doitlive.png"/></a>
-			<div class="example-code">&lt;img src="https://spee.ch/doitlive"/&gt;</div>
+			<div class="example-code">&lt;img src="https://spee.ch/doitlive.png"/&gt;</div>
 		</div>
 	</div>
 </div>

views/partials/learnMore.handlebars

@@ -1,4 +1,3 @@
 <div class="learn-more stop-float">
 	<p><i>Spee.ch is an open-source project. You should <a href="https://github.com/lbryio/spee.ch/issues">contribute</a> on github, or <a  href="https://github.com/lbryio/spee.ch">fork it</a> and make your own!</i></p>
-	<p><a href="/about">Learn more about spee.ch</a></p>
 </div>

views/partials/topBar.handlebars

@@ -1,5 +1,6 @@
 <div class="top-bar">
-	<img id="logo" src="/assets/img/content-freedom-64px.png"/>
+	<a href="https://en.wikipedia.org/wiki/Freedom_of_information" target="_blank"><img id="logo" src="/assets/img/content-freedom-64px.png"/></a>
 	<h1 id="title"><a href="/">Spee.ch</a></h1><span >(beta)</span>
-	
+	<a href="https://github.com/lbryio/spee.ch" target="_blank" class="top-bar-right">contribute</a>
+	<a href="/about" class="top-bar-right">help</a>
 </div>

views/partials/trendingAssets.handlebars

@@ -5,7 +5,7 @@
 	<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
 		{{#each trendingAssets}}
 			{{#unless this.nsfw}}
-				<a href="/show/{{this.name}}/{{this.claimId}}">
+				<a href="/{{this.name}}/{{this.claimId}}">
 				{{#ifConditional this.fileType '===' 'video/mp4'}}
 					<video class="grid-item trending-video" controls>
 						<source src="/api/streamFile/{{this.fileName}}">

views/showLite.handlebars

@@ -1,5 +1,5 @@
 <div id="asset-placeholder">
-	<a href="/show/{{fileInfo.name}}/{{fileInfo.claimId}}">
+	<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">
 	{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
 		<video class="show-asset-lite" autoplay controls>
 			<source src="/api/streamFile/{{fileInfo.fileName}}">