aiden
/
YoutubeDL-Material
mirror of https://github.com/Tzahi12345/YoutubeDL-Material
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved UI for download only mode

Browse Source 
Updated API model for DatabaseFile
pull/657/head
Isaac Abadi 3 years ago
parent bec158f65d
commit 6d3f5e6c94
5 changed files with 43 additions and 48 deletions
Show Stats Download Patch File Download Diff File

4
Public API v1.yaml
Unescape Escape View File

@ -2421,6 +2421,10 @@ components:
type: number
local_view_count:
type: number
sub_id:
type: string
registered:
type: number
Playlist:
required:
- uids

2
src/api-types/models/DatabaseFile.ts
Unescape Escape View File

@ -30,4 +30,6 @@ export type DatabaseFile = {
category?: Category;
view_count?: number;
local_view_count?: number;
sub_id?: string;
registered?: number;
};

5
src/app/components/recent-videos/recent-videos.component.html
Unescape Escape View File

@ -32,8 +32,9 @@
<div *ngIf="!selectMode" class="container" style="margin-bottom: 16px">
<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']" [availablePlaylists]="playlists" (addFileToPlaylist)="addFileToPlaylist($event)" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? this.postsService.token : ''"></app-unified-file-card>
<div style="display: flex; align-items: center;" *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 [ngClass]="downloading_content[file.uid] ? 'blurred' : ''" [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']" [availablePlaylists]="playlists" (addFileToPlaylist)="addFileToPlaylist($event)" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? this.postsService.token : ''"></app-unified-file-card>
<mat-spinner *ngIf="downloading_content[file.uid]" class="downloading-spinner" [diameter]="32"></mat-spinner>
</div>
<div *ngIf="paged_data.length === 0">
<ng-container i18n="No files found">No files found.</ng-container>

9
src/app/components/recent-videos/recent-videos.component.scss
Unescape Escape View File

@ -109,4 +109,13 @@
text-overflow: ellipsis;
max-width: 70%;
margin: 0 auto;
}
.blurred {
filter: blur(2px);
}
.downloading-spinner {
align-self: center;
position: absolute;
}

71
src/app/components/recent-videos/recent-videos.component.ts
Unescape Escape View File

@ -41,7 +41,7 @@ export class RecentVideosComponent implements OnInit {
subscription_files_received = false;
file_count = 10;
searchChangedSubject: Subject<string> = new Subject<string>();
downloading_content = {'video': {}, 'audio': {}};
downloading_content = {};
search_mode = false;
search_text = '';
searchIsFocused = false;
@ -148,7 +148,7 @@ export class RecentVideosComponent implements OnInit {
});
}
getAllPlaylists() {
getAllPlaylists(): void {
this.postsService.getPlaylists().subscribe(res => {
this.playlists = res['playlists'];
});
@ -156,22 +156,22 @@ export class RecentVideosComponent implements OnInit {
// search
onSearchInputChanged(newvalue) {
onSearchInputChanged(newvalue: string): void {
this.normal_files_received = false;
this.searchChangedSubject.next(newvalue);
}
filterOptionChanged(value) {
filterOptionChanged(value: string): void {
localStorage.setItem('filter_property', value['key']);
this.getAllFiles();
}
fileTypeFilterChanged(value) {
fileTypeFilterChanged(value: string): void {
localStorage.setItem('file_type_filter', value);
this.getAllFiles();
}
toggleModeChange() {
toggleModeChange(): void {
this.descendingMode = !this.descendingMode;
localStorage.setItem('recent_videos_sort_order', this.descendingMode ? 'descending' : 'ascending');
this.getAllFiles();
@ -179,7 +179,7 @@ export class RecentVideosComponent implements OnInit {
// get files
getAllFiles(cache_mode = false) {
getAllFiles(cache_mode = false): void {
this.normal_files_received = cache_mode;
const current_file_index = (this.paginator?.pageIndex ? this.paginator.pageIndex : 0)*this.pageSize;
const sort = {by: this.filterProperty['property'], order: this.descendingMode ? -1 : 1};
@ -212,7 +212,7 @@ export class RecentVideosComponent implements OnInit {
}
}
navigateToFile(file, new_tab) {
navigateToFile(file: DatabaseFile, new_tab: boolean): void {
localStorage.setItem('player_navigator', this.router.url);
if (file.sub_id) {
const sub = this.postsService.getSubscriptionByID(file.sub_id);
@ -234,46 +234,26 @@ export class RecentVideosComponent implements OnInit {
}
}
goToSubscription(file) {
goToSubscription(file: DatabaseFile): void {
this.router.navigate(['/subscription', {id: file.sub_id}]);
}
// downloading
downloadFile(file) {
if (file.sub_id) {
this.downloadSubscriptionFile(file);
} else {
this.downloadNormalFile(file);
}
}
downloadSubscriptionFile(file) {
const type = (file.isAudio ? 'audio' : 'video') as FileType;
const ext = type === 'audio' ? '.mp3' : '.mp4'
const sub = this.postsService.getSubscriptionByID(file.sub_id);
this.postsService.downloadFileFromServer(file.uid).subscribe(res => {
const blob: Blob = res;
saveAs(blob, file.id + ext);
}, err => {
console.log(err);
});
}
downloadNormalFile(file) {
downloadFile(file: DatabaseFile): void {
const type = (file.isAudio ? 'audio' : 'video') as FileType;
const ext = type === 'audio' ? '.mp3' : '.mp4'
const name = file.id;
this.downloading_content[type][name] = true;
this.downloading_content[file.uid] = true;
this.postsService.downloadFileFromServer(file.uid).subscribe(res => {
this.downloading_content[type][name] = false;
this.downloading_content[file.uid] = false;
const blob: Blob = res;
saveAs(blob, decodeURIComponent(name) + ext);
if (!this.postsService.config.Extra.file_manager_enabled) {
if (!this.postsService.config.Extra.file_manager_enabled && !file.sub_id) {
// tell server to delete the file once downloaded
this.postsService.deleteFile(file.uid).subscribe(delRes => {
// reload mp4s
this.postsService.deleteFile(file.uid).subscribe(() => {
// reload files
this.getAllFiles();
});
}
@ -284,7 +264,6 @@ export class RecentVideosComponent implements OnInit {
deleteFile(args) {
const file = args.file;
const index = args.index;
const blacklistMode = args.blacklistMode;
if (file.sub_id) {
@ -294,7 +273,7 @@ export class RecentVideosComponent implements OnInit {
}
}
deleteNormalFile(file, blacklistMode = false) {
deleteNormalFile(file: DatabaseFile, blacklistMode = false): void {
this.postsService.deleteFile(file.uid, blacklistMode).subscribe(result => {
if (result) {
this.postsService.openSnackBar($localize`Delete success!', 'OK.`);
@ -302,12 +281,12 @@ export class RecentVideosComponent implements OnInit {
} else {
this.postsService.openSnackBar($localize`Delete failed!', 'OK.`);
}
}, err => {
}, () => {
this.postsService.openSnackBar($localize`Delete failed!', 'OK.`);
});
}
deleteSubscriptionFile(file, blacklistMode = false) {
deleteSubscriptionFile(file: DatabaseFile, blacklistMode = false): void {
if (blacklistMode) {
this.deleteForever(file);
} else {
@ -315,23 +294,23 @@ export class RecentVideosComponent implements OnInit {
}
}
deleteAndRedownload(file) {
deleteAndRedownload(file: DatabaseFile): void {
const sub = this.postsService.getSubscriptionByID(file.sub_id);
this.postsService.deleteSubscriptionFile(sub, file.id, false, file.uid).subscribe(res => {
this.postsService.deleteSubscriptionFile(sub, file.id, false, file.uid).subscribe(() => {
this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
this.removeFileCard(file);
});
}
deleteForever(file) {
deleteForever(file: DatabaseFile): void {
const sub = this.postsService.getSubscriptionByID(file.sub_id);
this.postsService.deleteSubscriptionFile(sub, file.id, true, file.uid).subscribe(res => {
this.postsService.deleteSubscriptionFile(sub, file.id, true, file.uid).subscribe(() => {
this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
this.removeFileCard(file);
});
}
removeFileCard(file_to_remove) {
removeFileCard(file_to_remove: DatabaseFile): void {
const index = this.paged_data.map(e => e.uid).indexOf(file_to_remove.uid);
this.paged_data.splice(index, 1);
this.getAllFiles(true);
@ -356,13 +335,13 @@ export class RecentVideosComponent implements OnInit {
// sorting and filtering
sortFiles(a, b) {
sortFiles(a: DatabaseFile, b: DatabaseFile): number {
// uses the 'registered' flag as the timestamp
const result = b.registered - a.registered;
return result;
}
durationStringToNumber(dur_str) {
durationStringToNumber(dur_str: string): number {
let num_sum = 0;
const dur_str_parts = dur_str.split(':');
for (let i = dur_str_parts.length - 1; i >= 0; i--) {

Write Preview
Loading…
Cancel
Save