TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-09 04:21:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated styling of recent videos

Browse Source 
Added content loader module which will add ghosting to the recent videos component while the files are loading

Updated custom playlists component to support large sized cards
This commit is contained in:
Isaac Abadi
2020-08-22 18:34:28 -04:00
parent dc6dd5f5a2
commit 919e2a649a
11 changed files with 94 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/components/recent-videos/recent-videos.component.html
View File

@@ -1,4 +1,4 @@
<div class="container-fluid">
<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>
@@ -17,7 +17,7 @@
</div>
</div>
<div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
<h4 style="text-align: center; position: relative; top: 12px;">My videos</h4>
<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">
@@ -30,9 +30,16 @@
<div>
<div class="container">
<div class="row justify-content-center">
<div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2" [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" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
</div>
<ng-container *ngIf="normal_files_received">
<div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2" [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" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)"></app-unified-file-card>
</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" [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" [file_obj]="null" [loading]="true"></app-unified-file-card>
</div>
</ng-container>
</div>
</div>
</div>

12
src/app/components/recent-videos/recent-videos.component.scss
View File

@@ -45,4 +45,16 @@
display: inline-block;
position: absolute;
top: 10px;
}
.my-videos-title {
text-align: center;
position: relative;
top: 12px;
}
@media (max-width: 576px) {
.my-videos-title {
top: 0px;
}
}

17
src/app/components/recent-videos/recent-videos.component.ts
View File

@@ -9,6 +9,9 @@ import { Router } from '@angular/router';
})
export class RecentVideosComponent implements OnInit {
cached_file_count = 0;
loading_files = null;
normal_files_received = false;
subscription_files_received = false;
files: any[] = null;
@@ -47,7 +50,14 @@ export class RecentVideosComponent implements OnInit {
};
filterProperty = this.filterProperties['upload_date'];
constructor(public postsService: PostsService, private router: Router) { }
constructor(public postsService: PostsService, private router: Router) {
// get cached file count
if (localStorage.getItem('cached_file_count')) {
this.cached_file_count = +localStorage.getItem('cached_file_count');
this.loading_files = Array(this.cached_file_count).fill(0);
console.log(this.loading_files);
}
}
ngOnInit(): void {
this.postsService.service_initialized.subscribe(init => {
@@ -114,6 +124,11 @@ export class RecentVideosComponent implements OnInit {
this.filtered_files = this.files;
}
this.filterByProperty(this.filterProperty['property']);
// set cached file count for future use, note that we convert the amount of files to a string
localStorage.setItem('cached_file_count', '' + this.files.length);
this.normal_files_received = true;
});
}