clean up stream when on top functionnal

This commit is contained in:
Nicolas Constant 2018-09-17 21:57:44 -04:00
parent d2ad255363
commit 270204235b
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 35 additions and 4 deletions

View File

@ -2,9 +2,10 @@
<div class="stream-column__stream-header">
<a href title="return to top" (click)="goToTop()"><h1>{{ streamElement.name.toUpperCase() }}</h1></a>
</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">
<app-status [status]="status" ></app-status>
</div>
</div>
</div>

View File

@ -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 { StreamElement, StreamTypeEnum } from "../../states/streams.state";
import { StreamingService, StreamingWrapper, EventEnum, StatusUpdate } from "../../services/streaming.service";
@ -47,14 +47,34 @@ export class StreamComponent implements OnInit {
@ViewChild('statusstream') public statustream: ElementRef;
goToTop(): boolean {
const stream = this.statustream.nativeElement as HTMLElement;
const stream = this.statustream.nativeElement as HTMLElement;
stream.scrollTo({
top: 0,
behavior: 'smooth'
});
});
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[] {
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
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}`);
}
}
}