feat: implement channel groups view

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

@@ -13,4 +13,12 @@
 
 .active {
     background: #ddd;
-}
+}
+
+.mat-list-base {
+    padding-top: 0;
+}
+
+::ng-deep .mat-expansion-panel-body {
+    padding: 0 !important;
+}

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

@@ -9,9 +9,21 @@
     </mat-list-item>
 </mat-list>
 <mat-nav-list id="channels-list">
-    <mat-list-item *ngFor=" let channel of channelList | filterBy: searchTerm; index as i"
-        [class.active]="selected?.id === channel.id" (click)="selectChannel(channel)">
-        {{i+1 + '. ' + channel?.name || 'Unnamed Channel'}}
-        <mat-divider></mat-divider>
-    </mat-list-item>
+    <mat-accordion class="example-headers-align" multi>
+        <ng-container *ngFor="let groups of channelList | keyvalue">
+        <mat-expansion-panel *ngIf="groups.value.length > 0">
+            <mat-expansion-panel-header>
+                {{groups.key || 'Ungrouped'}} ({{groups.value.length}})
+            </mat-expansion-panel-header>
+            
+            <mat-list-item
+            *ngFor="let channel of groups.value | filterBy: searchTerm; index as i" 
+                    [class.active]="selected?.id === channel.id" (click)="selectChannel(channel)">
+                    {{i+1 + '. ' + channel?.name || 'Unnamed Channel'}}
+                    <mat-divider></mat-divider>
+                </mat-list-item>
+        </mat-expansion-panel>
+    
+        </ng-container>
+    </mat-accordion>
 </mat-nav-list>

src/app/components/video-player/video-player.component.ts

@@ -2,7 +2,9 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import * as Hls from 'hls.js';
 import { ChannelQuery, Channel } from 'src/app/state';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { MatSidenav } from '@angular/material/sidenav';
+import * as _ from 'lodash';
 
 @Component({
     selector: 'app-video-player',
@@ -41,7 +43,9 @@ export class VideoPlayerComponent implements OnInit {
      * Sets video player and subscribes to channel list from the store
      */
     ngOnInit(): void {
-        this.channels$ = this.channelQuery.selectAll();
+        this.channels$ = this.channelQuery
+            .selectAll()
+            .pipe(map((channels) => _.groupBy(channels, 'group.title')));
         this.videoPlayer = document.getElementById(
             'video-player'
         ) as HTMLVideoElement;
@@ -58,16 +62,12 @@ export class VideoPlayerComponent implements OnInit {
      * Starts to play the given channel
      * @param channel given channel object
      */
-    playChannel(channel: { url: string; title: string }): void {
+    playChannel(channel: Channel): void {
         if (Hls.isSupported()) {
-            console.log(
-                '... switching channel to ',
-                channel.title,
-                channel.url
-            );
+            console.log('... switching channel to ', channel.name, channel.url);
             this.hls.loadSource(channel.url);
             this.hls.attachMedia(this.videoPlayer);
-            this.channelTitle = channel.title;
+            this.channelTitle = channel.name;
         } else if (
             this.videoPlayer.canPlayType('application/vnd.apple.mpegurl')
         ) {

src/app/material.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
@@ -13,6 +14,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     exports: [
         MatButtonModule,
         MatCardModule,
+        MatExpansionModule,
         MatIconModule,
         MatInputModule,
         MatListModule,

src/app/state/channel.store.ts

@@ -5,12 +5,9 @@ import { Channel } from './channel.model';
 export interface ChannelState extends EntityState<Channel> {}
 
 @Injectable({ providedIn: 'root' })
-@StoreConfig({ name: 'channel' })
+@StoreConfig({ name: 'channel', resettable: true })
 export class ChannelStore extends EntityStore<ChannelState> {
-
-  constructor() {
-    super();
-  }
-
+    constructor() {
+        super();
+    }
 }
-