Added ability to filter for only audio and only video files in the home page

backend/app.js

@@ -1072,6 +1072,7 @@ app.post('/api/getAllFiles', optionalJwt, async function (req, res) {
     let sort = req.body.sort;
     let range = req.body.range;
     let text_search = req.body.text_search;
+    let file_type_filter = req.body.file_type_filter;
     const uuid = req.isAuthenticated() ? req.user.uid : null;
 
     const filter_obj = {user_uid: uuid};
@@ -1083,6 +1084,9 @@ app.post('/api/getAllFiles', optionalJwt, async function (req, res) {
             filter_obj['$text'] = { $search: utils.createEdgeNGrams(text_search) };
         }
     }
+
+    if (file_type_filter === 'audio_only') filter_obj['isAudio'] = true;
+    else if (file_type_filter === 'video_only') filter_obj['isAudio'] = false;
     
     files = await db_api.getRecords('files', filter_obj, false, sort, range, text_search);
     let file_count = await db_api.getRecords('files', filter_obj, true);

src/app/components/recent-videos/recent-videos.component.html

@@ -46,8 +46,20 @@
         </div>
     </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 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>

src/app/components/recent-videos/recent-videos.component.ts

@@ -52,6 +52,7 @@ export class RecentVideosComponent implements OnInit {
     }
   };
   filterProperty = this.filterProperties['upload_date'];
+  fileTypeFilter = 'both';
   
   playlists = null;
 
@@ -94,12 +95,18 @@ export class RecentVideosComponent implements OnInit {
       }
     });
 
-    // set filter property to cached
+    // 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;
+    }
+
     this.searchChangedSubject
       .debounceTime(500)
       .pipe(distinctUntilChanged()
@@ -131,6 +138,11 @@ export class RecentVideosComponent implements OnInit {
     this.getAllFiles();
   }
 
+  fileTypeFilterChanged(value) {
+    localStorage.setItem('file_type_filter', value);
+    this.getAllFiles();
+  }
+
   toggleModeChange() {
     this.descendingMode = !this.descendingMode;
     this.getAllFiles();
@@ -143,7 +155,7 @@ export class RecentVideosComponent implements OnInit {
     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).subscribe(res => {
+    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++) {

src/app/posts.services.ts

@@ -238,8 +238,8 @@ export class PostsService implements CanActivate {
         return this.http.post(this.path + 'getFile', {uid: uid, type: type, uuid: uuid}, this.httpOptions);
     }
 
-    getAllFiles(sort, range, text_search) {
-        return this.http.post(this.path + 'getAllFiles', {sort: sort, range: range, text_search: text_search}, this.httpOptions);
+    getAllFiles(sort, range, text_search, file_type_filter) {
+        return this.http.post(this.path + 'getAllFiles', {sort: sort, range: range, text_search: text_search, file_type_filter: file_type_filter}, this.httpOptions);
     }
 
     getFullTwitchChat(id, type, uuid = null, sub = null) {