feat: simple remote control support on http

src/app/settings/settings.component.html

@@ -200,6 +200,36 @@
             </div>
         </div>
         <mat-divider></mat-divider>
+        <div class="row">
+            <div class="column">
+                {{ 'SETTINGS.REMOTE_CONTROL' | translate }}
+                <p>{{ 'SETTINGS.REMOTE_CONTROL_DESCRIPTION' | translate }}</p>
+            </div>
+            <div class="column" style="margin-right: 10px">
+                <mat-checkbox
+                    class="column"
+                    formControlName="remoteControl"
+                ></mat-checkbox>
+            </div>
+        </div>
+        <mat-divider></mat-divider>
+        <div class="row" *ngIf="settingsForm.value.remoteControl === true">
+            <div class="column">
+                {{ 'SETTINGS.REMOTE_CONTROL_PORT' | translate }}
+                <p>{{ 'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION' | translate }}</p>
+            </div>
+            <div class="column" style="margin-right: 10px">
+                <mat-form-field appearance="outline" class="full-width">
+                    <input
+                        matInput
+                        type="text"
+                        id="remoteControlPort"
+                        formControlName="remoteControlPort"
+                    />
+                </mat-form-field>
+            </div>
+        </div>
+        <mat-divider></mat-divider>
         <div class="row">
             <div class="column">
                 {{ 'SETTINGS.VERSION' | translate }}

src/app/settings/settings.component.ts

@@ -25,6 +25,7 @@ import {
     EPG_FORCE_FETCH,
     SET_MPV_PLAYER_PATH,
     SET_VLC_PLAYER_PATH,
+    SETTINGS_UPDATE,
 } from '../../../shared/ipc-commands';
 import { Playlist } from '../../../shared/playlist.interface';
 import { DataService } from '../services/data.service';
@@ -111,6 +112,8 @@ export class SettingsComponent implements OnInit {
         theme: Theme.LightTheme,
         mpvPlayerPath: '',
         vlcPlayerPath: '',
+        remoteControl: false,
+        remoteControlPort: 3000
     });
 
     /** Form array with epg sources */
@@ -161,6 +164,8 @@ export class SettingsComponent implements OnInit {
                             theme: settings.theme ?? Theme.LightTheme,
                             mpvPlayerPath: settings.mpvPlayerPath ?? '',
                             vlcPlayerPath: settings.vlcPlayerPath ?? '',
+                            remoteControl: settings.remoteControl ?? false,
+                            remoteControlPort: settings.remoteControlPort ?? 3000
                         });
                     } catch (error) {
                         throw new Error(error);
@@ -250,6 +255,8 @@ export class SettingsComponent implements OnInit {
                 this.applyChangedSettings();
             });
 
+        this.electronService.sendIpcEvent(SETTINGS_UPDATE, this.settingsForm.value);
+
         this.electronService.sendIpcEvent(
             SET_MPV_PLAYER_PATH,
             this.settingsForm.value.mpvPlayerPath

src/app/settings/settings.interface.ts

@@ -23,4 +23,6 @@ export interface Settings {
     theme: Theme;
     mpvPlayerPath: string;
     vlcPlayerPath: string;
+    remoteControl: boolean;
+    remoteControlPort: number;
 }