feat: mpv player integration

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

@@ -25,6 +25,7 @@
                 [class.hide-captions]="!playerSettings.showCaptions"
             ></app-vjs-player>
         </ng-container>
+
         <!-- default html player component -->
         <app-html-video-player
             *ngIf="playerSettings.player === 'html5'"
@@ -33,6 +34,13 @@
         >
         </app-html-video-player>
 
+        <ng-container *ngIf="(activeChannel$ | async) && playerSettings.player === 'mpv'">
+            <div class="mpv-player">
+                <img src="./assets/images/custom-player.png" />
+                <p>The channel is played in a separate window in the MPV player. (<a [routerLink] style="cursor: pointer;" (click)="openUrl('https://github.com/4gray/iptvnator/wiki/What-is-mpv-video-player-and-how-to-install-it-on-different-operating-systems%3F')">Installation instructions</a>)</p>
+            </div>
+        </ng-container>
+
         <!-- channel overlay -->
         <app-info-overlay
             [channel]="activeChannel$ | async"

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

@@ -22,3 +22,17 @@
         min-width: 200px;
     }
 }
+
+@media (prefers-color-scheme: dark) {
+    .mpv-player {
+        display: flex;
+        margin-top: 50px;
+        flex-direction: column;
+        align-items: center;
+
+        img {
+            filter: invert(100%);
+            width: 400px;
+        }
+    }
+}

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

@@ -8,6 +8,7 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { StorageMap } from '@ngx-pwa/local-storage';
@@ -20,6 +21,7 @@ import {
 } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
 import {
+    ERROR,
     PLAYLIST_PARSE_BY_URL,
     PLAYLIST_PARSE_RESPONSE,
 } from '../../../../../shared/ipc-commands';
@@ -73,6 +75,14 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
 
     /** IPC Renderer commands list with callbacks */
     commandsList = [
+        {
+            id: ERROR,
+            execute: (response: { message: string }): void => {
+                this.snackBar.open(response.message, '', {
+                    duration: 3100,
+                });
+            },
+        },
         {
             id: PLAYLIST_PARSE_RESPONSE,
             execute: (response: { payload: Playlist }): void => {
@@ -109,6 +119,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         private ngZone: NgZone,
         private overlay: Overlay,
         private playlistsService: PlaylistsService,
+        private snackBar: MatSnackBar,
         private storage: StorageMap,
         private store: Store
     ) {}
@@ -217,4 +228,8 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         this.overlayRef.addPanelClass('epg-overlay');
         this.overlayRef.attach(componentPortal);
     }
+
+    openUrl(url: string) {
+        window.open(url, '_blank');
+    }
 }