starting displaying attachments

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { MessageEditorComponent } from './components/floating-column/message-edi
 import { StreamsState } from "./states/streams.state";
 import { StatusComponent } from "./components/stream/status/status.component";
 import { MastodonService } from "./services/mastodon.service";
+import { AttachementsComponent } from './components/stream/status/attachements/attachements.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -48,7 +49,8 @@ const routes: Routes = [
     AccountIconComponent,
     FloatingColumnComponent,
     ColumnsEditorComponent,
-    MessageEditorComponent
+    MessageEditorComponent,
+    AttachementsComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,3 @@
+<div class="galery__image" *ngIf="isImage">
+    <img class="galery__image--1" src="{{ imageUrl }}" />
+</div>

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

@@ -0,0 +1,11 @@
+.galery__image {
+    width: 100%;
+    max-height: 150px;
+    overflow: hidden;
+    border-radius: 2px;
+
+    &--1 {
+        width: 100%;
+        height: auto;
+    }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AttachementsComponent } from './attachements.component';
+
+describe('AttachementsComponent', () => {
+  let component: AttachementsComponent;
+  let fixture: ComponentFixture<AttachementsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AttachementsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AttachementsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Attachment } from '../../../../services/models/mastodon.interfaces';
+
+@Component({
+    selector: 'app-attachements',
+    templateUrl: './attachements.component.html',
+    styleUrls: ['./attachements.component.scss']
+})
+export class AttachementsComponent implements OnInit {
+    private _attachments: Attachment[];
+    isImage: boolean;
+    imageUrl: string;
+
+    @Input('attachments')
+    set attachments(value: Attachment[]) {
+        this._attachments = value;
+
+        if(this._attachments[0].type === 'image'){
+            this.isImage = true;
+            this.imageUrl = this._attachments[0].url;
+        }
+    }
+    get attachments(): Attachment[] {
+        return this._attachments;
+    }
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

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

@@ -15,6 +15,10 @@
         getCompactRelativeTime(status.created_at) }}</div>
     <div class="status__content" innerHTML="{{displayedStatus.content}}"></div>
 
+    <div *ngIf="hasAttachments" class="attachments">
+        <app-attachements [attachments]="displayedStatus.media_attachments"></app-attachements>
+    </div>
+
     <!-- <div class="status_galery">
         <p>
             status.reblog: {{status.reblog}} <br />

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

@@ -106,4 +106,9 @@
     & .invisible {
         display: none;
     }
+}
+
+.attachments{
+    width: calc(100% - 80px);
+    margin: 0px 10px 10px 70px;
 }

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

@@ -12,6 +12,7 @@ import { stateNameErrorMessage } from "@ngxs/store/src/decorators/state";
 export class StatusComponent implements OnInit {
     displayedStatus: Status;
     reblog: boolean;
+    hasAttachments: boolean;
 
     private _status: Status;
     @Input('status')
@@ -29,6 +30,10 @@ export class StatusComponent implements OnInit {
             this.displayedStatus.account.display_name = this.displayedStatus.account.username;
         }
 
+        if(this.displayedStatus.media_attachments && this.displayedStatus.media_attachments.length > 0){
+            this.hasAttachments = true;
+        }
+
         
     }   
     get status(): Status{