refactorization to simplify stream workflow

This commit is contained in:
Nicolas Constant 2018-09-15 21:38:55 -04:00
parent 5b46d4ccf1
commit 9095699158
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 45 additions and 75 deletions

View File

@ -1,56 +1,52 @@
import { Component, OnInit, Input } from "@angular/core";
import { Stream, TootWrapper } from "../../models/stream.models";
import { AccountWrapper } from "../../models/account.models";
import { StreamElement } from "../../states/streams.state";
import { StreamingService } from "../../services/streaming.service";
import { HttpClient } from "@angular/common/http";
import { Store } from "@ngxs/store";
@Component({
selector: "app-stream",
templateUrl: "./stream.component.html",
styleUrls: ["./stream.component.scss"]
selector: "app-stream",
templateUrl: "./stream.component.html",
styleUrls: ["./stream.component.scss"]
})
export class StreamComponent implements OnInit {
private _stream: Stream;
stream: Stream;
private _streamElement: StreamElement;
@Input()
set stream(stream: Stream) {
this._stream = stream;
this._stream.statuses.subscribe((results: TootWrapper[]) => {
for (let t of results) {
this.toots.unshift(t);
}
});
}
@Input()
set streamElement(streamElement: StreamElement) {
this._streamElement = streamElement;
get stream(): Stream {
return this._stream;
}
console.log('streamElement');
console.log(streamElement);
this.stream = new Stream(this.streamingService, this.httpClient, this.store, streamElement.name, streamElement.type, streamElement.username);
this.stream.statuses.subscribe((results: TootWrapper[]) => {
for (let t of results) {
this.toots.unshift(t);
}
});
}
toots: TootWrapper[] = [];
get streamElement(): StreamElement {
return this._streamElement;
}
constructor(){
// var simplebar = new SimpleBar(document.querySelector('#mam-stream-toots'), { autoHide: true });
}
toots: TootWrapper[] = [];
constructor(
private readonly store: Store,
private readonly streamingService: StreamingService,
private readonly httpClient: HttpClient) {
}
ngOnInit() {
//Stubs
//const newStream = new Stream();
//newStream.streamName = "Stream Name";
//this.stream = newStream;
ngOnInit() {
}
//const acc1 = new AccountWrapper();
//acc1.username = "@mastodon.social@Gargron";
//acc1.avatar = "https://files.mastodon.social/accounts/avatars/000/000/001/original/4df197532c6b768c.png";
//for (let i = 0; i < 20; i++) {
// const newToot = new TootWrapper();
// newToot.account = acc1;
// newToot.content = "Lorem Elsass ipsum tristique semper elit jetz gehts los lacus habitant Hans sagittis baeckeoffe condimentum id, salu bredele ch'ai libero, ftomi! hop Pfourtz ! id munster auctor, Miss Dahlias rhoncus Yo dû. Salu bissame turpis ante amet non sed gal Spätzle Gal !";
// this.toots.push(newToot);
//}
}
goToTop(): boolean {
return false;
}
goToTop(): boolean {
return false;
}
}

View File

@ -1,5 +1,5 @@
<div class="main-display flexcroll">
<div class="main-display__stream-column" *ngFor="let s of streams">
<app-stream [stream]="s" #stream></app-stream>
<div class="main-display__stream-column" *ngFor="let s of streamElements$ | async">
<app-stream [streamElement]="s" #stream></app-stream>
</div>
</div>

View File

@ -1,14 +1,10 @@
import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren, ElementRef } from "@angular/core";
import { Component, OnInit, OnDestroy, QueryList, ViewChildren, ElementRef } from "@angular/core";
import { Observable, Subscription } from "rxjs";
import { Select } from "@ngxs/store";
import { Stream } from "../../models/stream.models";
import { Observable, Subscription } from "rxjs";
import { StreamElement } from "../../states/streams.state";
import { Store } from "@ngxs/store";
import { Http } from "@angular/http";
import { NavigationService } from "../../services/navigation.service";
import { HttpClient } from "@angular/common/http";
import { StreamingService } from "../../services/streaming.service";
@Component({
selector: "app-streams-main-display",
@ -17,52 +13,30 @@ import { StreamingService } from "../../services/streaming.service";
})
export class StreamsMainDisplayComponent implements OnInit, OnDestroy {
@Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
streams: Stream[] = [];
private streams$: Observable<StreamElement[]>;
private streamsStateSub: Subscription;
private columnSelectedSub: Subscription;
constructor(
private readonly streamingService: StreamingService,
private readonly navigationService: NavigationService,
private readonly httpClient: HttpClient,
private readonly store: Store) {
this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
private readonly navigationService: NavigationService) {
}
ngOnInit() {
this.streamsStateSub = this.streams$.subscribe((streams: StreamElement[]) => {
this.streams.length = 0;
for (const stream of streams) {
const newStream = new Stream(this.streamingService, this.httpClient, this.store, stream.name, stream.type, stream.username);
this.streams.push(newStream);
}
this.columnSelectedSub = this.navigationService.columnSelectedSubject.subscribe((columnIndex: number) => {
this.focusOnColumn(columnIndex);
});
this.columnSelectedSub = this.navigationService.columnSelectedSubject.subscribe((columnIndex: number) => {
this.focusOnColumn(columnIndex);
});
}
ngOnDestroy(): void {
this.streamsStateSub.unsubscribe();
this.columnSelectedSub.unsubscribe();
}
@ViewChildren('stream', { read: ElementRef }) public streamsElementRef: QueryList<ElementRef>;;
private focusOnColumn(columnIndex: number): void {
console.warn(`col selected: ${columnIndex}`);
if (columnIndex > -1) {
console.warn(this.streamsElementRef);
setTimeout(() => {
this.streamsElementRef.toArray()[columnIndex].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
});
}
}
}