parent
47cbd5695c
commit
489ad86c10
@ -0,0 +1,22 @@
|
|||||||
|
export interface SearchResult {
|
||||||
|
id: string;
|
||||||
|
video_id: number;
|
||||||
|
video_title: string;
|
||||||
|
video_game: string;
|
||||||
|
video_length: number;
|
||||||
|
video_thumbnail_small: string;
|
||||||
|
video_thumbnail_medium: string;
|
||||||
|
video_thumbnail_large: string;
|
||||||
|
video_recorded_at: Date;
|
||||||
|
offset: number;
|
||||||
|
commenter_id: string;
|
||||||
|
commenter_name: string;
|
||||||
|
commenter_display_name: string;
|
||||||
|
commenter_logo: string;
|
||||||
|
source: string;
|
||||||
|
message_body: string;
|
||||||
|
message_user_color: string;
|
||||||
|
message_user_badges: string;
|
||||||
|
created_at: Date;
|
||||||
|
updated_at: Date;
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import {
|
||||||
|
Pipe,
|
||||||
|
PipeTransform
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
|
|
||||||
|
@Pipe({
|
||||||
|
name: 'totime'
|
||||||
|
})
|
||||||
|
export class ToTimePipe implements PipeTransform {
|
||||||
|
|
||||||
|
transform(offset: number, base: string): number {
|
||||||
|
let recorded = new Date(base + 'Z');
|
||||||
|
let result = new Date(recorded.getTime() + offset * 1000);
|
||||||
|
let ref = new Date(result.getTime());
|
||||||
|
ref.setHours(0, 0, 0, 0);
|
||||||
|
return (result.getTime() - ref.getTime()) / 1000 >> 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
.comments {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-table {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-video_title {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-video_title img, .mat-column-video_title a {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-commenter_display_name {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-commenter_display_name img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-commenter_display_name span.commenter {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-message_body span, .mat-column-message_body img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minispacer {
|
||||||
|
flex: 0.1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-container {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 15%;
|
||||||
|
margin-left: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-container mat-spinner {
|
||||||
|
margin: 6em auto 0 auto;
|
||||||
|
}
|
||||||
@ -0,0 +1,129 @@
|
|||||||
|
<div class="results">
|
||||||
|
|
||||||
|
<mat-toolbar>
|
||||||
|
|
||||||
|
<mat-input-container class="search">
|
||||||
|
|
||||||
|
<input matInput placeholder="Search commenter" #input1>
|
||||||
|
|
||||||
|
</mat-input-container>
|
||||||
|
|
||||||
|
<span class="minispacer"></span>
|
||||||
|
|
||||||
|
<mat-input-container class="search">
|
||||||
|
|
||||||
|
<input matInput placeholder="Search message" #input2>
|
||||||
|
|
||||||
|
</mat-input-container>
|
||||||
|
|
||||||
|
<span class="spacer"></span>
|
||||||
|
|
||||||
|
<button class="back-button" color="primary" mat-raised-button [routerLink]="['/']">Back</button>
|
||||||
|
|
||||||
|
</mat-toolbar>
|
||||||
|
|
||||||
|
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
|
||||||
|
|
||||||
|
<mat-spinner></mat-spinner>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-table class="results-table mat-elevation-z8" [dataSource]="dataSource"
|
||||||
|
matSort matSortActive="video_recorded_at" matSortDirection="desc" matSortDisableClear>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="video_title">
|
||||||
|
|
||||||
|
<mat-header-cell fxFlex="20%" *matHeaderCellDef mat-sort-header>Video</mat-header-cell>
|
||||||
|
|
||||||
|
<mat-cell fxFlex="20%" *matCellDef="let result">
|
||||||
|
|
||||||
|
<img src="{{result.video_thumbnail_small}}" alt="{{result.video_title}}">
|
||||||
|
|
||||||
|
<a mat-button [routerLink]="['/videos', result.video_id]">
|
||||||
|
|
||||||
|
{{result.video_title}}
|
||||||
|
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</mat-cell>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="video_recorded_at">
|
||||||
|
|
||||||
|
<mat-header-cell fxFlex="8%" *matHeaderCellDef mat-sort-header>Recorded</mat-header-cell>
|
||||||
|
|
||||||
|
<mat-cell fxFlex="8%" *matCellDef="let result">{{result.video_recorded_at | date : 'yyyy-MM-dd'}}</mat-cell>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="offset">
|
||||||
|
|
||||||
|
<mat-header-cell fxFlex="8%" *matHeaderCellDef mat-sort-header>Time</mat-header-cell>
|
||||||
|
|
||||||
|
<mat-cell fxFlex="8%" *matCellDef="let result">
|
||||||
|
|
||||||
|
<a mat-button href="https://www.twitch.tv/videos/{{videoID}}?comment={{result.id}}&t={{result.offset | tohms}}" target="_blank">
|
||||||
|
|
||||||
|
{{result.offset | totime : result.video_recorded_at | tohms : 'colons'}}
|
||||||
|
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</mat-cell>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="commenter_display_name">
|
||||||
|
|
||||||
|
<mat-header-cell fxFlex="18%" *matHeaderCellDef mat-sort-header>Commenter</mat-header-cell>
|
||||||
|
|
||||||
|
<mat-cell fxFlex="18%" *matCellDef="let result">
|
||||||
|
|
||||||
|
<span *ngIf="result.message_user_badges">
|
||||||
|
|
||||||
|
<ng-template ngFor let-token [ngForOf]="badges$ | async | splitbadges : result.message_user_badges">
|
||||||
|
|
||||||
|
<img src="{{token.url}}" alt="{{token.title}}" *ngIf="token.hasOwnProperty('url')">
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="commenter" [ngStyle]="{color: result.message_user_color}">
|
||||||
|
|
||||||
|
{{result.commenter_display_name}}
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</mat-cell>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="message_body">
|
||||||
|
|
||||||
|
<mat-header-cell fxFlex="46%" *matHeaderCellDef mat-sort-header>Message</mat-header-cell>
|
||||||
|
|
||||||
|
<mat-cell fxFlex="46%" *matCellDef="let result">
|
||||||
|
|
||||||
|
<ng-template ngFor let-token [ngForOf]="emotes$ | async | splitmessage : result.message_body">
|
||||||
|
|
||||||
|
<img src="{{token.url}}" alt="{{token.title}}" *ngIf="token.hasOwnProperty('url')">
|
||||||
|
|
||||||
|
<span *ngIf="!token.hasOwnProperty('url')">{{token}}</span>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</mat-cell>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||||
|
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator [length]="dataSource?.count$ | async" [pageSize]="20"
|
||||||
|
[pageSizeOptions]="[10, 20, 50, 100, 200]"></mat-paginator>
|
||||||
|
|
||||||
|
</div>
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
import {
|
||||||
|
AfterViewInit,
|
||||||
|
Component,
|
||||||
|
ElementRef,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewChild
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
|
import { ActivatedRoute } from '@angular/router';
|
||||||
|
|
||||||
|
import {
|
||||||
|
MatPaginator,
|
||||||
|
MatSort,
|
||||||
|
MatTableDataSource
|
||||||
|
} from '@angular/material';
|
||||||
|
|
||||||
|
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||||
|
|
||||||
|
import {
|
||||||
|
debounceTime,
|
||||||
|
delay,
|
||||||
|
distinctUntilChanged,
|
||||||
|
startWith,
|
||||||
|
tap
|
||||||
|
} from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { merge } from 'rxjs/observable/merge';
|
||||||
|
import { fromEvent } from 'rxjs/observable/fromEvent';
|
||||||
|
|
||||||
|
import { CommentsService } from '../services/comments.service';
|
||||||
|
import { ImagesService } from '../services/images.service';
|
||||||
|
import { SearchDataSource } from '../services/search.datasource';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'search',
|
||||||
|
templateUrl: './search.component.html',
|
||||||
|
styleUrls: [ './search.component.css' ]
|
||||||
|
})
|
||||||
|
export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||||
|
private badgesSubject = new BehaviorSubject<any[]>([]);
|
||||||
|
private emotesSubject = new BehaviorSubject<any[]>([]);
|
||||||
|
|
||||||
|
dataSource: SearchDataSource;
|
||||||
|
|
||||||
|
displayedColumns = [
|
||||||
|
'video_title',
|
||||||
|
'video_recorded_at',
|
||||||
|
'offset',
|
||||||
|
'commenter_display_name',
|
||||||
|
'message_body'
|
||||||
|
];
|
||||||
|
|
||||||
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||||
|
@ViewChild(MatSort) sort: MatSort;
|
||||||
|
@ViewChild('input1') input1: ElementRef;
|
||||||
|
@ViewChild('input2') input2: ElementRef;
|
||||||
|
|
||||||
|
public badges$ = this.badgesSubject.asObservable();
|
||||||
|
public emotes$ = this.emotesSubject.asObservable();
|
||||||
|
|
||||||
|
constructor(private route: ActivatedRoute,
|
||||||
|
private commentsService: CommentsService,
|
||||||
|
private imagesService: ImagesService) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.dataSource = new SearchDataSource(this.commentsService);
|
||||||
|
this.dataSource.loadComments('', '', 'video_recorded_at', 'desc', 0, 20);
|
||||||
|
this.imagesService.getBadges().subscribe(
|
||||||
|
(data: any[]) => this.badgesSubject.next(data)
|
||||||
|
);
|
||||||
|
this.imagesService.getEmotes().subscribe(
|
||||||
|
(data: any[]) => this.emotesSubject.next(data)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.badgesSubject.complete();
|
||||||
|
this.emotesSubject.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
|
||||||
|
|
||||||
|
fromEvent(this.input1.nativeElement, 'keyup')
|
||||||
|
.pipe(
|
||||||
|
debounceTime(300),
|
||||||
|
distinctUntilChanged(),
|
||||||
|
tap(() => {
|
||||||
|
this.paginator.pageIndex = 0;
|
||||||
|
this.loadCommentsPage();
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.subscribe();
|
||||||
|
|
||||||
|
fromEvent(this.input2.nativeElement, 'keyup')
|
||||||
|
.pipe(
|
||||||
|
debounceTime(300),
|
||||||
|
distinctUntilChanged(),
|
||||||
|
tap(() => {
|
||||||
|
this.paginator.pageIndex = 0;
|
||||||
|
this.loadCommentsPage();
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.subscribe();
|
||||||
|
|
||||||
|
merge(this.sort.sortChange, this.paginator.page)
|
||||||
|
.pipe(
|
||||||
|
tap(() => this.loadCommentsPage())
|
||||||
|
)
|
||||||
|
.subscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadCommentsPage() {
|
||||||
|
this.dataSource.loadComments(
|
||||||
|
this.input1.nativeElement.value,
|
||||||
|
this.input2.nativeElement.value,
|
||||||
|
this.sort.active,
|
||||||
|
this.sort.direction,
|
||||||
|
this.paginator.pageIndex,
|
||||||
|
this.paginator.pageSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import {
|
||||||
|
CollectionViewer,
|
||||||
|
DataSource
|
||||||
|
} from '@angular/cdk/collections';
|
||||||
|
|
||||||
|
import { Observable } from 'rxjs/Observable';
|
||||||
|
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||||
|
import { of } from 'rxjs/observable/of';
|
||||||
|
|
||||||
|
import {
|
||||||
|
catchError,
|
||||||
|
finalize
|
||||||
|
} from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { CommentsService } from './comments.service';
|
||||||
|
|
||||||
|
import { SearchResult } from '../models/searchresult';
|
||||||
|
|
||||||
|
|
||||||
|
export class SearchDataSource implements DataSource<SearchResult> {
|
||||||
|
private resultsSubject = new BehaviorSubject<SearchResult[]>([]);
|
||||||
|
private countSubject = new BehaviorSubject<number>(0);
|
||||||
|
private loadingSubject = new BehaviorSubject<boolean>(false);
|
||||||
|
|
||||||
|
public count$ = this.countSubject.asObservable();
|
||||||
|
public loading$ = this.loadingSubject.asObservable();
|
||||||
|
|
||||||
|
constructor(private commentsService: CommentsService) { }
|
||||||
|
|
||||||
|
loadComments(commenter: string,
|
||||||
|
term: string,
|
||||||
|
sortColumn: string,
|
||||||
|
sortDirection: string,
|
||||||
|
pageIndex: number,
|
||||||
|
pageSize: number) {
|
||||||
|
|
||||||
|
this.loadingSubject.next(true);
|
||||||
|
|
||||||
|
this.commentsService.searchComments(commenter, term, sortColumn, sortDirection,
|
||||||
|
pageIndex, pageSize)
|
||||||
|
.pipe(
|
||||||
|
catchError(() => of([])),
|
||||||
|
finalize(() => this.loadingSubject.next(false))
|
||||||
|
)
|
||||||
|
.subscribe((data: any) => {
|
||||||
|
this.resultsSubject.next(data.results);
|
||||||
|
this.countSubject.next(data.totalCount);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
connect(collectionViewer: CollectionViewer): Observable<SearchResult[]> {
|
||||||
|
console.log('Connecting data source');
|
||||||
|
return this.resultsSubject.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect(collectionViewer: CollectionViewer): void {
|
||||||
|
this.resultsSubject.complete();
|
||||||
|
this.countSubject.complete();
|
||||||
|
this.loadingSubject.complete();
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue