2018-10-27 02:20:01 +02:00
|
|
|
import { Component, OnInit, Input, Output, Inject, LOCALE_ID, ElementRef, EventEmitter, Pipe, PipeTransform, ViewChild, Renderer2 } from "@angular/core";
|
|
|
|
import { Status, Account } from "../../../services/models/mastodon.interfaces";
|
2018-09-19 07:03:07 +02:00
|
|
|
import { formatDate } from '@angular/common';
|
2018-09-21 04:51:18 +02:00
|
|
|
import { stateNameErrorMessage } from "@ngxs/store/src/decorators/state";
|
2018-10-02 05:46:12 +02:00
|
|
|
import { StatusWrapper } from "../stream.component";
|
2018-09-16 04:08:59 +02:00
|
|
|
|
2018-10-27 02:20:01 +02:00
|
|
|
import { DomSanitizer } from '@angular/platform-browser'
|
2018-09-16 04:08:59 +02:00
|
|
|
|
|
|
|
@Component({
|
2018-09-19 07:03:07 +02:00
|
|
|
selector: "app-status",
|
|
|
|
templateUrl: "./status.component.html",
|
|
|
|
styleUrls: ["./status.component.scss"]
|
2018-09-16 04:08:59 +02:00
|
|
|
})
|
|
|
|
export class StatusComponent implements OnInit {
|
2018-09-21 04:51:18 +02:00
|
|
|
displayedStatus: Status;
|
|
|
|
reblog: boolean;
|
2018-09-21 05:27:04 +02:00
|
|
|
hasAttachments: boolean;
|
2018-10-13 07:10:43 +02:00
|
|
|
replyingToStatus: boolean;
|
2018-09-21 04:51:18 +02:00
|
|
|
|
2018-10-31 05:02:03 +01:00
|
|
|
@Output() browseAccount = new EventEmitter<string>();
|
2018-10-22 07:41:54 +02:00
|
|
|
@Output() browseHashtag = new EventEmitter<string>();
|
|
|
|
@Output() browseThread = new EventEmitter<string>();
|
|
|
|
|
2018-10-02 05:46:12 +02:00
|
|
|
private _statusWrapper: StatusWrapper;
|
|
|
|
status: Status;
|
|
|
|
@Input('statusWrapper')
|
|
|
|
set statusWrapper(value: StatusWrapper) {
|
|
|
|
this._statusWrapper = value;
|
|
|
|
this.status = value.status;
|
2018-09-21 04:51:18 +02:00
|
|
|
|
2018-10-27 02:20:01 +02:00
|
|
|
//TEST
|
2018-10-28 04:58:00 +01:00
|
|
|
//this.status.content += '<br/><br/><a href class="test">TEST</a>';
|
2018-10-27 02:20:01 +02:00
|
|
|
|
|
|
|
|
|
|
|
if (this.status.reblog) {
|
2018-09-21 04:51:18 +02:00
|
|
|
this.reblog = true;
|
2018-10-02 05:46:12 +02:00
|
|
|
this.displayedStatus = this.status.reblog;
|
2018-09-21 04:51:18 +02:00
|
|
|
} else {
|
2018-10-02 05:46:12 +02:00
|
|
|
this.displayedStatus = this.status;
|
2018-09-21 04:51:18 +02:00
|
|
|
}
|
2018-10-27 02:20:01 +02:00
|
|
|
|
|
|
|
if (!this.displayedStatus.account.display_name) {
|
2018-09-21 04:51:18 +02:00
|
|
|
this.displayedStatus.account.display_name = this.displayedStatus.account.username;
|
|
|
|
}
|
|
|
|
|
2018-10-27 02:20:01 +02:00
|
|
|
if (this.displayedStatus.media_attachments && this.displayedStatus.media_attachments.length > 0) {
|
2018-09-21 05:27:04 +02:00
|
|
|
this.hasAttachments = true;
|
|
|
|
}
|
|
|
|
|
2018-10-27 02:20:01 +02:00
|
|
|
|
|
|
|
}
|
|
|
|
get statusWrapper(): StatusWrapper {
|
2018-10-02 05:46:12 +02:00
|
|
|
return this._statusWrapper;
|
2018-09-21 04:51:18 +02:00
|
|
|
}
|
2018-10-27 02:20:01 +02:00
|
|
|
|
2018-09-16 04:08:59 +02:00
|
|
|
|
2018-10-28 05:45:32 +01:00
|
|
|
constructor(@Inject(LOCALE_ID) private locale: string) { }
|
2018-09-16 04:08:59 +02:00
|
|
|
|
2018-10-27 02:20:01 +02:00
|
|
|
ngOnInit() {
|
|
|
|
}
|
|
|
|
|
2018-10-28 05:45:32 +01:00
|
|
|
// ngAfterViewInit() {
|
|
|
|
// let el = this.contentElement.nativeElement.querySelector('.test');
|
|
|
|
// console.log(this.contentElement.nativeElement);
|
|
|
|
// console.log(el);
|
|
|
|
// if (el)
|
|
|
|
// this.renderer.listen(el, 'click', (el2) => {
|
|
|
|
// console.log(el2);
|
|
|
|
// console.warn('YOOOOO');
|
|
|
|
// return false;
|
|
|
|
// });
|
|
|
|
// }
|
2018-09-16 04:08:59 +02:00
|
|
|
|
2018-10-27 02:20:01 +02:00
|
|
|
openAccount(account: Account): boolean {
|
2018-10-31 05:02:03 +01:00
|
|
|
let accountName = account.acct;
|
|
|
|
if(!accountName.includes('@'))
|
|
|
|
accountName += `@${account.url.replace('https://', '').split('/')[0]}`;
|
|
|
|
|
|
|
|
this.browseAccount.next(accountName);
|
2018-10-22 07:41:54 +02:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2018-09-19 07:03:07 +02:00
|
|
|
getCompactRelativeTime(d: string): string {
|
|
|
|
const date = (new Date(d)).getTime();
|
|
|
|
const now = Date.now();
|
2018-09-19 07:23:19 +02:00
|
|
|
const timeDelta = (now - date) / (1000);
|
2018-09-19 07:03:07 +02:00
|
|
|
|
|
|
|
if (timeDelta < 60) {
|
2018-09-19 07:23:19 +02:00
|
|
|
return `${timeDelta | 0}s`;
|
2018-09-19 07:23:50 +02:00
|
|
|
} else if (timeDelta < 60 * 60) {
|
2018-09-19 07:23:19 +02:00
|
|
|
return `${timeDelta / 60 | 0}m`;
|
|
|
|
} else if (timeDelta < 60 * 60 * 24) {
|
2018-10-27 02:20:01 +02:00
|
|
|
return `${timeDelta / (60 * 60) | 0}h`;
|
2018-09-19 07:23:19 +02:00
|
|
|
} else if (timeDelta < 60 * 60 * 24 * 31) {
|
|
|
|
return `${timeDelta / (60 * 60 * 24) | 0}d`;
|
2018-09-19 07:03:07 +02:00
|
|
|
}
|
2018-10-27 02:20:01 +02:00
|
|
|
|
2018-09-19 07:03:07 +02:00
|
|
|
return formatDate(date, 'MM/dd', this.locale);
|
|
|
|
}
|
2018-10-13 07:10:43 +02:00
|
|
|
|
2018-10-27 02:20:01 +02:00
|
|
|
openReply(): boolean {
|
2018-10-13 07:10:43 +02:00
|
|
|
this.replyingToStatus = !this.replyingToStatus;
|
2018-10-27 02:20:01 +02:00
|
|
|
|
2018-10-13 07:10:43 +02:00
|
|
|
return false;
|
|
|
|
}
|
2018-10-13 17:38:23 +02:00
|
|
|
|
|
|
|
closeReply(): boolean {
|
|
|
|
this.replyingToStatus = false;
|
|
|
|
return false;
|
|
|
|
}
|
2018-10-27 02:20:01 +02:00
|
|
|
|
2018-10-31 04:27:20 +01:00
|
|
|
// test(): boolean {
|
|
|
|
// console.warn('heeeeyaaa!');
|
|
|
|
// return false;
|
|
|
|
// }
|
|
|
|
|
|
|
|
accountSelected(accountName: string): void {
|
|
|
|
console.warn(`status comp: accountSelected ${accountName}`);
|
2018-10-31 05:02:03 +01:00
|
|
|
this.browseAccount.next(accountName);
|
2018-10-31 04:27:20 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
hashtagSelected(hashtag: string): void {
|
|
|
|
console.warn(`status comp: hashtagSelected ${hashtag}`);
|
2018-10-31 05:02:03 +01:00
|
|
|
this.browseHashtag.next(hashtag);
|
2018-10-31 04:27:20 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
textSelected(): void {
|
|
|
|
console.warn(`status comp: textSelected`);
|
2018-10-27 02:20:01 +02:00
|
|
|
}
|
2018-09-16 04:08:59 +02:00
|
|
|
}
|