diff --git a/package-lock.json b/package-lock.json index 98d58df89..71c20cbb6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 6b0d97a19..23000f1f9 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index aa36e46ca..301c99b71 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/channel-list-container/channel-list-container.component.css b/src/app/components/channel-list-container/channel-list-container.component.css index e69de29bb..06bb81697 100644 --- a/src/app/components/channel-list-container/channel-list-container.component.css +++ b/src/app/components/channel-list-container/channel-list-container.component.css @@ -0,0 +1,7 @@ +.full-width { + width: 100%; +} + +mat-list { + margin-top: 10px; +} diff --git a/src/app/components/channel-list-container/channel-list-container.component.html b/src/app/components/channel-list-container/channel-list-container.component.html index 5dbae768c..14d5cd18a 100644 --- a/src/app/components/channel-list-container/channel-list-container.component.html +++ b/src/app/components/channel-list-container/channel-list-container.component.html @@ -1,8 +1,11 @@ - - diff --git a/src/app/components/channel-list-container/channel-list-container.component.ts b/src/app/components/channel-list-container/channel-list-container.component.ts index 1f1b7551d..d32e8926f 100644 --- a/src/app/components/channel-list-container/channel-list-container.component.ts +++ b/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: '', + }, + }; } diff --git a/src/app/material.module.ts b/src/app/material.module.ts index 145a5cb39..807edbc4b 100644 --- a/src/app/material.module.ts +++ b/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 {}