x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-08 17:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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`.
This commit is contained in:
4gray committed 2026-02-14 00:03:42 +01:00
1 parent 620ecb7518
commit 7c9db4bc7d
14 files changed
+1100 -400
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/electron-backend/src/app/api/main.preload.ts
+18
View File
@@ -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
+187
View File
@@ -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
+9 -1
View File
@@ -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
+97 -9
View File
@@ -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
+23
View File
@@ -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
+72 -1
View File
@@ -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
+77 -1
View File
@@ -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
Vendored
+22
View File
@@ -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: {
global.d.ts
Vendored
+23 -1
View File
@@ -197,7 +197,29 @@ declare global {
// Remote control
onChannelChange?: (
callback: (data: { direction: 'up' | 'down' }) => void
) => 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: {
libs/ui/remote-control/README.md
+12 -1
View File
@@ -1,6 +1,17 @@
# remote-control
This library was generated with [Nx](https://nx.dev).
UI library for the remote control web app.
## Scope
- Sends channel up/down commands to `/api/remote-control/channel/up|down`
- Sends direct number-based channel selection (`/channel/select-number`)
- Reads live playback status from `/api/remote-control/status`
- Sends volume commands (`/volume/up|down|toggle-mute`)
- Used for live channel navigation in:
- M3U playlists
- Xtream Live TV
- Stalker ITV
## Running unit tests
libs/ui/remote-control/src/lib/remote-control/remote-control.component.html
+118 -42
View File
@@ -1,21 +1,40 @@
<div class="remote">
<div class="remote__body">
<!-- App branding -->
<div class="remote__header">
<div class="remote__logo">IPTVnator</div>
<div class="now-card">
<div class="now-card__top">
<div class="now-card__label">Now Playing</div>
<div class="now-card__statusline">
<span class="status-dot" [class.is-active]="isReady"></span>
<span>{{ isLoading ? 'Executing' : portalLabel }}</span>
</div>
</div>
<div class="now-card__channel">
{{ status?.channelName || 'No live stream selected' }}
</div>
<div class="now-card__meta">
<span>
@if (status?.channelNumber) {
CH {{ status?.channelNumber }}
} @else {
CH -
}
</span>
<span>{{ status?.portal || 'unknown' }}</span>
</div>
<div class="now-card__program">
{{ status?.epgTitle || 'No current EPG program' }}
</div>
</div>
<!-- Error state -->
@if (error) {
<div class="remote__error">
{{ error }}
</div>
}
<!-- Main touchpad circle -->
<div class="touchpad">
<div class="cluster">
<div class="cluster__title">Channel Navigation</div>
<div class="touchpad__glass">
<!-- Up button (top half) -->
<button
class="touchpad__button touchpad__button--up"
(click)="changeChannelUp()"
@@ -23,18 +42,8 @@
[class.is-loading]="isLoading"
aria-label="Channel Up"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
>
<path d="M5 15l7-7 7 7" />
</svg>
<span>CH +</span>
</button>
<!-- Down button (bottom half) -->
<button
class="touchpad__button touchpad__button--down"
(click)="changeChannelDown()"
@@ -42,36 +51,103 @@
[class.is-loading]="isLoading"
aria-label="Channel Down"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
>
<path d="M19 9l-7 7-7-7" />
</svg>
<span>CH -</span>
</button>
<!-- Center indicator -->
<div class="touchpad__center">
<div
class="touchpad__pulse"
[class.is-active]="!isLoading"
></div>
<span>{{ status?.channelNumber || '-' }}</span>
</div>
</div>
<!-- Subtle edge highlights -->
<div class="touchpad__edge"></div>
</div>
<!-- Status indicator -->
<div class="remote__status">
<div class="status-dot" [class.is-active]="!isLoading"></div>
<span class="status-text">{{
isLoading ? 'Switching' : 'Ready'
}}</span>
<div class="cluster">
<div class="cluster__title">Channel Number</div>
<div class="digit-display">{{ numericInput || '----' }}</div>
<div class="keypad">
@for (digit of digits; track digit) {
<button
class="keypad__key"
(click)="appendDigit(digit)"
[disabled]="isLoading"
>
{{ digit }}
</button>
}
<button
class="keypad__key keypad__key--alt"
(click)="backspaceDigit()"
[disabled]="isLoading"
>
DEL
</button>
<button
class="keypad__key keypad__key--alt"
(click)="clearDigits()"
[disabled]="isLoading"
>
CLR
</button>
<button
class="keypad__key keypad__key--go"
(click)="submitChannelNumber()"
[disabled]="isLoading || !numericInput"
>
OK
</button>
</div>
</div>
<div class="cluster">
<div class="cluster__title">Volume</div>
<div class="volume-row">
<button
class="volume-row__button"
(click)="volumeDown()"
[disabled]="isLoading || !status?.supportsVolume"
>
VOL -
</button>
<button
class="volume-row__button volume-row__button--mute"
(click)="toggleMute()"
[disabled]="isLoading || !status?.supportsVolume"
>
@if (status?.muted) {
UNMUTE
} @else {
MUTE
}
</button>
<button
class="volume-row__button"
(click)="volumeUp()"
[disabled]="isLoading || !status?.supportsVolume"
>
VOL +
</button>
</div>
<div class="volume-meter">
<div
class="volume-meter__fill"
[style.width.%]="volumePercent ?? 0"
></div>
</div>
<div class="volume-caption">
@if (status?.supportsVolume) {
{{ volumePercent ?? 0 }}%
} @else {
Volume control unavailable for this player mode
}
</div>
</div>
<div class="remote__footer">
@if (isStatusLoading) {
Syncing status...
} @else if (status?.updatedAt) {
Updated {{ status?.updatedAt | date: 'HH:mm:ss' }}
} @else {
Waiting for status...
}
</div>
</div>
</div>
libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
+266 -329
View File
@@ -1,398 +1,335 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
:host {
--bg-0: #0a1016;
--bg-1: #111c26;
--bg-2: #1c2d3b;
--line: rgba(177, 220, 255, 0.2);
--ink: #e5f5ff;
--ink-dim: rgba(229, 245, 255, 0.72);
--accent: #2ec4ff;
--accent-soft: rgba(46, 196, 255, 0.2);
--danger: #ff596d;
display: block;
min-height: 100vh;
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
// Main container
.remote {
min-height: 100vh;
width: 100%;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
background-color: #1a1a1a;
font-family:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
sans-serif;
padding: 1rem;
background-image:
radial-gradient(
circle at 50% 20%,
rgba(10, 132, 255, 0.15) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(120, 120, 255, 0.08) 0%,
transparent 50%
);
background:
radial-gradient(circle at 12% 8%, rgba(255, 200, 92, 0.18), transparent 35%),
radial-gradient(circle at 85% 0%, rgba(46, 196, 255, 0.28), transparent 45%),
linear-gradient(145deg, var(--bg-0), var(--bg-1) 58%, var(--bg-2));
color: var(--ink);
font-family: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
}
.remote__body {
width: 100%;
max-width: 420px;
width: min(100%, 520px);
display: grid;
gap: 10px;
animation: reveal 0.6s ease-out;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--danger);
box-shadow: 0 0 10px rgba(255, 89, 109, 0.7);
}
.status-dot.is-active {
background: #44e38c;
box-shadow: 0 0 12px rgba(68, 227, 140, 0.7);
}
.now-card {
padding: 12px;
border-radius: 18px;
border: 1px solid var(--line);
background: linear-gradient(
155deg,
rgba(17, 39, 56, 0.92),
rgba(15, 29, 42, 0.86)
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.now-card__top {
display: flex;
flex-direction: column;
gap: 2.5rem;
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
align-items: center;
justify-content: space-between;
gap: 10px;
}
// Header
.remote__header {
text-align: center;
.now-card__statusline {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--ink-dim);
white-space: nowrap;
}
.remote__logo {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
color: #ffffff;
opacity: 0;
animation: fadeIn 1s ease-out 0.3s forwards;
.now-card__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: var(--ink-dim);
}
// Error message
.remote__error {
background: rgba(255, 69, 58, 0.15);
border: 1px solid rgba(255, 69, 58, 0.4);
border-radius: 1rem;
padding: 1rem 1.25rem;
color: #ffb3ab;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
.now-card__channel {
margin-top: 5px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
// Touchpad - Main control
.touchpad {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 360px;
margin: 0 auto;
animation: scaleIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
.now-card__meta {
margin-top: 6px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--ink-dim);
}
.now-card__program {
margin-top: 8px;
font-size: 13px;
color: #b6d5ea;
}
.cluster {
border: 1px solid var(--line);
border-radius: 18px;
padding: 10px;
background: rgba(9, 21, 31, 0.72);
}
.cluster__title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--ink-dim);
margin-bottom: 10px;
}
.touchpad__glass {
width: min(100%, 320px);
aspect-ratio: 1;
margin: 0 auto;
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.15),
inset 0 1px 1px rgba(255, 255, 255, 0.1),
inset 0 -1px 1px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
overflow: hidden;
// Top reflection
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%
);
border-radius: 50% 50% 0 0;
pointer-events: none;
}
// Bottom shadow
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 35%;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.1) 50%,
transparent 100%
);
border-radius: 0 0 50% 50%;
pointer-events: none;
}
border: 1px solid rgba(97, 166, 214, 0.38);
background:
radial-gradient(circle at 50% 32%, rgba(46, 196, 255, 0.24), transparent 56%),
linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.01));
}
.touchpad__edge {
position: absolute;
inset: -2px;
border-radius: 50%;
background: radial-gradient(
circle at 50% 0%,
rgba(255, 255, 255, 0.15),
transparent 50%
);
opacity: 0.6;
pointer-events: none;
filter: blur(1px);
}
// Touch buttons
.touchpad__button {
position: absolute;
left: 0;
width: 100%;
height: 50%;
border: 0;
background: transparent;
border: none;
color: var(--ink);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
transition: 180ms ease;
}
svg {
width: 56px;
height: 56px;
color: #ffffff;
stroke: #ffffff;
opacity: 0.5;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.touchpad__button:active:not(:disabled) {
background: var(--accent-soft);
}
&:hover:not(:disabled) svg {
opacity: 0.9;
transform: scale(1.05);
}
&:active:not(:disabled) {
svg {
opacity: 1;
transform: scale(0.92);
}
&::after {
opacity: 1;
}
}
// Ripple effect
&::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
rgba(10, 132, 255, 0.5) 0%,
transparent 70%
);
opacity: 0;
transition: opacity 0.2s ease;
}
&:disabled {
cursor: not-allowed;
opacity: 0.4;
}
&.is-loading svg {
opacity: 0.5;
animation: pulse 1.5s ease-in-out infinite;
}
.touchpad__button:disabled {
opacity: 0.45;
}
.touchpad__button--up {
top: 0;
border-radius: 50% 50% 0 0;
svg {
margin-bottom: 20%;
}
}
.touchpad__button--down {
bottom: 0;
border-radius: 0 0 50% 50%;
svg {
margin-top: 20%;
}
}
// Center indicator
.touchpad__center {
position: absolute;
top: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(167, 218, 255, 0.35);
background: rgba(9, 23, 34, 0.9);
display: grid;
place-items: center;
font-size: 24px;
font-weight: 700;
}
.touchpad__pulse {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
&.is-active {
background: #0a84ff;
box-shadow:
0 0 12px rgba(10, 132, 255, 0.5),
0 0 24px rgba(10, 132, 255, 0.5);
animation: breathe 3s ease-in-out infinite;
}
.digit-display {
margin-bottom: 8px;
border-radius: 12px;
border: 1px dashed rgba(167, 218, 255, 0.5);
padding: 10px;
text-align: center;
font-family: 'Courier New', monospace;
font-size: 20px;
letter-spacing: 0.16em;
color: #d5eeff;
}
// Status bar
.remote__status {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
padding: 0.875rem 1.25rem;
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.keypad__key {
height: 46px;
border-radius: 12px;
border: 1px solid rgba(167, 218, 255, 0.34);
background: rgba(15, 38, 55, 0.84);
color: var(--ink);
font-size: 16px;
font-weight: 700;
}
.keypad__key:active:not(:disabled) {
transform: translateY(1px);
background: rgba(29, 67, 94, 0.94);
}
.keypad__key:disabled {
opacity: 0.45;
}
.keypad__key--alt {
font-size: 12px;
letter-spacing: 0.06em;
}
.keypad__key--go {
background: linear-gradient(140deg, #16a8df, #2ec4ff);
color: #042130;
}
.volume-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.volume-row__button {
min-height: 40px;
border-radius: 10px;
border: 1px solid rgba(167, 218, 255, 0.34);
background: rgba(15, 38, 55, 0.84);
color: var(--ink);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
}
.volume-row__button--mute {
border-color: rgba(255, 129, 143, 0.45);
}
.volume-row__button:disabled {
opacity: 0.45;
}
.volume-meter {
margin-top: 10px;
height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border-radius: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.06);
animation: fadeIn 1s ease-out 0.5s backwards;
overflow: hidden;
}
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
transition: all 0.4s ease;
.volume-meter__fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #1fa8de, #42e8ff);
transition: width 180ms ease;
}
&.is-active {
background: #30d158;
box-shadow:
0 0 8px rgba(48, 209, 88, 0.5),
0 0 16px rgba(48, 209, 88, 0.3);
animation: breathe 2.5s ease-in-out infinite;
.volume-caption {
margin-top: 6px;
color: var(--ink-dim);
font-size: 12px;
}
.remote__error {
border-radius: 12px;
border: 1px solid rgba(255, 117, 132, 0.5);
background: rgba(78, 12, 24, 0.65);
color: #ffd9de;
font-size: 13px;
padding: 10px 12px;
}
.remote__footer {
text-align: center;
color: rgba(213, 238, 255, 0.72);
font-size: 12px;
padding-bottom: 10px;
}
@media (max-width: 640px) {
.remote {
padding: 8px;
}
.remote__body {
width: 100%;
max-width: none;
gap: 8px;
}
.now-card {
border-radius: 14px;
}
.cluster {
border-radius: 14px;
padding: 9px;
}
.touchpad__glass {
width: min(100%, 360px);
}
.keypad__key {
height: 44px;
}
.volume-row__button {
min-height: 38px;
}
}
.status-text {
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.01em;
}
// Animations
@keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes fadeInUp {
@keyframes reveal {
from {
opacity: 0;
transform: translateY(20px);
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
}
@keyframes breathe {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(0.9);
}
}
@keyframes pulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
}
// Responsive
@media (max-width: 480px) {
.remote__logo {
font-size: 1.25rem;
}
.touchpad {
max-width: 320px;
}
.touchpad__button svg {
width: 48px;
height: 48px;
}
}
@media (max-width: 360px) {
.touchpad {
max-width: 280px;
}
.touchpad__button svg {
width: 42px;
height: 42px;
}
.touchpad__center {
width: 40px;
height: 40px;
}
.touchpad__pulse {
width: 14px;
height: 14px;
}
}
// Accessibility
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
libs/ui/remote-control/src/lib/remote-control/remote-control.component.ts
+130 -15
View File
@@ -1,6 +1,9 @@
import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { RemoteControlService } from './remote-control.service';
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import {
RemoteControlService,
RemoteControlStatus,
} from './remote-control.service';
@Component({
selector: 'lib-remote-control',
@@ -8,32 +11,144 @@ import { RemoteControlService } from './remote-control.service';
templateUrl: './remote-control.component.html',
styleUrls: ['./remote-control.component.scss'],
})
export class RemoteControlComponent {
export class RemoteControlComponent implements OnInit, OnDestroy {
private remoteControlService = inject(RemoteControlService);
private statusRefreshTimer?: number;
isLoading = false;
isStatusLoading = false;
error: string | null = null;
status: RemoteControlStatus | null = null;
numericInput = '';
readonly digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
async changeChannelUp(): Promise<void> {
this.isLoading = true;
this.error = null;
try {
await this.remoteControlService.channelUp();
} catch (err) {
this.error = 'Failed to change channel up';
console.error(err);
} finally {
this.isLoading = false;
ngOnInit(): void {
void this.refreshStatus();
this.statusRefreshTimer = window.setInterval(() => {
void this.refreshStatus(true);
}, 2000);
}
ngOnDestroy(): void {
if (this.statusRefreshTimer) {
clearInterval(this.statusRefreshTimer);
this.statusRefreshTimer = undefined;
}
}
async changeChannelUp(): Promise<void> {
await this.executeAction(
() => this.remoteControlService.channelUp(),
'Failed to change channel up'
);
}
async changeChannelDown(): Promise<void> {
await this.executeAction(
() => this.remoteControlService.channelDown(),
'Failed to change channel down'
);
}
appendDigit(digit: string): void {
if (this.numericInput.length >= 4) {
return;
}
this.numericInput += digit;
}
backspaceDigit(): void {
this.numericInput = this.numericInput.slice(0, -1);
}
clearDigits(): void {
this.numericInput = '';
}
async submitChannelNumber(): Promise<void> {
const channelNumber = Number(this.numericInput);
if (!Number.isFinite(channelNumber) || channelNumber < 1) {
return;
}
await this.executeAction(
() =>
this.remoteControlService.selectChannelByNumber(channelNumber),
'Failed to switch by channel number'
);
this.clearDigits();
}
async volumeUp(): Promise<void> {
await this.executeAction(
() => this.remoteControlService.volumeUp(),
'Failed to increase volume'
);
}
async volumeDown(): Promise<void> {
await this.executeAction(
() => this.remoteControlService.volumeDown(),
'Failed to decrease volume'
);
}
async toggleMute(): Promise<void> {
await this.executeAction(
() => this.remoteControlService.toggleMute(),
'Failed to toggle mute'
);
}
get portalLabel(): string {
const portal = this.status?.portal ?? 'unknown';
if (portal === 'm3u') return 'M3U Live';
if (portal === 'xtream') return 'Xtream Live';
if (portal === 'stalker') return 'Stalker ITV';
return 'Waiting For Playback';
}
get isReady(): boolean {
return !!this.status?.isLiveView && !this.isLoading;
}
get volumePercent(): number | null {
if (!this.status?.supportsVolume || this.status.volume == null) {
return null;
}
return Math.round((this.status.volume || 0) * 100);
}
private async refreshStatus(silent = false): Promise<void> {
if (!silent) {
this.isStatusLoading = true;
}
try {
this.status = await this.remoteControlService.getStatus();
} catch (err) {
if (!silent) {
this.error = 'Failed to fetch remote status';
console.error(err);
}
} finally {
if (!silent) {
this.isStatusLoading = false;
}
}
}
private async executeAction(
action: () => Promise<void>,
errorMessage: string
): Promise<void> {
this.isLoading = true;
this.error = null;
try {
await this.remoteControlService.channelDown();
await action();
await this.refreshStatus(true);
} catch (err) {
this.error = 'Failed to change channel down';
this.error = errorMessage;
console.error(err);
} finally {
this.isLoading = false;
libs/ui/remote-control/src/lib/remote-control/remote-control.service.ts
+46
View File
@@ -2,6 +2,20 @@ import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
export 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;
}
/**
* Service for remote control operations.
* This service communicates with the Electron backend via HTTP API.
@@ -31,4 +45,36 @@ export class RemoteControlService {
this.http.post<void>(`${this.apiBaseUrl}/channel/down`, {})
);
}
async selectChannelByNumber(number: number): Promise<void> {
await firstValueFrom(
this.http.post<void>(`${this.apiBaseUrl}/channel/select-number`, {
number,
})
);
}
async volumeUp(): Promise<void> {
await firstValueFrom(
this.http.post<void>(`${this.apiBaseUrl}/volume/up`, {})
);
}
async volumeDown(): Promise<void> {
await firstValueFrom(
this.http.post<void>(`${this.apiBaseUrl}/volume/down`, {})
);
}
async toggleMute(): Promise<void> {
await firstValueFrom(
this.http.post<void>(`${this.apiBaseUrl}/volume/toggle-mute`, {})
);
}
async getStatus(): Promise<RemoteControlStatus> {
return await firstValueFrom(
this.http.get<RemoteControlStatus>(`${this.apiBaseUrl}/status`)
);
}
}