Proyecto App Linux
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
# 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.
|
||||
Reference in New Issue
Block a user