Merge branch 'multiepg' into electron

electron/api.ts

@@ -8,6 +8,8 @@ import {
     EPG_FETCH,
     EPG_FETCH_DONE,
     EPG_GET_CHANNELS,
+    EPG_GET_CHANNELS_BY_RANGE,
+    EPG_GET_CHANNELS_BY_RANGE_RESPONSE,
     EPG_GET_CHANNELS_DONE,
     EPG_GET_PROGRAM,
     EPG_GET_PROGRAM_DONE,
@@ -214,6 +216,19 @@ export class Api {
             )
             .on(EPG_ERROR, (event, arg) =>
                 this.mainWindow.webContents.send(EPG_ERROR, arg)
+            )
+            .on(EPG_GET_CHANNELS_BY_RANGE, (event, arg) => {
+                console.log(JSON.stringify(arg));
+                this.workerWindow.webContents.send(
+                    EPG_GET_CHANNELS_BY_RANGE,
+                    arg
+                );
+            })
+            .on(EPG_GET_CHANNELS_BY_RANGE_RESPONSE, (event, arg) =>
+                this.mainWindow.webContents.send(
+                    EPG_GET_CHANNELS_BY_RANGE_RESPONSE,
+                    arg
+                )
             );
 
         ipcMain.on(
@@ -266,7 +281,7 @@ export class Api {
             PLAYLIST_UPDATE_POSITIONS,
             (event, playlists: Partial<Playlist[]>) =>
                 playlists.forEach((list, index) => {
-                    this.updatePlaylistById(list._id, {
+                    this.updatePlaylistById((list as Playlist)._id, {
                         ...list,
                         position: index,
                     });
@@ -391,7 +406,7 @@ export class Api {
         session.defaultSession.webRequest.onBeforeSendHeaders(
             (details, callback) => {
                 details.requestHeaders['User-Agent'] = userAgent;
-                details.requestHeaders['Referer'] = referer;
+                details.requestHeaders['Referer'] = referer as string;
                 callback({ requestHeaders: details.requestHeaders });
             }
         );
@@ -527,10 +542,11 @@ export class Api {
             this.updatePlaylistById(id, {
                 updateState: PlaylistUpdateState.NOT_UPDATED,
             });
-            event.sender.send(ERROR, {
-                message: `File not found. Please check the entered playlist URL again.`,
-                status: err.response.status,
-            });
+            if (event)
+                event.sender.send(ERROR, {
+                    message: `File not found. Please check the entered playlist URL again.`,
+                    status: err.response.status,
+                });
         }
     }
 

electron/epg-worker.ts

@@ -8,6 +8,8 @@ import {
     EPG_FETCH,
     EPG_FETCH_DONE,
     EPG_GET_CHANNELS,
+    EPG_GET_CHANNELS_BY_RANGE,
+    EPG_GET_CHANNELS_BY_RANGE_RESPONSE,
     EPG_GET_CHANNELS_DONE,
     EPG_GET_PROGRAM,
     EPG_GET_PROGRAM_DONE,
@@ -20,6 +22,9 @@ let EPG_DATA: { channels: EpgChannel[]; programs: EpgProgram[] } = {
     channels: [],
     programs: [],
 };
+let EPG_DATA_MERGED: {
+    [id: string]: EpgChannel & { programs: EpgProgram[] };
+} = {};
 const loggerLabel = '[EPG Worker]';
 
 /**
@@ -69,10 +74,36 @@ const parseAndSetEpg = (xmlString) => {
         channels: [...EPG_DATA.channels, ...parsedEpg.channels],
         programs: [...EPG_DATA.programs, ...parsedEpg.programs],
     };
+    // map programs to channels
+    EPG_DATA_MERGED = convertEpgData();
     ipcRenderer.send(EPG_FETCH_DONE);
     console.log(loggerLabel, 'done, parsing was finished...');
 };
 
+const convertEpgData = () => {
+    let result: {
+        [id: string]: EpgChannel & { programs: EpgProgram[] };
+    } = {};
+
+    EPG_DATA?.programs?.forEach((program) => {
+        if (!result[program.channel]) {
+            const channel = EPG_DATA?.channels?.find(
+                (channel) => channel.id === program.channel
+            ) as EpgChannel;
+            result[program.channel] = {
+                ...channel,
+                programs: [program],
+            };
+        } else {
+            result[program.channel] = {
+                ...result[program.channel],
+                programs: [...result[program.channel].programs, program],
+            };
+        }
+    });
+    return result;
+};
+
 // fetches epg data from the provided URL
 ipcRenderer.on(EPG_FETCH, (event, arg) => {
     console.log(loggerLabel, 'epg fetch command was triggered');
@@ -120,3 +151,11 @@ ipcRenderer.on(EPG_GET_CHANNELS, (event, args) => {
         payload: EPG_DATA,
     });
 });
+
+ipcRenderer.on(EPG_GET_CHANNELS_BY_RANGE, (event, args) => {
+    ipcRenderer.send(EPG_GET_CHANNELS_BY_RANGE_RESPONSE, {
+        payload: Object.entries(EPG_DATA_MERGED)
+            .slice(args.skip, args.limit)
+            .map((entry) => entry[1]),
+    });
+});

shared/ipc-commands.ts

@@ -6,6 +6,9 @@ export const EPG_GET_PROGRAM = 'EPG:GET_PROGRAM';
 export const EPG_GET_PROGRAM_DONE = 'EPG:GET_PROGRAM_DONE';
 export const EPG_GET_CHANNELS = 'EPG:GET_CHANNELS';
 export const EPG_GET_CHANNELS_DONE = 'EPG:GET_CHANNELS_DONE';
+export const EPG_GET_CHANNELS_BY_RANGE = 'EPG:EPG_GET_CHANNELS_BY_RANGE';
+export const EPG_GET_CHANNELS_BY_RANGE_RESPONSE =
+    'EPG:EPG_GET_CHANNELS_BY_RANGE_RESPONSE';
 
 // Playlist related commands
 export const PLAYLIST_GET_ALL = 'PLAYLIST:GET_ALL';

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

@@ -54,7 +54,6 @@
     .mat-tab-label-active {
         min-width: 0 !important;
         padding: 15px !important;
-        margin: 5px !important;
     }
 }
 

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

@@ -76,9 +76,9 @@ export class EpgListComponent {
         this.timeshiftUntil$ = this.channelQuery
             .select(
                 (store) =>
-                    store.active.tvg?.rec ||
-                    store.active.timeshift ||
-                    store.active.catchup?.days
+                    store.active?.tvg?.rec ||
+                    store.active?.timeshift ||
+                    store.active?.catchup?.days
             )
             .pipe(
                 map((value) =>

src/app/player/components/multi-epg/multi-epg-container.component.html

@@ -0,0 +1,142 @@
+<div id="epg-navigation">
+    <button
+        [matTooltip]="'CLOSE' | translate"
+        mat-button
+        (click)="close()"
+        color="accent"
+    >
+        <mat-icon>close</mat-icon> {{ 'CLOSE' | translate }}
+    </button>
+    <button
+        [matTooltip]="'EPG.NEXT_DAY' | translate"
+        mat-icon-button
+        (click)="switchDay('prev')"
+    >
+        <mat-icon>navigate_before</mat-icon>
+    </button>
+    <button
+        [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
+        mat-icon-button
+        (click)="switchDay('next')"
+    >
+        <mat-icon>navigate_next</mat-icon>
+    </button>
+    <div class="today-date">
+        {{ today | momentDate: 'YYYYMMDD':'MMMM Do, dddd' }}
+    </div>
+    <button mat-icon-button (click)="zoomIn()" [disabled]="hourWidth >= 800">
+        <mat-icon>zoom_in</mat-icon>
+    </button>
+    <button mat-icon-button [disabled]="hourWidth <= 50" (click)="zoomOut()">
+        <mat-icon>zoom_out</mat-icon>
+    </button>
+    <button
+        mat-button
+        [disabled]="channelsLowerRange === 0"
+        (click)="previousChannels()"
+    >
+        Previous channels
+    </button>
+    <button mat-button (click)="nextChannels()">Next channels</button>
+</div>
+<div class="parent" #epgContainer>
+    <svg id="channels-column">
+        <g *ngFor="let item of channels; let i = index">
+            <!-- channel name -->
+            <g class="channel">
+                <rect
+                    width="100"
+                    [attr.height]="barHeight"
+                    [attr.y]="barHeight * i + barHeight"
+                    stroke="black"
+                ></rect>
+                <image
+                    *ngIf="item.icon[0]"
+                    [attr.y]="barHeight * i + barHeight + 1"
+                    [attr.href]="item.icon[0]"
+                    [attr.height]="barHeight - 2"
+                    width="100"
+                    [matTooltip]="item.name[0].value"
+                ></image>
+                <foreignObject
+                    *ngIf="!item.icon[0]"
+                    [attr.y]="barHeight * i + barHeight"
+                    width="100"
+                    [attr.height]="barHeight"
+                >
+                    <div class="channel-name">
+                        {{ item.name[0].value }}
+                    </div>
+                </foreignObject>
+            </g>
+        </g>
+    </svg>
+    <div id="epg-container">
+        <svg [attr.width]="24 * hourWidth" height="100%" id="epg-svg">
+            <!-- time headline -->
+            <g *ngFor="let a of timeHeader; let i = index">
+                <rect
+                    [matTooltip]="i + ':00'"
+                    [attr.width]="hourWidth"
+                    [attr.height]="barHeight"
+                    [attr.x]="i * hourWidth"
+                    fill="#000"
+                ></rect>
+                <text
+                    [attr.x]="i * hourWidth"
+                    y="10"
+                    font-size="14"
+                    fill="white"
+                    transform="translate(20,20)"
+                >
+                    {{ i }}:00
+                </text>
+            </g>
+
+            <!-- epg channels with programs -->
+            <g *ngFor="let item of channels; let i = index">
+                <g
+                    *ngFor="let program of item.programs; let a = index"
+                    [matTooltip]="program.title[0].value"
+                    class="program-item"
+                >
+                    <!-- program item -->
+                    <rect
+                        [attr.width]="program.width"
+                        [attr.height]="barHeight"
+                        [attr.x]="program.startPosition"
+                        [attr.y]="barHeight * i + barHeight"
+                        fill="#000"
+                    ></rect>
+                    <foreignObject
+                        (click)="showDescription(program)"
+                        [attr.width]="program.width"
+                        [attr.height]="barHeight"
+                        [attr.y]="barHeight * i + barHeight"
+                        [attr.x]="program.startPosition"
+                    >
+                        <div
+                            [innerHtml]="program.title[0]?.value"
+                            class="program-name"
+                        ></div>
+                    </foreignObject>
+                </g>
+                <line
+                    [attr.x1]="0"
+                    [attr.y1]="barHeight * i + barHeight"
+                    [attr.x2]="24 * hourWidth"
+                    [attr.y2]="barHeight * i + barHeight"
+                    stroke="#676767"
+                />
+            </g>
+            <line
+                [attr.x1]="currentTimeLine"
+                [attr.y1]="barHeight"
+                [attr.x2]="currentTimeLine"
+                id="current-time-line"
+                y2="1000"
+                stroke="black"
+            />
+        </svg>
+    </div>
+</div>

src/app/player/components/multi-epg/multi-epg-container.component.scss

@@ -0,0 +1,70 @@
+.program-item {
+    cursor: pointer;
+}
+
+rect {
+    stroke: #676767;
+    cursor: pointer;
+}
+
+.channel > rect {
+    stroke: #676767;
+}
+
+.program-item:hover > rect {
+    fill: #333;
+}
+
+.program-name,
+.channel-name {
+    -webkit-line-clamp: 2;
+    height: 32px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    padding: 6px 2px;
+}
+
+#epg-container {
+    width: calc(100vw - 100px);
+    height: calc(100vh - 73px);
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+
+.parent {
+    display: flex;
+    background-color: black;
+}
+
+#channels-column {
+    width: 100px;
+    flex: none;
+    border-right: 2px solid #ccc;
+}
+
+.channel-name {
+    margin: 0 5px;
+    text-align: center;
+}
+
+#epg-navigation {
+    display: flex;
+    background-color: black;
+    margin-top: 30px;
+    border-bottom: 2px solid #fff;
+}
+
+.today-date {
+    flex: 1;
+    align-items: center;
+    line-height: 40px;
+    height: 40px;
+    padding: 0 20px;
+}
+
+#current-time-line {
+    stroke-width: 2px;
+    stroke: white;
+}

src/app/player/components/multi-epg/multi-epg-container.component.ts

@@ -0,0 +1,212 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    Inject,
+    NgZone,
+    OnInit,
+    ViewChild,
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { addDays, differenceInMinutes, format, parse, subDays } from 'date-fns';
+import {
+    EPG_GET_CHANNELS_BY_RANGE,
+    EPG_GET_CHANNELS_BY_RANGE_RESPONSE,
+} from '../../../../../shared/ipc-commands';
+import { DataService } from '../../../services/data.service';
+import { EpgChannel } from '../../models/epg-channel.model';
+import { EpgProgram } from '../../models/epg-program.model';
+import { EpgItemDescriptionComponent } from '../epg-list/epg-item-description/epg-item-description.component';
+import { COMPONENT_OVERLAY_REF } from '../video-player/video-player.component';
+
+@Component({
+    selector: 'app-multi-epg-container',
+    templateUrl: './multi-epg-container.component.html',
+    styleUrls: ['./multi-epg-container.component.scss'],
+})
+export class MultiEpgContainerComponent implements OnInit, AfterViewInit {
+    @ViewChild('epgContainer') epgContainer: ElementRef;
+    timeHeader = new Array(24);
+    hourWidth = 150;
+    barHeight = 50;
+    originalEpgData: (EpgChannel & { programs: EpgProgram[] })[] = [];
+    channels: (EpgChannel & { programs: EpgProgram[] })[] = [];
+    today = format(new Date(), 'yyyyMMdd');
+    currentTimeLine = 0;
+    visibleChannels;
+    channelsLowerRange = 0;
+    channelsUpperRange;
+
+    constructor(
+        private dataService: DataService,
+        private dialog: MatDialog,
+        private ngZone: NgZone,
+        @Inject(COMPONENT_OVERLAY_REF) private overlayRef: OverlayRef
+    ) {
+        this.dataService.listenOn(
+            EPG_GET_CHANNELS_BY_RANGE_RESPONSE,
+            (event, response) =>
+                this.ngZone.run(() => {
+                    if (response) {
+                        this.originalEpgData = response.payload;
+                        this.channels = this.enrichProgramData();
+                    }
+                })
+        );
+    }
+
+    ngOnInit(): void {
+        this.calculateCurrentTimeBar();
+    }
+
+    ngAfterViewInit(): void {
+        const timeNow = new Date();
+        const scrollPosition =
+            (timeNow.getHours() + timeNow.getMinutes() / 60) * this.hourWidth;
+        document
+            .getElementById('epg-container')!
+            .scrollTo(scrollPosition < 1000 ? 0 : scrollPosition - 150, 0);
+
+        const borderInPx =
+            this.epgContainer.nativeElement.offsetHeight / this.barHeight;
+        this.visibleChannels = Math.floor(
+            (this.epgContainer.nativeElement.offsetHeight - borderInPx) /
+                this.barHeight -
+                1
+        );
+        this.channelsUpperRange = this.visibleChannels;
+        this.requestPrograms();
+    }
+
+    nextChannels(): void {
+        this.channelsLowerRange = this.channelsUpperRange;
+        this.channelsUpperRange =
+            this.channelsUpperRange + this.visibleChannels;
+        this.channels = [];
+        this.requestPrograms();
+    }
+
+    previousChannels(): void {
+        this.channelsUpperRange =
+            this.channelsUpperRange - this.visibleChannels;
+        this.channelsLowerRange =
+            this.channelsUpperRange - this.visibleChannels;
+
+        this.requestPrograms();
+    }
+
+    requestPrograms() {
+        this.dataService.sendIpcEvent(EPG_GET_CHANNELS_BY_RANGE, {
+            limit: this.channelsUpperRange,
+            skip: this.channelsLowerRange,
+        });
+    }
+
+    enrichProgramData() {
+        return this.originalEpgData.map((channel) => {
+            return {
+                ...channel,
+                programs: channel.programs
+                    .filter((item) => item.start.includes(this.today))
+                    .map((program) => {
+                        const startDate = parse(
+                            program.start,
+                            'yyyyMMddHHmmss XXXX',
+                            addDays(new Date(), 1)
+                        );
+                        const stopDate = parse(
+                            program.stop,
+                            'yyyyMMddHHmmss XXXX',
+                            addDays(new Date(), 1)
+                        );
+                        return {
+                            ...program,
+                            startDate,
+                            stopDate,
+                            startPosition: this.positionToStartInPx(startDate),
+                            width: this.programDurationInPx(
+                                startDate,
+                                stopDate
+                            ),
+                        };
+                    }),
+            };
+        });
+    }
+
+    positionToStartInPx(startDate: Date) {
+        return (
+            (startDate.getHours() + startDate.getMinutes() / 60) *
+            this.hourWidth
+        );
+    }
+
+    programDurationInPx(startDate: Date, stopDate: Date) {
+        const duration = differenceInMinutes(stopDate, startDate);
+        return (duration * this.hourWidth) / 60;
+    }
+
+    recalculate(): void {
+        this.channels.forEach((channel) => {
+            channel.programs = channel.programs.map((program: any) => {
+                return {
+                    ...program,
+                    startPosition: this.positionToStartInPx(program.startDate),
+                    width: this.programDurationInPx(
+                        program.startDate,
+                        program.stopDate
+                    ),
+                };
+            });
+        });
+    }
+
+    zoomIn(): void {
+        this.hourWidth += 50;
+        this.recalculate();
+        this.calculateCurrentTimeBar();
+    }
+
+    zoomOut(): void {
+        if (this.hourWidth <= 50) return;
+        this.hourWidth -= 50;
+        this.recalculate();
+        this.calculateCurrentTimeBar();
+    }
+
+    calculateCurrentTimeBar(): void {
+        const timeNow = new Date();
+        this.currentTimeLine =
+            (timeNow.getHours() + timeNow.getMinutes() / 60) * this.hourWidth;
+    }
+
+    switchDay(direction: 'prev' | 'next'): void {
+        this.today =
+            direction === 'prev'
+                ? format(
+                      subDays(parse(this.today, 'yyyyMMdd', new Date()), 1),
+                      'yyyyMMdd'
+                  )
+                : format(
+                      addDays(parse(this.today, 'yyyyMMdd', new Date()), 1),
+                      'yyyyMMdd'
+                  );
+        this.calculateCurrentTimeBar();
+        this.channels = this.enrichProgramData();
+    }
+
+    /**
+     * Opens the dialog with details about the selected program
+     * @param program selected epg program
+     */
+    showDescription(program: EpgProgram): void {
+        this.dialog.open(EpgItemDescriptionComponent, {
+            data: program,
+        });
+    }
+
+    close() {
+        this.overlayRef.detach();
+    }
+}

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

@@ -95,6 +95,14 @@
                 </button>
                 {{ activeChannel?.name }}
                 <div class="spacer"></div>
+                <button
+                    *ngIf="epgAvailable$ | async"
+                    mat-icon-button
+                    (click)="openMultiEpgView()"
+                    [matTooltip]="'TOP_MENU.OPEN_MULTI_EPG' | translate"
+                >
+                    <mat-icon>view_list</mat-icon>
+                </button>
                 <button
                     *ngIf="epgAvailable$ | async"
                     mat-button

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

@@ -1,21 +1,39 @@
-import { Component, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import {
+    Component,
+    InjectionToken,
+    Injector,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+} from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { filter, map, Observable, skipWhile } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
-import { PLAYLIST_PARSE_RESPONSE } from '../../../../../shared/ipc-commands';
+import {
+    PLAYLIST_GET_ALL,
+    PLAYLIST_PARSE_RESPONSE,
+} from '../../../../../shared/ipc-commands';
 import { Playlist } from '../../../../../shared/playlist.interface';
 import { DataService } from '../../../services/data.service';
 import { Settings, VideoPlayer } from '../../../settings/settings.interface';
 import { STORE_KEY } from '../../../shared/enums/store-keys.enum';
 import { ChannelQuery, ChannelStore } from '../../../state';
+import { MultiEpgContainerComponent } from '../multi-epg/multi-epg-container.component';
 import { EpgProgram } from './../../models/epg-program.model';
 
 /** Possible sidebar view options */
 type SidebarView = 'CHANNELS' | 'PLAYLISTS';
 
+export const COMPONENT_OVERLAY_REF = new InjectionToken(
+    'COMPONENT_OVERLAY_REF'
+);
+
 @Component({
     selector: 'app-video-player',
     templateUrl: './video-player.component.html',
@@ -89,6 +107,9 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
 
     listeners = [];
 
+    /** EPG overlay reference */
+    overlayRef: OverlayRef;
+
     /**
      * Creates an instance of VideoPlayerComponent
      */
@@ -97,10 +118,13 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         private channelStore: ChannelStore,
         public dataService: DataService,
         private ngZone: NgZone,
+        private overlay: Overlay,
         private router: Router,
         private snackBar: MatSnackBar,
         private storage: StorageMap
-    ) {}
+    ) {
+        this.dataService.sendIpcEvent(PLAYLIST_GET_ALL);
+    }
 
     /**
      * Sets video player and subscribes to channel list from the store
@@ -187,4 +211,23 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
             );
         }
     }
+
+    /**
+     * Opens the overlay with multi EPG view
+     */
+    openMultiEpgView() {
+        this.overlayRef = this.overlay.create();
+        const injector = Injector.create({
+            providers: [
+                { provide: COMPONENT_OVERLAY_REF, useValue: this.overlayRef },
+            ],
+        });
+        const componentPortal = new ComponentPortal(
+            MultiEpgContainerComponent,
+            undefined,
+            injector
+        );
+        this.overlayRef.addPanelClass('epg-overlay');
+        this.overlayRef.attach(componentPortal);
+    }
 }

src/app/player/player.module.ts

@@ -1,20 +1,27 @@
-import { EpgListItemComponent } from './components/epg-list/epg-list-item/epg-list-item.component';
-import { NgModule } from '@angular/core';
+import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
-import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
-import { HtmlVideoPlayerComponent } from './components/html-video-player/html-video-player.component';
-import { VideoPlayerComponent } from './components/video-player/video-player.component';
-import { VjsPlayerComponent } from './components/vjs-player/vjs-player.component';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '../shared/shared.module';
-import { EpgListComponent } from './components/epg-list/epg-list.component';
+import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
 import { EpgItemDescriptionComponent } from './components/epg-list/epg-item-description/epg-item-description.component';
+import { EpgListItemComponent } from './components/epg-list/epg-list-item/epg-list-item.component';
+import { EpgListComponent } from './components/epg-list/epg-list.component';
+import { HtmlVideoPlayerComponent } from './components/html-video-player/html-video-player.component';
 import { InfoOverlayComponent } from './components/info-overlay/info-overlay.component';
+import { MultiEpgContainerComponent } from './components/multi-epg/multi-epg-container.component';
+import { VideoPlayerComponent } from './components/video-player/video-player.component';
+import { VjsPlayerComponent } from './components/vjs-player/vjs-player.component';
 
 const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
 
 @NgModule({
-    imports: [CommonModule, RouterModule.forChild(routes), SharedModule],
+    imports: [
+        CommonModule,
+        OverlayModule,
+        RouterModule.forChild(routes),
+        SharedModule,
+    ],
     declarations: [
         ChannelListContainerComponent,
         EpgItemDescriptionComponent,
@@ -22,6 +29,7 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
         EpgListItemComponent,
         InfoOverlayComponent,
         HtmlVideoPlayerComponent,
+        MultiEpgContainerComponent,
         VideoPlayerComponent,
         VjsPlayerComponent,
     ],

src/assets/i18n/de.json

@@ -127,7 +127,8 @@
     "TOP_MENU": {
         "OPEN_CHANNELS_LIST": "Senderliste öffnen",
         "OPEN_EPG_LIST": "TV-Guide (EPG) öffnen",
-        "TOGGLE_FAVORITE_FLAG": "Als Favoriten hinzufügen/entfernen"
+        "TOGGLE_FAVORITE_FLAG": "Als Favoriten hinzufügen/entfernen",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
     },
     "NO": "Nein",
     "YES": "Ja",

src/assets/i18n/en.json

@@ -96,7 +96,8 @@
     "TOP_MENU": {
         "OPEN_CHANNELS_LIST": "Open channel list",
         "TOGGLE_FAVORITE_FLAG": "Toggle favorite flag",
-        "OPEN_EPG_LIST": "Open EPG list"
+        "OPEN_EPG_LIST": "Open EPG list",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
     },
     "EPG": {
         "NEXT_DAY": "Next day",

src/assets/i18n/es.json

@@ -96,7 +96,8 @@
     "TOP_MENU": {
         "OPEN_CHANNELS_LIST": "Open channels list",
         "TOGGLE_FAVORITE_FLAG": "Toggle favorite flag",
-        "OPEN_EPG_LIST": "Open EPG list"
+        "OPEN_EPG_LIST": "Open EPG list",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
     },
     "EPG": {
         "NEXT_DAY": "Día siguiente",

src/assets/i18n/fr.json

@@ -96,7 +96,8 @@
     "TOP_MENU": {
         "OPEN_CHANNELS_LIST": "Ouvrir la liste des chaines",
         "TOGGLE_FAVORITE_FLAG": "Basculer le status de favoris",
-        "OPEN_EPG_LIST": "Ouvrir la liste de l'EPG"
+        "OPEN_EPG_LIST": "Ouvrir la liste du EPG",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
     },
     "EPG": {
         "NEXT_DAY": "Jour suivant",

src/assets/i18n/ko.json

@@ -96,7 +96,8 @@
     "TOP_MENU": {
         "OPEN_CHANNELS_LIST": "채널 열기 목록",
         "TOGGLE_FAVORITE_FLAG": "즐겨찾기 보이기/숨기기",
-        "OPEN_EPG_LIST": "EPG 목록 열기"
+        "OPEN_EPG_LIST": "EPG 목록 열기",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
     },
     "EPG": {
         "NEXT_DAY": "다음날",

src/assets/i18n/ru.json

@@ -96,7 +96,8 @@
     "TOP_MENU": {
         "OPEN_CHANNELS_LIST": "Открыть список каналов",
         "TOGGLE_FAVORITE_FLAG": "Избранный",
-        "OPEN_EPG_LIST": "Открыть программу (EPG)"
+        "OPEN_EPG_LIST": "Открыть программу (EPG)",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
     },
     "EPG": {
         "NEXT_DAY": "Следующий день",

src/assets/i18n/zh.json

@@ -96,7 +96,8 @@
     "TOP_MENU": {
         "OPEN_CHANNELS_LIST": "打开频道列表",
         "TOGGLE_FAVORITE_FLAG": "切换收藏夹标志",
-        "OPEN_EPG_LIST": "打开电子节目单EPG列表"
+        "OPEN_EPG_LIST": "打开电子节目单EPG列表",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
     },
     "EPG": {
         "NEXT_DAY": "明天",