You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.9 KiB
96 lines
2.9 KiB
<div class="comments">
|
|
|
|
<mat-toolbar>
|
|
|
|
<mat-input-container class="search">
|
|
|
|
<input matInput placeholder="Search comments" #input>
|
|
|
|
</mat-input-container>
|
|
|
|
<span class="spacer"></span>
|
|
|
|
<button class="export-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="comments-table mat-elevation-z8" [dataSource]="dataSource"
|
|
matSort matSortActive="offset" matSortDirection="asc" matSortDisableClear>
|
|
|
|
<ng-container matColumnDef="offset">
|
|
|
|
<mat-header-cell fxFlex="15%" *matHeaderCellDef mat-sort-header>Offset</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="15%" *matCellDef="let comment">
|
|
|
|
<a mat-button href="https://www.twitch.tv/videos/{{videoID}}?comment={{comment.id}}&t={{comment.offset | tohms}}" target="_blank">
|
|
|
|
{{comment.offset | tohms : 'colons'}}
|
|
|
|
</a>
|
|
|
|
</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="commenter_display_name">
|
|
|
|
<mat-header-cell fxFlex="25%" *matHeaderCellDef mat-sort-header>Commenter</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="25%" *matCellDef="let comment">
|
|
|
|
<span *ngIf="comment.message_user_badges">
|
|
|
|
<ng-template ngFor let-token [ngForOf]="badges$ | async | splitbadges : comment.message_user_badges">
|
|
|
|
<img src="{{token.url}}" alt="{{token.title}}" *ngIf="token.hasOwnProperty('url')">
|
|
|
|
</ng-template>
|
|
|
|
</span>
|
|
|
|
<span class="commenter" [ngStyle]="{color: comment.message_user_color}">
|
|
|
|
{{comment.commenter_display_name}}
|
|
|
|
</span>
|
|
|
|
</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="message_body">
|
|
|
|
<mat-header-cell fxFlex="60%" *matHeaderCellDef mat-sort-header>Message</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="60%" *matCellDef="let comment">
|
|
|
|
<ng-template ngFor let-token [ngForOf]="emotes$ | async | splitmessage : comment.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>
|