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.
80 lines
2.3 KiB
80 lines
2.3 KiB
<div class="videos">
|
|
|
|
<mat-toolbar>
|
|
|
|
<mat-input-container class="filter">
|
|
|
|
<input matInput placeholder="Filter videos" #input>
|
|
|
|
</mat-input-container>
|
|
|
|
<span class="spacer"></span>
|
|
|
|
<button class="search-button" color="primary" mat-raised-button [routerLink]="['/search']">Search</button>
|
|
|
|
</mat-toolbar>
|
|
|
|
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
|
|
|
|
<mat-spinner></mat-spinner>
|
|
|
|
</div>
|
|
|
|
<mat-table class="videos-table mat-elevation-z8" [dataSource]="dataSource"
|
|
matSort matSortActive="recorded_at" matSortDirection="desc" matSortDisableClear>
|
|
|
|
<ng-container matColumnDef="recorded_at">
|
|
|
|
<mat-header-cell fxFlex="15%" *matHeaderCellDef mat-sort-header>Recorded</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="15%" *matCellDef="let video">{{video.recorded_at | date : 'yyyy-MM-dd'}}</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="title">
|
|
|
|
<mat-header-cell fxFlex="42%" *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="42%" *matCellDef="let video">
|
|
|
|
<a [routerLink]="['/videos', video.id]">
|
|
|
|
{{video.title}}
|
|
|
|
</a>
|
|
|
|
<br>
|
|
|
|
<img src="{{video.thumbnail_small}}" alt="{{video.title}}">
|
|
|
|
</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="game">
|
|
|
|
<mat-header-cell fxFlex="28%" *matHeaderCellDef mat-sort-header>Game</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="28%" *matCellDef="let video">{{video.game}}</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="length">
|
|
|
|
<mat-header-cell fxFlex="15%" *matHeaderCellDef mat-sort-header>Length</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="15%" *matCellDef="let video">{{video.length | tohms : 'spaces'}}</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]="10"
|
|
[pageSizeOptions]="[10, 20, 50, 100, 200]"></mat-paginator>
|
|
|
|
</div>
|