feat(remote-control): add channel selection by number and volume control features

- Implemented `getChannelItemByNumber` utility function to retrieve channels by their number.
- Enhanced `StalkerLiveStreamLayoutComponent` and `LiveStreamLayoutComponent` to handle remote control commands for channel selection and volume adjustments.
- Updated typings to include new remote control commands and status updates.
- Refactored `RemoteControlComponent` to manage numeric input for channel selection and volume control actions.
- Improved UI for remote control with new volume and channel navigation features.
- Added service methods for volume up, down, and mute toggle in `RemoteControlService`.

apps/electron-backend/src/app/api/main.preload.ts

@@ -10,6 +10,24 @@ contextBridge.exposeInMainWorld('electron', {
         ipcRenderer.on('CHANNEL_CHANGE', handler);
         return () => ipcRenderer.off('CHANNEL_CHANGE', handler);
     },
+    onRemoteControlCommand: (
+        callback: (data: {
+            type:
+                | 'channel-select-number'
+                | 'volume-up'
+                | 'volume-down'
+                | 'volume-toggle-mute';
+            number?: number;
+        }) => void
+    ) => {
+        const handler = (_event: Electron.IpcRendererEvent, data: any) =>
+            callback(data);
+        ipcRenderer.on('REMOTE_CONTROL_COMMAND', handler);
+        return () => ipcRenderer.off('REMOTE_CONTROL_COMMAND', handler);
+    },
+    updateRemoteControlStatus: (status: any) => {
+        ipcRenderer.send('REMOTE_CONTROL_STATUS_UPDATE', status);
+    },
     // Player error listener
     onPlayerError: (
         callback: (data: {

apps/electron-backend/src/app/events/remote-control.events.ts

@@ -3,7 +3,37 @@ import * as http from 'http';
 import { httpServer } from '../server/http-server';
 import { store } from '../services/store.service';
 
+interface RemoteControlCommand {
+    type:
+        | 'channel-select-number'
+        | 'volume-up'
+        | 'volume-down'
+        | 'volume-toggle-mute';
+    number?: number;
+}
+
+interface RemoteControlStatus {
+    portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
+    isLiveView: boolean;
+    channelName?: string;
+    channelNumber?: number;
+    epgTitle?: string;
+    epgStart?: string;
+    epgEnd?: string;
+    supportsVolume?: boolean;
+    volume?: number;
+    muted?: boolean;
+    updatedAt?: string;
+}
+
 class RemoteControlEvents {
+    private remoteControlStatus: RemoteControlStatus = {
+        portal: 'unknown',
+        isLiveView: false,
+        supportsVolume: false,
+        updatedAt: new Date().toISOString(),
+    };
+
     /**
      * Bootstrap remote control events
      */
@@ -18,6 +48,26 @@ class RemoteControlEvents {
             '/api/remote-control/channel/down',
             this.handleChannelDown.bind(this)
         );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/channel/select-number',
+            this.handleChannelSelectNumber.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/volume/up',
+            this.handleVolumeUp.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/volume/down',
+            this.handleVolumeDown.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/volume/toggle-mute',
+            this.handleToggleMute.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/status',
+            this.handleGetStatus.bind(this)
+        );
 
         // Start HTTP server if remote control is enabled in settings
         const remoteControlEnabled = store.get('remoteControl', false);
@@ -34,6 +84,17 @@ class RemoteControlEvents {
         ipcMain.handle('REMOTE_CONTROL_CHANNEL_DOWN', () => {
             return this.changeChannelDown();
         });
+
+        ipcMain.on(
+            'REMOTE_CONTROL_STATUS_UPDATE',
+            (_event, status: Partial<RemoteControlStatus>) => {
+                this.remoteControlStatus = {
+                    ...this.remoteControlStatus,
+                    ...status,
+                    updatedAt: new Date().toISOString(),
+                };
+            }
+        );
     }
 
     /**
@@ -74,6 +135,96 @@ class RemoteControlEvents {
         res.end(JSON.stringify({ success: true }));
     }
 
+    /**
+     * HTTP handler for selecting channel by number
+     */
+    private handleChannelSelectNumber(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.readJsonBody(req, res, (body) => {
+            const value = Number(body?.number);
+            if (!Number.isFinite(value) || value < 1) {
+                res.writeHead(400, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'Invalid channel number' }));
+                return;
+            }
+
+            this.sendRemoteCommandToRenderer({
+                type: 'channel-select-number',
+                number: Math.floor(value),
+            });
+
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ success: true }));
+        });
+    }
+
+    private handleVolumeUp(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.sendRemoteCommandToRenderer({ type: 'volume-up' });
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    private handleVolumeDown(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.sendRemoteCommandToRenderer({ type: 'volume-down' });
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    private handleToggleMute(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.sendRemoteCommandToRenderer({ type: 'volume-toggle-mute' });
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    private handleGetStatus(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'GET') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify(this.remoteControlStatus));
+    }
+
     /**
      * Change to the next channel
      */
@@ -102,6 +253,42 @@ class RemoteControlEvents {
             console.warn('No browser windows found to send channel change');
         }
     }
+
+    private sendRemoteCommandToRenderer(command: RemoteControlCommand): void {
+        const windows = BrowserWindow.getAllWindows();
+        if (windows.length > 0) {
+            windows[0].webContents.send('REMOTE_CONTROL_COMMAND', command);
+            console.log(
+                `Sent REMOTE_CONTROL_COMMAND ${command.type} to renderer`
+            );
+        } else {
+            console.warn('No browser windows found to send remote command');
+        }
+    }
+
+    private readJsonBody(
+        req: http.IncomingMessage,
+        res: http.ServerResponse,
+        callback: (body: any) => void
+    ): void {
+        let data = '';
+        req.on('data', (chunk: Buffer) => {
+            data += chunk.toString();
+        });
+        req.on('end', () => {
+            if (!data) {
+                callback({});
+                return;
+            }
+
+            try {
+                callback(JSON.parse(data));
+            } catch {
+                res.writeHead(400, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'Invalid JSON payload' }));
+            }
+        });
+    }
 }
 
 export default new RemoteControlEvents();

apps/remote-control-web/README.md

@@ -12,6 +12,9 @@ This is a standalone Angular application designed to be served by IPTVnator's El
 - **Mobile-Optimized** - Touch-friendly interface designed for phones and tablets
 - **Real-time Control** - Instant channel switching via REST API
 - **Multi-Portal Support** - Works with M3U playlists, Xtream Live TV, and Stalker ITV sections
+- **Numeric Channel Input** - Enter channel numbers directly from the web remote
+- **Live Status Panel** - Displays active channel and current EPG program when available
+- **Volume Controls** - Volume up/down/mute when the active player supports remote volume
 - **Minimal & Fast** - Lightweight app (~55 KB compressed) with no external dependencies
 - **Responsive** - Adapts to different screen sizes (320px - 480px+)
 
@@ -34,7 +37,7 @@ This is a standalone Angular application designed to be served by IPTVnator's El
 
 1. **HTTP Server**: Electron backend starts an HTTP server (default port: 8765)
 2. **Static Files**: Serves this Angular app's built files
-3. **REST API**: Exposes `/api/remote-control/channel/up` and `/api/remote-control/channel/down` endpoints
+3. **REST API**: Exposes channel/volume/status endpoints for the web remote
 4. **IPC Communication**: HTTP server sends events to the main Electron window
 5. **Channel Switching**: Main app receives events and switches to next/previous live channel in the active live view
 
@@ -43,6 +46,11 @@ This is a standalone Angular application designed to be served by IPTVnator's El
 - `GET /` - Serves the remote control web interface
 - `POST /api/remote-control/channel/up` - Switch to previous channel
 - `POST /api/remote-control/channel/down` - Switch to next channel
+- `POST /api/remote-control/channel/select-number` - Switch by channel number
+- `POST /api/remote-control/volume/up` - Increase volume
+- `POST /api/remote-control/volume/down` - Decrease volume
+- `POST /api/remote-control/volume/toggle-mute` - Toggle mute
+- `GET /api/remote-control/status` - Get current playback status for remote UI
 
 ## Usage
 

apps/web/src/app/home/video-player/video-player.component.ts

@@ -37,10 +37,12 @@ import {
 } from 'm3u-state';
 import {
     Observable,
+    Subscription,
     combineLatest,
     combineLatestWith,
     filter,
     map,
+    startWith,
     switchMap,
     take,
 } from 'rxjs';
@@ -54,7 +56,10 @@ import {
     VideoPlayer,
 } from 'shared-interfaces';
 import { SettingsStore } from '../../services/settings-store.service';
-import { getAdjacentChannelItem } from '../../shared/services/remote-channel-navigation.util';
+import {
+    getAdjacentChannelItem,
+    getChannelItemByNumber,
+} from '../../shared/services/remote-channel-navigation.util';
 import { SettingsComponent } from '../../settings/settings.component';
 
 @Component({
@@ -111,6 +116,9 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
     /** EPG overlay reference */
     private overlayRef!: OverlayRef;
     private unsubscribeRemoteChannelChange?: () => void;
+    private unsubscribeRemoteCommand?: () => void;
+    private statusSubscription?: Subscription;
+    private lastKnownVolume = 1;
 
     /** Info overlay component reference for manual triggering */
     readonly infoOverlay = viewChild(InfoOverlayComponent);
@@ -156,6 +164,16 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
                 this.unsubscribeRemoteChannelChange = unsubscribe;
             }
         }
+        if (this.isDesktop && window.electron?.onRemoteControlCommand) {
+            const unsubscribe = window.electron.onRemoteControlCommand(
+                (command) => {
+                    this.handleRemoteControlCommand(command);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteCommand = unsubscribe;
+            }
+        }
 
         this.channels$ = this.activatedRoute.params.pipe(
             combineLatestWith(this.activatedRoute.queryParams),
@@ -211,6 +229,35 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
                 }
             })
         );
+
+        this.statusSubscription = combineLatest([
+            this.channels$,
+            this.activeChannel$,
+            this.epgProgram$.pipe(startWith(null)),
+        ]).subscribe(([channels, activeChannel, epgProgram]) => {
+            if (!window.electron?.updateRemoteControlStatus || !activeChannel) {
+                return;
+            }
+
+            const currentIndex = channels.findIndex(
+                (channel) => channel.url === activeChannel.url
+            );
+
+            window.electron.updateRemoteControlStatus({
+                portal: 'm3u',
+                isLiveView: true,
+                channelName:
+                    activeChannel.name ??
+                    activeChannel.tvg?.name,
+                channelNumber: currentIndex >= 0 ? currentIndex + 1 : undefined,
+                epgTitle: (epgProgram as any)?.title,
+                epgStart: (epgProgram as any)?.start,
+                epgEnd: (epgProgram as any)?.end,
+                supportsVolume: true,
+                volume: this.volume,
+                muted: this.volume === 0,
+            });
+        });
     }
 
     /**
@@ -260,6 +307,8 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
 
     ngOnDestroy(): void {
         this.unsubscribeRemoteChannelChange?.();
+        this.unsubscribeRemoteCommand?.();
+        this.statusSubscription?.unsubscribe();
     }
 
     /**
@@ -428,14 +477,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         this.channels$
             .pipe(
                 take(1),
-                map((channels) => {
-                    // Channel numbers are 1-based, array is 0-based
-                    const channelIndex = channelNumber - 1;
-                    if (channelIndex >= 0 && channelIndex < channels.length) {
-                        return channels[channelIndex];
-                    }
-                    return null;
-                })
+                map((channels) => getChannelItemByNumber(channels, channelNumber))
             )
             .subscribe((channel) => {
                 if (channel) {
@@ -470,4 +512,50 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
             target instanceof HTMLTextAreaElement
         );
     }
+
+    private handleRemoteControlCommand(command: {
+        type:
+            | 'channel-select-number'
+            | 'volume-up'
+            | 'volume-down'
+            | 'volume-toggle-mute';
+        number?: number;
+    }): void {
+        if (command.type === 'channel-select-number' && command.number) {
+            this.switchToChannelByNumber(command.number);
+            return;
+        }
+
+        if (command.type === 'volume-up') {
+            this.setVolume(this.volume + 0.1);
+        } else if (command.type === 'volume-down') {
+            this.setVolume(this.volume - 0.1);
+        } else if (command.type === 'volume-toggle-mute') {
+            if (this.volume === 0) {
+                this.setVolume(this.lastKnownVolume || 1);
+            } else {
+                this.lastKnownVolume = this.volume;
+                this.setVolume(0);
+            }
+        }
+    }
+
+    private setVolume(next: number): void {
+        const clamped = Math.max(0, Math.min(1, Number(next.toFixed(2))));
+        this.volume = clamped;
+        if (clamped > 0) {
+            this.lastKnownVolume = clamped;
+        }
+        localStorage.setItem('volume', String(clamped));
+
+        if (window.electron?.updateRemoteControlStatus) {
+            window.electron.updateRemoteControlStatus({
+                portal: 'm3u',
+                isLiveView: true,
+                supportsVolume: true,
+                volume: this.volume,
+                muted: this.volume === 0,
+            });
+        }
+    }
 }

apps/web/src/app/shared/services/remote-channel-navigation.util.ts

@@ -32,3 +32,26 @@ export function getAdjacentChannelItem<T>(
 
     return items[nextIndex] ?? null;
 }
+
+/**
+ * Returns the Nth item in a list (1-based index), or null if out of range.
+ */
+export function getChannelItemByNumber<T>(
+    items: T[],
+    channelNumber: number
+): T | null {
+    if (
+        !Array.isArray(items) ||
+        items.length === 0 ||
+        !Number.isFinite(channelNumber)
+    ) {
+        return null;
+    }
+
+    const index = Math.floor(channelNumber) - 1;
+    if (index < 0 || index >= items.length) {
+        return null;
+    }
+
+    return items[index] ?? null;
+}

apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts

@@ -26,7 +26,10 @@ import { EpgItem } from 'shared-interfaces';
 import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
 import { SettingsStore } from '../../services/settings-store.service';
 import { PlayerService } from '../../services/player.service';
-import { getAdjacentChannelItem } from '../../shared/services/remote-channel-navigation.util';
+import {
+    getAdjacentChannelItem,
+    getChannelItemByNumber,
+} from '../../shared/services/remote-channel-navigation.util';
 import { CategoryViewComponent } from '../../xtream-tauri/category-view/category-view.component';
 import { PlaylistErrorViewComponent } from '../../xtream/playlist-error-view/playlist-error-view.component';
 import { StalkerStore } from '../stalker.store';
@@ -109,6 +112,7 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
     private scrollListener: (() => void) | null = null;
     private searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
     private unsubscribeRemoteChannelChange?: () => void;
+    private unsubscribeRemoteCommand?: () => void;
 
     constructor() {
         // Load favorites for current playlist
@@ -157,6 +161,42 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
             }, 500);
         });
 
+        effect(() => {
+            if (!window.electron?.updateRemoteControlStatus) {
+                return;
+            }
+
+            const selectedItem = this.stalkerStore.selectedItem();
+            const selectedType = this.stalkerStore.selectedContentType();
+            const channels = this.itvChannels();
+            const epgItems = this.epgItems();
+
+            if (selectedType !== 'itv' || !selectedItem?.id) {
+                window.electron.updateRemoteControlStatus({
+                    portal: 'stalker',
+                    isLiveView: false,
+                    supportsVolume: false,
+                });
+                return;
+            }
+
+            const currentIndex = channels.findIndex(
+                (item) => Number(item.id) === Number(selectedItem.id)
+            );
+            const currentProgram = epgItems?.[0];
+
+            window.electron.updateRemoteControlStatus({
+                portal: 'stalker',
+                isLiveView: true,
+                channelName: selectedItem.o_name || selectedItem.name,
+                channelNumber: currentIndex >= 0 ? currentIndex + 1 : undefined,
+                epgTitle: currentProgram?.title,
+                epgStart: (currentProgram as any)?.start,
+                epgEnd: (currentProgram as any)?.end,
+                supportsVolume: false,
+            });
+        });
+
         if (window.electron?.onChannelChange) {
             const unsubscribe = window.electron.onChannelChange((data: {
                 direction: 'up' | 'down';
@@ -167,10 +207,21 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
                 this.unsubscribeRemoteChannelChange = unsubscribe;
             }
         }
+        if (window.electron?.onRemoteControlCommand) {
+            const unsubscribe = window.electron.onRemoteControlCommand(
+                (command) => {
+                    this.handleRemoteControlCommand(command);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteCommand = unsubscribe;
+            }
+        }
     }
 
     ngOnDestroy() {
         this.unsubscribeRemoteChannelChange?.();
+        this.unsubscribeRemoteCommand?.();
         this.removeScrollListener();
         if (this.searchDebounceTimer) {
             clearTimeout(this.searchDebounceTimer);
@@ -424,4 +475,24 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
 
         void this.playChannel(nextItem);
     }
+
+    private handleRemoteControlCommand(command: {
+        type:
+            | 'channel-select-number'
+            | 'volume-up'
+            | 'volume-down'
+            | 'volume-toggle-mute';
+        number?: number;
+    }): void {
+        if (command.type !== 'channel-select-number' || !command.number) {
+            return;
+        }
+
+        const channel = getChannelItemByNumber(this.itvChannels(), command.number);
+        if (!channel) {
+            return;
+        }
+
+        void this.playChannel(channel);
+    }
 }

apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.ts

@@ -4,6 +4,7 @@ import {
     Component,
     computed,
     ElementRef,
+    effect,
     inject,
     Injector,
     OnDestroy,
@@ -26,7 +27,10 @@ import { PlaylistSwitcherComponent, ResizableDirective } from 'components';
 import { XtreamCategory } from 'shared-interfaces';
 import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
 import { SettingsStore } from '../../services/settings-store.service';
-import { getAdjacentChannelItem } from '../../shared/services/remote-channel-navigation.util';
+import {
+    getAdjacentChannelItem,
+    getChannelItemByNumber,
+} from '../../shared/services/remote-channel-navigation.util';
 import {
     CategoryManagementDialogComponent,
     CategoryManagementDialogData,
@@ -107,11 +111,51 @@ export class LiveStreamLayoutComponent implements OnInit, OnDestroy {
     });
     private categoryScrollTop = 0;
     private unsubscribeRemoteChannelChange?: () => void;
+    private unsubscribeRemoteCommand?: () => void;
 
     readonly player = this.settingsStore.player;
     streamUrl: string;
     favorites = new Map<number, boolean>();
 
+    constructor() {
+        effect(() => {
+            if (!window.electron?.updateRemoteControlStatus) {
+                return;
+            }
+
+            const selectedContentType = this.xtreamStore.selectedContentType();
+            const selectedItem = this.xtreamStore.selectedItem();
+            const channels = this.xtreamStore.selectItemsFromSelectedCategory() as any[];
+            const epgItems = this.xtreamStore.epgItems();
+
+            if (selectedContentType !== 'live' || !selectedItem?.xtream_id) {
+                window.electron.updateRemoteControlStatus({
+                    portal: 'xtream',
+                    isLiveView: false,
+                    supportsVolume: false,
+                });
+                return;
+            }
+
+            const currentIndex = channels.findIndex(
+                (item) =>
+                    Number(item.xtream_id) === Number(selectedItem.xtream_id)
+            );
+            const currentProgram = epgItems?.[0];
+
+            window.electron.updateRemoteControlStatus({
+                portal: 'xtream',
+                isLiveView: true,
+                channelName: selectedItem.title ?? selectedItem.name,
+                channelNumber: currentIndex >= 0 ? currentIndex + 1 : undefined,
+                epgTitle: currentProgram?.title,
+                epgStart: (currentProgram as any)?.start,
+                epgEnd: (currentProgram as any)?.end,
+                supportsVolume: false,
+            });
+        });
+    }
+
     ngOnInit() {
         if (window.electron?.onChannelChange) {
             const unsubscribe = window.electron.onChannelChange((data: {
@@ -123,6 +167,16 @@ export class LiveStreamLayoutComponent implements OnInit, OnDestroy {
                 this.unsubscribeRemoteChannelChange = unsubscribe;
             }
         }
+        if (window.electron?.onRemoteControlCommand) {
+            const unsubscribe = window.electron.onRemoteControlCommand(
+                (command) => {
+                    this.handleRemoteControlCommand(command);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteCommand = unsubscribe;
+            }
+        }
 
         const savedSortMode = localStorage.getItem(
             LIVE_CHANNEL_SORT_STORAGE_KEY
@@ -219,6 +273,7 @@ export class LiveStreamLayoutComponent implements OnInit, OnDestroy {
 
     ngOnDestroy(): void {
         this.unsubscribeRemoteChannelChange?.();
+        this.unsubscribeRemoteCommand?.();
     }
 
     private handleRemoteChannelChange(direction: 'up' | 'down'): void {
@@ -241,4 +296,25 @@ export class LiveStreamLayoutComponent implements OnInit, OnDestroy {
 
         this.playLive(nextItem);
     }
+
+    private handleRemoteControlCommand(command: {
+        type:
+            | 'channel-select-number'
+            | 'volume-up'
+            | 'volume-down'
+            | 'volume-toggle-mute';
+        number?: number;
+    }): void {
+        if (command.type !== 'channel-select-number' || !command.number) {
+            return;
+        }
+
+        const channels = this.xtreamStore.selectItemsFromSelectedCategory() as any[];
+        const channel = getChannelItemByNumber(channels, command.number);
+        if (!channel) {
+            return;
+        }
+
+        this.playLive(channel);
+    }
 }

apps/web/src/typings.d.ts

@@ -195,6 +195,28 @@ declare global {
             onChannelChange?: (
                 callback: (data: { direction: 'up' | 'down' }) => void
             ) => () => void;
+            onRemoteControlCommand?: (
+                callback: (data: {
+                    type:
+                        | 'channel-select-number'
+                        | 'volume-up'
+                        | 'volume-down'
+                        | 'volume-toggle-mute';
+                    number?: number;
+                }) => void
+            ) => () => void;
+            updateRemoteControlStatus?: (status: {
+                portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
+                isLiveView: boolean;
+                channelName?: string;
+                channelNumber?: number;
+                epgTitle?: string;
+                epgStart?: string;
+                epgEnd?: string;
+                supportsVolume?: boolean;
+                volume?: number;
+                muted?: boolean;
+            }) => void;
             // Player error notifications
             onPlayerError?: (
                 callback: (data: {