LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

fixed the trending layout

Browse source
This commit is contained in:
bill bittner 2017-07-27 20:04:22 -07:00
parent 0de27c0b1b
commit 553944423b
1 changed files with 11 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
views/partials/trendingAssets.handlebars
View file

@ -7,37 +7,31 @@
{{#unless this.nsfw}} {{#unless this.nsfw}}
<a href="/{{this.name}}/{{this.claimId}}"> <a href="/{{this.name}}/{{this.claimId}}">
{{#ifConditional this.fileType '===' 'video/mp4'}} {{#ifConditional this.fileType '===' 'video/mp4'}}
<video class="grid-item trending-video" controls> <video class="grid-item trending-video" controls onloadeddata="resetLayout()">
<source src="/media/{{this.fileName}}" > <source src="/media/{{this.fileName}}" >
{{!--fallback--}} {{!--fallback--}}
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
{{else}} {{else}}
<img class="grid-item trending-image" src="/media/{{this.fileName}}" /> <img class="grid-item trending-image" src="/media/{{this.fileName}}" onload="resetLayout()"/>
{{/ifConditional}} {{/ifConditional}}
</a> </a>
{{/unless}} {{/unless}}
{{/each}} {{/each}}
</div> </div>
</div> </div>
<script> <script>
var elem = document.querySelector('.grid'); var elem = document.querySelector('.grid');
var trendingImages = document.querySelectorAll('.trending-image');
var trendingVideos = document.querySelectorAll('.trending-video');
var msnry = new Masonry( elem, { var msnry = new Masonry( elem, {
itemSelector: '.grid-item' itemSelector: '.grid-item'
}); });
// after images are loaded, reset layout
for (var i = 0; i < trendingVideos.length; i++) { function resetLayout() {
trendingImages[i].addEventListener('load', function(){ console.log('resetting layout');
msnry.layout(); msnry.layout();
})
}
// after videos are loaded, reset layout
for (var i = 0; i < trendingVideos.length; i++) {
trendingVideos[i].addEventListener('loadeddata', function(){
msnry.layout();
})
} }
</script> </script>