feat: simple remote control support on http

src/app/app.component.ts

@@ -13,6 +13,7 @@ import {
     EPG_FETCH_DONE,
     ERROR,
     OPEN_FILE,
+    SETTINGS_UPDATE,
     SHOW_WHATS_NEW,
     VIEW_ADD_PLAYLIST,
     VIEW_SETTINGS,
@@ -148,6 +149,7 @@ export class AppComponent {
             .getValueFromLocalStorage(STORE_KEY.Settings)
             .subscribe((settings: Settings) => {
                 if (settings && Object.keys(settings).length > 0) {
+                    this.electronService.sendIpcEvent(SETTINGS_UPDATE, settings);
                     this.translate.use(settings.language ?? this.DEFAULT_LANG);
                     if (
                         settings.epgUrl?.length > 0 &&

src/app/portals/live-stream-layout/live-stream-layout.component.html

@@ -30,6 +30,7 @@
                             trackBy: trackBy;
                             templateCacheSize: 0
                         "
+                        [selected]="item.stream_id === activeLiveStream?.stream_id"
                         [value]="item"
                         (click)="itemClicked.emit(item)"
                     >

src/app/portals/live-stream-layout/live-stream-layout.component.ts

@@ -46,6 +46,7 @@ export class LiveStreamLayoutComponent {
     @Input({ required: true }) player: VideoPlayer = VideoPlayer.VideoJs;
     @Input() epgItems: EpgItem[];
     @Input() streamUrl: string;
+    @Input() activeLiveStream: XtreamItem;
 
     @Output() itemClicked = new EventEmitter<XtreamItem>();
 

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;
 }

src/app/xtream/xtream-main-container.component.html

@@ -36,6 +36,7 @@
                     [player]="player"
                     [streamUrl]="streamUrl"
                     [epgItems]="epgItems"
+                    [activeLiveStream]="activeLiveStream"
                     (itemClicked)="itemClicked($event)"
                 />
             } @else {

src/app/xtream/xtream-main-container.component.ts

@@ -21,6 +21,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { Store } from '@ngrx/store';
 import { IpcCommand } from '../../../shared/ipc-command.class';
 import {
+    REMOTE_CONTROL_CHANGE_CHANNEL,
     ERROR,
     OPEN_MPV_PLAYER,
     OPEN_VLC_PLAYER,
@@ -183,6 +184,7 @@ export class XtreamMainContainerComponent implements OnInit {
     streamUrl: string;
     epgItems = [];
     hideExternalInfoDialog = this.portalStore.hideExternalInfoDialog;
+    activeLiveStream: XtreamLiveStream;
 
     commandsList = [
         new IpcCommand(XTREAM_RESPONSE, (response: XtreamResponse) =>
@@ -191,6 +193,9 @@ export class XtreamMainContainerComponent implements OnInit {
         new IpcCommand(ERROR, (response: { message: string; status: number }) =>
             this.showErrorAsNotification(response)
         ),
+        new IpcCommand(REMOTE_CONTROL_CHANGE_CHANNEL, (response: { type: 'up' | 'down' }) => {
+            this.remoteControlChangeChannel(response.type);
+        })
     ];
 
     constructor() {
@@ -345,6 +350,7 @@ export class XtreamMainContainerComponent implements OnInit {
     playLiveStream(item: XtreamLiveStream) {
         const { serverUrl, username, password } = this.currentPlaylist();
         const streamUrl = `${serverUrl}/${item.stream_type}/${username}/${password}/${item.stream_id}.m3u8`;
+        this.activeLiveStream = item;
         this.openPlayer(streamUrl, item.name);
     }
 
@@ -530,4 +536,22 @@ export class XtreamMainContainerComponent implements OnInit {
         this.currentLayout = 'favorites';
         this.setInitialBreadcrumb();
     }
+
+    remoteControlChangeChannel(type: 'up' | 'down') {
+        if (this.currentLayout === 'category_content' && this.activeLiveStream) {
+            let nextItem;
+            const index = this.activeLiveStream.num - 1;
+            if (type === 'up') {
+                if (index - 1 >= 0) {
+                    nextItem = this.items[index - 1];
+                }
+            } else if (type === 'down') {
+                const index = this.activeLiveStream.num - 1;
+                if (index + 1 < this.items.length) {
+                    nextItem = this.items[index + 1];
+                }
+            }
+            this.itemClicked(nextItem);
+        }
+    }
 }

src/assets/i18n/en.json

@@ -138,7 +138,11 @@
     "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"
+    "VLC_PLAYER_PATH": "VLC player path",
+    "REMOTE_CONTROL": "Remote control",
+    "REMOTE_CONTROL_DESCRIPTION": "Enable remote control of the application.",
+    "REMOTE_CONTROL_PORT": "Remote control port",
+    "REMOTE_CONTROL_PORT_DESCRIPTION": "Port used for remote control of the application. Port 3000 is used by default."
   },
   "THEMES": {
     "DARK_THEME": "Dark theme",

src/assets/i18n/tr.json

@@ -138,7 +138,11 @@
     "MPV_PLAYER_PATH": "mpv oynatıcı yolu",
     "VLC_PLAYER_PATH_LABEL": "VLC yolu",
     "VLC_PLAYER_PATH_DESCRIPTION": "Sisteminizdeki VLC oynatıcı yolunu ayarlayın. Sistemimiz için varsayılan yolu kullanmak yerine, sağlanan VLC ikili dosyası yolunu kullanacaktır.",
-    "VLC_PLAYER_PATH": "VLC oynatıcı yolu"
+    "VLC_PLAYER_PATH": "VLC oynatıcı yolu",
+    "REMOTE_CONTROL": "Uzaktan kontrol",
+    "REMOTE_CONTROL_DESCRIPTION": "Uygulamanın uzaktan kontrolünü etkinleştirin.",
+    "REMOTE_CONTROL_PORT": "Uzaktan kontrol portu",
+    "REMOTE_CONTROL_PORT_DESCRIPTION": "Uzaktan kontrol için bir port belirleyin. Varsayılan olarak 3080 kullanılır."
   },
   "THEMES": {
     "DARK_THEME": "Koyu Tema",
@@ -283,5 +287,12 @@
     "STREAM_URL_COPIED": "Yayın URL'si panoya kopyalandı",
     "COPY_STREAM_URL": "Yayın URL'sini Kopyala"
   },
-  "INFORMATION": "Bilgi"
+  "INFORMATION": "Bilgi",
+  "REMOTE_CONTROL": {
+    "TITLE": "Uzaktan Kontrol",
+    "UP_CHANNEL": "Yukarı Kanal",
+    "DOWN_CHANNEL": "Aşağı Kanal",
+    "HEADER": "IPTVNator Uzaktan Kontrol",
+    "FOOTER": "IPTVNator Uzaktan Kontrol"
+  }
 }