From 158a2f4927128cf96489a062d5115ed02f136d69 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Thu, 2 May 2019 11:26:38 +0200 Subject: [PATCH 01/19] added card component #64 --- src/app/app.module.ts | 4 ++- .../stream/status/card/card.component.html | 3 +++ .../stream/status/card/card.component.scss | 0 .../stream/status/card/card.component.spec.ts | 25 +++++++++++++++++++ .../stream/status/card/card.component.ts | 21 ++++++++++++++++ .../stream/status/status.component.html | 17 +++++++++---- .../stream/status/status.component.ts | 1 + .../services/models/mastodon.interfaces.ts | 9 +++++++ 8 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 src/app/components/stream/status/card/card.component.html create mode 100644 src/app/components/stream/status/card/card.component.scss create mode 100644 src/app/components/stream/status/card/card.component.spec.ts create mode 100644 src/app/components/stream/status/card/card.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 55363929..b266018c 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/stream/status/card/card.component.html b/src/app/components/stream/status/card/card.component.html new file mode 100644 index 00000000..0f9abc54 --- /dev/null +++ b/src/app/components/stream/status/card/card.component.html @@ -0,0 +1,3 @@ +

+ card works! +

diff --git a/src/app/components/stream/status/card/card.component.scss b/src/app/components/stream/status/card/card.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/stream/status/card/card.component.spec.ts b/src/app/components/stream/status/card/card.component.spec.ts new file mode 100644 index 00000000..e141708a --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/stream/status/card/card.component.ts b/src/app/components/stream/status/card/card.component.ts new file mode 100644 index 00000000..1a60a07a --- /dev/null +++ b/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); + } + +} diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html index d37da194..4500ead7 100644 --- a/src/app/components/stream/status/status.component.html +++ b/src/app/components/stream/status/status.component.html @@ -1,12 +1,15 @@
- boosted + boosted
- favorited your status + favorited your status
@@ -14,7 +17,8 @@
- boosted your status + boosted your status
@@ -62,6 +66,9 @@ + + + @@ -69,6 +76,6 @@
- + + \ 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 5becff16..8f318766 100644 --- a/src/app/components/stream/status/status.component.ts +++ b/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) { diff --git a/src/app/services/models/mastodon.interfaces.ts b/src/app/services/models/mastodon.interfaces.ts index fc9b5cb6..32facf64 100644 --- a/src/app/services/models/mastodon.interfaces.ts +++ b/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; } From 4e9b2b34f03265007534016d9e9d1cf9dfb0ab93 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Thu, 2 May 2019 12:26:12 +0200 Subject: [PATCH 02/19] first implementation of link card #64 --- .../stream/status/card/card.component.html | 11 +++-- .../stream/status/card/card.component.scss | 44 +++++++++++++++++++ .../stream/status/card/card.component.ts | 4 ++ .../stream/status/status.component.html | 2 +- .../stream/status/status.component.scss | 5 +++ .../stream/status/status.component.ts | 2 +- src/sass/_variables.scss | 4 +- 7 files changed, 66 insertions(+), 6 deletions(-) diff --git a/src/app/components/stream/status/card/card.component.html b/src/app/components/stream/status/card/card.component.html index 0f9abc54..138503d9 100644 --- a/src/app/components/stream/status/card/card.component.html +++ b/src/app/components/stream/status/card/card.component.html @@ -1,3 +1,8 @@ -

- card works! -

+
+ + + +

{{ card.title }}

+ {{ host }} + +
\ No newline at end of file diff --git a/src/app/components/stream/status/card/card.component.scss b/src/app/components/stream/status/card/card.component.scss index e69de29b..faa9b169 100644 --- a/src/app/components/stream/status/card/card.component.scss +++ b/src/app/components/stream/status/card/card.component.scss @@ -0,0 +1,44 @@ +@import "variables"; +// @import "mixins"; + +.card { + border: 1px solid $card-border-color; + background-color: $column-background; + border-radius: 3px; + transition: all .2s; + white-space: nowrap; + overflow: hidden; + + &:hover { + background-color: lighten($column-background, 5); + } + + &__link { + display: block; + text-decoration: none; + color: whitesmoke; + + &--image { + width: 55px; + height: 55px; + float: left; + object-fit: cover; + border-right: 1px solid $card-border-color; + margin-right: 10px; + } + + &--title { + margin: 10px 0 0 0px; + font-size: 1em; + } + + &--host { + margin: 10px 0 0 0px; + font-size: 0.8em; + opacity: .7; + } + + + } + +} \ No newline at end of file diff --git a/src/app/components/stream/status/card/card.component.ts b/src/app/components/stream/status/card/card.component.ts index 1a60a07a..dec12255 100644 --- a/src/app/components/stream/status/card/card.component.ts +++ b/src/app/components/stream/status/card/card.component.ts @@ -11,11 +11,15 @@ export class CardComponent implements OnInit { @Input() card: Card; + host: string; + constructor() { } ngOnInit() { console.warn('card'); console.warn(this.card); + + this.host = this.card.url.replace('https://', '').replace('http://', '').split('/')[0]; } } diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html index 4500ead7..c0a4e595 100644 --- a/src/app/components/stream/status/status.component.html +++ b/src/app/components/stream/status/status.component.html @@ -67,7 +67,7 @@ (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)" (textSelected)="textSelected()"> - + diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss index 24081958..6afae100 100644 --- a/src/app/components/stream/status/status.component.scss +++ b/src/app/components/stream/status/status.component.scss @@ -111,6 +111,11 @@ margin: 0 10px 0 $avatar-column-space; display: block; } + &__card { + word-wrap: break-word; + margin: 10px 10px 0 $avatar-column-space; + display: block; + } &__content-warning { min-height: 80px; display: block; // border: 1px solid greenyellow; diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts index 8f318766..d7d23a9d 100644 --- a/src/app/components/stream/status/status.component.ts +++ b/src/app/components/stream/status/status.component.ts @@ -47,7 +47,7 @@ export class StatusComponent implements OnInit { @Input('statusWrapper') set statusWrapper(value: StatusWrapper) { this._statusWrapper = value; - console.warn(value.status); + // console.warn(value.status); this.status = value.status; if (this.status.reblog) { diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 0c2bfcdb..48c735eb 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -50,4 +50,6 @@ $button-background-color-hover: lighten($color-primary, 20); -$column-background: #0f111a; \ No newline at end of file +$column-background: #0f111a; + +$card-border-color: #1e2435; \ No newline at end of file From 3f5208087efe653d3a8de53e7b1b055f9a55a879 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Thu, 2 May 2019 12:40:39 +0200 Subject: [PATCH 03/19] added icon placeholder #64 --- src/app/components/stream/status/card/card.component.html | 7 +++++-- src/app/components/stream/status/card/card.component.scss | 7 +++++++ src/app/components/stream/status/card/card.component.ts | 3 +++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/app/components/stream/status/card/card.component.html b/src/app/components/stream/status/card/card.component.html index 138503d9..24956925 100644 --- a/src/app/components/stream/status/card/card.component.html +++ b/src/app/components/stream/status/card/card.component.html @@ -1,7 +1,10 @@
- - + +
+ +
+

{{ card.title }}

{{ host }} diff --git a/src/app/components/stream/status/card/card.component.scss b/src/app/components/stream/status/card/card.component.scss index faa9b169..9071080d 100644 --- a/src/app/components/stream/status/card/card.component.scss +++ b/src/app/components/stream/status/card/card.component.scss @@ -25,6 +25,13 @@ object-fit: cover; border-right: 1px solid $card-border-color; margin-right: 10px; + + &--logo { + display: block; + font-size: 24px; + color: lighten($card-border-color, 5); + margin: 9px 0 0 18px; + } } &--title { diff --git a/src/app/components/stream/status/card/card.component.ts b/src/app/components/stream/status/card/card.component.ts index dec12255..2c953156 100644 --- a/src/app/components/stream/status/card/card.component.ts +++ b/src/app/components/stream/status/card/card.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit, Input } from '@angular/core'; +// import { faWindowClose, faReply, faRetweet, faStar } from "@fortawesome/free-solid-svg-icons"; +import { faFileAlt } from "@fortawesome/free-regular-svg-icons"; import { Card } from '../../../../services/models/mastodon.interfaces'; @@ -8,6 +10,7 @@ import { Card } from '../../../../services/models/mastodon.interfaces'; styleUrls: ['./card.component.scss'] }) export class CardComponent implements OnInit { + faFileAlt = faFileAlt; @Input() card: Card; From efbf14b466185a78688826dd48c57d507c106dc5 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Thu, 2 May 2019 19:39:47 +0200 Subject: [PATCH 04/19] starting video preview #64 --- .../stream/status/card/card.component.html | 23 ++++++++++++ .../stream/status/card/card.component.scss | 35 +++++++++++++++++++ 2 files changed, 58 insertions(+) diff --git a/src/app/components/stream/status/card/card.component.html b/src/app/components/stream/status/card/card.component.html index 24956925..ed20d3ce 100644 --- a/src/app/components/stream/status/card/card.component.html +++ b/src/app/components/stream/status/card/card.component.html @@ -8,4 +8,27 @@

{{ card.title }}

{{ host }} +
+ +
+
+
+
+ + + + + + + + + +
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/components/stream/status/card/card.component.scss b/src/app/components/stream/status/card/card.component.scss index 9071080d..c1909f66 100644 --- a/src/app/components/stream/status/card/card.component.scss +++ b/src/app/components/stream/status/card/card.component.scss @@ -48,4 +48,39 @@ } + &__photo { + + } + + &__video { + // border-radius: 3px; + + &--preview { + position: relative; + + &--controls { + position: absolute; + top: 50px; + left: 50px; + outline: 2px solid greenyellow; + width: 100px; + height: 50px; + z-index: 10; + + } + + &--image { + width: 100%; + height: 150px; + // border: 1px solid salmon; + object-fit: cover; + } + } + + } + + &__rich { + + + } } \ No newline at end of file From 8c5b25f864ea0e2ce53f0834c79331f1837665aa Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Wed, 15 May 2019 23:30:16 -0400 Subject: [PATCH 05/19] video datacards are working --- package-lock.json | 2 +- .../stream/status/card/card.component.html | 24 +++++----- .../stream/status/card/card.component.scss | 24 +++++++++- .../stream/status/card/card.component.ts | 45 ++++++++++++++++--- 4 files changed, 77 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc2bb044..743d185b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "sengi", - "version": "0.6.0", + "version": "0.7.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/app/components/stream/status/card/card.component.html b/src/app/components/stream/status/card/card.component.html index ed20d3ce..edfb4999 100644 --- a/src/app/components/stream/status/card/card.component.html +++ b/src/app/components/stream/status/card/card.component.html @@ -12,23 +12,27 @@
-
+
- - + + - - + + - - + +
- +
-
+
+ +
-
+
\ No newline at end of file diff --git a/src/app/components/stream/status/card/card.component.scss b/src/app/components/stream/status/card/card.component.scss index c1909f66..1e96d2e2 100644 --- a/src/app/components/stream/status/card/card.component.scss +++ b/src/app/components/stream/status/card/card.component.scss @@ -61,12 +61,27 @@ &--controls { position: absolute; top: 50px; - left: 50px; - outline: 2px solid greenyellow; + left: 65px; + // outline: 2px solid greenyellow; width: 100px; height: 50px; z-index: 10; + border-radius: 5px; + background-color: rgba($color: #000000, $alpha: .85); + padding-left: 12px; + } + &--link { + transition: all .2s; + display: block; + color: whitesmoke; + font-size: 16px; + margin: 12px 5px 0 5px; + float: left; + + &:hover { + opacity: 0.7; + } } &--image { @@ -77,6 +92,11 @@ } } + &--content { + //width: 300px; + width: 100%; + height: 150px; + } } &__rich { diff --git a/src/app/components/stream/status/card/card.component.ts b/src/app/components/stream/status/card/card.component.ts index 2c953156..bbe5eda3 100644 --- a/src/app/components/stream/status/card/card.component.ts +++ b/src/app/components/stream/status/card/card.component.ts @@ -1,28 +1,63 @@ -import { Component, OnInit, Input } from '@angular/core'; -// import { faWindowClose, faReply, faRetweet, faStar } from "@fortawesome/free-solid-svg-icons"; +import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; +import { faPlay, faExpand, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; import { faFileAlt } from "@fortawesome/free-regular-svg-icons"; import { Card } from '../../../../services/models/mastodon.interfaces'; + @Component({ selector: 'app-card', templateUrl: './card.component.html', styleUrls: ['./card.component.scss'] }) export class CardComponent implements OnInit { + faPlay = faPlay; + faExpand = faExpand; faFileAlt = faFileAlt; + faExternalLinkAlt = faExternalLinkAlt; @Input() card: Card; + @ViewChild('video') myVideo: ElementRef; host: string; + html: SafeHtml; + showHtml: boolean; - constructor() { } + constructor(private sanitizer: DomSanitizer) { } ngOnInit() { - console.warn('card'); - console.warn(this.card); + // console.warn('card'); + // console.warn(this.card); this.host = this.card.url.replace('https://', '').replace('http://', '').split('/')[0]; + this.html = this.sanitize(this.card); } + private sanitize(card: Card): SafeHtml{ + if(!card.html) return null; + + let html = card.html.replace(`width="${card.width}"`, ''); + html = html.replace(`height="${card.height}"`, ''); + html = html.replace(`