feat: add experimental vlc player support

electron/api.ts

@@ -25,11 +25,13 @@ import {
     MIGRATE_PLAYLISTS_RESPONSE,
     OPEN_FILE,
     OPEN_MPV_PLAYER,
+    OPEN_VLC_PLAYER,
     PLAYLIST_PARSE_BY_URL,
     PLAYLIST_PARSE_RESPONSE,
     PLAYLIST_UPDATE,
     PLAYLIST_UPDATE_RESPONSE,
     SET_MPV_PLAYER_PATH,
+    SET_VLC_PLAYER_PATH,
     XTREAM_REQUEST,
     XTREAM_RESPONSE,
 } from '../shared/ipc-commands';
@@ -39,6 +41,8 @@ import { ParsedPlaylist } from '../src/typings.d';
 
 const fs = require('fs');
 const https = require('https');
+const child_process = require('child_process');
+const path = require('path');
 
 const mpvAPI = require('node-mpv');
 
@@ -63,6 +67,7 @@ const agent = new https.Agent({
 });
 
 const MPV_PLAYER_PATH = 'MPV_PLAYER_PATH';
+const VLC_PLAYER_PATH = 'VLC_PLAYER_PATH';
 
 export class Api {
     /** Instance of the main application window */
@@ -254,6 +259,24 @@ export class Api {
                 // recreate mpv player instance with new binary path if it was changed
                 if (store.get(MPV_PLAYER_PATH, mpvPlayerPath) !== mpvPlayerPath)
                     this.mpv = this.createMpvInstance();
+            })
+            .on(OPEN_VLC_PLAYER, (event, { url }) => {
+                const proc = child_process.spawn(
+                    this.getVlcPath(),
+                    [`"${url as string}"`],
+                    {
+                        shell: true,
+                    }
+                );
+
+                proc.on('exit', (code) => {
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    console.log(`VLC exited with code ${code}`);
+                });
+            })
+            .on(SET_VLC_PLAYER_PATH, (_event, vlcPlayerPath) => {
+                console.log('... setting vlc player path', vlcPlayerPath);
+                store.set(VLC_PLAYER_PATH, vlcPlayerPath);
             });
 
         // listeners for EPG events
@@ -503,6 +526,31 @@ export class Api {
         return parse(m3uString);
     }
 
+    getDefaultVlcPath() {
+        if (process.platform === 'win32') {
+            return path.join(
+                'C:',
+                'Program Files (x86)',
+                'VideoLAN',
+                'VLC',
+                'vlc.exe'
+            );
+        } else if (process.platform === 'linux') {
+            return '/usr/bin/vlc';
+        } else if (process.platform === 'darwin') {
+            return '/Applications/VLC.app/Contents/MacOS/VLC';
+        }
+    }
+
+    getVlcPath() {
+        const customVlcPath = this.store.get(VLC_PLAYER_PATH);
+        if (customVlcPath) {
+            return customVlcPath;
+        } else {
+            return this.getDefaultVlcPath();
+        }
+    }
+
     /** @deprecated - used only for migration */
     getAllPlaylists() {
         return db

shared/ipc-commands.ts

@@ -44,6 +44,8 @@ export const AUTO_UPDATE_PLAYLISTS_RESPONSE = 'AUTO_UPDATE_RESPONSE';
 // Experimental
 export const OPEN_MPV_PLAYER = 'OPEN_MPV_PLAYER';
 export const SET_MPV_PLAYER_PATH = 'SET_MPV_PLAYER_PATH';
+export const OPEN_VLC_PLAYER = 'OPEN_VLC_PLAYER';
+export const SET_VLC_PLAYER_PATH = 'SET_VLC_PLAYER_PATH';
 
 // Xtream
 export const XTREAM_REQUEST = 'XTREAM_REQUEST';

src/app/settings/settings.component.html

@@ -110,6 +110,26 @@
             </div>
         </div>
         <mat-divider></mat-divider>
+        <div class="row" *ngIf="settingsForm.value.player === 'vlc'">
+            <div class="column">
+                {{ 'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate }}
+                <p>{{ 'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION' | translate }}</p>
+            </div>
+            <div class="column">
+                <mat-form-field appearance="outline">
+                    <mat-label for="vlcPlayerPath">{{
+                        'SETTINGS.VLC_PLAYER_PATH' | translate
+                    }}</mat-label>
+                    <input
+                        matInput
+                        type="text"
+                        id="vlcPlayerPath"
+                        formControlName="vlcPlayerPath"
+                    />
+                </mat-form-field>
+            </div>
+        </div>
+        <mat-divider></mat-divider>
         <div class="row">
             <div class="column">
                 {{ 'SETTINGS.LANGUAGE' | translate }}

src/app/settings/settings.component.ts

@@ -15,6 +15,7 @@ import * as semver from 'semver';
 import {
     EPG_FORCE_FETCH,
     SET_MPV_PLAYER_PATH,
+    SET_VLC_PLAYER_PATH,
 } from '../../../shared/ipc-commands';
 import { Playlist } from '../../../shared/playlist.interface';
 import { DataService } from '../services/data.service';
@@ -43,6 +44,17 @@ export class SettingsComponent implements OnInit {
     /** Flag that indicates whether the app runs in electron environment */
     isElectron = this.electronService.isElectron;
 
+    electronPlayers = [
+        {
+            id: VideoPlayer.MPV,
+            label: 'MPV Player',
+        },
+        {
+            id: VideoPlayer.VLC,
+            label: 'VLC',
+        },
+    ];
+
     /** Player options */
     players = [
         {
@@ -53,15 +65,7 @@ export class SettingsComponent implements OnInit {
             id: VideoPlayer.VideoJs,
             label: 'VideoJs Player',
         },
-        ...(this.isElectron
-            ? 
-            [
-                {
-                    id: VideoPlayer.MPV,
-                    label: 'MPV Player',
-                },
-            ]
-            : []),
+        ...(this.isElectron ? this.electronPlayers : []),
     ];
 
     /** Current version of the app */
@@ -84,6 +88,7 @@ export class SettingsComponent implements OnInit {
         showCaptions: false,
         theme: Theme.LightTheme,
         mpvPlayerPath: '',
+        vlcPlayerPath: '',
     });
 
     /** Form array with epg sources */
@@ -138,6 +143,7 @@ export class SettingsComponent implements OnInit {
                             ? settings.theme
                             : Theme.LightTheme,
                         mpvPlayerPath: settings.mpvPlayerPath,
+                        vlcPlayerPath: settings.vlcPlayerPath,
                     });
 
                     if (this.isElectron) {
@@ -230,6 +236,11 @@ export class SettingsComponent implements OnInit {
             SET_MPV_PLAYER_PATH,
             this.settingsForm.value.mpvPlayerPath
         );
+
+        this.electronService.sendIpcEvent(
+            SET_VLC_PLAYER_PATH,
+            this.settingsForm.value.mpvPlayerPath
+        );
     }
 
     /**

src/app/settings/settings.interface.ts

@@ -9,6 +9,7 @@ export enum VideoPlayer {
     VideoJs = 'videojs',
     Html5Player = 'html5',
     MPV = 'mpv',
+    VLC = 'vlc',
 }
 
 /**
@@ -21,4 +22,5 @@ export interface Settings {
     showCaptions: boolean;
     theme: Theme;
     mpvPlayerPath: string;
+    vlcPlayerPath: string;
 }

src/assets/i18n/en.json

@@ -8,7 +8,8 @@
             "FILE_UPLOAD": "Add via file upload",
             "URL_UPLOAD": "Add via URL",
             "TEXT_IMPORT": "Import as text",
-            "XTREME_IMPORT": "Import xtreme code"
+            "XTREME_IMPORT": "Import xtreme code",
+            "STALKER_PORTAL_IMPORT": "Add Stalker Portal"
         },
         "PLAYLISTS": {
             "NO_PLAYLISTS": "No playlists were added",
@@ -119,7 +120,10 @@
         "PLAYLISTS_REMOVED": "All playlists were removed.",
         "MPV_PLAYER_PATH_LABEL": "mpv path",
         "MPV_PLAYER_PATH_DESCRIPTION": "Set path to mpv player in your system. It will use the provided path to a mpv binary instead of using the one found in $PATH.",
-        "MPV_PLAYER_PATH": "mpv player path"
+        "MPV_PLAYER_PATH": "mpv player path",
+        "VLC_PLAYER_PATH_LABEL": "VLC path",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Set path to VLC player in your system. It will use the provided path to a VLC binary instead of the default path for our system.",
+        "VLC_PLAYER_PATH": "VLC player path"
     },
     "THEMES": {
         "DARK_THEME": "Dark theme",