From 1c16425bb08c3e3875c261f78922b50c4e399009 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Thu, 20 Sep 2018 23:27:04 -0400
Subject: [PATCH] starting displaying attachments

---
 src/app/app.module.ts                         |  4 ++-
 .../attachements/attachements.component.html  |  3 ++
 .../attachements/attachements.component.scss  | 11 +++++++
 .../attachements.component.spec.ts            | 25 +++++++++++++++
 .../attachements/attachements.component.ts    | 32 +++++++++++++++++++
 .../stream/status/status.component.html       |  4 +++
 .../stream/status/status.component.scss       |  5 +++
 .../stream/status/status.component.ts         |  5 +++
 8 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/stream/status/attachements/attachements.component.html
 create mode 100644 src/app/components/stream/status/attachements/attachements.component.scss
 create mode 100644 src/app/components/stream/status/attachements/attachements.component.spec.ts
 create mode 100644 src/app/components/stream/status/attachements/attachements.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ebd6e865..3d294881 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/stream/status/attachements/attachements.component.html b/src/app/components/stream/status/attachements/attachements.component.html
new file mode 100644
index 00000000..eeb4827c
--- /dev/null
+++ b/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>
diff --git a/src/app/components/stream/status/attachements/attachements.component.scss b/src/app/components/stream/status/attachements/attachements.component.scss
new file mode 100644
index 00000000..fd9d7204
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/stream/status/attachements/attachements.component.spec.ts b/src/app/components/stream/status/attachements/attachements.component.spec.ts
new file mode 100644
index 00000000..67a8e36f
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/components/stream/status/attachements/attachements.component.ts b/src/app/components/stream/status/attachements/attachements.component.ts
new file mode 100644
index 00000000..f3920e08
--- /dev/null
+++ b/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() {
+    }
+
+}
diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index 05b001da..cf50a340 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/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 />
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index 5a6b59c0..903765e7 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts
index 763e06c4..b0c36d3d 100644
--- a/src/app/components/stream/status/status.component.ts
+++ b/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{