added card component #64

src/app/app.module.ts

@@ -57,6 +57,7 @@ import { MentionsComponent } from './components/floating-column/manage-account/m
 import { NotificationsComponent } from './components/floating-column/manage-account/notifications/notifications.component';
 import { SettingsState } from './states/settings.state';
 import { AccountEmojiPipe } from './pipes/account-emoji.pipe';
+import { CardComponent } from './components/stream/status/card/card.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -102,7 +103,8 @@ const routes: Routes = [
     DirectMessagesComponent,
     MentionsComponent,
     NotificationsComponent,
-    AccountEmojiPipe
+    AccountEmojiPipe,
+    CardComponent
   ],
   imports: [
     FontAwesomeModule,

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

@@ -0,0 +1,3 @@
+<p>
+  card works!
+</p>

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

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

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

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Card } from '../../../../services/models/mastodon.interfaces';
+
+@Component({
+    selector: 'app-card',
+    templateUrl: './card.component.html',
+    styleUrls: ['./card.component.scss']
+})
+export class CardComponent implements OnInit {
+
+    @Input() card: Card;
+
+    constructor() { }
+
+    ngOnInit() {
+        console.warn('card');
+        console.warn(this.card);
+    }
+
+}

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

@@ -1,12 +1,15 @@
 <div class="reblog" *ngIf="reblog">
-    <a class="reblog__profile-link" href (click)="openAccount(status.account)"><span innerHTML="{{ status.account | accountEmoji }}"></span> <img *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
+    <a class="reblog__profile-link" href (click)="openAccount(status.account)"><span
+            innerHTML="{{ status.account | accountEmoji }}"></span> <img *ngIf="reblog" class="reblog__avatar"
+            src="{{ status.account.avatar }}" /></a> boosted
 </div>
 <div *ngIf="notificationType === 'favourite'">
     <div class="notification--icon">
         <fa-icon class="favorite" [icon]="faStar"></fa-icon>
     </div>
     <div class="notification--label">
-        <a href class="notification--link" (click)="openAccount(notificationAccount)" innerHTML="{{ notificationAccount  | accountEmoji }}"></a> favorited your status
+        <a href class="notification--link" (click)="openAccount(notificationAccount)"
+            innerHTML="{{ notificationAccount  | accountEmoji }}"></a> favorited your status
     </div>
 </div>
 <div *ngIf="notificationType === 'reblog'">
@@ -14,7 +17,8 @@
         <fa-icon class="boost" [icon]="faRetweet"></fa-icon>
     </div>
     <div class="notification--label">
-        <a href class="notification--link" (click)="openAccount(notificationAccount)" innerHTML="{{ notificationAccount | accountEmoji }}"></a> boosted your status
+        <a href class="notification--link" (click)="openAccount(notificationAccount)"
+            innerHTML="{{ notificationAccount | accountEmoji }}"></a> boosted your status
     </div>
 </div>
 <div class="status">
@@ -62,6 +66,9 @@
         <app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="statusContent"
             (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
             (textSelected)="textSelected()"></app-databinded-text>
+
+        <app-card *ngIf="displayedStatus.card" [card]="displayedStatus.card"></app-card>
+
         <app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
             [attachments]="displayedStatus.media_attachments">
         </app-attachements>
@@ -69,6 +76,6 @@
         <app-action-bar #appActionBar [statusWrapper]="statusWrapper" (cwIsActiveEvent)="changeCw($event)"
             (replyEvent)="openReply()"></app-action-bar>
     </div>
-    <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper"
-        (onClose)="closeReply()"></app-create-status>
+    <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper" (onClose)="closeReply()">
+    </app-create-status>
 </div>

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

@@ -47,6 +47,7 @@ export class StatusComponent implements OnInit {
     @Input('statusWrapper')
     set statusWrapper(value: StatusWrapper) {
         this._statusWrapper = value;
+        console.warn(value.status);
         this.status = value.status;
 
         if (this.status.reblog) {

src/app/services/models/mastodon.interfaces.ts

@@ -83,6 +83,14 @@ export interface Card {
     title: string;
     description: string;
     image: string;
+    type: 'link' | 'photo' | 'video' | 'rich';
+    author_name: string;
+    author_url: string;
+    provider_name: string;
+    provider_url: string;
+    html: any;
+    width: number;
+    height: number;
 }
 
 export interface Context {
@@ -165,6 +173,7 @@ export interface Status {
     emojis: Emoji[];
     language: string;
     pinned: boolean;
+    card: Card;
 
     pleroma: PleromaStatusInfo;
 }