Upload 41 files

.dockerignore

@@ -0,0 +1,47 @@
+node_modules
+npm-debug.log
+.git
+.gitignore
+README.md
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+dist
+build
+coverage
+.nyc_output
+.cache
+.parcel-cache
+.DS_Store
+*.log
+logs
+*.pid
+*.seed
+*.pid.lock
+.npm
+.eslintcache
+.node_repl_history
+.yarn-integrity
+.yarn-error.log
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+.pytest_cache
+.coverage
+htmlcov
+.tox
+.venv
+venv
+ENV
+env
+.env
+pip-log.txt
+pip-delete-this-directory.txt
+.git
+.gitignore
+Dockerfile
+docker-compose.yml

.env.example

@@ -0,0 +1,14 @@
+# URL de la playlist M3U principal
+MAIN_M3U_URL=https://example.com/playlist.m3u8
+
+# Código de administrador (en hexadecimal)
+ADMIN_CODE=admin123hex
+
+# Secreto para cifrado AES (Base32)
+AES_SECRET=your-secret-key-here
+
+# URL base de la aplicación
+BASE_URL=https://your-app.vercel.app
+
+# Puerto para desarrollo local
+PORT=8000

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.env

Dockerfile

@@ -0,0 +1,53 @@
+FROM node:18-alpine AS frontend-builder
+
+# Instalar dependencias del frontend
+WORKDIR /app
+COPY package*.json ./
+
+# Instalar TODAS las dependencias (incluyendo devDependencies para el build)
+RUN npm ci
+
+# Copiar código fuente y construir
+COPY . .
+RUN npm run build
+
+# Imagen de Python para el backend
+FROM python:3.11-slim
+
+# Variables de entorno
+ENV PYTHONPATH=/app/api
+ENV PYTHONUNBUFFERED=1
+ENV PORT=8000
+
+# Instalar dependencias del sistema
+RUN apt-get update && apt-get install -y \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Crear directorio de trabajo
+WORKDIR /app
+
+# Copiar requirements y instalar dependencias Python
+COPY api/requirements.txt ./api/
+RUN pip install --no-cache-dir -r api/requirements.txt
+
+# Copiar código del backend
+COPY api/ ./api/
+
+# Copiar archivos construidos del frontend
+COPY --from=frontend-builder /app/dist ./static
+
+# Crear usuario no-root
+RUN adduser --disabled-password --gecos '' appuser && \
+    chown -R appuser:appuser /app
+USER appuser
+
+# Exponer puerto
+EXPOSE 8000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD curl -f http://localhost:8000/api/health || exit 1
+
+# Comando de inicio
+CMD ["python", "api/main.py"]

README.md

@@ -1,10 +1,190 @@
----
-title: Abcd
-emoji: 🐠
-colorFrom: pink
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# DaddyTV - IPTV PWA
+
+Aplicación web PWA para reproducir listas IPTV (.m3u/.m3u8) con interfaz amigable y enfoque personal para amigos y familiares.
+
+## 🚀 Características
+
+- **PWA Instalable**: Funciona como app nativa en PC, móvil y TV
+- **Autenticación por código**: Sin registro, solo validación de código único
+- **Control de reproducción única**: Un canal por usuario simultáneamente
+- **Navegación con mando**: Compatible con controles remotos de TV
+- **Proxy integrado**: Bypass para canales con restricciones CORS/geo
+- **Sin base de datos**: Solo caché en memoria con TTL
+- **Responsive**: Optimizado para todos los dispositivos
+
+## 🛠️ Tecnologías
+
+### Backend
+- **FastAPI** (Python) - API REST modular
+- **Requests** - Cliente HTTP para M3U y proxy
+- **Cryptography** - Cifrado AES para códigos
+- **Uvicorn** - Servidor ASGI
+
+### Frontend
+- **React 18** + **TypeScript** - Interfaz de usuario
+- **Vite** - Build tool y dev server
+- **Tailwind CSS** - Estilos y diseño responsive
+- **HLS.js** - Reproductor de video streaming
+- **Lucide React** - Iconos
+
+## 📦 Instalación y Desarrollo
+
+### Prerrequisitos
+- Node.js 18+
+- Python 3.9+
+
+### Configuración
+
+1. **Clonar el repositorio**
+```bash
+git clone <repo-url>
+cd daddytv
+```
+
+2. **Configurar variables de entorno**
+```bash
+cp .env.example .env
+```
+
+Editar `.env` con tus valores:
+```env
+MAIN_M3U_URL=https://tu-playlist.m3u8
+ADMIN_CODE=tu-codigo-admin-hex
+AES_SECRET=tu-secreto-aes
+BASE_URL=https://tu-dominio.com
+```
+
+3. **Instalar dependencias del frontend**
+```bash
+npm install
+```
+
+4. **Instalar dependencias del backend**
+```bash
+cd api
+pip install -r requirements.txt
+```
+
+### Desarrollo Local
+
+1. **Iniciar backend** (terminal 1):
+```bash
+cd api
+uvicorn main:app --reload --port 8000
+```
+
+2. **Iniciar frontend** (terminal 2):
+```bash
+npm run dev
+```
+
+La aplicación estará disponible en `http://localhost:5173`
+
+## 🚀 Despliegue
+
+### Vercel (Recomendado)
+
+1. **Conectar repositorio a Vercel**
+2. **Configurar variables de entorno** en el dashboard de Vercel
+3. **Deploy automático** - Vercel detecta la configuración automáticamente
+
+### Render
+
+**Backend (Servicio Web):**
+- Build Command: `pip install -r requirements.txt`
+- Start Command: `uvicorn main:app --host 0.0.0.0 --port $PORT`
+- Root Directory: `api`
+
+**Frontend (Sitio Estático):**
+- Build Command: `npm run build`
+- Publish Directory: `dist`
+
+## 📁 Estructura del Proyecto
+
+```
+daddytv/
+├── api/                    # Backend FastAPI
+│   ├── main.py            # Punto de entrada
+│   ├── auth.py            # Autenticación
+│   ├── m3u_parser.py      # Parser de M3U
+│   ├── proxy.py           # Proxy para streams
+│   ├── viewers.py         # Control de visualización
+│   ├── admin.py           # Panel de administración
+│   ├── utils.py           # Utilidades
+│   └── requirements.txt   # Dependencias Python
+├── src/                   # Frontend React
+│   ├── components/        # Componentes UI
+│   ├── contexts/          # Context providers
+│   ├── hooks/             # Custom hooks
+│   ├── services/          # Servicios API
+│   ├── types/             # Tipos TypeScript
+│   └── main.tsx          # Punto de entrada
+├── public/               # Archivos estáticos
+├── vercel.json          # Configuración Vercel
+└── package.json         # Dependencias Node.js
+```
+
+## 🔧 API Endpoints
+
+### Autenticación
+- `POST /api/auth` - Validar código de acceso
+- `POST /api/logout` - Cerrar sesión
+- `POST /api/ping` - Verificar autenticación
+
+### Canales
+- `GET /api/channels` - Obtener lista de canales
+- `GET /api/playlist.m3u` - Descargar playlist M3U
+
+### Streaming
+- `GET /api/proxy?url=<stream_url>` - Proxy para streams
+- `POST /api/viewers` - Registrar visualización
+- `GET /api/viewers/{channel_id}` - Contador de viewers
+
+### Administración
+- `POST /api/admin/update` - Actualizar configuración
+- `GET /api/admin/status` - Estado del sistema
+
+## 🎮 Controles
+
+### Teclado/Mando
+- **↑/↓** - Navegar lista de canales
+- **Enter** - Seleccionar canal
+- **Escape** - Volver/Cerrar
+- **Backspace** - Retroceder
+
+### Ratón/Táctil
+- **Click/Tap** - Seleccionar elementos
+- **Scroll** - Navegar listas
+- **Hover** - Mostrar controles de video
+
+## 🔒 Seguridad
+
+- **Códigos únicos**: Validación sin almacenamiento
+- **Tokens temporales**: Sesiones en memoria
+- **Rate limiting**: Protección contra abuso
+- **Proxy seguro**: Headers de seguridad incluidos
+- **CORS configurado**: Acceso controlado
+
+## 📱 PWA Features
+
+- **Instalable**: Funciona como app nativa
+- **Offline ready**: Caché de recursos estáticos
+- **Responsive**: Optimizado para todos los tamaños
+- **Manifest**: Configuración completa de PWA
+- **Service Worker**: Gestión de caché automática
+
+## 🤝 Contribuir
+
+1. Fork el proyecto
+2. Crear rama feature (`git checkout -b feature/nueva-funcionalidad`)
+3. Commit cambios (`git commit -am 'Agregar nueva funcionalidad'`)
+4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
+5. Crear Pull Request
+
+## 📄 Licencia
+
+Este proyecto es de uso personal/familiar. Consulta con el autor para otros usos.
+
+## 🆘 Soporte
+
+Para soporte técnico o dudas, contacta al administrador del sistema.

admin-panel.html

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DaddyTV - Panel de Administración</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-3xl font-bold mb-8 text-center">🔧 Panel de Administración DaddyTV</h1>
+            
+            <!-- Login -->
+            <div id="loginSection" class="bg-gray-800 rounded-lg p-6 mb-6">
+                <h2 class="text-xl font-semibold mb-4">Autenticación</h2>
+                <div class="flex space-x-4">
+                    <input 
+                        type="password" 
+                        id="adminCode" 
+                        placeholder="Código de administrador"
+                        class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2"
+                    >
+                    <button 
+                        onclick="authenticate()"
+                        class="bg-primary-600 hover:bg-primary-700 px-6 py-2 rounded font-medium"
+                    >
+                        Conectar
+                    </button>
+                </div>
+                <div id="authStatus" class="mt-2 text-sm"></div>
+            </div>
+
+            <!-- Panel Principal -->
+            <div id="adminPanel" class="hidden space-y-6">
+                <!-- Estado del Sistema -->
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <h2 class="text-xl font-semibold mb-4">📊 Estado del Sistema</h2>
+                    <div id="systemStatus" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <!-- Se llenará dinámicamente -->
+                    </div>
+                    <button 
+                        onclick="refreshStatus()"
+                        class="mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
+                    >
+                        🔄 Actualizar
+                    </button>
+                </div>
+
+                <!-- Acciones -->
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <h2 class="text-xl font-semibold mb-4">⚡ Acciones</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <button 
+                            onclick="clearCache()"
+                            class="bg-yellow-600 hover:bg-yellow-700 px-4 py-3 rounded font-medium"
+                        >
+                            🗑️ Limpiar Caché
+                        </button>
+                        <button 
+                            onclick="downloadLogs()"
+                            class="bg-green-600 hover:bg-green-700 px-4 py-3 rounded font-medium"
+                        >
+                            📥 Descargar Logs
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Configuración -->
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <h2 class="text-xl font-semibold mb-4">⚙️ Configuración</h2>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-2">URL de Playlist M3U</label>
+                            <input 
+                                type="url" 
+                                id="m3uUrl" 
+                                placeholder="https://ejemplo.com/playlist.m3u8"
+                                class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2"
+                            >
+                        </div>
+                        <button 
+                            onclick="updatePlaylist()"
+                            class="bg-primary-600 hover:bg-primary-700 px-4 py-2 rounded font-medium"
+                        >
+                            💾 Actualizar Playlist
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let adminToken = '';
+        const API_BASE = '/api';
+
+        async function authenticate() {
+            const code = document.getElementById('adminCode').value;
+            const statusDiv = document.getElementById('authStatus');
+            
+            if (!code) {
+                statusDiv.innerHTML = '<span class="text-red-400">Por favor ingresa el código</span>';
+                return;
+            }
+
+            try {
+                const response = await fetch(`${API_BASE}/admin/status`, {
+                    headers: {
+                        'Authorization': `Bearer ${code}`
+                    }
+                });
+
+                if (response.ok) {
+                    adminToken = code;
+                    statusDiv.innerHTML = '<span class="text-green-400">✅ Autenticado correctamente</span>';
+                    document.getElementById('loginSection').classList.add('hidden');
+                    document.getElementById('adminPanel').classList.remove('hidden');
+                    await refreshStatus();
+                } else {
+                    statusDiv.innerHTML = '<span class="text-red-400">❌ Código incorrecto</span>';
+                }
+            } catch (error) {
+                statusDiv.innerHTML = '<span class="text-red-400">❌ Error de conexión</span>';
+            }
+        }
+
+        async function refreshStatus() {
+            try {
+                const response = await fetch(`${API_BASE}/admin/status`, {
+                    headers: {
+                        'Authorization': `Bearer ${adminToken}`
+                    }
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    displaySystemStatus(data);
+                }
+            } catch (error) {
+                console.error('Error refreshing status:', error);
+            }
+        }
+
+        function displaySystemStatus(data) {
+            const statusDiv = document.getElementById('systemStatus');
+            statusDiv.innerHTML = `
+                <div class="bg-gray-700 p-4 rounded">
+                    <h3 class="font-semibold mb-2">📺 Canales</h3>
+                    <p>Cacheados: ${data.cache_status.m3u_cached ? '✅' : '❌'}</p>
+                    <p>Total: ${data.cache_status.channels_count}</p>
+                    <p class="text-xs text-gray-400">Última actualización: ${data.cache_status.cache_timestamp || 'Nunca'}</p>
+                </div>
+                <div class="bg-gray-700 p-4 rounded">
+                    <h3 class="font-semibold mb-2">👥 Visualizadores</h3>
+                    <p>Usuarios activos: ${data.viewers_status.active_users}</p>
+                    <p>Canales activos: ${data.viewers_status.active_channels}</p>
+                    <p>Total viewers: ${data.viewers_status.total_viewers}</p>
+                </div>
+                <div class="bg-gray-700 p-4 rounded">
+                    <h3 class="font-semibold mb-2">⚙️ Configuración</h3>
+                    <p>M3U URL: ${data.config.m3u_url_configured ? '✅' : '❌'}</p>
+                    <p>Admin Code: ${data.config.admin_code_configured ? '✅' : '❌'}</p>
+                    <p class="text-xs text-gray-400">Base URL: ${data.config.base_url}</p>
+                </div>
+            `;
+        }
+
+        async function clearCache() {
+            try {
+                const response = await fetch(`${API_BASE}/admin/update`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${adminToken}`
+                    },
+                    body: JSON.stringify({
+                        action: 'clear_cache'
+                    })
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    alert('✅ ' + data.message);
+                    await refreshStatus();
+                } else {
+                    alert('❌ Error al limpiar caché');
+                }
+            } catch (error) {
+                alert('❌ Error de conexión');
+            }
+        }
+
+        async function updatePlaylist() {
+            const url = document.getElementById('m3uUrl').value;
+            if (!url) {
+                alert('Por favor ingresa una URL válida');
+                return;
+            }
+
+            try {
+                const response = await fetch(`${API_BASE}/admin/update`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${adminToken}`
+                    },
+                    body: JSON.stringify({
+                        action: 'update_playlist',
+                        m3u_url: url
+                    })
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    alert('✅ ' + data.message);
+                } else {
+                    alert('❌ Error al actualizar playlist');
+                }
+            } catch (error) {
+                alert('❌ Error de conexión');
+            }
+        }
+
+        function downloadLogs() {
+            alert('📥 Función de descarga de logs no implementada aún');
+        }
+
+        // Auto-focus en el campo de código
+        document.getElementById('adminCode').focus();
+        
+        // Enter para autenticar
+        document.getElementById('adminCode').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                authenticate();
+            }
+        });
+    </script>
+</body>
+</html>

api/admin.py

@@ -0,0 +1,85 @@
+from fastapi import APIRouter, HTTPException, Depends, Header
+from pydantic import BaseModel
+import os
+from typing import Optional
+
+router = APIRouter()
+
+class AdminUpdateRequest(BaseModel):
+    m3u_url: Optional[str] = None
+    action: str  # "update_playlist", "clear_cache", etc.
+
+def verify_admin_token(authorization: Optional[str] = Header(None)) -> bool:
+    """Verifica si el token es de administrador"""
+    if not authorization or not authorization.startswith("Bearer "):
+        return False
+    
+    token = authorization.split(" ")[1]
+    admin_code = os.getenv("ADMIN_CODE", "admin123")
+    
+    return token == admin_code
+
+@router.post("/update")
+async def admin_update(
+    request: AdminUpdateRequest,
+    is_admin: bool = Depends(verify_admin_token)
+):
+    """Endpoint de administración para actualizaciones"""
+    
+    if not is_admin:
+        raise HTTPException(status_code=403, detail="Acceso denegado")
+    
+    try:
+        if request.action == "clear_cache":
+            # Limpiar caché de M3U
+            from m3u_parser import m3u_cache
+            m3u_cache["data"] = None
+            m3u_cache["timestamp"] = None
+            
+            # Limpiar caché de visualizadores
+            from viewers import viewers_cache, channel_viewers
+            viewers_cache.clear()
+            channel_viewers.clear()
+            
+            return {"message": "Caché limpiado correctamente"}
+        
+        elif request.action == "update_playlist" and request.m3u_url:
+            # Actualizar URL de playlist (requiere reinicio)
+            return {
+                "message": "URL actualizada. Reinicia el servidor para aplicar cambios.",
+                "new_url": request.m3u_url
+            }
+        
+        else:
+            raise HTTPException(status_code=400, detail="Acción no válida")
+    
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error en operación admin: {str(e)}")
+
+@router.get("/status")
+async def admin_status(is_admin: bool = Depends(verify_admin_token)):
+    """Estado del sistema para administradores"""
+    
+    if not is_admin:
+        raise HTTPException(status_code=403, detail="Acceso denegado")
+    
+    from m3u_parser import m3u_cache
+    from viewers import viewers_cache, channel_viewers
+    
+    return {
+        "cache_status": {
+            "m3u_cached": m3u_cache["data"] is not None,
+            "cache_timestamp": m3u_cache["timestamp"].isoformat() if m3u_cache["timestamp"] else None,
+            "channels_count": len(m3u_cache["data"]) if m3u_cache["data"] else 0
+        },
+        "viewers_status": {
+            "active_users": len(viewers_cache),
+            "active_channels": len(channel_viewers),
+            "total_viewers": sum(len(viewers) for viewers in channel_viewers.values())
+        },
+        "config": {
+            "m3u_url_configured": bool(os.getenv("MAIN_M3U_URL")),
+            "admin_code_configured": bool(os.getenv("ADMIN_CODE")),
+            "base_url": os.getenv("BASE_URL", "not_configured")
+        }
+    }

api/auth.py

@@ -0,0 +1,87 @@
+from fastapi import APIRouter, HTTPException, Depends, Header
+from pydantic import BaseModel
+from cryptography.fernet import Fernet
+import base64
+import hashlib
+import os
+import secrets
+from typing import Optional
+
+router = APIRouter()
+
+# Configuración AES
+AES_SECRET = os.getenv("AES_SECRET", "default-secret-key-change-this")
+# Generar clave Fernet desde el secreto
+key = base64.urlsafe_b64encode(hashlib.sha256(AES_SECRET.encode()).digest())
+cipher_suite = Fernet(key)
+
+class AuthRequest(BaseModel):
+    code: str
+
+class AuthResponse(BaseModel):
+    success: bool
+    token: Optional[str] = None
+    message: Optional[str] = None
+
+def generate_user_token() -> str:
+    """Genera un token único para el usuario"""
+    return secrets.token_urlsafe(32)
+
+def validate_access_code(code: str) -> bool:
+    """Valida el código de acceso usando AES"""
+    try:
+        # Lista de códigos válidos (en producción, estos estarían cifrados)
+        valid_codes = [
+            "FAMILY2024",
+            "DADDY123",
+            "FRIENDS24"
+        ]
+        
+        # Validación simple (en producción usar cifrado AES)
+        return code.upper() in valid_codes
+    except Exception:
+        return False
+
+async def get_current_user(authorization: Optional[str] = Header(None)) -> str:
+    """Extrae y valida el token del usuario"""
+    if not authorization or not authorization.startswith("Bearer "):
+        raise HTTPException(status_code=401, detail="Token requerido")
+    
+    token = authorization.split(" ")[1]
+    if not token:
+        raise HTTPException(status_code=401, detail="Token inválido")
+    
+    return token
+
+@router.post("/auth", response_model=AuthResponse)
+async def authenticate(request: AuthRequest):
+    """Autentica un usuario con código de acceso"""
+    try:
+        if validate_access_code(request.code):
+            user_token = generate_user_token()
+            return AuthResponse(
+                success=True,
+                token=user_token,
+                message="Autenticación exitosa"
+            )
+        else:
+            return AuthResponse(
+                success=False,
+                message="Código de acceso inválido"
+            )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail="Error interno del servidor")
+
+@router.post("/logout")
+async def logout(current_user: str = Depends(get_current_user)):
+    """Cierra la sesión del usuario"""
+    # Limpiar caché de usuario si existe
+    from viewers import clear_user_session
+    clear_user_session(current_user)
+    
+    return {"message": "Sesión cerrada correctamente"}
+
+@router.post("/ping")
+async def ping(current_user: str = Depends(get_current_user)):
+    """Verifica que el usuario esté autenticado"""
+    return {"status": "authenticated", "user": current_user[:8] + "..."}

api/m3u_parser.py

@@ -0,0 +1,187 @@
+from fastapi import APIRouter, Depends, HTTPException
+from pydantic import BaseModel
+import requests
+import re
+import os
+from typing import List, Dict, Optional
+from datetime import datetime, timedelta
+from auth import get_current_user
+
+router = APIRouter()
+
+# Cache en memoria
+m3u_cache = {
+    "data": None,
+    "timestamp": None,
+    "ttl": 3600  # 1 hora
+}
+
+class Channel(BaseModel):
+    id: str
+    name: str
+    url: str
+    logo: Optional[str] = None
+    category: str
+    group: Optional[str] = None
+
+class ChannelCategory(BaseModel):
+    name: str
+    count: int
+
+class ChannelResponse(BaseModel):
+    channels: List[Channel]
+    categories: List[ChannelCategory]
+
+def parse_m3u_content(content: str) -> List[Channel]:
+    """Parsea el contenido M3U y extrae los canales"""
+    channels = []
+    lines = content.strip().split('\n')
+    
+    i = 0
+    while i < len(lines):
+        line = lines[i].strip()
+        
+        if line.startswith('#EXTINF:'):
+            # Extraer información del canal
+            info_line = line
+            
+            # Buscar la URL en la siguiente línea
+            url_line = ""
+            if i + 1 < len(lines):
+                url_line = lines[i + 1].strip()
+            
+            if url_line and not url_line.startswith('#'):
+                channel = parse_extinf_line(info_line, url_line)
+                if channel:
+                    channels.append(channel)
+                i += 2
+            else:
+                i += 1
+        else:
+            i += 1
+    
+    return channels
+
+def parse_extinf_line(extinf_line: str, url: str) -> Optional[Channel]:
+    """Parsea una línea EXTINF y extrae la información del canal"""
+    try:
+        # Extraer nombre del canal (después de la última coma)
+        name_match = extinf_line.split(',')[-1].strip()
+        if not name_match:
+            return None
+        
+        name = name_match
+        
+        # Extraer logo
+        logo_match = re.search(r'tvg-logo="([^"]*)"', extinf_line)
+        logo = logo_match.group(1) if logo_match else None
+        
+        # Extraer categoría/grupo
+        group_match = re.search(r'group-title="([^"]*)"', extinf_line)
+        category = group_match.group(1) if group_match else "General"
+        
+        # Generar ID único
+        channel_id = f"{hash(name + url) % 1000000:06d}"
+        
+        return Channel(
+            id=channel_id,
+            name=name,
+            url=url,
+            logo=logo,
+            category=category,
+            group=category
+        )
+    except Exception as e:
+        print(f"Error parsing channel: {e}")
+        return None
+
+def get_cached_channels() -> Optional[List[Channel]]:
+    """Obtiene los canales del caché si están vigentes"""
+    if not m3u_cache["data"] or not m3u_cache["timestamp"]:
+        return None
+    
+    # Verificar TTL
+    if datetime.now() - m3u_cache["timestamp"] > timedelta(seconds=m3u_cache["ttl"]):
+        return None
+    
+    return m3u_cache["data"]
+
+def cache_channels(channels: List[Channel]):
+    """Guarda los canales en caché"""
+    m3u_cache["data"] = channels
+    m3u_cache["timestamp"] = datetime.now()
+
+async def fetch_m3u_playlist() -> List[Channel]:
+    """Descarga y parsea la playlist M3U"""
+    m3u_url = os.getenv("MAIN_M3U_URL")
+    if not m3u_url:
+        raise HTTPException(status_code=500, detail="URL de playlist no configurada")
+    
+    try:
+        response = requests.get(m3u_url, timeout=30)
+        response.raise_for_status()
+        
+        channels = parse_m3u_content(response.text)
+        cache_channels(channels)
+        
+        return channels
+    except requests.RequestException as e:
+        raise HTTPException(status_code=500, detail=f"Error descargando playlist: {str(e)}")
+
+@router.get("/channels", response_model=ChannelResponse)
+async def get_channels(current_user: str = Depends(get_current_user)):
+    """Obtiene la lista de canales disponibles"""
+    
+    # Intentar obtener del caché primero
+    cached_channels = get_cached_channels()
+    if cached_channels:
+        channels = cached_channels
+    else:
+        # Descargar y parsear
+        channels = await fetch_m3u_playlist()
+    
+    # Agrupar por categorías
+    categories_dict = {}
+    for channel in channels:
+        category = channel.category
+        if category not in categories_dict:
+            categories_dict[category] = 0
+        categories_dict[category] += 1
+    
+    categories = [
+        ChannelCategory(name=name, count=count)
+        for name, count in sorted(categories_dict.items())
+    ]
+    
+    return ChannelResponse(channels=channels, categories=categories)
+
+@router.get("/playlist.m3u")
+async def get_playlist_m3u(current_user: str = Depends(get_current_user)):
+    """Devuelve la playlist M3U con URLs reescritas para usar el proxy"""
+    
+    channels = get_cached_channels()
+    if not channels:
+        channels = await fetch_m3u_playlist()
+    
+    # Generar contenido M3U con URLs proxy
+    base_url = os.getenv("BASE_URL", "http://localhost:8000")
+    m3u_content = "#EXTM3U\n"
+    
+    for channel in channels:
+        proxy_url = f"{base_url}/api/proxy?url={requests.utils.quote(channel.url, safe='')}"
+        
+        extinf_line = f'#EXTINF:-1'
+        if channel.logo:
+            extinf_line += f' tvg-logo="{channel.logo}"'
+        if channel.category:
+            extinf_line += f' group-title="{channel.category}"'
+        extinf_line += f',{channel.name}\n'
+        
+        m3u_content += extinf_line
+        m3u_content += f"{proxy_url}\n"
+    
+    return PlainTextResponse(
+        content=m3u_content,
+        media_type="application/vnd.apple.mpegurl",
+        headers={"Content-Disposition": "attachment; filename=playlist.m3u"}
+    )

api/main.py

@@ -0,0 +1,71 @@
+from fastapi import FastAPI, HTTPException, Depends, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse, PlainTextResponse
+from fastapi.staticfiles import StaticFiles
+import uvicorn
+import os
+from dotenv import load_dotenv
+
+# Cargar variables de entorno
+load_dotenv()
+
+# Importar módulos
+from auth import router as auth_router, get_current_user
+from m3u_parser import router as m3u_router
+from proxy import router as proxy_router
+from viewers import router as viewers_router
+from admin import router as admin_router
+
+app = FastAPI(
+    title="DaddyTV IPTV API",
+    description="API para reproductor IPTV personal",
+    version="1.0.0"
+)
+
+# CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Servir archivos estáticos del frontend (para Docker)
+if os.path.exists("static"):
+    app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Incluir routers
+app.include_router(auth_router, prefix="/api")
+app.include_router(m3u_router, prefix="/api")
+app.include_router(proxy_router, prefix="/api")
+app.include_router(viewers_router, prefix="/api")
+app.include_router(admin_router, prefix="/api/admin")
+
+@app.get("/")
+async def root():
+    # En Docker, servir el frontend
+    if os.path.exists("static/index.html"):
+        with open("static/index.html", "r") as f:
+            return PlainTextResponse(f.read(), media_type="text/html")
+    return {"message": "DaddyTV IPTV API", "version": "1.0.0"}
+
+@app.get("/api/health")
+async def health_check():
+    return {"status": "healthy", "message": "API funcionando correctamente"}
+
+# Catch-all para servir el frontend en rutas no-API (SPA)
+@app.get("/{full_path:path}")
+async def serve_frontend(full_path: str):
+    if full_path.startswith("api/"):
+        raise HTTPException(status_code=404, detail="API endpoint not found")
+    
+    if os.path.exists("static/index.html"):
+        with open("static/index.html", "r") as f:
+            return PlainTextResponse(f.read(), media_type="text/html")
+    
+    raise HTTPException(status_code=404, detail="Frontend not found")
+
+if __name__ == "__main__":
+    port = int(os.getenv("PORT", 8000))
+    uvicorn.run(app, host="0.0.0.0", port=port)

api/proxy.py

@@ -0,0 +1,93 @@
+from fastapi import APIRouter, HTTPException, Query, Request
+from fastapi.responses import StreamingResponse
+import requests
+import os
+from typing import Optional
+
+router = APIRouter()
+
+# Headers para bypass de restricciones
+DEFAULT_HEADERS = {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+    'Accept': '*/*',
+    'Accept-Language': 'en-US,en;q=0.9',
+    'Accept-Encoding': 'gzip, deflate',
+    'Connection': 'keep-alive',
+    'Upgrade-Insecure-Requests': '1'
+}
+
+def stream_content(url: str, headers: dict):
+    """Genera el contenido del stream"""
+    try:
+        with requests.get(url, headers=headers, stream=True, timeout=30) as response:
+            response.raise_for_status()
+            
+            for chunk in response.iter_content(chunk_size=8192):
+                if chunk:
+                    yield chunk
+    except requests.RequestException as e:
+        print(f"Error streaming content: {e}")
+        raise HTTPException(status_code=502, detail="Error al obtener el contenido")
+
+@router.get("/proxy")
+async def proxy_stream(
+    request: Request,
+    url: str = Query(..., description="URL del stream a proxificar")
+):
+    """Proxy para streams bloqueados por CORS o geolocalización"""
+    
+    if not url:
+        raise HTTPException(status_code=400, detail="URL requerida")
+    
+    try:
+        # Preparar headers
+        proxy_headers = DEFAULT_HEADERS.copy()
+        
+        # Agregar headers del cliente si son relevantes
+        client_headers = dict(request.headers)
+        if 'referer' in client_headers:
+            proxy_headers['Referer'] = client_headers['referer']
+        
+        # Hacer petición inicial para obtener headers de respuesta
+        head_response = requests.head(url, headers=proxy_headers, timeout=10)
+        
+        # Preparar headers de respuesta
+        response_headers = {}
+        
+        # Copiar headers importantes
+        important_headers = [
+            'content-type', 'content-length', 'accept-ranges',
+            'cache-control', 'expires', 'last-modified'
+        ]
+        
+        for header in important_headers:
+            if header in head_response.headers:
+                response_headers[header] = head_response.headers[header]
+        
+        # Headers CORS
+        response_headers.update({
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+            'Access-Control-Allow-Headers': '*'
+        })
+        
+        # Retornar stream
+        return StreamingResponse(
+            stream_content(url, proxy_headers),
+            headers=response_headers,
+            media_type=head_response.headers.get('content-type', 'application/octet-stream')
+        )
+        
+    except requests.RequestException as e:
+        print(f"Proxy error for URL {url}: {e}")
+        raise HTTPException(status_code=502, detail="Error al acceder al contenido")
+    except Exception as e:
+        print(f"Unexpected proxy error: {e}")
+        raise HTTPException(status_code=500, detail="Error interno del servidor")
+
+@router.options("/proxy")
+async def proxy_options():
+    """Maneja peticiones OPTIONS para CORS"""
+    return {
+        "message": "OK"
+    }

api/utils.py

@@ -0,0 +1,71 @@
+import hashlib
+import secrets
+import re
+from typing import Optional, Dict, Any
+from datetime import datetime
+
+def generate_secure_id(input_string: str) -> str:
+    """Genera un ID seguro basado en una cadena"""
+    return hashlib.md5(input_string.encode()).hexdigest()[:12]
+
+def generate_token() -> str:
+    """Genera un token seguro aleatorio"""
+    return secrets.token_urlsafe(32)
+
+def clean_channel_name(name: str) -> str:
+    """Limpia el nombre del canal removiendo caracteres especiales"""
+    # Remover caracteres especiales pero mantener espacios y caracteres acentuados
+    cleaned = re.sub(r'[^\w\s\-áéíóúñü]', '', name, flags=re.IGNORECASE)
+    return cleaned.strip()
+
+def validate_url(url: str) -> bool:
+    """Valida si una URL tiene formato correcto"""
+    url_pattern = re.compile(
+        r'^https?://'  # http:// or https://
+        r'(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+[A-Z]{2,6}\.?|'  # domain...
+        r'localhost|'  # localhost...
+        r'\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})'  # ...or ip
+        r'(?::\d+)?'  # optional port
+        r'(?:/?|[/?]\S+)$', re.IGNORECASE)
+    return url_pattern.match(url) is not None
+
+def format_timestamp(dt: datetime) -> str:
+    """Formatea un timestamp para mostrar"""
+    return dt.strftime("%Y-%m-%d %H:%M:%S")
+
+def safe_get(dictionary: Dict[str, Any], key: str, default: Any = None) -> Any:
+    """Obtiene un valor del diccionario de forma segura"""
+    return dictionary.get(key, default)
+
+class RateLimiter:
+    """Rate limiter simple en memoria"""
+    
+    def __init__(self, max_requests: int = 100, window_seconds: int = 60):
+        self.max_requests = max_requests
+        self.window_seconds = window_seconds
+        self.requests: Dict[str, list] = {}
+    
+    def is_allowed(self, identifier: str) -> bool:
+        """Verifica si una petición está permitida"""
+        now = datetime.now()
+        
+        if identifier not in self.requests:
+            self.requests[identifier] = []
+        
+        # Limpiar peticiones antiguas
+        cutoff_time = now.timestamp() - self.window_seconds
+        self.requests[identifier] = [
+            req_time for req_time in self.requests[identifier]
+            if req_time > cutoff_time
+        ]
+        
+        # Verificar límite
+        if len(self.requests[identifier]) >= self.max_requests:
+            return False
+        
+        # Agregar petición actual
+        self.requests[identifier].append(now.timestamp())
+        return True
+
+# Instancia global del rate limiter
+rate_limiter = RateLimiter(max_requests=50, window_seconds=60)

api/viewers.py

@@ -0,0 +1,126 @@
+from fastapi import APIRouter, Depends, HTTPException
+from pydantic import BaseModel
+from typing import Dict, Optional
+from datetime import datetime, timedelta
+from auth import get_current_user
+
+router = APIRouter()
+
+# Cache de visualizadores en memoria
+# Estructura: {user_token: {"channel_url": str, "timestamp": datetime}}
+viewers_cache: Dict[str, Dict] = {}
+
+# Contador de visualizadores por canal
+# Estructura: {channel_url: set(user_tokens)}
+channel_viewers: Dict[str, set] = {}
+
+class ViewerRequest(BaseModel):
+    channel_url: str
+
+class ViewerResponse(BaseModel):
+    viewers: int
+    switched: bool
+    message: Optional[str] = None
+
+def cleanup_old_viewers():
+    """Limpia visualizadores inactivos (más de 5 minutos)"""
+    cutoff_time = datetime.now() - timedelta(minutes=5)
+    
+    # Limpiar viewers_cache
+    expired_users = []
+    for user_token, data in viewers_cache.items():
+        if data.get("timestamp", datetime.min) < cutoff_time:
+            expired_users.append(user_token)
+    
+    for user_token in expired_users:
+        old_channel = viewers_cache[user_token].get("channel_url")
+        if old_channel and old_channel in channel_viewers:
+            channel_viewers[old_channel].discard(user_token)
+            if not channel_viewers[old_channel]:
+                del channel_viewers[old_channel]
+        del viewers_cache[user_token]
+
+def clear_user_session(user_token: str):
+    """Limpia la sesión de un usuario específico"""
+    if user_token in viewers_cache:
+        old_channel = viewers_cache[user_token].get("channel_url")
+        if old_channel and old_channel in channel_viewers:
+            channel_viewers[old_channel].discard(user_token)
+            if not channel_viewers[old_channel]:
+                del channel_viewers[old_channel]
+        del viewers_cache[user_token]
+
+@router.post("/viewers", response_model=ViewerResponse)
+async def set_viewing(
+    request: ViewerRequest,
+    current_user: str = Depends(get_current_user)
+):
+    """Registra que un usuario está viendo un canal"""
+    
+    # Limpiar visualizadores antiguos
+    cleanup_old_viewers()
+    
+    channel_url = request.channel_url
+    switched = False
+    message = None
+    
+    # Verificar si el usuario ya está viendo otro canal
+    if current_user in viewers_cache:
+        old_channel = viewers_cache[current_user].get("channel_url")
+        if old_channel and old_channel != channel_url:
+            # Usuario cambia de canal
+            switched = True
+            message = "Canal cambiado automáticamente"
+            
+            # Remover del canal anterior
+            if old_channel in channel_viewers:
+                channel_viewers[old_channel].discard(current_user)
+                if not channel_viewers[old_channel]:
+                    del channel_viewers[old_channel]
+    
+    # Registrar en el nuevo canal
+    viewers_cache[current_user] = {
+        "channel_url": channel_url,
+        "timestamp": datetime.now()
+    }
+    
+    # Actualizar contador del canal
+    if channel_url not in channel_viewers:
+        channel_viewers[channel_url] = set()
+    channel_viewers[channel_url].add(current_user)
+    
+    # Contar visualizadores actuales
+    viewer_count = len(channel_viewers.get(channel_url, set()))
+    
+    return ViewerResponse(
+        viewers=viewer_count,
+        switched=switched,
+        message=message
+    )
+
+@router.get("/viewers/{channel_id}")
+async def get_viewer_count(
+    channel_id: str,
+    current_user: str = Depends(get_current_user)
+):
+    """Obtiene el número de visualizadores de un canal"""
+    
+    # Limpiar visualizadores antiguos
+    cleanup_old_viewers()
+    
+    # Buscar el canal por ID (simplificado, en producción usar base de datos)
+    viewer_count = 0
+    for channel_url, viewers in channel_viewers.items():
+        if channel_id in channel_url or channel_url.endswith(channel_id):
+            viewer_count = len(viewers)
+            break
+    
+    return {"viewers": viewer_count}
+
+@router.delete("/viewers")
+async def stop_viewing(current_user: str = Depends(get_current_user)):
+    """Detiene la visualización actual del usuario"""
+    
+    clear_user_session(current_user)
+    
+    return {"message": "Visualización detenida"}

docker-compose.yml

@@ -0,0 +1,31 @@
+version: '3.8'
+
+services:
+  daddytv:
+    build: .
+    ports:
+      - "8000:8000"
+    environment:
+      - MAIN_M3U_URL=${MAIN_M3U_URL}
+      - ADMIN_CODE=${ADMIN_CODE}
+      - AES_SECRET=${AES_SECRET}
+      - BASE_URL=${BASE_URL:-http://localhost:8000}
+      - PORT=8000
+    env_file:
+      - .env
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    volumes:
+      # Opcional: montar logs
+      - ./logs:/app/logs
+    networks:
+      - daddytv-network
+
+networks:
+  daddytv-network:
+    driver: bridge

generate_admin_code.py

@@ -0,0 +1,58 @@
+#!/usr/bin/env python3
+"""
+Script para generar códigos de administrador seguros
+"""
+import secrets
+import hashlib
+import base64
+import os
+
+def generate_admin_code():
+    """Genera un código de administrador seguro"""
+    # Generar código aleatorio
+    random_bytes = secrets.token_bytes(16)
+    admin_code = base64.urlsafe_b64encode(random_bytes).decode('utf-8').rstrip('=')
+    
+    print("=" * 50)
+    print("CÓDIGO DE ADMINISTRADOR GENERADO")
+    print("=" * 50)
+    print(f"Código: {admin_code}")
+    print(f"Longitud: {len(admin_code)} caracteres")
+    print()
+    print("INSTRUCCIONES:")
+    print("1. Copia este código y guárdalo en un lugar seguro")
+    print("2. Agrega la siguiente línea a tu archivo .env:")
+    print(f"   ADMIN_CODE={admin_code}")
+    print("3. Para usar el panel de admin, incluye este header en tus peticiones:")
+    print(f"   Authorization: Bearer {admin_code}")
+    print()
+    print("ENDPOINTS DE ADMINISTRACIÓN:")
+    print("- GET  /api/admin/status  - Estado del sistema")
+    print("- POST /api/admin/update  - Actualizar configuración")
+    print("=" * 50)
+
+def generate_aes_secret():
+    """Genera un secreto AES seguro"""
+    # Generar 32 bytes aleatorios para AES-256
+    secret_bytes = secrets.token_bytes(32)
+    aes_secret = base64.urlsafe_b64encode(secret_bytes).decode('utf-8').rstrip('=')
+    
+    print("SECRETO AES GENERADO")
+    print("=" * 50)
+    print(f"Secreto: {aes_secret}")
+    print("Agrega esta línea a tu archivo .env:")
+    print(f"AES_SECRET={aes_secret}")
+    print("=" * 50)
+
+if __name__ == "__main__":
+    print("🔐 Generador de Códigos DaddyTV")
+    print()
+    
+    generate_admin_code()
+    print()
+    generate_aes_secret()
+    
+    print("\n⚠️  IMPORTANTE:")
+    print("- Guarda estos códigos en un lugar seguro")
+    print("- No los compartas con usuarios normales")
+    print("- Cambia los códigos periódicamente por seguridad")

index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1f2937" />
+    <meta name="description" content="Reproductor IPTV personal para amigos y familiares" />
+    <title>DaddyTV - IPTV Player</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "daddytv",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "hls.js": "^1.4.12",
+    "lucide-react": "^0.294.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-pwa": "^0.17.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/manifest.json

@@ -0,0 +1,33 @@
+{
+  "name": "DaddyTV - IPTV Player",
+  "short_name": "DaddyTV",
+  "description": "Reproductor IPTV personal para amigos y familiares",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#111827",
+  "theme_color": "#1f2937",
+  "orientation": "landscape-primary",
+  "icons": [
+    {
+      "src": "/pwa-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/pwa-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["entertainment", "multimedia"],
+  "screenshots": [
+    {
+      "src": "/screenshot-wide.png",
+      "sizes": "1280x720",
+      "type": "image/png",
+      "form_factor": "wide"
+    }
+  ]
+}

requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+python-multipart==0.0.6
+requests==2.31.0
+cryptography==41.0.7
+python-dotenv==1.0.0

scripts/docker-deploy.sh

@@ -0,0 +1,50 @@
+#!/bin/bash
+
+# Script de despliegue con Docker
+echo "🐳 Desplegando DaddyTV con Docker..."
+
+# Verificar si Docker está instalado
+if ! command -v docker &> /dev/null; then
+    echo "❌ Docker no está instalado. Por favor instálalo primero."
+    exit 1
+fi
+
+# Verificar si docker-compose está instalado
+if ! command -v docker-compose &> /dev/null; then
+    echo "❌ Docker Compose no está instalado. Por favor instálalo primero."
+    exit 1
+fi
+
+# Verificar archivo .env
+if [ ! -f .env ]; then
+    echo "❌ Archivo .env no encontrado. Ejecuta primero: ./scripts/setup.sh"
+    exit 1
+fi
+
+# Construir y ejecutar
+echo "🔨 Construyendo imagen Docker..."
+docker-compose build
+
+echo "🚀 Iniciando servicios..."
+docker-compose up -d
+
+echo "⏳ Esperando que los servicios estén listos..."
+sleep 10
+
+# Verificar estado
+if docker-compose ps | grep -q "Up"; then
+    echo "✅ DaddyTV está ejecutándose!"
+    echo ""
+    echo "🌐 Aplicación disponible en: http://localhost:8000"
+    echo "📊 API Health Check: http://localhost:8000/api/health"
+    echo ""
+    echo "📋 Comandos útiles:"
+    echo "   Ver logs:     docker-compose logs -f"
+    echo "   Detener:      docker-compose down"
+    echo "   Reiniciar:    docker-compose restart"
+    echo "   Reconstruir:  docker-compose up --build -d"
+else
+    echo "❌ Error al iniciar los servicios. Revisa los logs:"
+    docker-compose logs
+    exit 1
+fi

scripts/setup.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+# Script de configuración para DaddyTV
+echo "🚀 Configurando DaddyTV..."
+
+# Verificar si Python está instalado
+if ! command -v python3 &> /dev/null; then
+    echo "❌ Python 3 no está instalado. Por favor instálalo primero."
+    exit 1
+fi
+
+# Verificar si Node.js está instalado
+if ! command -v node &> /dev/null; then
+    echo "❌ Node.js no está instalado. Por favor instálalo primero."
+    exit 1
+fi
+
+# Crear archivo .env si no existe
+if [ ! -f .env ]; then
+    echo "📝 Creando archivo .env..."
+    cp .env.example .env
+    echo "✅ Archivo .env creado. Por favor configúralo con tus valores."
+fi
+
+# Generar códigos de administrador
+echo "🔐 Generando códigos de administrador..."
+python3 generate_admin_code.py
+
+echo ""
+echo "📦 Instalando dependencias..."
+
+# Instalar dependencias del frontend
+echo "📱 Instalando dependencias del frontend..."
+npm install
+
+# Instalar dependencias del backend
+echo "🐍 Instalando dependencias del backend..."
+cd api
+pip3 install -r requirements.txt
+cd ..
+
+echo ""
+echo "✅ Configuración completada!"
+echo ""
+echo "🚀 Para iniciar el desarrollo:"
+echo "   1. Configura tu archivo .env con los valores generados"
+echo "   2. Terminal 1: cd api && python3 main.py"
+echo "   3. Terminal 2: npm run dev"
+echo ""
+echo "🐳 Para usar Docker:"
+echo "   1. docker-compose up --build"
+echo ""
+echo "📋 Panel de administración disponible en:"
+echo "   GET  /api/admin/status"
+echo "   POST /api/admin/update"

src/App.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react'
+import { AuthProvider, useAuth } from './contexts/AuthContext'
+import { ChannelProvider } from './contexts/ChannelContext'
+import LoginScreen from './components/LoginScreen'
+import MainInterface from './components/MainInterface'
+import LoadingSpinner from './components/LoadingSpinner'
+
+function AppContent() {
+  const { isAuthenticated, isLoading } = useAuth()
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  return isAuthenticated ? <MainInterface /> : <LoginScreen />
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <ChannelProvider>
+        <div className="min-h-screen bg-gray-900">
+          <AppContent />
+        </div>
+      </ChannelProvider>
+    </AuthProvider>
+  )
+}
+
+export default App

src/components/ChannelList.tsx

@@ -0,0 +1,201 @@
+import React, { useState, useMemo } from 'react'
+import { useChannels } from '../contexts/ChannelContext'
+import { useKeyboard } from '../hooks/useKeyboard'
+import { Search, Heart, Tv, RefreshCw } from 'lucide-react'
+import { Channel } from '../types/channel'
+
+interface ChannelListProps {
+  onChannelSelect?: () => void
+}
+
+export default function ChannelList({ onChannelSelect }: ChannelListProps) {
+  const {
+    channels,
+    categories,
+    currentChannel,
+    favorites,
+    searchTerm,
+    selectedCategory,
+    setCurrentChannel,
+    setSearchTerm,
+    setSelectedCategory,
+    toggleFavorite,
+    refreshChannels,
+    isLoading
+  } = useChannels()
+
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const filteredChannels = useMemo(() => {
+    let filtered = channels
+
+    // Filtrar por categoría
+    if (selectedCategory === 'favorites') {
+      filtered = filtered.filter(channel => favorites.includes(channel.id))
+    } else if (selectedCategory !== 'all') {
+      filtered = filtered.filter(channel => channel.category === selectedCategory)
+    }
+
+    // Filtrar por búsqueda
+    if (searchTerm) {
+      filtered = filtered.filter(channel =>
+        channel.name.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    }
+
+    return filtered
+  }, [channels, selectedCategory, favorites, searchTerm])
+
+  useKeyboard({
+    onArrowUp: () => setSelectedIndex(prev => Math.max(0, prev - 1)),
+    onArrowDown: () => setSelectedIndex(prev => Math.min(filteredChannels.length - 1, prev + 1)),
+    onEnter: () => {
+      if (filteredChannels[selectedIndex]) {
+        handleChannelSelect(filteredChannels[selectedIndex])
+      }
+    }
+  })
+
+  const handleChannelSelect = (channel: Channel) => {
+    setCurrentChannel(channel)
+    onChannelSelect?.()
+  }
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category)
+    setSelectedIndex(0)
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-gray-800">
+      {/* Búsqueda */}
+      <div className="p-4 border-b border-gray-700">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <input
+            type="text"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="Buscar canales..."
+            className="input-field w-full pl-10 text-sm"
+          />
+        </div>
+      </div>
+
+      {/* Categorías */}
+      <div className="p-4 border-b border-gray-700">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-sm font-medium text-gray-300">Categorías</h3>
+          <button
+            onClick={refreshChannels}
+            disabled={isLoading}
+            className="p-1 hover:bg-gray-700 rounded transition-colors"
+            title="Actualizar canales"
+          >
+            <RefreshCw className={`h-4 w-4 text-gray-400 ${isLoading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+        
+        <div className="space-y-1">
+          <button
+            onClick={() => handleCategoryChange('all')}
+            className={`w-full text-left px-2 py-1 rounded text-sm transition-colors ${
+              selectedCategory === 'all' 
+                ? 'bg-primary-600 text-white' 
+                : 'text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            Todos ({channels.length})
+          </button>
+          
+          <button
+            onClick={() => handleCategoryChange('favorites')}
+            className={`w-full text-left px-2 py-1 rounded text-sm transition-colors flex items-center space-x-2 ${
+              selectedCategory === 'favorites' 
+                ? 'bg-primary-600 text-white' 
+                : 'text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            <Heart className="h-3 w-3" />
+            <span>Favoritos ({favorites.length})</span>
+          </button>
+          
+          {categories.map(category => (
+            <button
+              key={category.name}
+              onClick={() => handleCategoryChange(category.name)}
+              className={`w-full text-left px-2 py-1 rounded text-sm transition-colors ${
+                selectedCategory === category.name 
+                  ? 'bg-primary-600 text-white' 
+                  : 'text-gray-300 hover:bg-gray-700'
+              }`}
+            >
+              {category.name} ({category.count})
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Lista de canales */}
+      <div className="flex-1 overflow-y-auto">
+        {filteredChannels.length === 0 ? (
+          <div className="p-4 text-center text-gray-400">
+            <Tv className="h-8 w-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">No se encontraron canales</p>
+          </div>
+        ) : (
+          <div className="p-2 space-y-1">
+            {filteredChannels.map((channel, index) => (
+              <div
+                key={channel.id}
+                onClick={() => handleChannelSelect(channel)}
+                className={`channel-item ${
+                  currentChannel?.id === channel.id ? 'active' : ''
+                } ${index === selectedIndex ? 'ring-2 ring-primary-500' : ''}`}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center space-x-2">
+                    {channel.logo && (
+                      <img
+                        src={channel.logo}
+                        alt={channel.name}
+                        className="w-8 h-8 rounded object-cover flex-shrink-0"
+                        onError={(e) => {
+                          e.currentTarget.style.display = 'none'
+                        }}
+                      />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-white truncate">
+                        {channel.name}
+                      </p>
+                      <p className="text-xs text-gray-400 truncate">
+                        {channel.category}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    toggleFavorite(channel.id)
+                  }}
+                  className="p-1 hover:bg-gray-600 rounded transition-colors"
+                >
+                  <Heart
+                    className={`h-4 w-4 ${
+                      favorites.includes(channel.id)
+                        ? 'text-red-500 fill-current'
+                        : 'text-gray-400'
+                    }`}
+                  />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

src/components/Header.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { useChannels } from '../contexts/ChannelContext'
+import { Tv, Menu, LogOut, Users } from 'lucide-react'
+
+interface HeaderProps {
+  onToggleChannelList: () => void
+  showChannelList: boolean
+}
+
+export default function Header({ onToggleChannelList, showChannelList }: HeaderProps) {
+  const { logout } = useAuth()
+  const { currentChannel, viewerCount } = useChannels()
+
+  return (
+    <header className="bg-gray-800 border-b border-gray-700 px-4 py-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <button
+            onClick={onToggleChannelList}
+            className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
+            title={showChannelList ? 'Ocultar lista' : 'Mostrar lista'}
+          >
+            <Menu className="h-5 w-5 text-gray-300" />
+          </button>
+          
+          <div className="flex items-center space-x-2">
+            <Tv className="h-6 w-6 text-primary-500" />
+            <h1 className="text-xl font-bold text-white">DaddyTV</h1>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          {currentChannel && (
+            <div className="flex items-center space-x-4">
+              <div className="text-sm text-gray-300">
+                <span className="font-medium">{currentChannel.name}</span>
+              </div>
+              
+              {viewerCount > 1 && (
+                <div className="flex items-center space-x-1 text-sm text-gray-400">
+                  <Users className="h-4 w-4" />
+                  <span>{viewerCount}</span>
+                </div>
+              )}
+            </div>
+          )}
+
+          <button
+            onClick={logout}
+            className="p-2 hover:bg-gray-700 rounded-lg transition-colors text-gray-300 hover:text-white"
+            title="Cerrar sesión"
+          >
+            <LogOut className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}

src/components/LoadingSpinner.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function LoadingSpinner() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-900">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto mb-4"></div>
+        <p className="text-gray-400">Cargando...</p>
+      </div>
+    </div>
+  )
+}

src/components/LoginScreen.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { Tv, Lock } from 'lucide-react'
+
+export default function LoginScreen() {
+  const [code, setCode] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+  const { login } = useAuth()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!code.trim()) return
+
+    setIsLoading(true)
+    setError('')
+
+    const success = await login(code.trim())
+    
+    if (!success) {
+      setError('Código incorrecto. Inténtalo de nuevo.')
+    }
+    
+    setIsLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 px-4">
+      <div className="max-w-md w-full">
+        <div className="text-center mb-8">
+          <div className="flex justify-center mb-4">
+            <div className="bg-primary-600 p-3 rounded-full">
+              <Tv className="h-8 w-8 text-white" />
+            </div>
+          </div>
+          <h1 className="text-3xl font-bold text-white mb-2">DaddyTV</h1>
+          <p className="text-gray-400">Reproductor IPTV personal</p>
+        </div>
+
+        <div className="card p-6">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="code" className="block text-sm font-medium text-gray-300 mb-2">
+                Código de acceso
+              </label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+                <input
+                  id="code"
+                  type="text"
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  className="input-field w-full pl-10"
+                  placeholder="Ingresa tu código"
+                  disabled={isLoading}
+                  autoFocus
+                />
+              </div>
+            </div>
+
+            {error && (
+              <div className="bg-red-900/50 border border-red-700 text-red-300 px-4 py-3 rounded-lg text-sm">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading || !code.trim()}
+              className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? 'Verificando...' : 'Acceder'}
+            </button>
+          </form>
+        </div>
+
+        <div className="text-center mt-6 text-sm text-gray-500">
+          <p>Contacta al administrador para obtener tu código de acceso</p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/MainInterface.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react'
+import { useChannels } from '../contexts/ChannelContext'
+import ChannelList from './ChannelList'
+import VideoPlayer from './VideoPlayer'
+import Header from './Header'
+import LoadingSpinner from './LoadingSpinner'
+
+export default function MainInterface() {
+  const { refreshChannels, isLoading, error, currentChannel } = useChannels()
+  const [showChannelList, setShowChannelList] = useState(true)
+
+  useEffect(() => {
+    refreshChannels()
+  }, [])
+
+  if (isLoading && !currentChannel) {
+    return <LoadingSpinner />
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 flex flex-col">
+      <Header 
+        onToggleChannelList={() => setShowChannelList(!showChannelList)}
+        showChannelList={showChannelList}
+      />
+      
+      <div className="flex-1 flex overflow-hidden">
+        {showChannelList && (
+          <div className="w-80 border-r border-gray-700 flex-shrink-0">
+            <ChannelList onChannelSelect={() => setShowChannelList(false)} />
+          </div>
+        )}
+        
+        <div className="flex-1 flex flex-col">
+          {currentChannel ? (
+            <VideoPlayer channel={currentChannel} />
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <div className="text-6xl mb-4">📺</div>
+                <h2 className="text-2xl font-semibold text-white mb-2">
+                  Selecciona un canal
+                </h2>
+                <p className="text-gray-400">
+                  Elige un canal de la lista para comenzar a ver
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <div className="bg-red-900/50 border-t border-red-700 text-red-300 px-4 py-3 text-sm">
+          {error}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/VideoPlayer.tsx

@@ -0,0 +1,228 @@
+import React, { useRef, useEffect, useState } from 'react'
+import Hls from 'hls.js'
+import { Channel } from '../types/channel'
+import { channelService } from '../services/channelService'
+import { Play, Pause, Volume2, VolumeX, Maximize, AlertCircle } from 'lucide-react'
+
+interface VideoPlayerProps {
+  channel: Channel
+}
+
+export default function VideoPlayer({ channel }: VideoPlayerProps) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const hlsRef = useRef<Hls | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isMuted, setIsMuted] = useState(false)
+  const [volume, setVolume] = useState(1)
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    if (!videoRef.current || !channel) return
+
+    const video = videoRef.current
+    setError(null)
+    setIsLoading(true)
+
+    // Limpiar HLS anterior
+    if (hlsRef.current) {
+      hlsRef.current.destroy()
+      hlsRef.current = null
+    }
+
+    const streamUrl = channelService.getProxyUrl(channel.url)
+
+    if (Hls.isSupported()) {
+      const hls = new Hls({
+        enableWorker: true,
+        lowLatencyMode: true,
+        backBufferLength: 90
+      })
+
+      hls.loadSource(streamUrl)
+      hls.attachMedia(video)
+
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        setIsLoading(false)
+        video.play().catch(console.error)
+      })
+
+      hls.on(Hls.Events.ERROR, (event, data) => {
+        console.error('HLS Error:', data)
+        if (data.fatal) {
+          setError('Error al cargar el canal. Inténtalo de nuevo.')
+          setIsLoading(false)
+        }
+      })
+
+      hlsRef.current = hls
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      // Safari nativo
+      video.src = streamUrl
+      video.addEventListener('loadedmetadata', () => {
+        setIsLoading(false)
+        video.play().catch(console.error)
+      })
+      video.addEventListener('error', () => {
+        setError('Error al cargar el canal. Inténtalo de nuevo.')
+        setIsLoading(false)
+      })
+    } else {
+      setError('Tu navegador no soporta la reproducción de este tipo de contenido.')
+      setIsLoading(false)
+    }
+
+    return () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy()
+        hlsRef.current = null
+      }
+    }
+  }, [channel])
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const handlePlay = () => setIsPlaying(true)
+    const handlePause = () => setIsPlaying(false)
+    const handleVolumeChange = () => {
+      setVolume(video.volume)
+      setIsMuted(video.muted)
+    }
+
+    video.addEventListener('play', handlePlay)
+    video.addEventListener('pause', handlePause)
+    video.addEventListener('volumechange', handleVolumeChange)
+
+    return () => {
+      video.removeEventListener('play', handlePlay)
+      video.removeEventListener('pause', handlePause)
+      video.removeEventListener('volumechange', handleVolumeChange)
+    }
+  }, [])
+
+  const togglePlay = () => {
+    if (!videoRef.current) return
+    
+    if (isPlaying) {
+      videoRef.current.pause()
+    } else {
+      videoRef.current.play()
+    }
+  }
+
+  const toggleMute = () => {
+    if (!videoRef.current) return
+    videoRef.current.muted = !videoRef.current.muted
+  }
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!videoRef.current) return
+    const newVolume = parseFloat(e.target.value)
+    videoRef.current.volume = newVolume
+    setVolume(newVolume)
+  }
+
+  const toggleFullscreen = () => {
+    if (!videoRef.current) return
+    
+    if (document.fullscreenElement) {
+      document.exitFullscreen()
+    } else {
+      videoRef.current.requestFullscreen()
+    }
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-black">
+        <div className="text-center text-white">
+          <AlertCircle className="h-12 w-12 mx-auto mb-4 text-red-500" />
+          <h3 className="text-lg font-semibold mb-2">Error de reproducción</h3>
+          <p className="text-gray-300 mb-4">{error}</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="btn-primary"
+          >
+            Reintentar
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 relative bg-black group">
+      <video
+        ref={videoRef}
+        className="w-full h-full object-contain"
+        controls={false}
+        autoPlay
+        muted={false}
+        playsInline
+      />
+
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75">
+          <div className="text-center text-white">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
+            <p>Cargando canal...</p>
+          </div>
+        </div>
+      )}
+
+      {/* Controles */}
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        <div className="flex items-center space-x-4">
+          <button
+            onClick={togglePlay}
+            className="p-2 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors"
+          >
+            {isPlaying ? (
+              <Pause className="h-6 w-6 text-white" />
+            ) : (
+              <Play className="h-6 w-6 text-white" />
+            )}
+          </button>
+
+          <div className="flex items-center space-x-2">
+            <button
+              onClick={toggleMute}
+              className="p-2 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors"
+            >
+              {isMuted ? (
+                <VolumeX className="h-5 w-5 text-white" />
+              ) : (
+                <Volume2 className="h-5 w-5 text-white" />
+              )}
+            </button>
+            
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              value={isMuted ? 0 : volume}
+              onChange={handleVolumeChange}
+              className="w-20 h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer"
+            />
+          </div>
+
+          <div className="flex-1" />
+
+          <div className="text-white text-sm font-medium">
+            {channel.name}
+          </div>
+
+          <button
+            onClick={toggleFullscreen}
+            className="p-2 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors"
+          >
+            <Maximize className="h-5 w-5 text-white" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/contexts/AuthContext.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { authService } from '../services/authService'
+
+interface AuthContextType {
+  isAuthenticated: boolean
+  isLoading: boolean
+  token: string | null
+  login: (code: string) => Promise<boolean>
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const [token, setToken] = useState<string | null>(null)
+
+  useEffect(() => {
+    const savedToken = localStorage.getItem('daddytv_token')
+    if (savedToken) {
+      setToken(savedToken)
+      setIsAuthenticated(true)
+    }
+    setIsLoading(false)
+  }, [])
+
+  const login = async (code: string): Promise<boolean> => {
+    try {
+      const result = await authService.validateCode(code)
+      if (result.success) {
+        const userToken = result.token
+        setToken(userToken)
+        setIsAuthenticated(true)
+        localStorage.setItem('daddytv_token', userToken)
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('Login error:', error)
+      return false
+    }
+  }
+
+  const logout = () => {
+    setToken(null)
+    setIsAuthenticated(false)
+    localStorage.removeItem('daddytv_token')
+    localStorage.removeItem('daddytv_favorites')
+    localStorage.removeItem('daddytv_settings')
+    authService.logout()
+  }
+
+  return (
+    <AuthContext.Provider value={{
+      isAuthenticated,
+      isLoading,
+      token,
+      login,
+      logout
+    }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}

src/contexts/ChannelContext.tsx

@@ -0,0 +1,113 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { channelService } from '../services/channelService'
+import { Channel, ChannelCategory } from '../types/channel'
+
+interface ChannelContextType {
+  channels: Channel[]
+  categories: ChannelCategory[]
+  currentChannel: Channel | null
+  isLoading: boolean
+  error: string | null
+  favorites: string[]
+  searchTerm: string
+  selectedCategory: string
+  viewerCount: number
+  setCurrentChannel: (channel: Channel | null) => void
+  setSearchTerm: (term: string) => void
+  setSelectedCategory: (category: string) => void
+  toggleFavorite: (channelId: string) => void
+  refreshChannels: () => Promise<void>
+}
+
+const ChannelContext = createContext<ChannelContextType | undefined>(undefined)
+
+export function ChannelProvider({ children }: { children: ReactNode }) {
+  const [channels, setChannels] = useState<Channel[]>([])
+  const [categories, setCategories] = useState<ChannelCategory[]>([])
+  const [currentChannel, setCurrentChannel] = useState<Channel | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [favorites, setFavorites] = useState<string[]>([])
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('all')
+  const [viewerCount, setViewerCount] = useState(0)
+
+  useEffect(() => {
+    const savedFavorites = localStorage.getItem('daddytv_favorites')
+    if (savedFavorites) {
+      setFavorites(JSON.parse(savedFavorites))
+    }
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem('daddytv_favorites', JSON.stringify(favorites))
+  }, [favorites])
+
+  const refreshChannels = async () => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const data = await channelService.getChannels()
+      setChannels(data.channels)
+      setCategories(data.categories)
+    } catch (err) {
+      setError('Error al cargar los canales. Inténtalo de nuevo.')
+      console.error('Error loading channels:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const toggleFavorite = (channelId: string) => {
+    setFavorites(prev => 
+      prev.includes(channelId) 
+        ? prev.filter(id => id !== channelId)
+        : [...prev, channelId]
+    )
+  }
+
+  const handleSetCurrentChannel = async (channel: Channel | null) => {
+    if (channel) {
+      try {
+        const result = await channelService.setViewing(channel.url)
+        if (result.switched) {
+          // Mostrar mensaje de cambio automático
+          console.log('Canal cambiado automáticamente')
+        }
+        setViewerCount(result.viewers || 1)
+      } catch (err) {
+        console.error('Error setting current channel:', err)
+      }
+    }
+    setCurrentChannel(channel)
+  }
+
+  return (
+    <ChannelContext.Provider value={{
+      channels,
+      categories,
+      currentChannel,
+      isLoading,
+      error,
+      favorites,
+      searchTerm,
+      selectedCategory,
+      viewerCount,
+      setCurrentChannel: handleSetCurrentChannel,
+      setSearchTerm,
+      setSelectedCategory,
+      toggleFavorite,
+      refreshChannels
+    }}>
+      {children}
+    </ChannelContext.Provider>
+  )
+}
+
+export function useChannels() {
+  const context = useContext(ChannelContext)
+  if (context === undefined) {
+    throw new Error('useChannels must be used within a ChannelProvider')
+  }
+  return context
+}

src/hooks/useKeyboard.ts

@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+
+interface KeyboardHandlers {
+  onArrowUp?: () => void
+  onArrowDown?: () => void
+  onArrowLeft?: () => void
+  onArrowRight?: () => void
+  onEnter?: () => void
+  onEscape?: () => void
+  onBackspace?: () => void
+}
+
+export function useKeyboard(handlers: KeyboardHandlers, enabled: boolean = true) {
+  useEffect(() => {
+    if (!enabled) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault()
+          handlers.onArrowUp?.()
+          break
+        case 'ArrowDown':
+          event.preventDefault()
+          handlers.onArrowDown?.()
+          break
+        case 'ArrowLeft':
+          event.preventDefault()
+          handlers.onArrowLeft?.()
+          break
+        case 'ArrowRight':
+          event.preventDefault()
+          handlers.onArrowRight?.()
+          break
+        case 'Enter':
+          event.preventDefault()
+          handlers.onEnter?.()
+          break
+        case 'Escape':
+          event.preventDefault()
+          handlers.onEscape?.()
+          break
+        case 'Backspace':
+          event.preventDefault()
+          handlers.onBackspace?.()
+          break
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [handlers, enabled])
+}

src/index.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: 'Inter', system-ui, sans-serif;
+    background: #111827;
+    color: #f9fafb;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+  }
+
+  :focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #374151;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #6b7280;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-gray-900;
+  }
+
+  .btn-secondary {
+    @apply bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900;
+  }
+
+  .card {
+    @apply bg-gray-800 rounded-lg shadow-lg border border-gray-700;
+  }
+
+  .input-field {
+    @apply bg-gray-700 border border-gray-600 text-white rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+  }
+
+  .channel-item {
+    @apply flex items-center p-3 rounded-lg hover:bg-gray-700 cursor-pointer transition-colors duration-200 focus:bg-gray-700 focus:ring-2 focus:ring-primary-500;
+  }
+
+  .channel-item.active {
+    @apply bg-primary-600 hover:bg-primary-700;
+  }
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/services/authService.ts

@@ -0,0 +1,54 @@
+const API_BASE = '/api'
+
+interface AuthResponse {
+  success: boolean
+  token?: string
+  message?: string
+}
+
+class AuthService {
+  async validateCode(code: string): Promise<AuthResponse> {
+    const response = await fetch(`${API_BASE}/auth`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ code }),
+    })
+
+    if (!response.ok) {
+      throw new Error('Error de autenticación')
+    }
+
+    return response.json()
+  }
+
+  async logout(): Promise<void> {
+    try {
+      await fetch(`${API_BASE}/logout`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('daddytv_token')}`,
+        },
+      })
+    } catch (error) {
+      console.error('Logout error:', error)
+    }
+  }
+
+  async ping(): Promise<boolean> {
+    try {
+      const response = await fetch(`${API_BASE}/ping`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('daddytv_token')}`,
+        },
+      })
+      return response.ok
+    } catch (error) {
+      return false
+    }
+  }
+}
+
+export const authService = new AuthService()

src/services/channelService.ts

@@ -0,0 +1,44 @@
+import { ChannelResponse, ViewerResponse } from '../types/channel'
+
+const API_BASE = '/api'
+
+class ChannelService {
+  async getChannels(): Promise<ChannelResponse> {
+    const token = localStorage.getItem('daddytv_token')
+    const response = await fetch(`${API_BASE}/channels`, {
+      headers: {
+        'Authorization': `Bearer ${token}`,
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error('Error al cargar canales')
+    }
+
+    return response.json()
+  }
+
+  async setViewing(channelUrl: string): Promise<ViewerResponse> {
+    const token = localStorage.getItem('daddytv_token')
+    const response = await fetch(`${API_BASE}/viewers`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`,
+      },
+      body: JSON.stringify({ channel_url: channelUrl }),
+    })
+
+    if (!response.ok) {
+      throw new Error('Error al registrar visualización')
+    }
+
+    return response.json()
+  }
+
+  getProxyUrl(originalUrl: string): string {
+    return `${API_BASE}/proxy?url=${encodeURIComponent(originalUrl)}`
+  }
+}
+
+export const channelService = new ChannelService()

src/types/channel.ts

@@ -0,0 +1,24 @@
+export interface Channel {
+  id: string
+  name: string
+  url: string
+  logo?: string
+  category: string
+  group?: string
+}
+
+export interface ChannelCategory {
+  name: string
+  count: number
+}
+
+export interface ChannelResponse {
+  channels: Channel[]
+  categories: ChannelCategory[]
+}
+
+export interface ViewerResponse {
+  viewers: number
+  switched: boolean
+  message?: string
+}

tailwind.config.js

@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          900: '#1e3a8a'
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif']
+      }
+    },
+  },
+  plugins: [],
+}

vercel.json

@@ -0,0 +1,21 @@
+{
+  "builds": [
+    {
+      "src": "api/main.py",
+      "use": "@vercel/python"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/api/(.*)",
+      "dest": "api/main.py"
+    },
+    {
+      "src": "/(.*)",
+      "dest": "/index.html"
+    }
+  ],
+  "env": {
+    "PYTHONPATH": "api"
+  }
+}

vite.config.ts

@@ -0,0 +1,58 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+      manifest: {
+        name: 'DaddyTV - IPTV Player',
+        short_name: 'DaddyTV',
+        description: 'Reproductor IPTV personal para amigos y familiares',
+        theme_color: '#1f2937',
+        background_color: '#111827',
+        display: 'standalone',
+        orientation: 'landscape-primary',
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/.*\.m3u8?$/,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'iptv-playlists',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 3600
+              }
+            }
+          }
+        ]
+      }
+    })
+  ],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true
+      }
+    }
+  }
+})