added gifv support #38

src/app/components/stream/status/action-bar/action-bar.component.ts

@@ -11,7 +11,6 @@ import { AccountInfo } from '../../../../states/accounts.state';
 import { Status } from '../../../../services/models/mastodon.interfaces';
 import { ToolsService } from '../../../../services/tools.service';
 import { NotificationService } from '../../../../services/notification.service';
-import { st } from '@angular/core/src/render3';
 
 @Component({
     selector: 'app-action-bar',

src/app/components/stream/status/attachements/attachements.component.html

@@ -1,57 +1,53 @@
 <div class="galery" *ngIf="isImage">
     <div class="galery__image">
-
         <a *ngIf="attachments.length === 1" class="galery__image--link" title="{{ attachments[0].text_url }}"
             (click)="attachmentSelected(0)">
             <img class="galery__image--1" src="{{ attachments[0].preview_url }}" />
         </a>
 
         <a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
-            title="{{ attachments[0].text_url }}"
-            (click)="attachmentSelected(0)">
+            title="{{ attachments[0].text_url }}" (click)="attachmentSelected(0)">
             <img src="{{ attachments[0].preview_url }}" />
         </a>
         <a *ngIf="attachments.length === 2" class="galery__image--link galery__image--link-2"
-            title="{{ attachments[1].text_url }}"
-            (click)="attachmentSelected(1)">
+            title="{{ attachments[1].text_url }}" (click)="attachmentSelected(1)">
             <img src="{{ attachments[1].preview_url }}" />
         </a>
 
         <a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-1"
-            title="{{ attachments[0].text_url }}"
-            (click)="attachmentSelected(0)">
+            title="{{ attachments[0].text_url }}" (click)="attachmentSelected(0)">
             <img src="{{ attachments[0].preview_url }}" />
         </a>
         <a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
-            title="{{ attachments[1].text_url }}"
-            (click)="attachmentSelected(1)">
+            title="{{ attachments[1].text_url }}" (click)="attachmentSelected(1)">
             <img src="{{ attachments[1].preview_url }}" />
         </a>
         <a *ngIf="attachments.length === 3" class="galery__image--link galery__image--link-3-2"
-            title="{{ attachments[2].text_url }}"
-            (click)="attachmentSelected(2)">
+            title="{{ attachments[2].text_url }}" (click)="attachmentSelected(2)">
             <img src="{{ attachments[2].urpreview_urll }}" />
         </a>
 
         <a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
-            title="{{ attachments[0].text_url }}"
-            (click)="attachmentSelected(0)">
+            title="{{ attachments[0].text_url }}" (click)="attachmentSelected(0)">
             <img src="{{ attachments[0].preview_url }}" />
         </a>
         <a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
-            title="{{ attachments[1].text_url }}"
-            (click)="attachmentSelected(1)">
+            title="{{ attachments[1].text_url }}" (click)="attachmentSelected(1)">
             <img src="{{ attachments[1].preview_url }}" />
         </a>
         <a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
-            title="{{ attachments[2].text_url }}"
-            (click)="attachmentSelected(2)">
+            title="{{ attachments[2].text_url }}" (click)="attachmentSelected(2)">
             <img src="{{ attachments[2].preview_url }}" />
         </a>
         <a *ngIf="attachments.length === 4" class="galery__image--link galery__image--link-4"
-            title="{{ attachments[3].text_url }}"
-            (click)="attachmentSelected(3)">
+            title="{{ attachments[3].text_url }}" (click)="attachmentSelected(3)">
             <img src="{{ attachments[3].preview_url }}" />
         </a>
     </div>
 </div>
+<div class="galery" *ngIf="isGifv">
+    <!-- <video width="480" height="320" controls="controls"> -->
+    <video class="galery__gifv" role="application" loop autoplay>
+       <source src="{{ attachments[0].url }}" type="video/mp4"> 
+    </video>
+</div>

src/app/components/stream/status/attachements/attachements.component.scss

@@ -71,4 +71,10 @@
             }
         }
     }
+
+    &__gifv{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 }

src/app/components/stream/status/attachements/attachements.component.ts

@@ -12,6 +12,7 @@ import { OpenMediaEvent } from '../../../../models/common.model';
 export class AttachementsComponent implements OnInit {
     private _attachments: Attachment[];
     isImage: boolean;
+    isGifv: boolean;
     imageUrls: string[];
 
     @Input('attachments')
@@ -20,7 +21,9 @@ export class AttachementsComponent implements OnInit {
 
         if (this._attachments[0].type === 'image') {
             this.isImage = true;
-            // this.imageUrls = this._attachments.map(x => x.url);
+        } else if(this._attachments[0].type === 'gifv'){
+            console.warn(value);
+            this.isGifv = true;
         }
     }
     get attachments(): Attachment[] {