Recent videos component now includes header, search, and sort capabilities

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

@@ -1,7 +1,32 @@
+<div class="flex-grid">
+    <div class="col">
+        <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 style="display: inline-block;">
+            <button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+        </div>
+    </div>
+    <div class="col">
+        <h4 style="text-align: center">My videos</h4>
+    </div>
+    <div class="col" style="top: 25px;">
+        <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 class="container">
         <div class="row justify-content-center">
-            <div *ngFor="let file of files; let i = index" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+            <div *ngFor="let file of filtered_files; let i = index" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
                 <app-unified-file-card [index]="i" [card_size]="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>
         </div>

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

@@ -1,3 +1,34 @@
 .file-col {
     max-width: 240px;
+}
+
+.search-bar {
+    transition: all .5s ease;
+    position: relative;
+    float: right;
+}
+ 
+.search-bar-unfocused {
+    width: 100px;
+}
+
+.search-input {
+    transition: all .5s ease;
+}
+
+.search-bar-focused {
+    width: 200px;
+}
+
+.flex-grid {
+    width: 100%;
+    display: block;
+    position: relative;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.col {
+    width: 33%;
+    display: inline-block;
 }

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

@@ -12,8 +12,41 @@ export class RecentVideosComponent implements OnInit {
   normal_files_received = false;
   subscription_files_received = false;
   files: any[] = null;
+  filtered_files: any[] = null;
   card_size = 'medium';
   downloading_content = {'video': {}, 'audio': {}};
+  search_mode = false;
+  search_text = '';
+  searchIsFocused = false;
+  descendingMode = true;
+  filterProperties = {
+    'registered': {
+      'key': 'registered',
+      'label': 'Download Date',
+      'property': 'registered'
+    },
+    'upload_date': {
+      'key': 'upload_date',
+      'label': 'Upload Date',
+      'property': 'upload_date'
+    },
+    'name': {
+      'key': 'name',
+      'label': 'Name',
+      'property': 'title'
+    },
+    'file_size': {
+      'key': 'file_size',
+      'label': 'File Size',
+      'property': 'size'
+    },
+    'duration': {
+      'key': 'duration',
+      'label': 'Duration',
+      'property': 'duration'
+    }
+  };
+  filterProperty = this.filterProperties['upload_date'];
 
   constructor(private postsService: PostsService, private router: Router) { }
 
@@ -23,13 +56,65 @@ export class RecentVideosComponent implements OnInit {
         this.getAllFiles();
       }
     });
+
+    // set filter property to cached
+    const cached_filter_property = localStorage.getItem('filter_property');
+    if (cached_filter_property && this.filterProperties[cached_filter_property]) {
+      this.filterProperty = this.filterProperties[cached_filter_property];
+    }
+  }
+
+  // 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));
+    }
+  }
+
+  filterOptionChanged(value) {
+    this.filterByProperty(value['property']);
+    localStorage.setItem('filter_property', value['key']);
+  }
+
+  toggleModeChange() {
+    this.descendingMode = !this.descendingMode;
+    this.filterByProperty(this.filterProperty['property']);
   }
 
+  // get files
+
   getAllFiles() {
     this.normal_files_received = false;
     this.postsService.getAllFiles().subscribe(res => {
       this.files = res['files'];
+      this.files.forEach(file => {
+        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']);
     });
   }
 
@@ -166,4 +251,13 @@ export class RecentVideosComponent implements OnInit {
     const result = b.registered - a.registered;
     return result;
   }
+  
+  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));
+    }
+    return num_sum;
+  }
 }