Merge branch 'master' of https://github.com/Tzahi12345/YoutubeDL-Material into api-generator

2026-04-08 03:01:29 +03:00 · 2021-09-29 02:38:42 -06:00
parent 2cf0c61fac f0c3837ee5
commit 3937700eff
199 changed files with 46018 additions and 15941 deletions
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -28,18 +28,38 @@
    </div>
 </div>
 <div>
-    <div class="container">
+    <div class="container" style="margin-bottom: 16px">
        <div class="row justify-content-center">
-            <ng-container *ngIf="normal_files_received">
-                <div *ngFor="let file of filtered_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" (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>
+            <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 ? '?jwt=' + this.postsService.token : ''"></app-unified-file-card>
+                </div>
+                <div *ngIf="paged_data.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" [loading]="true" [theme]="postsService.theme"></app-unified-file-card>
+                    <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>
+
+    <div>
+        <div style="position: absolute; margin-left: -8px; margin-top: 5px; scale: 0.8">
+            <mat-form-field>
+                <mat-label><ng-container i18n="File type">File type</ng-container></mat-label>
+                <mat-select color="accent" [(ngModel)]="fileTypeFilter" (selectionChange)="fileTypeFilterChanged($event.value)">
+                    <mat-option value="both"><ng-container i18n="Both">Both</ng-container></mat-option>
+                    <mat-option value="video_only"><ng-container i18n="Video only">Video only</ng-container></mat-option>
+                    <mat-option value="audio_only"><ng-container i18n="Audio only">Audio only</ng-container></mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <mat-paginator class="paginator" #paginator *ngIf="paged_data && paged_data.length > 0" (page)="pageChangeEvent($event)" [length]="file_count"
+                [pageSize]="pageSize"
+                [pageSizeOptions]="[5, 10, 25, 100, this.paged_data && this.paged_data.length > 100 ? this.paged_data.length : 250]">
+        </mat-paginator>
+    </div>
 </div>
--- a/src/app/components/recent-videos/recent-videos.component.scss
+++ b/src/app/components/recent-videos/recent-videos.component.scss
@@ -47,6 +47,10 @@
    top: 10px;
 }

+.paginator {
+    margin-top: 5px;
+}
+
 .my-videos-title {
    text-align: center;
    position: relative;
--- a/src/app/components/recent-videos/recent-videos.component.spec.ts
+++ b/src/app/components/recent-videos/recent-videos.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

 import { RecentVideosComponent } from './recent-videos.component';

@@ -6,7 +6,7 @@ describe('RecentVideosComponent', () => {
  let component: RecentVideosComponent;
  let fixture: ComponentFixture<RecentVideosComponent>;

-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ RecentVideosComponent ]
    })
--- a/src/app/components/recent-videos/recent-videos.component.ts
+++ b/src/app/components/recent-videos/recent-videos.component.ts
@@ -1,7 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { Router } from '@angular/router';
 import { FileType } from '../../../api-types';
+import { MatPaginator } from '@angular/material/paginator';
+import { Subject } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-recent-videos',
@@ -15,8 +18,8 @@ export class RecentVideosComponent implements OnInit {

  normal_files_received = false;
  subscription_files_received = false;
-  files: any[] = null;
-  filtered_files: any[] = null;
+  file_count = 10;
+  searchChangedSubject: Subject<string> = new Subject<string>();
  downloading_content = {'video': {}, 'audio': {}};
  search_mode = false;
  search_text = '';
@@ -50,11 +53,20 @@ export class RecentVideosComponent implements OnInit {
    }
  };
  filterProperty = this.filterProperties['upload_date'];
+  fileTypeFilter = 'both';
+  
+  playlists = null;
+
+  pageSize = 10;
+  paged_data = null;
+
+  @ViewChild('paginator') paginator: MatPaginator

  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.cached_file_count = +localStorage.getItem('cached_file_count') <= 10 ? +localStorage.getItem('cached_file_count') : 10;
+      
      this.loading_files = Array(this.cached_file_count).fill(0);
    }
  }
@@ -62,78 +74,108 @@ export class RecentVideosComponent implements OnInit {
  ngOnInit(): void {
    if (this.postsService.initialized) {
      this.getAllFiles();
+      this.getAllPlaylists();
    }

    this.postsService.service_initialized.subscribe(init => {
      if (init) {
        this.getAllFiles();
+        this.getAllPlaylists();
      }
    });

+    this.postsService.files_changed.subscribe(changed => {
+      if (changed) {
+        this.getAllFiles();
+      }
+    });

-    // set filter property to cached
+    this.postsService.playlists_changed.subscribe(changed => {
+      if (changed) {
+        this.getAllPlaylists();
+      }
+    });
+
+    // set filter property to cached value
    const cached_filter_property = localStorage.getItem('filter_property');
    if (cached_filter_property && this.filterProperties[cached_filter_property]) {
      this.filterProperty = this.filterProperties[cached_filter_property];
    }
+
+    // set file type filter to cached value
+    const cached_file_type_filter = localStorage.getItem('file_type_filter');
+    if (cached_file_type_filter) {
+      this.fileTypeFilter = cached_file_type_filter;
+    }
+
+    const sort_order = localStorage.getItem('recent_videos_sort_order');
+
+    if (sort_order) {
+      this.descendingMode = sort_order === 'descending';
+    }
+
+    this.searchChangedSubject
+      .debounceTime(500)
+      .pipe(distinctUntilChanged()
+      ).subscribe(model => {
+        if (model.length > 0) {
+          this.search_mode = true;
+        } else {
+          this.search_mode = false;
+        }
+        this.getAllFiles();
+      });
+  }
+
+  getAllPlaylists() {
+    this.postsService.getPlaylists().subscribe(res => {
+      this.playlists = res['playlists'];
+    });
  }

  // search

  onSearchInputChanged(newvalue) {
-    if (newvalue.length > 0) {
-      this.search_mode = true;
-      this.filterFiles(newvalue);
-    } else {
-      this.search_mode = false;
-      this.filtered_files = this.files;
-    }
-  }
-
-  private filterFiles(value: string) {
-    const filterValue = value.toLowerCase();
-    this.filtered_files = this.files.filter(option => option.id.toLowerCase().includes(filterValue));
-  }
-
-  filterByProperty(prop) {
-    if (this.descendingMode) {
-      this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? -1 : 1));
-    } else {
-      this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? 1 : -1));
-    }
+    this.normal_files_received = false;
+    this.searchChangedSubject.next(newvalue);
  }

  filterOptionChanged(value) {
-    this.filterByProperty(value['property']);
    localStorage.setItem('filter_property', value['key']);
+    this.getAllFiles();
+  }
+
+  fileTypeFilterChanged(value) {
+    localStorage.setItem('file_type_filter', value);
+    this.getAllFiles();
  }

  toggleModeChange() {
    this.descendingMode = !this.descendingMode;
-    this.filterByProperty(this.filterProperty['property']);
+    localStorage.setItem('recent_videos_sort_order', this.descendingMode ? 'descending' : 'ascending');
+    this.getAllFiles();
  }

  // get files

-  getAllFiles() {
-    this.normal_files_received = false;
-    this.postsService.getAllFiles().subscribe(res => {
-      this.files = res['files'];
-      this.files.forEach(file => {
+  getAllFiles(cache_mode = false) {
+    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};
+    const range = [current_file_index, current_file_index + this.pageSize];
+    this.postsService.getAllFiles(sort, range, this.search_mode ? this.search_text : null, this.fileTypeFilter).subscribe(res => {
+      this.file_count = res['file_count'];
+      this.paged_data = res['files'];
+      for (let i = 0; i < this.paged_data.length; i++) {
+        const file = this.paged_data[i];
        file.duration = typeof file.duration !== 'string' ? file.duration : this.durationStringToNumber(file.duration);
-      });
-      this.files.sort(this.sortFiles);
-      if (this.search_mode) {
-        this.filterFiles(this.search_text);
-      } else {
-        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);
+      localStorage.setItem('cached_file_count', '' + this.file_count);

      this.normal_files_received = true;
+
    });
  }

@@ -155,15 +197,14 @@ export class RecentVideosComponent implements OnInit {
      const sub = this.postsService.getSubscriptionByID(file.sub_id);
      if (sub.streamingOnly) {
        // streaming only mode subscriptions
-        !new_tab ? this.router.navigate(['/player', {name: file.id,
-                                          url: file.requested_formats ? file.requested_formats[0].url : file.url}])
-                : window.open(`/#/player;name=${file.id};url=${file.requested_formats ? file.requested_formats[0].url : file.url}`);
+        // !new_tab ? this.router.navigate(['/player', {name: file.id,
+        //                                   url: file.requested_formats ? file.requested_formats[0].url : file.url}])
+        //         : window.open(`/#/player;name=${file.id};url=${file.requested_formats ? file.requested_formats[0].url : file.url}`);
      } else {
        // normal subscriptions
-        !new_tab ? this.router.navigate(['/player', {fileNames: file.id,
-                                          type: file.isAudio ? 'audio' : 'video', subscriptionName: sub.name,
-                                          subPlaylist: sub.isPlaylist}])
-                 : window.open(`/#/player;fileNames=${file.id};type=${file.isAudio ? 'audio' : 'video'};subscriptionName=${sub.name};subPlaylist=${sub.isPlaylist}`);
+        !new_tab ? this.router.navigate(['/player', {uid: file.uid,
+                                          type: file.isAudio ? 'audio' : 'video'}]) 
+                 : window.open(`/#/player;uid=${file.uid};type=${file.isAudio ? 'audio' : 'video'}`);
      }
    } else {
      // normal files
@@ -190,15 +231,12 @@ export class RecentVideosComponent implements OnInit {
    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.id, type,
-      {subscriptionName: sub.name, subPlaylist: sub.isPlaylist, uid: this.postsService.user ? this.postsService.user.uid : null}
-    ).subscribe(res => {
-      const blob: Blob = res;
-      saveAs(blob, file.id + ext);
-    }, err => {
-      console.log(err);
-    });
+    this.postsService.downloadFileFromServer(file.uid).subscribe(res => {
+          const blob: Blob = res;
+          saveAs(blob, file.id + ext);
+        }, err => {
+          console.log(err);
+      });
  }

  downloadNormalFile(file) {
@@ -206,14 +244,14 @@ export class RecentVideosComponent implements OnInit {
    const ext = type === 'audio' ? '.mp3' : '.mp4'
    const name = file.id;
    this.downloading_content[type][name] = true;
-    this.postsService.downloadFileFromServer(name, type).subscribe(res => {
+    this.postsService.downloadFileFromServer(file.uid).subscribe(res => {
      this.downloading_content[type][name] = false;
      const blob: Blob = res;
      saveAs(blob, decodeURIComponent(name) + ext);

      if (!this.postsService.config.Extra.file_manager_enabled) {
        // tell server to delete the file once downloaded
-        this.postsService.deleteFile(name, false).subscribe(delRes => {
+        this.postsService.deleteFile(file.uid).subscribe(delRes => {
          // reload mp4s
          this.getAllFiles();
        });
@@ -229,17 +267,17 @@ export class RecentVideosComponent implements OnInit {
    const blacklistMode = args.blacklistMode;

    if (file.sub_id) {
-      this.deleteSubscriptionFile(file, index, blacklistMode);
+      this.deleteSubscriptionFile(file, blacklistMode);
    } else {
-      this.deleteNormalFile(file, index, blacklistMode);
+      this.deleteNormalFile(file, blacklistMode);
    }
  }

-  deleteNormalFile(file, index, blacklistMode = false) {
-    this.postsService.deleteFile(file.uid, file.isAudio, blacklistMode).subscribe(result => {
+  deleteNormalFile(file, blacklistMode = false) {
+    this.postsService.deleteFile(file.uid, blacklistMode).subscribe(result => {
      if (result) {
        this.postsService.openSnackBar('Delete success!', 'OK.');
-        this.files.splice(index, 1);
+        this.removeFileCard(file);
      } else {
        this.postsService.openSnackBar('Delete failed!', 'OK.');
      }
@@ -248,27 +286,50 @@ export class RecentVideosComponent implements OnInit {
    });
  }

-  deleteSubscriptionFile(file, index, blacklistMode = false) {
+  deleteSubscriptionFile(file, blacklistMode = false) {
    if (blacklistMode) {
-      this.deleteForever(file, index);
+      this.deleteForever(file);
    } else {
-      this.deleteAndRedownload(file, index);
+      this.deleteAndRedownload(file);
    }
  }

-  deleteAndRedownload(file, index) {
+  deleteAndRedownload(file) {
    const sub = this.postsService.getSubscriptionByID(file.sub_id);
    this.postsService.deleteSubscriptionFile(sub, file.id, false, file.uid).subscribe(res => {
      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
-      this.files.splice(index, 1);
+      this.removeFileCard(file);
    });
  }

-  deleteForever(file, index) {
+  deleteForever(file) {
    const sub = this.postsService.getSubscriptionByID(file.sub_id);
    this.postsService.deleteSubscriptionFile(sub, file.id, true, file.uid).subscribe(res => {
      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
-      this.files.splice(index, 1);
+      this.removeFileCard(file);
+    });
+  }
+
+  removeFileCard(file_to_remove) {
+    const index = this.paged_data.map(e => e.uid).indexOf(file_to_remove.uid);
+    this.paged_data.splice(index, 1);
+    this.getAllFiles(true);
+  }
+
+  addFileToPlaylist(info_obj) {
+    const file = info_obj['file'];
+    const playlist_id = info_obj['playlist_id'];
+    const playlist = this.playlists.find(potential_playlist => potential_playlist['id'] === playlist_id);
+    this.postsService.addFileToPlaylist(playlist_id, file['uid']).subscribe(res => {
+      if (res['success']) {
+        this.postsService.openSnackBar(`Successfully added ${file.title} to ${playlist.title}!`);
+        this.postsService.playlists_changed.next(true);
+      } else {
+        this.postsService.openSnackBar(`Failed to add ${file.title} to ${playlist.title}! Unknown error.`);
+      }
+    }, err => {
+      console.error(err);
+      this.postsService.openSnackBar(`Failed to add ${file.title} to ${playlist.title}! See browser console for error.`);
    });
  }

@@ -283,9 +344,15 @@ export class RecentVideosComponent implements OnInit {
  durationStringToNumber(dur_str) {
    let num_sum = 0;
    const dur_str_parts = dur_str.split(':');
-    for (let i = dur_str_parts.length-1; i >= 0; i--) {
-      num_sum += parseInt(dur_str_parts[i])*(60**(dur_str_parts.length-1-i));
+    for (let i = dur_str_parts.length - 1; i >= 0; i--) {
+      num_sum += parseInt(dur_str_parts[i]) * (60 ** (dur_str_parts.length - 1 - i));
    }
    return num_sum;
  }
+
+  pageChangeEvent(event) {
+    this.pageSize = event.pageSize;
+    this.loading_files = Array(this.pageSize).fill(0);
+    this.getAllFiles();
+  }
 }