feat: add icon, about dialog and menu

src/app/app.component.ts

@@ -4,9 +4,13 @@ import { AppConfig } from '../environments/environment';
 import { akitaDevtools } from '@datorama/akita';
 import { Titlebar, Color } from 'custom-electron-titlebar';
 import { ElectronService } from './services/electron.service';
+import { Router } from '@angular/router';
 
+// create custom title bar
 new Titlebar({
     backgroundColor: Color.fromHex('#000'),
+    itemBackgroundColor: Color.fromHex('#222'),
+    enableMnemonics: true,
 });
 
 @Component({
@@ -18,6 +22,7 @@ export class AppComponent {
     constructor(
         private electronService: ElectronService,
         private ngZone: NgZone,
+        private router: Router,
         private translate: TranslateService
     ) {
         if (!AppConfig.production) {
@@ -40,5 +45,10 @@ export class AppComponent {
         } else {
             console.log('Run in browser');
         }
+        this.electronService.ipcRenderer.on('add-playlist-view', () => {
+            this.ngZone.run(() => {
+                this.router.navigateByUrl('/', { skipLocationChange: true });
+            });
+        });
     }
 }

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

@@ -12,8 +12,8 @@
             </mat-list-item>
         </mat-list>
         <mat-nav-list id="channels-list">
-            <mat-accordion multi>
-                <mat-list-item *ngFor="let channel of _channelList | filterBy: searchTerm; index as i"
+            <cdk-virtual-scroll-viewport itemSize="50" class="scroll-viewport">
+                <mat-list-item *cdkVirtualFor="let channel of _channelList | filterBy: searchTerm; index as i"
                     [class.active]="selected?.id === channel.id" (click)="selectChannel(channel)">
                     <p matLine>
                         {{ i+1 + '. ' + channel?.name || 'Unnamed Channel' }}
@@ -23,7 +23,7 @@
                     </button> -->
                     <mat-divider></mat-divider>
                 </mat-list-item>
-            </mat-accordion>
+            </cdk-virtual-scroll-viewport>
         </mat-nav-list>
     </mat-tab>
 
@@ -42,8 +42,8 @@
                                     {{ i+1 + '. ' + channel?.name || 'Unnamed Channel' }}
                                 </p>
                                 <!-- <button mat-icon-button color="primary" (click)="favChannel(channel, $event)">
-                                    <mat-icon>star{{ channel.fav ? '' : '_outline' }}</mat-icon>
-                                </button> -->
+                                        <mat-icon>star{{ channel.fav ? '' : '_outline' }}</mat-icon>
+                                    </button> -->
                                 <mat-divider></mat-divider>
                             </mat-list-item>
                         </ng-template>

src/app/channel-list-container/channel-list-container.component.scss

@@ -26,6 +26,9 @@
     margin: 3px 10px !important;
 }
 
+.scroll-viewport {
+    min-height: calc(100vh - 142px);
+}
 
 ::ng-deep {
     .mat-tab-group {

src/app/material.module.ts

@@ -10,6 +10,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 @NgModule({
     exports: [
@@ -24,6 +25,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
         MatSnackBarModule,
         MatTabsModule,
         MatToolbarModule,
+        ScrollingModule,
     ],
 })
 export class MaterialModule {}

src/app/video-player/video-player.component.html

@@ -28,6 +28,7 @@
             </button>
             {{ (activeChannel$ | async)?.name}}
             <div class="spacer"></div>
+            <button mat-icon-button (click)="openAbout()"><mat-icon>info</mat-icon></button>
             <!-- <mat-icon>star_outline</mat-icon> -->
         </mat-toolbar>
 

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

@@ -11,6 +11,9 @@ import * as _ from 'lodash';
     styleUrls: ['./video-player.component.css'],
 })
 export class VideoPlayerComponent implements OnInit {
+    /** electrons ipc reference */
+    renderer = window.require('electron').ipcRenderer;
+
     /** Channels list */
     channels$: Observable<Channel[]>;
 
@@ -72,4 +75,11 @@ export class VideoPlayerComponent implements OnInit {
             });
         }
     }
+
+    /**
+     * Opens about application dialog
+     */
+    openAbout(): void {
+        this.renderer.send('show-about');
+    }
 }