Merge pull request #162 from lbryio/use-existing-thumbs

Use existing thumbs for channel content

config/test.json

@@ -1,14 +0,0 @@
-{
-	"WalletConfig": {
-		"LbryClaimAddress": "none"
-	},
-	"AnalyticsConfig":{
-		"GoogleId": "UA-100747990-1"
-	},
-	"Database": {
-		"MySqlConnectionUri": "none"
-	},
-	"Logging": {
-		"LogLevel": "debug"
-	}
-}

controllers/serveController.js

@@ -7,6 +7,7 @@ const { postToStats, sendGoogleAnalytics } = require('../controllers/statsContro
 const SERVE = 'SERVE';
 const SHOW = 'SHOW';
 const SHOWLITE = 'SHOWLITE';
+const DEFAULT_THUMBNAIL = 'https://spee.ch/assets/img/content-freedom-large.png';
 
 function checkForLocalAssetByClaimId (claimId, name) {
   return new Promise((resolve, reject) => {
@@ -95,6 +96,13 @@ function getAssetByLongClaimId (fullClaimId, name) {
   });
 }
 
+function chooseThumbnail (claimInfo, defaultThumbnail) {
+  if (!claimInfo.thumbnail || claimInfo.thumbnail === '') {
+    return defaultThumbnail;
+  }
+  return claimInfo.thumbnail;
+}
+
 module.exports = {
   getAssetByClaim (claimName, claimId) {
     logger.debug('getting asset by claim');
@@ -153,10 +161,11 @@ module.exports = {
         .then(allChannelClaims => {
           if (allChannelClaims) {
             allChannelClaims.forEach(element => {
-              element['channelName'] = channelName;
+              const fileExtenstion = element.contentType.substring(element.contentType.lastIndexOf('/') + 1);
-              element['longChannelId'] = longChannelId;
+              element['showUrlLong'] = `/${channelName}:${longChannelId}/${element.name}`;
-              element['shortChannelId'] = shortChannelId;
+              element['directUrlLong'] = `/${channelName}:${longChannelId}/${element.name}.${fileExtenstion}`;
-              element['fileExtension'] = element.contentType.substring(element.contentType.lastIndexOf('/') + 1);
+              element['directUrlShort'] = `/${channelName}:${shortChannelId}/${element.name}.${fileExtenstion}`;
+              element['thumbnail'] = chooseThumbnail(element, DEFAULT_THUMBNAIL);
             });
           }
           return resolve(allChannelClaims);
@@ -192,6 +201,7 @@ module.exports = {
             return db.resolveClaim(fileInfo.name, fileInfo.claimId);
           })
           .then(resolveResult => {
+            fileInfo['thumbnail'] = chooseThumbnail(resolveResult, DEFAULT_THUMBNAIL);
             fileInfo['title'] = resolveResult.title;
             fileInfo['description'] = resolveResult.description;
             showFile(fileInfo, res);

controllers/statsController.js

@@ -148,6 +148,16 @@ module.exports = {
       // get the raw requests data
       db.getTrendingClaims(startDate)
       .then(results => {
+        if (results) {
+          results.forEach(element => {
+            const fileExtenstion = element.fileType.substring(element.fileType.lastIndexOf('/') + 1);
+            element['showUrlLong'] = `/${element.claimId}/${element.name}`;
+            element['directUrlLong'] = `/${element.claimId}/${element.name}.${fileExtenstion}`;
+            element['directUrlShort'] = `/${element.claimId}/${element.name}.${fileExtenstion}`;
+            element['contentType'] = element.fileType;
+            element['thumbnail'] = 'https://spee.ch/assets/img/content-freedom-large.png';
+          });
+        }
         resolve(results);
       })
       .catch(error => {

models/index.js

@@ -226,7 +226,7 @@ db['getAllFreeClaims'] = (name) => {
 db['resolveClaim'] = (name, claimId) => {
   return new Promise((resolve, reject) => {
     db
-      .sequelize.query(`SELECT name, claimId, outpoint, height, address, title, description FROM Claim WHERE name = '${name}' AND claimId = '${claimId}'`, { type: db.sequelize.QueryTypes.SELECT })
+      .sequelize.query(`SELECT name, claimId, outpoint, height, address, title, description, thumbnail FROM Claim WHERE name = '${name}' AND claimId = '${claimId}'`, { type: db.sequelize.QueryTypes.SELECT })
       .then(result => {
         switch (result.length) {
           case 0:
@@ -266,7 +266,7 @@ db['getAllChannelClaims'] = (channelId) => {
   return new Promise((resolve, reject) => {
     logger.debug(`finding all claims in channel "${channelId}"`);
     db
-      .sequelize.query(`SELECT name, claimId, outpoint, height, address, contentType, title, description, license FROM Claim WHERE certificateId = '${channelId}' ORDeR BY height DESC;`, { type: db.sequelize.QueryTypes.SELECT })
+      .sequelize.query(`SELECT name, claimId, outpoint, height, address, contentType, title, description, license, thumbnail FROM Claim WHERE certificateId = '${channelId}' ORDeR BY height DESC;`, { type: db.sequelize.QueryTypes.SELECT })
       .then(result => {
         switch (result.length) {
           case 0:

public/assets/css/componentStyle.css

@@ -154,27 +154,50 @@ button.copy-button {
 	height: 1em;
 }
 
-/* all claims */
+/*  content lists */
-
+.content-list-card {
-.all-claims-item {
 	margin-top: 2px;
 	padding-top: 2px;
 	border-top: 1px lightgrey solid;
 	overflow: auto;
+	position: relative;
 }
 
-.all-claims-asset {
+.content-list-card-link {
+	position:absolute;
+	width:100%;
+	height:100%;
+	top:0;
+	left: 0;
+	z-index: 1;
+}
+
+.content-list-asset {
 	width: 20%;
 	float: left;
 	margin: 5px 30px 5px 0px;
 }
 
-.all-claims-details {
+.content-list-title {
+	color: black;
+	font-weight: bold;
+}
+
+.content-list-details {
 	word-wrap: break-word;
+}
+
+.content-list-details > ul {
+	position: relative;
+	z-index: 2;
 	list-style: none;
 	list-style-type: none;
 }
 
+.content-list-card:hover {
+	background-color: #F5F0EF;
+}
+
 /* statistics */
 .totals-row {
 	border-top: 1px solid grey;

routes/page-routes.js

@@ -50,15 +50,14 @@ module.exports = (app) => {
         errorHandlers.handleRequestError(error, res);
       });
   });
-  // route to display all free public claims at a given name
+  // route to send embedable video player (for twitter)
   app.get('/embed/:claimId/:name', ({ params }, res) => {
     const claimId = params.claimId;
     const name = params.name;
-    const dummyParam = '.b';
     console.log('claimId ==', claimId);
     console.log('name ==', name);
     // get and render the content
-    res.status(200).render('embed', { layout: 'embed', claimId, name, dummyParam });
+    res.status(200).render('embed', { layout: 'embed', claimId, name });
   });
   // route to display all free public claims at a given name
   app.get('/:name/all', ({ ip, originalUrl, params }, res) => {

speech.js

@@ -48,14 +48,14 @@ const hbs = expressHandlebars.create({
         </script>`
       );
     },
-    addOpenGraph (title, mimeType, showUrl, source, description) {
+    addOpenGraph (title, mimeType, showUrl, source, description, thumbnail) {
       let basicTags = `<meta property="og:title" content="${title}"> 
           <meta property="og:url" content="${showUrl}" > 
           <meta property="og:site_name" content="Spee.ch" > 
           <meta property="og:description" content="${description}">`;
       if (mimeType === 'video/mp4') {
         return new Handlebars.SafeString(
-          `${basicTags} <meta property="og:image" content="https://spee.ch/assets/img/content-freedom-large.png" > 
+          `${basicTags} <meta property="og:image" content="${thumbnail}" > 
           <meta property="og:image:type" content="image/png" >
           <meta property="og:image:width" content="600" >
           <meta property="og:image:height" content="315" >

views/channel.handlebars

@@ -2,30 +2,9 @@
 	{{> topBar}}
 	<div>
 		<h3>{{this.channelName}}</h3>
-		<p>Below are all the free claims in this channel.</p>
+		<p>Below is all the free content in this channel.</p>
 		{{#each channelContents}}
-			<div class="all-claims-item">
+          {{> contentListItem}}
-				<a href="/{{this.channelName}}:{{this.shortChannelId}}/{{this.name}}.{{this.fileExtension}}">
-					{{#ifConditional this.contentType '===' 'video/mp4'}}
-						<img class="all-claims-asset" src="/assets/img/content-freedom-large.png"/>
-					{{else}}
-						<img  class="all-claims-asset" src="/{{this.claimId}}/{{this.name}}.{{this.fileExtension}}" />
-					{{/ifConditional}}
-				</a>
-				<div class="all-claims-details">
-					<ul style="list-style-type:none">
-						<li><strong>{{this.title}}</strong></li>
-						<li><i> {{this.description}}</i></li>
-						<li><a href="/{{this.channelName}}:{{this.shortChannelId}}/{{this.name}}.{{this.fileExtension}}">spee.ch/{{this.channelName}}:{{this.shortChannelId}}/{{this.name}}.{{this.fileExtension}}</a></li>
-						<li>License: {{this.license}}</li>
-						<li>
-   						 Claim: 
-    						<a href="lbry://{{this.name}}">lbry://{{this.name}}</a>
-						</li>
-						<li>Claim Id: {{this.claimId}}</li>
-					</ul>
-				</div>
-			</div>
 		{{/each}}
 	</div>
 	{{> footer}}

views/layouts/show.handlebars

@@ -10,7 +10,7 @@
 	<meta property="fb:app_id" content="1371961932852223">
 	{{#unless fileInfo.nsfw}}
 	    {{{addTwitterCard fileInfo.fileType openGraphInfo.source openGraphInfo.embedUrl openGraphInfo.directFileUrl}}}
-	{{{addOpenGraph fileInfo.title fileInfo.fileType openGraphInfo.showUrl openGraphInfo.source fileInfo.description}}}
+	    {{{addOpenGraph fileInfo.title fileInfo.fileType openGraphInfo.showUrl openGraphInfo.source fileInfo.description fileInfo.thumbnail}}}
 	{{/unless}}
 	<!-- google analytics -->
 	{{ googleAnalytics }}

views/partials/contentListItem.handlebars

@@ -0,0 +1,15 @@
+<div class='content-list-card'>
+    <a href="{{this.showUrlLong}}"><span class='content-list-card-link'></span></a>
+    {{#ifConditional this.contentType '===' 'video/mp4'}}
+         <img class="content-list-asset" src="{{this.thumbnail}}"/>
+    {{else}}
+        <img  class="content-list-asset" src="{{this.directUrlLong}}" />
+    {{/ifConditional}}
+    <div class="content-list-details">
+        <ul>
+            <li class="content-list-title">{{this.title}}</li>
+            <li><a href="{{this.directUrlShort}}">spee.ch{{this.directUrlShort}}</a></li>
+        </ul>
+    </div>
+</div>
+

views/partials/trendingAssets.handlebars

@@ -1,39 +0,0 @@
-<script src="/vendors/masonry/masonry.pkgd.min.js"></script>
-
-<div class="full"> 
-	<h2>Trending</h2>
-	<p><i>The 25 most popular assets on spee.ch</i></p>
-	<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
-		{{#each trendingAssets}}
-			<div class="all-claims-item">
-				<a href="/{{this.claimId}}/{{this.name}}">
-					{{#ifConditional this.fileType '===' 'video/mp4'}}
-						<img class="all-claims-asset" src="/assets/img/content-freedom-large.png"/>
-					{{else}}
-						<img  class="all-claims-asset" src="/{{this.claimId}}/{{this.name}}.ext" />
-					{{/ifConditional}}
-				</a>
-				<div class="all-claims-details">
-					<ul style="list-style-type:none">
-						<li><bold>{{this.name}}</bold></li>
-						<li><i>Claim Id: {{this.claimId}}</i></li>
-						<li><strong>{{this.title}}</strong></li>
-					</ul>
-				</div>
-			</div>
-		{{/each}}
-	</div>
-</div>
-
-
-<script>
-	var elem = document.querySelector('.grid');
-	var msnry = new Masonry( elem, {
-		itemSelector: '.grid-item'
-	});
-	
-	function resetTrendingLayout() {
-		msnry.layout();
-	}
-</script>
-

views/trending.handlebars

@@ -1,4 +1,11 @@
 <div class="wrapper">
 	{{> topBar}}
-	{{> trendingAssets}}
+    <div>
+        <h3>Popular</h3>
+        <p>Below are the 25 most popular items on spee.ch</p>
+        {{#each trendingAssets}}
+            {{> contentListItem}}
+        {{/each}}
+    </div>
+    {{> footer}}
 </div>