clean up stream when on top functionnal
This commit is contained in:
parent
d2ad255363
commit
270204235b
|
@ -2,9 +2,10 @@
|
||||||
<div class="stream-column__stream-header">
|
<div class="stream-column__stream-header">
|
||||||
<a href title="return to top" (click)="goToTop()"><h1>{{ streamElement.name.toUpperCase() }}</h1></a>
|
<a href title="return to top" (click)="goToTop()"><h1>{{ streamElement.name.toUpperCase() }}</h1></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="stream-toots flexcroll" #statusstream> <!-- data-simplebar -->
|
<div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()"> <!-- data-simplebar -->
|
||||||
<div *ngFor="let status of statuses">
|
<div *ngFor="let status of statuses">
|
||||||
<app-status [status]="status" ></app-status>
|
<app-status [status]="status" ></app-status>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";
|
import { Component, OnInit, Input, ElementRef, ViewChild, HostListener } from "@angular/core";
|
||||||
import { AccountWrapper } from "../../models/account.models";
|
import { AccountWrapper } from "../../models/account.models";
|
||||||
import { StreamElement, StreamTypeEnum } from "../../states/streams.state";
|
import { StreamElement, StreamTypeEnum } from "../../states/streams.state";
|
||||||
import { StreamingService, StreamingWrapper, EventEnum, StatusUpdate } from "../../services/streaming.service";
|
import { StreamingService, StreamingWrapper, EventEnum, StatusUpdate } from "../../services/streaming.service";
|
||||||
|
@ -47,14 +47,34 @@ export class StreamComponent implements OnInit {
|
||||||
|
|
||||||
@ViewChild('statusstream') public statustream: ElementRef;
|
@ViewChild('statusstream') public statustream: ElementRef;
|
||||||
goToTop(): boolean {
|
goToTop(): boolean {
|
||||||
const stream = this.statustream.nativeElement as HTMLElement;
|
const stream = this.statustream.nativeElement as HTMLElement;
|
||||||
stream.scrollTo({
|
stream.scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
});
|
});
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private streamPositionnedAtTop: boolean = true;
|
||||||
|
private streamPositionnedAtBottom: boolean;
|
||||||
|
|
||||||
|
onScroll() {
|
||||||
|
var element = this.statustream.nativeElement as HTMLElement;
|
||||||
|
const atBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
|
||||||
|
const atTop = element.scrollTop === 0;
|
||||||
|
|
||||||
|
this.streamPositionnedAtTop = false;
|
||||||
|
this.streamPositionnedAtBottom = false;
|
||||||
|
|
||||||
|
if (atBottom) {
|
||||||
|
console.log('Bottom reached!!');
|
||||||
|
this.streamPositionnedAtBottom = true;
|
||||||
|
} else if (atTop) {
|
||||||
|
console.log('Top reached!!');
|
||||||
|
this.streamPositionnedAtTop = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private getRegisteredAccounts(): AccountInfo[] {
|
private getRegisteredAccounts(): AccountInfo[] {
|
||||||
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
|
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
|
||||||
return regAccounts;
|
return regAccounts;
|
||||||
|
@ -79,6 +99,16 @@ export class StreamComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.checkAndCleanUpStream();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private checkAndCleanUpStream(): void {
|
||||||
|
if (this.streamPositionnedAtTop && this.statuses.length > 60) {
|
||||||
|
console.log(`clean up start! ${this.statuses.length}`);
|
||||||
|
this.statuses.length = 40;
|
||||||
|
console.log(`clean up ends! ${this.statuses.length}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue