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

28
views/partials/trendingAssets.handlebars
View file

@ -7,37 +7,31 @@
{{#unless this.nsfw}}
<a href="/{{this.name}}/{{this.claimId}}">
{{#ifConditional this.fileType '===' 'video/mp4'}}
<video class="grid-item trending-video" controls>
<source src="/media/{{this.fileName}}">
<video class="grid-item trending-video" controls onloadeddata="resetLayout()">
<source src="/media/{{this.fileName}}" >
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{else}}
<img class="grid-item trending-image" src="/media/{{this.fileName}}" />
<img class="grid-item trending-image" src="/media/{{this.fileName}}" onload="resetLayout()"/>
{{/ifConditional}}
</a>
{{/unless}}
{{/each}}
</div>
</div>
<script>
var elem = document.querySelector('.grid');
var trendingImages = document.querySelectorAll('.trending-image');
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(){
msnry.layout();
})
function resetLayout() {
console.log('resetting 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>