Merge pull request #95 from lbryio/trending-images-masonry

added masonry.js to display trending images

public/assets/css/componentStyle.css

@@ -81,10 +81,9 @@ button.copy-button {
 }
 
 /* trending claims */
-.asset-trending {
-	width: 21%;
-	margin: 2%;
-	float: left;
+.grid-item { 
+	width: 23%; 
+	margin: 0px 1% 20px 1%;
 }
 
 /* learn more */

public/assets/css/generalStyle.css

@@ -91,13 +91,6 @@ h4 {
 
 /* other */
 
-.asset-small {
-	width: 30%;
-	padding: 0px;
-	margin: 10px;
-	float: left;
-}
-
 input {
 	padding: 0.3em;
 }

routes/show-routes.js

@@ -29,6 +29,7 @@ module.exports = (app) => {
     startDate.setDate(startDate.getDate() - 1);
     getTrendingClaims(startDate)
       .then(result => {
+        // logger.debug(result);
         res.status(200).render('trending', { trendingAssets: result });
       })
       .catch(error => {

speech.js

@@ -66,6 +66,8 @@ const hbs = expressHandlebars.create({
           return (varOne && varTwo) ? options.fn(this) : options.inverse(this);
         case '||':
           return (varOne || varTwo) ? options.fn(this) : options.inverse(this);
+        case 'mod3':
+          return ((parseInt(varOne) % 3) === 0) ? options.fn(this) : options.inverse(this);
         default:
           return options.inverse(this);
       }

views/partials/topBar.handlebars

@@ -1,5 +1,5 @@
 <div class="top-bar">
 	<img id="logo" src="/assets/img/content-freedom-64px.png"/>
-	<h1 id="title"><a href="/">Spee.ch</a></h1>
+	<h1 id="title"><a href="/">Spee.ch</a></h1><span >(beta)</span>
 	
 </div>

views/partials/trendingAssets.handlebars

@@ -1,23 +1,48 @@
+<script src="/vendors/masonry/masonry.pkgd.min.js"></script>
+
 <div class="full"> 
 	<h2>Trending</h2>
-	{{#grouped_each 3 trendingAssets}}
-		<div>
-		{{#each this}}
-			{{#if this.nsfw}}
-			{{else }}
+	<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
+		{{#each trendingAssets}}
+			{{#unless this.nsfw}}
+			
 				<a href="/show/{{this.name}}/{{this.claimId}}">
 				{{#ifConditional this.fileType '===' 'video/mp4'}}
-					<video class="asset-small" controls>
+					<video class="grid-item trending-video" controls>
 						<source src="/api/streamFile/{{this.fileName}}">
 						{{!--fallback--}}
 						Your browser does not support the <code>video</code> element.
 					</video>
 				{{else}}
-					<img  class="asset-small" src="/api/streamFile/{{this.fileName}}" />
+					<img  class="grid-item trending-image" src="/api/streamFile/{{this.fileName}}" />
 				{{/ifConditional}}
 				</a>
-			{{/if}}
+			
+			{{/unless}}
 		{{/each}}
 	</div>
-	{{/grouped_each}}
 </div>
+
+<script>
+	var elem = document.querySelector('.grid');
+	var trendingImages = document.querySelectorAll('.trending-image');
+	console.log(trendingImages)
+	var trendingVideos = document.querySelectorAll('.trending-video');
+	var msnry = new Masonry( elem, {
+		itemSelector: '.grid-item'
+	});
+	// after images are loaded, reset layout
+	for (var i = 0; i < trendingVideos.length; i++) {
+		trendingImages[i].addEventListener('load', function(){
+			console.log('image loaded');
+			msnry.layout();
+		})
+	}
+	// after videos are loaded, reset layout
+	for (var i = 0; i < trendingVideos.length; i++) {
+		trendingVideos[i].addEventListener('loadeddata', function(){
+			console.log('video loaded');
+			msnry.layout();
+		})
+	}
+</script>