A lightweight, mobile-optimized web application that provides remote control functionality for IPTVnator. Control live channel switching from your phone or tablet on the same network.

Overview

This is a standalone Angular application designed to be served by IPTVnator's Electron backend via an HTTP server. It provides a beautiful, Apple TV-inspired remote control interface that communicates with the main IPTVnator desktop application to change channels.

Features

Apple TV-Inspired Design - Premium dark theme with glass morphism effects
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+)

How It Works

Architecture

┌─────────────────┐         HTTP          ┌──────────────────┐
│   Phone/Tablet  │ ◄──────────────────► │  HTTP Server     │
│  (Browser App)  │    REST API calls    │  (Electron Main) │
└─────────────────┘                       └──────────────────┘
                                                    │ IPC
                                                    ▼
                                          ┌──────────────────┐
                                          │  Main App        │
                                          │  (Renderer)      │
                                          └──────────────────┘

HTTP Server: Electron backend starts an HTTP server (default port: 8765)
Static Files: Serves this Angular app's built files
REST API: Exposes channel/volume/status endpoints for the web remote
IPC Communication: HTTP server sends events to the main Electron window
Channel Switching: Main app receives events and switches to next/previous live channel in the active live view

API Endpoints

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

Enable Remote Control

Open IPTVnator desktop app
Go to Settings
Enable "Remote Control" checkbox
Optionally change the port (default: 8765)
The HTTP server starts automatically

Access from Mobile Device

Ensure your phone/tablet is on the same network as your computer
Find your computer's IP address:
- Windows: ipconfig (look for IPv4)
- macOS: ifconfig or System Preferences → Network
- Linux: ip addr or hostname -I
Open browser on your mobile device
Navigate to: http://<YOUR_IP>:8765
- Example: http://192.168.1.100:8765

Controls

Top half of circle: Previous channel (Channel Up)
Bottom half of circle: Next channel (Channel Down)
Center blue dot: Status indicator (glowing = ready)

Development

Build

# Production build
nx build remote-control-web --configuration=production

# Development build
nx build remote-control-web

Built files are output to dist/apps/remote-control-web/browser/

Serve Locally

The app is designed to be served by the Electron backend's HTTP server. To test:

# Start Electron backend (includes HTTP server)
nx serve electron-backend

# Access at http://localhost:8765

Project Structure

apps/remote-control-web/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # Root component
│   │   ├── app.config.ts          # Angular configuration
│   │   └── app.routes.ts          # Routes (single route)
│   ├── assets/                    # Static assets (if any)
│   ├── index.html                 # HTML entry point
│   └── main.ts                    # Bootstrap Angular app
├── project.json                   # Nx project configuration
├── tsconfig.json                  # TypeScript config
└── README.md                      # This file

Shared UI Library

The remote control component is located in:

libs/ui/remote-control/
├── src/lib/remote-control/
│   ├── remote-control.component.ts    # Main component logic
│   ├── remote-control.component.html  # Template
│   ├── remote-control.component.scss  # Apple TV-inspired styles
│   └── remote-control.service.ts      # HTTP service for API calls

This library is shared and can be reused in other applications if needed.

Technical Details

Framework: Angular 18+ (Standalone components)
HTTP Client: Angular HttpClient
Styling: SCSS with BEM methodology
Design System: Apple TV-inspired with glass morphism
Animations: CSS-only (no JavaScript animations)
Bundle Size: ~55 KB gzipped (production build)
Browser Support: Modern browsers (Chrome, Safari, Firefox, Edge)

Design Philosophy

The interface is inspired by Apple TV's remote control:

Minimalism: Clean, uncluttered design with essential controls only
Glass Morphism: Frosted glass effects with subtle reflections
Touch-Optimized: Large touch targets (50% of circle per button)
Feedback: Visual feedback on hover/press with ripple effects
Accessibility: Supports reduced motion preferences

Security Considerations

Local Network Only: The HTTP server should only be accessible on your local network
No Authentication: Currently no authentication - ensure your network is trusted
CORS: Server accepts requests from any origin on the local network

Future Enhancements

Potential improvements:

Volume control
Play/pause functionality
Channel search
Favorites quick access
Authentication/PIN protection
WebSocket for real-time status updates
Multi-device support with channel sync

HTTP Server: apps/electron-backend/src/app/server/http-server.ts
Remote Control Events: apps/electron-backend/src/app/events/remote-control.events.ts
M3U Handler: apps/web/src/app/home/video-player/video-player.component.ts (handleRemoteChannelChange method)
Xtream Live Handler: apps/web/src/app/xtream-electron/live-stream-layout/live-stream-layout.component.ts
Stalker ITV Handler: apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts
Settings UI: apps/web/src/app/settings/settings.component.html

License

Same as IPTVnator main project.

README.md

Remote Control Web App