display gifs

app/src/components/tweet-body/tweet-body.html

@@ -2,5 +2,6 @@
 <div>
   <p [innerHTML]="status"></p>
   <img *ngIf="hasPhoto" src="{{ entities.media[0]['media_url_https'] }}" alt="Photo" class="photo">
+  <video *ngIf="isGif" src="{{ extended_entities.media[0]['video_info']['variants'][0]['url'] }}" autoplay loop></video>
   <quoted-status *ngIf="data.quoted_status" [data]="data.quoted_status"></quoted-status>
 </div>

app/src/components/tweet-body/tweet-body.scss

@@ -8,4 +8,7 @@ tweet-body {
   p {
     white-space: pre-wrap;
   }
+  video {
+    width: 100%;
+  }
 }

app/src/components/tweet-body/tweet-body.ts

@@ -32,10 +32,28 @@ export class TweetBodyComponent {
     }
   }
 
+  get extended_entities() {
+    if (this.data["retweeted_status"]) {
+      return this.data["retweeted_status"]["extended_entities"];
+    } else {
+      return this.data["extended_entities"];
+    }
+  }
+
   get hasPhoto() {
     return (
       !this.data["private_tweet"] &&
+      !this.isGif &&
       (this.entities["media"] && this.entities["media"][0]["type"] == "photo")
     );
   }
+
+  get isGif() {
+    return (
+      !this.data["private_tweet"] &&
+      this.extended_entities &&
+      this.extended_entities["media"] &&
+      this.extended_entities["media"][0]["type"] === "animated_gif"
+    );
+  }
 }