thumbnails now lazy load. when it is loading, a content loading gradient is shown in front of it

made file cards look better on mobile devices
This commit is contained in:
Isaac Grynsztein
2020-02-20 15:45:40 -05:00
parent 7eac88a31f
commit 54492b109a
5 changed files with 47 additions and 3 deletions

View File

@@ -3,12 +3,19 @@
<div style="padding:5px">
<b><a href="javascript:void(0)" (click)="!isPlaylist ? mainComponent.goToFile(name, isAudio) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
<br/>
ID: {{name}}
<span class="max-two-lines">ID: {{name}}</span>
<div *ngIf="isPlaylist">Count: {{count}}</div>
<div class="img-div">
<img class="image" [lazyLoad]="thumbnailURL" (onLoad)="imageLoaded($event)" alt="Thumbnail">
<span *ngIf="!image_loaded">
<ngx-content-loading [width]="500" [height]="360">
<svg:g ngx-rect width="500" height="360" y="0" x="0" rx="4" ry="4"></svg:g>
</ngx-content-loading>
</span>
</div>
</div>
<div class="centered example-full-width-height"><img class="image" src="{{thumbnailURL}}" alt="Thumbnail"></div>
</mat-card>