mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-04-02 09:51:28 +03:00
e39e8f3dba
Paginator length fixed Updated styling on paginator Added new text if videos are not present on the home page (due to filter or no downloads in general)
53 lines
4.0 KiB
HTML
53 lines
4.0 KiB
HTML
<div class="container-fluid" style="max-width: 941px;">
|
|
<div class="row">
|
|
<div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
|
|
<div>
|
|
<div style="display: inline-block;">
|
|
<mat-form-field style="width: 132px;">
|
|
<mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
|
|
<mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
|
|
{{filterOption['value']['label']}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="sort-dir-div">
|
|
<button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
|
|
<h4 class="my-videos-title" i18n="My videos title">My videos</h4>
|
|
</div>
|
|
<div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
|
|
<mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
|
|
<input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
|
|
<mat-icon matSuffix>search</mat-icon>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<ng-container *ngIf="normal_files_received && paged_data">
|
|
<div *ngFor="let file of paged_data; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
|
|
<app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? '?jwt=' + this.postsService.token : ''"></app-unified-file-card>
|
|
</div>
|
|
<div *ngIf="filtered_files.length === 0">
|
|
<ng-container i18n="No videos found">No videos found.</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
|
|
<div *ngFor="let file of loading_files; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
|
|
<app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" [loading]="true" [theme]="postsService.theme"></app-unified-file-card>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
<mat-paginator class="paginator" #paginator *ngIf="filtered_files && filtered_files.length > 0" (page)="pageChangeEvent($event)" [length]="filtered_files.length"
|
|
[pageSize]="pageSize"
|
|
[pageSizeOptions]="[5, 10, 25, 100, this.paged_data && this.paged_data.length > 100 ? this.paged_data.length : 250]">
|
|
</mat-paginator>
|
|
</div> |