feat: add channel search function

package-lock.json

@@ -4241,11 +4241,6 @@
         "void-elements": "^2.0.0"
       }
     },
-    "dom-walk": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
-      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
-    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5291,15 +5286,6 @@
         }
       }
     },
-    "global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "requires": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -7446,14 +7432,6 @@
       "resolved": "https://registry.npmjs.org/m3u8-file-parser/-/m3u8-file-parser-0.2.1.tgz",
       "integrity": "sha512-peEkcrq1fP2CDVgYxi5T9k0nZmnVSktOCAelD9EnAH5BP3YcLD0IggX2MVk54cMr4r6rvVSbhVFNuMAcgJEfSA=="
     },
-    "m3u8-parser": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.4.0.tgz",
-      "integrity": "sha512-iH2AygTFILtato+XAgnoPYzLHM4R3DjATj7Ozbk7EHdB2XoLF2oyOUguM7Kc4UVHbQHHL/QPaw98r7PbWzG0gg==",
-      "requires": {
-        "global": "^4.3.2"
-      }
-    },
     "magic-string": {
       "version": "0.25.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
@@ -7721,14 +7699,6 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
-    "min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-      "requires": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "mini-css-extract-plugin": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz",
@@ -7931,6 +7901,14 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
+    "ngx-filter-pipe": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-filter-pipe/-/ngx-filter-pipe-2.1.2.tgz",
+      "integrity": "sha512-YEXvjEw+Mpg5jL+yqSnFWKiY0P9XtRAJ2Dk3n9sC4stnsuhPzPRwIkF58aBvqYfoi3vrb7KQFImgbmfFAQqnFw==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "ngx-uploader": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/ngx-uploader/-/ngx-uploader-7.1.0.tgz",
@@ -8866,7 +8844,8 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "dev": true
     },
     "process-nextick-args": {
       "version": "2.0.1",

package.json

@@ -28,6 +28,7 @@
         "hls.js": "^0.12.4",
         "m3u8-file-parser": "^0.2.1",
         "material-icons": "^0.3.1",
+        "ngx-filter-pipe": "^2.1.2",
         "ngx-uploader": "^7.1.0",
         "rxjs": "~6.4.0",
         "tslib": "^1.10.0",

src/app/app.module.ts

@@ -14,6 +14,8 @@ import { PlaylistUploaderComponent } from './components/playlist-uploader/playli
 import { VideoPlayerComponent } from './components/video-player/video-player.component';
 import { MaterialModule } from './material.module';
 import { RecentPlaylistsComponent } from './components/recent-playlists/recent-playlists.component';
+import { FilterPipeModule } from 'ngx-filter-pipe';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
     declarations: [
@@ -28,6 +30,8 @@ import { RecentPlaylistsComponent } from './components/recent-playlists/recent-p
         BrowserModule,
         BrowserAnimationsModule,
         FlexLayoutModule,
+        FilterPipeModule,
+        FormsModule,
         HttpClientModule,
         MaterialModule,
         NgxUploaderModule,

src/app/components/channel-list-container/channel-list-container.component.css

@@ -0,0 +1,7 @@
+.full-width {
+    width: 100%;
+}
+
+mat-list {
+    margin-top: 10px;
+}

src/app/components/channel-list-container/channel-list-container.component.html

@@ -1,8 +1,11 @@
 <mat-list>
-    <mat-list-item *ngFor="let channel of channelList">
-        <button
-            mat-button
-            (click)="changeChannel.emit({ url: channel.url, title: channel.inf.title})">
+    <mat-list-item>
+        <mat-form-field class="full-width">
+            <input matInput placeholder="Search channel" [(ngModel)]="searchTerm.inf.title">
+        </mat-form-field>
+    </mat-list-item>
+    <mat-list-item *ngFor=" let channel of channelList | filterBy: searchTerm">
+        <button mat-button (click)="changeChannel.emit({ url: channel.url, title: channel.inf.title})">
             {{channel?.inf?.title || 'Unnamed Channel'}}
         </button>
         <mat-divider></mat-divider>

src/app/components/channel-list-container/channel-list-container.component.ts

@@ -18,4 +18,13 @@ export class ChannelListContainerComponent {
         url: string;
         title: string;
     }> = new EventEmitter();
+
+    /**
+     * Search term for channel filter
+     */
+    searchTerm: any = {
+        inf: {
+            title: '',
+        },
+    };
 }

src/app/material.module.ts

@@ -5,7 +5,8 @@ import {
     MatIconModule,
     MatListModule,
     MatSidenavModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatInputModule,
 } from '@angular/material';
 
 @NgModule({
@@ -13,9 +14,10 @@ import {
         MatButtonModule,
         MatCardModule,
         MatIconModule,
+        MatInputModule,
         MatListModule,
         MatSidenavModule,
-        MatToolbarModule
-    ]
+        MatToolbarModule,
+    ],
 })
 export class MaterialModule {}