added search functionality

made subscription file cards more responsive on mobile layouts

removed unused shell code

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

@@ -9,10 +9,21 @@
 <br/>
 
 <div *ngIf="subscription">
-    <h4 style="text-align: center; margin-bottom: 20px;">Videos</h4>
+    <div class="flex-grid">
+        <div class="col"></div>
+        <div class="col">
+            <h4 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" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
+                <mat-icon matSuffix>search</mat-icon>
+            </mat-form-field>
+        </div>
+    </div>
     <div class="container">
         <div class="row">
-            <div *ngFor="let file of files" class="col mb-4 sub-file-col">
+            <div *ngFor="let file of filtered_files" class="col-6 col-lg-4 mb-4 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>

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

@@ -6,4 +6,31 @@
     float: left;
     position: absolute;
     left: 15px;
+}
+
+.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: 100%;
+}
+
+.flex-grid {
+    width: 100%;
+    display: block;
+}
+.col {
+    width: 33%;
+    display: inline-block;
 }

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

@@ -12,7 +12,11 @@ export class SubscriptionComponent implements OnInit {
   id = null;
   subscription = null;
   files: any[] = null;
+  filtered_files: any[] = null;
   use_youtubedl_archive = false;
+  search_mode = false;
+  search_text = '';
+  searchIsFocused = false;
 
   constructor(private postsService: PostsService, private route: ActivatedRoute, private router: Router) { }
 
@@ -33,6 +37,11 @@ export class SubscriptionComponent implements OnInit {
     this.postsService.getSubscription(this.id).subscribe(res => {
       this.subscription = res['subscription'];
       this.files = res['files'];
+      if (this.search_mode) {
+        this.filterFiles(this.search_text);
+      } else {
+        this.filtered_files = this.files;
+      }
     });
   }
 
@@ -49,4 +58,18 @@ export class SubscriptionComponent implements OnInit {
                                       subPlaylist: this.subscription.isPlaylist}]);
   }
 
+  onSearchInputChanged(newvalue) {
+    if (newvalue.length > 0) {
+      this.search_mode = true;
+      this.filterFiles(newvalue);
+    } else {
+      this.search_mode = false;
+    }
+  }
+
+  private filterFiles(value: string) {
+    const filterValue = value.toLowerCase();
+    this.filtered_files = this.files.filter(option => option.id.toLowerCase().includes(filterValue));
+  }
+
 }