refactorization to simplify stream workflow
This commit is contained in:
parent
5b46d4ccf1
commit
9095699158
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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' });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue