feat: epg integration

src/app/app.component.ts

@@ -1,7 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-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';
@@ -33,11 +31,7 @@ export class AppComponent {
         private snackBar: MatSnackBar,
         private storage: StorageMap
     ) {
-        if (!AppConfig.production) {
-            akitaDevtools(ngZone);
-        }
         this.translate.setDefaultLang('en');
-        console.log('AppConfig', AppConfig);
 
         if (electronService.isElectron) {
             console.log(process.env);
@@ -61,10 +55,7 @@ export class AppComponent {
 
         this.electronService.ipcRenderer.on(EPG_FETCH_DONE, () => {
             this.ngZone.run(() => {
-                this.channelStore.update((store) => ({
-                    ...store,
-                    epgAvailable: true,
-                }));
+                this.channelStore.setEpgAvailableFlag(true);
                 this.snackBar.open('EPG was successfully downloaded!', null, {
                     duration: 2000,
                     verticalPosition: 'bottom',

src/app/player/components/epg-list/epg-list.component.html

@@ -1,27 +1,42 @@
 <ng-container *ngIf="channel; else noEpg">
-    <div id="channel-info" fxLayoutAlign="row">
-        <img
-            fxFlex="48px"
-            *ngIf="channel?.icon"
-            [src]="channel.icon"
-            width="48"
-        />
-        <div fxFlex="100" fxLayoutAlign="start center" class="channel-name">
-            {{ channel?.name[0]?.value }}
+    <div fxFlex="80px" id="channel-info" fxLayoutAlign="row" fxLayoutGap="10px">
+        <img *ngIf="channel?.icon" [src]="channel.icon" width="48" />
+        <div>
+            <div class="channel-name">{{ channel?.name[0]?.value }}</div>
+            <ng-container>
+                <div class="playing-now">Playing now:</div>
+                <div class="epg-program-name">
+                    {{
+                        playingNow ? playingNow.title[0]?.value : 'Live stream'
+                    }}
+                </div>
+            </ng-container>
         </div>
     </div>
-    <mat-list>
-        <mat-list-item
+    <mat-selection-list fxFlex [multiple]="false">
+        <mat-list-option
             *ngFor="let item of items"
+            [value]="item"
             [class.active]="timeNow >= item.start && timeNow <= item.stop"
+            (click)="
+                setEpgProgram(
+                    item,
+                    timeNow >= item.start && timeNow <= item.stop
+                )
+            "
         >
             <div matLine>
                 <span class="time">{{ item.start }} - {{ item.stop }}</span>
+                <span
+                    *ngIf="timeNow >= item.start && timeNow <= item.stop"
+                    class="live-badge"
+                    >live</span
+                >
             </div>
             <p matLine>{{ item?.title[0]?.value }}</p>
             <mat-divider></mat-divider>
-        </mat-list-item>
-    </mat-list>
+        </mat-list-option>
+    </mat-selection-list>
 </ng-container>
 <ng-template #noEpg>
     <mat-list>

src/app/player/components/epg-list/epg-list.component.scss

@@ -1,25 +1,63 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+}
+
 .active {
-    background-color: #ddd;
+    border-bottom: 1px dashed #666;
+    background: linear-gradient(to top, #d2d2d2 0%, #d6d6d6 20%, rgba(255, 255, 255, 0) 100%)
+
 }
 
-.time {
+.time, .playing-now {
     color: #666;
     border-bottom: 1px solid #ccc;
     font-size: 0.8em;
     display: inline-block;
     margin-bottom: 5px;
 }
 
+.epg-program-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    font-size: 0.9em;
+}
+
 #channel-info {
     padding:10px;
     border-bottom: 1px solid #ccc;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    background-color: #ccc;
 }
 
 .channel-name {
-    padding-left: 10px
+    font-weight: 800;
 }
 
 mat-list {
     height: calc(100vh - 110px);
     overflow: auto;
+}
+
+mat-selection-list {
+    overflow: auto;
+}
+
+.live-badge {
+    background-color: red;
+    border-radius: 2px;
+    padding: 2px 6px;
+    color: #fff;
+    text-transform: uppercase;
+    margin-left: 6px;
+    font-size: 0.8em;
 }

src/app/player/components/epg-list/epg-list.component.ts

@@ -4,6 +4,7 @@ import { EpgProgram } from '../../models/epg-program.model';
 import * as moment from 'moment';
 import { ElectronService } from '../../../services/electron.service';
 import { EPG_GET_PROGRAM_DONE } from '../../../shared/ipc-commands';
+import { ChannelStore } from 'app/state';
 
 interface EpgData {
     channel: EpgChannel;
@@ -30,6 +31,9 @@ export class EpgListComponent {
         payload: EpgData;
     };
 
+    /** EPG selected program */
+    playingNow: EpgProgram;
+
     /** Current time as formatted string */
     timeNow: string;
 
@@ -39,6 +43,7 @@ export class EpgListComponent {
      * @param ngZone
      */
     constructor(
+        private channelStore: ChannelStore,
         private electronService: ElectronService,
         private ngZone: NgZone
     ) {
@@ -81,6 +86,17 @@ export class EpgListComponent {
         }
     }
 
+    /**
+     * Sets the provided epg program as active and starts to play
+     * @param program
+     */
+    setEpgProgram(program: EpgProgram, isLive?: boolean): void {
+        isLive
+            ? this.channelStore.resetActiveEpgProgram()
+            : this.channelStore.setActiveEpgProgram(program);
+        this.playingNow = program;
+    }
+
     /**
      * Removes all ipc renderer listeners after destroy
      */

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

@@ -41,16 +41,18 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
      * @param channel given channel object
      */
     playChannel(channel: Channel): void {
+        const url = channel.url + channel.epgParams;
         if (Hls.isSupported()) {
-            console.log('... switching channel to ', channel.name, channel.url);
-            this.hls.loadSource(channel.url);
+            console.log('... switching channel to ', channel.name, url);
+            this.hls.loadSource(url);
             this.hls.attachMedia(this.videoPlayer.nativeElement);
+            this.videoPlayer.nativeElement.play();
         } else if (
             this.videoPlayer.nativeElement.canPlayType(
                 'application/vnd.apple.mpegurl'
             )
         ) {
-            this.videoPlayer.nativeElement.src = channel.url;
+            this.videoPlayer.nativeElement.src = url;
             this.videoPlayer.nativeElement.addEventListener(
                 'loadedmetadata',
                 () => {

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

@@ -55,7 +55,7 @@
                 [options]="{
                     sources: [
                         {
-                            src: activeChannel.url,
+                            src: activeChannel.url + activeChannel.epgParams,
                             type: 'application/x-mpegURL'
                         }
                     ]