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"> <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>

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 { 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}`);
}
}
} }