fix #66
This commit is contained in:
Nicolas Constant
parent
8559d170f9
commit
d26490be62
|
|
@ -1,13 +1,12 @@
|
|||
<div class="profile flexcroll">
|
||||
<div class="profile flexcroll" #statusstream (scroll)="onScroll()">
|
||||
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
|
||||
|
||||
|
||||
<div *ngIf="account" class="profile-header" [ngStyle]="{'background-image':'url('+account.header+')'}">
|
||||
<div *ngIf="displayedAccount" class="profile-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
|
||||
<div class="profile-header__inner">
|
||||
<!-- <img class="profile-header__header" src="{{account.header}}" alt="header" /> -->
|
||||
<img class="profile-header__avatar" src="{{account.avatar}}" alt="header" />
|
||||
<h2 class="profile-header__display-name">{{account.display_name}}</h2>
|
||||
<h2 class="profile-header__fullhandle"><a href="{{account.url}}" target="_blank">@{{account.acct}}</a></h2>
|
||||
<img class="profile-header__avatar" src="{{displayedAccount.avatar}}" alt="header" />
|
||||
<h2 class="profile-header__display-name">{{displayedAccount.display_name}}</h2>
|
||||
<h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}" target="_blank">@{{displayedAccount.acct}}</a></h2>
|
||||
|
||||
<div class="profile-header__follow" *ngIf="relationship">
|
||||
<button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
|
||||
|
|
@ -32,14 +31,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="profile-sub-header ">
|
||||
<div *ngIf="account && hasNote" class="profile-description">
|
||||
<!-- <div *ngIf="account && account.note" class="profile-description"> -->
|
||||
<app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="account.note"
|
||||
<div *ngIf="displayedAccount && hasNote" class="profile-description">
|
||||
<app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="displayedAccount.note"
|
||||
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
|
||||
</app-databinded-text>
|
||||
</div>
|
||||
<div class="profile-fields" *ngIf="account && account.fields.length > 0">
|
||||
<div class="profile-fields__field" *ngFor="let field of account.fields">
|
||||
<div class="profile-fields" *ngIf="displayedAccount && displayedAccount.fields.length > 0">
|
||||
<div class="profile-fields__field" *ngFor="let field of displayedAccount.fields">
|
||||
<div class="profile-fields__field--value" innerHTML="{{field.value}}" [ngClass]="{'profile-fields__field--validated': field.verified_at }">
|
||||
</div>
|
||||
<div class="profile-fields__field--name">
|
||||
|
|
@ -49,8 +47,6 @@
|
|||
</div>
|
||||
|
||||
<div class="profile-statuses">
|
||||
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
|
||||
|
||||
<div *ngIf="!isLoading && !statusLoading && statuses.length == 0" class="profile-no-toots">
|
||||
no toots found
|
||||
</div>
|
||||
|
|
@ -60,6 +56,9 @@
|
|||
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
|
||||
</app-status>
|
||||
</div>
|
||||
|
||||
|
||||
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { faUser, faHourglassHalf, faUserCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faUser as faUserRegular } from "@fortawesome/free-regular-svg-icons";
|
||||
|
|
@ -25,10 +25,13 @@ export class UserProfileComponent implements OnInit {
|
|||
faHourglassHalf = faHourglassHalf;
|
||||
faUserCheck = faUserCheck;
|
||||
|
||||
account: Account;
|
||||
displayedAccount: Account;
|
||||
hasNote: boolean;
|
||||
|
||||
isLoading: boolean;
|
||||
|
||||
private maxReached = false;
|
||||
private maxId: string;
|
||||
statusLoading: boolean;
|
||||
error: string;
|
||||
|
||||
|
|
@ -41,6 +44,8 @@ export class UserProfileComponent implements OnInit {
|
|||
private accounts$: Observable<AccountInfo[]>;
|
||||
private accountSub: Subscription;
|
||||
|
||||
@ViewChild('statusstream') public statustream: ElementRef;
|
||||
|
||||
@Output() browseAccountEvent = new EventEmitter<string>();
|
||||
@Output() browseHashtagEvent = new EventEmitter<string>();
|
||||
@Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
|
||||
|
|
@ -61,12 +66,12 @@ export class UserProfileComponent implements OnInit {
|
|||
|
||||
ngOnInit() {
|
||||
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
|
||||
if (this.account) {
|
||||
this.currentlyUsedAccount = accounts.filter(x => x.isSelected)[0];
|
||||
if (this.displayedAccount) {
|
||||
const userAccount = accounts.filter(x => x.isSelected)[0];
|
||||
|
||||
this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
|
||||
this.toolsService.findAccount(userAccount, this.lastAccountName)
|
||||
.then((account: Account) => {
|
||||
this.getFollowStatus(this.currentlyUsedAccount, account);
|
||||
this.getFollowStatus(userAccount, account);
|
||||
})
|
||||
.catch((err: HttpErrorResponse) => {
|
||||
this.notificationService.notifyHttpError(err);
|
||||
|
|
@ -82,7 +87,7 @@ export class UserProfileComponent implements OnInit {
|
|||
private load(accountName: string) {
|
||||
this.statuses.length = 0;
|
||||
|
||||
this.account = null;
|
||||
this.displayedAccount = null;
|
||||
this.isLoading = true;
|
||||
|
||||
this.lastAccountName = accountName;
|
||||
|
|
@ -93,11 +98,11 @@ export class UserProfileComponent implements OnInit {
|
|||
this.isLoading = false;
|
||||
this.statusLoading = true;
|
||||
|
||||
this.account = account;
|
||||
this.displayedAccount = account;
|
||||
this.hasNote = account && account.note && account.note !== '<p></p>';
|
||||
|
||||
const getFollowStatusPromise = this.getFollowStatus(this.currentlyUsedAccount, this.account);
|
||||
const getStatusesPromise = this.getStatuses(this.currentlyUsedAccount, this.account);
|
||||
const getFollowStatusPromise = this.getFollowStatus(this.currentlyUsedAccount, this.displayedAccount);
|
||||
const getStatusesPromise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount);
|
||||
|
||||
return Promise.all([getFollowStatusPromise, getStatusesPromise]);
|
||||
})
|
||||
|
|
@ -113,11 +118,25 @@ export class UserProfileComponent implements OnInit {
|
|||
private getStatuses(userAccount: AccountInfo, account: Account): Promise<void> {
|
||||
this.statusLoading = true;
|
||||
return this.mastodonService.getAccountStatuses(userAccount, account.id, false, false, true, null, null, 40)
|
||||
.then((result: Status[]) => {
|
||||
for (const status of result) {
|
||||
const wrapper = new StatusWrapper(status, userAccount);
|
||||
this.statuses.push(wrapper);
|
||||
}
|
||||
.then((statuses: Status[]) => {
|
||||
this.loadStatus(userAccount, statuses);
|
||||
|
||||
// if (statuses.length === 0) {
|
||||
// this.maxReached = true;
|
||||
// return;
|
||||
// }
|
||||
|
||||
// for (const status of statuses) {
|
||||
// const wrapper = new StatusWrapper(status, userAccount);
|
||||
// this.statuses.push(wrapper);
|
||||
// }
|
||||
|
||||
// this.maxId = this.statuses[this.statuses.length - 1].status.id;
|
||||
})
|
||||
.catch(err => {
|
||||
this.notificationService.notifyHttpError(err);
|
||||
})
|
||||
.then(() => {
|
||||
this.statusLoading = false;
|
||||
});
|
||||
}
|
||||
|
|
@ -147,10 +166,10 @@ export class UserProfileComponent implements OnInit {
|
|||
}
|
||||
|
||||
follow(): boolean {
|
||||
this.currentlyUsedAccount = this.toolsService.getSelectedAccounts()[0];
|
||||
this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
|
||||
const userAccount = this.toolsService.getSelectedAccounts()[0];
|
||||
this.toolsService.findAccount(userAccount, this.lastAccountName)
|
||||
.then((account: Account) => {
|
||||
return this.mastodonService.follow(this.currentlyUsedAccount, account);
|
||||
return this.mastodonService.follow(userAccount, account);
|
||||
})
|
||||
.then((relationship: Relationship) => {
|
||||
this.relationship = relationship;
|
||||
|
|
@ -162,10 +181,10 @@ export class UserProfileComponent implements OnInit {
|
|||
}
|
||||
|
||||
unfollow(): boolean {
|
||||
this.currentlyUsedAccount = this.toolsService.getSelectedAccounts()[0];
|
||||
this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
|
||||
const userAccount = this.toolsService.getSelectedAccounts()[0];
|
||||
this.toolsService.findAccount(userAccount, this.lastAccountName)
|
||||
.then((account: Account) => {
|
||||
return this.mastodonService.unfollow(this.currentlyUsedAccount, account);
|
||||
return this.mastodonService.unfollow(userAccount, account);
|
||||
})
|
||||
.then((relationship: Relationship) => {
|
||||
this.relationship = relationship;
|
||||
|
|
@ -175,4 +194,44 @@ export class UserProfileComponent implements OnInit {
|
|||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
onScroll() {
|
||||
var element = this.statustream.nativeElement as HTMLElement;
|
||||
const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000;
|
||||
|
||||
if (atBottom) {
|
||||
this.scrolledToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
private scrolledToBottom() {
|
||||
if (this.statusLoading || this.maxReached) return;
|
||||
|
||||
this.statusLoading = true;
|
||||
const userAccount = this.currentlyUsedAccount;
|
||||
this.mastodonService.getAccountStatuses(userAccount, this.displayedAccount.id, false, false, true, this.maxId, null, 40)
|
||||
.then((statuses: Status[]) => {
|
||||
this.loadStatus(userAccount, statuses);
|
||||
})
|
||||
.catch(err => {
|
||||
this.notificationService.notifyHttpError(err);
|
||||
})
|
||||
.then(() => {
|
||||
this.statusLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
private loadStatus(userAccount: AccountInfo, statuses: Status[]){
|
||||
if (statuses.length === 0) {
|
||||
this.maxReached = true;
|
||||
return;
|
||||
}
|
||||
|
||||
for (const status of statuses) {
|
||||
const wrapper = new StatusWrapper(status, userAccount);
|
||||
this.statuses.push(wrapper);
|
||||
}
|
||||
|
||||
this.maxId = this.statuses[this.statuses.length - 1].status.id;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue