From 5fa44234008d8be34186ee13a7aaa73ef75ba0c5 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 22 Nov 2025 08:20:56 +0100
Subject: [PATCH] feat(settings): enable desktop remote control and change port

Update default remote control port from 3000 to 8765 in settings
store and component initialization to avoid conflicts with common
development ports and align with the desktop/tauri environment.

Unhide and scope the remote control UI to desktop builds only:
- Restore the remote control block in settings template and guard it
  with @if (isDesktop) so the checkbox and description render for
  desktop users (previously commented out as not ported).
- Keep the remote control settings section conditionally visible
  when the remoteControl form value is true.

These changes ensure desktop users can configure and enable the
remote control feature with a non-conflicting default port.
---
 .../app/services/settings-store.service.ts    |  2 +-
 .../src/app/settings/settings.component.html  | 52 ++++++++++++-------
 .../src/app/settings/settings.component.ts    | 10 +++-
 3 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/app/services/settings-store.service.ts b/apps/web/src/app/services/settings-store.service.ts
index 6215f28dc..4aed192ab 100644
--- a/apps/web/src/app/services/settings-store.service.ts
+++ b/apps/web/src/app/services/settings-store.service.ts
@@ -27,7 +27,7 @@ const DEFAULT_SETTINGS: Settings = {
     mpvReuseInstance: false,
     vlcPlayerPath: '',
     remoteControl: false,
-    remoteControlPort: 3000,
+    remoteControlPort: 8765,
     epgUrl: [],
 };
 
diff --git a/apps/web/src/app/settings/settings.component.html b/apps/web/src/app/settings/settings.component.html
index e483a4468..f882c0261 100644
--- a/apps/web/src/app/settings/settings.component.html
+++ b/apps/web/src/app/settings/settings.component.html
@@ -270,25 +270,23 @@
                 ></mat-checkbox>
             </div>
         </div>
-        <!-- not ported to tauri yet
-        @if (isPwa || isDesktop) {
-          <mat-divider />
-          <div class="row">
-            <div class="column">
-              {{ 'SETTINGS.REMOTE_CONTROL' | translate }}
-              <p>
-                {{ 'SETTINGS.REMOTE_CONTROL_DESCRIPTION' | translate }}
-              </p>
+        @if (isDesktop) {
+            <mat-divider />
+            <div class="row">
+                <div class="column">
+                    {{ 'SETTINGS.REMOTE_CONTROL' | translate }} (m3u)
+                    <p>
+                        {{ 'SETTINGS.REMOTE_CONTROL_DESCRIPTION' | translate }}
+                    </p>
+                </div>
+                <div class="column margin-right">
+                    <mat-checkbox
+                        class="column"
+                        formControlName="remoteControl"
+                    ></mat-checkbox>
+                </div>
             </div>
-            <div class="column margin-right">
-              <mat-checkbox
-                class="column"
-                formControlName="remoteControl"
-              ></mat-checkbox>
-            </div>
-          </div>
         }
-        -->
         @if (settingsForm.value.remoteControl === true) {
             <mat-divider />
             <div class="row">
@@ -302,13 +300,29 @@
                     </p>
                 </div>
                 <div class="column margin-right">
-                    <mat-form-field appearance="outline" class="full-width">
+                    <mat-form-field appearance="outline">
+                        <mat-label>Port (1-65535)</mat-label>
                         <input
                             matInput
-                            type="text"
+                            type="number"
                             id="remoteControlPort"
                             formControlName="remoteControlPort"
+                            min="1"
+                            max="65535"
+                            step="1"
                         />
+                        @if (settingsForm.get('remoteControlPort')?.hasError('required')) {
+                            <mat-error>{{ 'SETTINGS.PORT_REQUIRED' | translate }}</mat-error>
+                        }
+                        @if (settingsForm.get('remoteControlPort')?.hasError('min')) {
+                            <mat-error>{{ 'SETTINGS.PORT_MIN' | translate }}</mat-error>
+                        }
+                        @if (settingsForm.get('remoteControlPort')?.hasError('max')) {
+                            <mat-error>{{ 'SETTINGS.PORT_MAX' | translate }}</mat-error>
+                        }
+                        @if (settingsForm.get('remoteControlPort')?.hasError('pattern')) {
+                            <mat-error>{{ 'SETTINGS.PORT_PATTERN' | translate }}</mat-error>
+                        }
                     </mat-form-field>
                 </div>
             </div>
diff --git a/apps/web/src/app/settings/settings.component.ts b/apps/web/src/app/settings/settings.component.ts
index 5bc12672f..0d3b86897 100644
--- a/apps/web/src/app/settings/settings.component.ts
+++ b/apps/web/src/app/settings/settings.component.ts
@@ -144,7 +144,15 @@ export class SettingsComponent implements OnInit {
         mpvReuseInstance: false,
         vlcPlayerPath: '',
         remoteControl: false,
-        remoteControlPort: 3000,
+        remoteControlPort: [
+            8765,
+            [
+                Validators.required,
+                Validators.min(1),
+                Validators.max(65535),
+                Validators.pattern(/^\d+$/),
+            ],
+        ],
     });
 
     /** Form array with epg sources */