iptvnator/apps/remote-control-web

Remote Control Web App

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)      │
                                          └──────────────────┘

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

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

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

Access from Mobile Device

1. Ensure your phone/tablet is on the same network as your computer
2. Find your computer's IP address:
   • Windows: ipconfig (look for IPv4)
   • macOS: ifconfig or System Preferences → Network
   • Linux: ip addr or hostname -I
3. Open browser on your mobile device
4. 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

Related Files

• 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.