Use webp images

maximpn · Sep 18, 2019 · bf371b6 · bf371b6 · vercel · Sep 18, 2019
1 parent 8c67bc2
commit bf371b6
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 6 deletions.
diff --git a/src/app/search-gif/components/gif-image/gif-image.component.html b/src/app/search-gif/components/gif-image/gif-image.component.html
@@ -1,7 +1,5 @@
 <div class="wrapper">
-  <video class="image" *ngIf="src" [width]="width" [height]="height" autoplay loop>
-    <source [src]="src" type="video/mp4">
-  </video>
+  <img *ngIf="src" [src]="src" [width]="width" [height]="height">
   <div class="panel">
     <mat-icon (click)="onLinkIconClick()">link</mat-icon>
   </div>

diff --git a/src/app/search-gif/components/gif-image/gif-image.component.spec.ts b/src/app/search-gif/components/gif-image/gif-image.component.spec.ts
@@ -35,7 +35,7 @@ describe('GifImageComponent', () => {
     component.gif = {
       images: {
         fixed_height: {
-          mp4: 'mp4-data',
+          webp: 'data',
           width: '100',
           height: '100',
         },
@@ -45,7 +45,7 @@ describe('GifImageComponent', () => {
     const change = new SimpleChange(undefined, component.gif, true);
     component.ngOnChanges({ gif: change });
 
-    expect(component.src).toBe('mp4-data');
+    expect(component.src).toBe('data');
     expect(component.width).toBe(100);
     expect(component.height).toBe(100);
   });

diff --git a/src/app/search-gif/components/gif-image/gif-image.component.ts b/src/app/search-gif/components/gif-image/gif-image.component.ts
@@ -34,7 +34,7 @@ export class GifImageComponent implements OnChanges {
   }
 
   private setImageProperties(imageData: Image): void {
-    this.src = imageData.mp4;
+    this.src = imageData.webp;
     this.width = parseInt(imageData.width, 10) || undefined;
     this.height = parseInt(imageData.height, 10) || undefined;
   }