Updated translation details to improve clarity

Added upload date property to files in UI

Subscription videos can now be filtered by some of their properties (size, upload date, name, duration)

Subscription videos are now centered

src/app/subscription/subscription-file-card/subscription-file-card.component.ts

@@ -61,7 +61,8 @@ export class SubscriptionFileCardComponent implements OnInit {
     const dialogRef = this.dialog.open(VideoInfoDialogComponent, {
       data: {
         file: this.file,
-      }
+      },
+      minWidth: '50vw'
     });
   }
 

src/app/subscription/subscription/subscription.component.html

@@ -1,30 +1,44 @@
-<br/>
-<button class="back-button" (click)="goBack()" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
-<div style="margin-bottom: 15px;">
-    <h2 style="text-align: center;" *ngIf="subscription">
-        {{subscription.name}}
-    </h2>
-</div>
-<mat-divider style="width: 80%; margin: 0 auto"></mat-divider>
-<br/>
-
-<div *ngIf="subscription">
-    <div class="flex-grid">
-        <div class="col"></div>
-        <div class="col">
-            <h4 i18n="Subscription videos title" style="text-align: center; margin-bottom: 20px;">Videos</h4>
-        </div>
-        <div class="col">
-            <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="Subscription videos search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
-                <mat-icon matSuffix>search</mat-icon>
-            </mat-form-field>
-        </div>
+<div style="margin-top: 14px;">
+    <button class="back-button" (click)="goBack()" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
+    <div style="margin-bottom: 15px;">
+        <h2 style="text-align: center;" *ngIf="subscription">
+            {{subscription.name}}
+        </h2>
     </div>
-    <div class="container">
-        <div class="row">
-            <div *ngFor="let file of filtered_files" class="col-6 col-lg-4 mb-2 mt-2 sub-file-col">
-                <app-subscription-file-card (reloadSubscription)="getSubscription()" (goToFileEmit)="goToFile($event)" [file]="file" [sub]="subscription" [use_youtubedl_archive]="use_youtubedl_archive"></app-subscription-file-card>
+    <mat-divider style="width: 80%; margin: 0 auto"></mat-divider>
+    <br/>
+
+    <div *ngIf="subscription">
+        <div class="flex-grid">
+            <div class="filter-select-parent">
+                <div style="display: inline-block;">
+                    <mat-select style="width: 110px;" [(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>
+                </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">
+            </div>
+            <div class="col">
+                <h4 i18n="Subscription videos title" style="text-align: center; margin-bottom: 20px;">Videos</h4>
+            </div>
+            <div style="top: -12px;" class="col">
+                <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="Subscription videos search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
+                    <mat-icon matSuffix>search</mat-icon>
+                </mat-form-field>
+            </div>
+        </div>
+        <div class="container">
+            <div class="row justify-content-center">
+                <div *ngFor="let file of filtered_files" class="col-6 col-lg-4 mb-2 mt-2 sub-file-col">
+                    <app-subscription-file-card (reloadSubscription)="getSubscription()" (goToFileEmit)="goToFile($event)" [file]="file" [sub]="subscription" [use_youtubedl_archive]="use_youtubedl_archive"></app-subscription-file-card>
+                </div>
             </div>
         </div>
     </div>

src/app/subscription/subscription/subscription.component.scss

@@ -8,6 +8,13 @@
     left: 15px;
 }
 
+.filter-select-parent {
+    position: absolute;
+    top: 0px;
+    left: 20px;
+    display: block;
+}
+
 .search-bar {
     transition: all .5s ease;
     position: relative;
@@ -29,6 +36,7 @@
 .flex-grid {
     width: 100%;
     display: block;
+    position: relative;
 }
 .col {
     width: 33%;

src/app/subscription/subscription/subscription.component.ts

@@ -17,6 +17,30 @@ export class SubscriptionComponent implements OnInit {
   search_mode = false;
   search_text = '';
   searchIsFocused = false;
+  descendingMode = true;
+  filterProperties = {
+    '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 route: ActivatedRoute, private router: Router) { }
 
@@ -27,6 +51,12 @@ export class SubscriptionComponent implements OnInit {
       this.getSubscription();
       this.getConfig();
     }
+
+    // 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];
+    }
   }
 
   goBack() {
@@ -42,6 +72,7 @@ export class SubscriptionComponent implements OnInit {
       } else {
         this.filtered_files = this.files;
       }
+      this.filterByProperty(this.filterProperty['property']);
     });
   }
 
@@ -72,4 +103,23 @@ export class SubscriptionComponent implements OnInit {
     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.filterProperty = value;
+    this.filterByProperty(value['property']);
+    localStorage.setItem('filter_property', value['key']);
+  }
+
+  toggleModeChange() {
+    this.descendingMode = !this.descendingMode;
+    this.filterByProperty(this.filterProperty['property']);
+  }
+
 }