perf(champions): limit data use for small devices

Author: SteveVanOpstal

src/client/champion/champion.component.ts

@@ -6,7 +6,12 @@ import {Component, Input} from '@angular/core';
     <a id="{{champion?.id}}" [routerLink]="[champion?.key]">
       <img [attr.alt]="champion?.name"
             class="nodrag"
-            [attr.src]="'champion/loading/' + champion?.key + '_0.jpg' | lbDDragon">
+            [attr.src]="'champion/' + champion?.image?.full | lbDDragon"
+            [attr.srcset]="
+            ('champion/' + champion?.image?.full | lbDDragon:false) + ' 1350w, ' + 
+            ('champion/loading/' + champion?.key + '_0.jpg' | lbDDragon:false) + ' 2000w'"
+            [style.height]="imageHeight"
+            (load)="loaded($event)">
       <div class="info">
         <p class="nodrag noselect">{{champion?.name}}</p>
         <lb-bar title="Attack Damage" class="attack"  [value]="champion?.info.attack"></lb-bar>
@@ -18,5 +23,18 @@ import {Component, Input} from '@angular/core';
 })
 
 export class ChampionComponent {
-  @Input() champion: {key: ''};
+  @Input() champion: any;
+  imageHeight: string = '';
+
+  loaded(event: Event) {
+    let img: any = event.target;
+    if (!img.currentSrc) {
+      return;
+    }
+    if (img.currentSrc.indexOf('champion/loading') > 0) {
+      this.imageHeight = '';
+    } else {
+      this.imageHeight = '100px';
+    }
+  }
 }

src/client/champion/champion.css

@@ -13,7 +13,6 @@ lb-champions p {
 }
 
 lb-champions lb-champion {
-  height: 275px;
   margin: -1px -2px;
 }
 
@@ -139,7 +138,6 @@ lb-filters .right label {
 
 @media (max-width: 1350px) {
   lb-champions lb-champion {
-    height: 181px;
     margin: initial;
     padding: 5px;
     width: 100px;

src/client/services/lolapi.service.ts

@@ -38,7 +38,7 @@ export class LolApiService {
   }
 
   public getChampions(): Observable<any> {
-    return this.get(Endpoint.static, 'static-data', '/champion?champData=info,tags');
+    return this.get(Endpoint.static, 'static-data', '/champion?champData=info,tags,image');
   }
 
   public getChampion(championKey: string): Observable<any> {

src/client/shared/ddragon.pipe.spec.ts

@@ -48,7 +48,7 @@ describe('DDragonPipe', () => {
      inject([DDragonPipe], (pipe) => {
        let result = pipe.buildImage('test.png', undefined);
        expect(result).toBeDefined();
-       result = pipe.buildImage('test.png', undefined);
+       result = pipe.buildImage(undefined, realm);
        expect(result).toBeDefined();
      }));
 

src/client/shared/ddragon.pipe.ts

@@ -11,11 +11,13 @@ export class DDragonPipe implements PipeTransform {
   resolvedImage: SafeUrl = '';
   image: string = '';
 
-  constructor(private lolApi: LolApiService, sanitizer: DomSanitizer) {
-    this.resolvedImage = sanitizer.bypassSecurityTrustUrl(defaultImage);
-  }
 
-  transform(image: string): any {
+  constructor(private lolApi: LolApiService, private sanitizer: DomSanitizer) {}
+
+  transform(image: string, addDefault: boolean = true): any {
+    if (!this.resolvedImage && addDefault) {
+      this.resolvedImage = this.sanitizer.bypassSecurityTrustUrl(defaultImage);
+    }
     if (this.image === image) {
       return this.resolvedImage;
     }