first diplay of attachments

src/app/app.module.ts

@@ -49,6 +49,7 @@ import { NotificationHubComponent } from './components/notification-hub/notifica
 import { NotificationService } from "./services/notification.service";
 import { MediaViewerComponent } from './components/media-viewer/media-viewer.component';
 import { CreateStatusComponent } from './components/create-status/create-status.component';
+import { MediaComponent } from './components/create-status/media/media.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -87,7 +88,8 @@ const routes: Routes = [
     TutorialComponent,
     NotificationHubComponent,
     MediaViewerComponent,
-    CreateStatusComponent
+    CreateStatusComponent,
+    MediaComponent
   ],
   imports: [
     FontAwesomeModule,

src/app/components/create-status/create-status.component.html

@@ -18,4 +18,6 @@
     </div>
     <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="statusReplyingToWrapper">REPLY!</button>
     <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="!statusReplyingToWrapper">POST!</button>
+
+    <app-media></app-media>
 </form>

src/app/components/create-status/media/media.component.html

@@ -0,0 +1,8 @@
+<div *ngFor="let m of media" class="media">
+    <div *ngIf="m.attachment === null" class="media__loading">
+        uploading {{ m.file.name }}
+    </div>
+    <div *ngIf="m.attachment !== null" class="media__loaded">
+        <img class="media__preview" src="{{m.attachment.preview_url}}" />
+    </div>
+</div>

src/app/components/create-status/media/media.component.scss

@@ -0,0 +1,24 @@
+@import "variables";
+
+.media {
+    width: calc(100%);
+    padding: 0 5px 5px 5px;
+
+    &__loading{
+        width: calc(100%);
+        border: 1px solid $status-secondary-color;
+        background: rgb(0, 96, 134);
+        overflow: hidden;
+        padding: 5px;
+    }
+    &__loaded{
+        width: calc(100%);
+        border: 1px solid $status-secondary-color;
+    }
+    &__preview {
+        width: calc(100%);
+        height: 150px;
+        object-fit: cover;
+        object-position: 50% 50%;
+    }
+}

src/app/components/create-status/media/media.component.spec.ts

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

src/app/components/create-status/media/media.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { MediaService, MediaWrapper } from '../../../services/media.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+    selector: 'app-media',
+    templateUrl: './media.component.html',
+    styleUrls: ['./media.component.scss']
+})
+export class MediaComponent implements OnInit, OnDestroy {
+    media: MediaWrapper[] = [];
+    private mediaSub: Subscription;
+
+    constructor(private readonly mediaService: MediaService) { }
+
+    ngOnInit() {
+        this.mediaSub = this.mediaService.mediaSubject.subscribe((media: MediaWrapper[]) => {
+            this.media = media;
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.mediaSub.unsubscribe();
+    }
+}