commit 1743d472d2e7211465b0fa716a8ac2eb5436c62c Author: josedario87 Date: Thu Oct 2 01:52:03 2025 -0600 Initial commit: Video player with HLS support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9e36a53 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# Nuxt +.nuxt +.output +.env +dist + +# Node +node_modules +*.log +npm-debug.log* + +# OS +.DS_Store + +# IDE +.idea +.vscode + +# Videos (archivos grandes - no subir) +videos/*.mp4 +videos/*.mov +videos/*_hls/ + +# Mantener estructura +!videos/.gitkeep + +# Logs +/tmp/*.log + +# Cloudflare credentials (NUNCA subir) +.cloudflared/*.json +.cloudflared/cert.pem +cloudflared + +# Config +.autostart-config diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md new file mode 100644 index 0000000..bfd52a7 --- /dev/null +++ b/DOCUMENTATION.md @@ -0,0 +1,1370 @@ +# 📘 Quantum Player - Documentación Técnica Completa + +**Versión:** 1.0.0 +**Fecha:** Octubre 2025 +**Autor:** Claude & Usuario +**Plataforma:** Nuxt 4 + Vue 3 + HLS Streaming + +--- + +## 📖 Índice + +1. [Historia Completa del Proyecto](#historia-completa-del-proyecto) +2. [Arquitectura Detallada](#arquitectura-detallada) +3. [Stack Tecnológico](#stack-tecnológico) +4. [Implementación HLS](#implementación-hls) +5. [Sistema de Autostart](#sistema-de-autostart) +6. [Problemas y Soluciones](#problemas-y-soluciones) +7. [Referencia de APIs](#referencia-de-apis) +8. [Deployment](#deployment) + +--- + +# 📜 Historia Completa del Proyecto + +## Día 1: Génesis del Proyecto + +### Hora 0: Requerimientos Iniciales + +**Usuario:** "Quiero un reproductor de video web moderno con Nuxt 4" + +**Contexto:** +- Necesitaba servir videos de drones (archivos DJI) +- Videos muy grandes (1.9GB - 3.2GB) +- Quería diseño moderno, no convencional +- Sin usar frameworks CSS tradicionales +- Deployment en video.nucleoriofrio.com + +**Decisiones Iniciales:** +1. **Framework:** Nuxt 4 (v3.19.2) - Latest stable +2. **UI:** Cyberpunk/Glassmorphism style +3. **Colores:** Cian (#00ffff), Magenta (#ff00ff), Verde neón (#00ff88) +4. **Sin CSS frameworks:** Todo vanilla CSS + +### Hora 1-2: Setup Básico + +**Estructura Creada:** +```bash +videoPlayer/ +├── pages/index.vue # Galería de videos +├── components/VideoPlayer.vue # Reproductor custom +├── server/api/videos.get.ts # API para listar +└── videos/ # Carpeta de videos +``` + +**Primera Implementación:** +- Galería con tarjetas glassmorphism +- VideoPlayer con HTML5 `