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

package.json

@@ -26,7 +26,9 @@
     "@angular/router": "^8.2.11",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
+    "ng-lazyload-image": "^7.0.1",
     "ng4-configure": "^0.1.7",
+    "ngx-content-loading": "^0.1.3",
     "rxjs": "^6.5.3",
     "rxjs-compat": "^6.0.0-rc.0",
     "tslib": "^1.10.0",

src/app/app.module.ts

@@ -24,6 +24,8 @@ import {VgControlsModule} from 'videogular2/compiled/controls';
 import {VgOverlayPlayModule} from 'videogular2/compiled/overlay-play';
 import {VgBufferingModule} from 'videogular2/compiled/buffering';
 import { InputDialogComponent } from './input-dialog/input-dialog.component';
+import { LazyLoadImageModule } from 'ng-lazyload-image';
+import { NgxContentLoadingModule } from 'ngx-content-loading';
 
 @NgModule({
   declarations: [
@@ -62,8 +64,10 @@ import { InputDialogComponent } from './input-dialog/input-dialog.component';
     VgControlsModule,
     VgOverlayPlayModule,
     VgBufferingModule,
+    LazyLoadImageModule,
+    NgxContentLoadingModule,
     RouterModule,
-    AppRoutingModule
+    AppRoutingModule,
   ],
   entryComponents: [
     InputDialogComponent

src/app/file-card/file-card.component.css

@@ -30,4 +30,30 @@
   margin: 0 auto;
   top: 50%;
   left: 50%;
+}
+
+.img-div {
+  max-height: 80px;
+  padding: 0px;
+  margin: 0px 0px 0px -5px;
+  width: calc(100% + 5px + 5px);
+}
+
+.max-two-lines {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 2.4em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+@media (max-width: 576px){
+ 
+  .example-card {
+    width: 125px !important;
+  }
+   
 }

src/app/file-card/file-card.component.html

@@ -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>

src/app/file-card/file-card.component.ts

@@ -20,6 +20,7 @@ export class FileCardComponent implements OnInit {
   @Input() isPlaylist = false;
   @Input() count = null;
   type;
+  image_loaded = false;
 
   constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent) { }
 
@@ -43,6 +44,10 @@ export class FileCardComponent implements OnInit {
 
   }
 
+  imageLoaded(loaded) {
+    this.image_loaded = true;
+  }
+
   public openSnackBar(message: string, action: string) {
     this.snackBar.open(message, action, {
       duration: 2000,