mejoras en galeria de videos

src/controladores/controlador_Apps.js

@@ -1,5 +1,7 @@
 const controlador = {};
 
+
+
 controlador.app_restaurant = (req, res) => {
   res.render('app_restaurant');
 };
@@ -30,15 +32,8 @@ controlador.speedtest = (req, res) => {
   res.render('test_velocidad')
 };
 
-//videos de ayuda sigma
-controlador.videos = (req, res) => {
-  //res.render('speedtest');
-  res.render('videos')
-};
-controlador.upload = (req, res) => {
-  //res.render('speedtest');
-  res.render('video_upload')
-};
+
+
 
 /** aqui iniciamo la vista de ejs  **/
 controlador.config = (req, res) => {

src/controladores/controlador_Clientes.js

@@ -176,7 +176,7 @@ controlador.app_pedidos_clientes = (req, res) => {
 /**
      * @function consulta_clientesApps
      * @description Consulta clientes por nombre, RUC o cédula para el autocomplete en aplicaciones.
-     * Espera un parámetro de consulta en la URL: /consultaClientesJson?consulta=dato
+     * Espera un parámetro de consulta en la URL: /consulta_clientesApps?consulta=dato
      * Donde 'dato' puede ser parte del nombre, RUC o cédula.
      * @param {Object} req - Objeto de solicitud de Express (req.query.consulta).
      * @param {Object} res - Objeto de respuesta de Express.
@@ -497,7 +497,7 @@ controlador.app_pedidos_clientes = (req, res) => {
       return res.status(500).json({ mensaje: 'Error de conexión', error: err.message });
     }
     // Incluir client_id en la selección
-    conn.query(`SELECT client_id, client_rucCed,client_nombre,client_direccion,client_celular,client_email FROM clientes WHERE client_nombre like ? or client_rucCed like ?`, [consulta, consulta], (err, rows) => {
+    conn.query(`SELECT client_id, client_rucCed,client_nombre,client_direccion,client_celular,client_email FROM clientes WHERE client_nombre like ? or client_rucCed like ? LIMIT 50`, [consulta, consulta], (err, rows) => {
       if (err) {
         console.error('Error en app_pedidos_clientes:', err);
         return res.status(500).json({ mensaje: 'Error al consultar clientes.', error: err.message });

src/controladores/controlador_videos.js

@@ -0,0 +1,181 @@
+controlador_videos = {};
+const path = require('path');
+const { v4: uuidv4 } = require('uuid');
+const fs = require('fs').promises;
+const ffmpeg = require('fluent-ffmpeg');
+ffmpeg.setFfmpegPath(require('ffmpeg-static'));
+
+controlador_videos.video_v1 = async (req, res) => { // Función para mostrar la galería V1
+    const videosDir = path.join(__dirname, '..', 'public', 'videos_v1');
+    const thumbnailsDir = path.join(videosDir, 'thumbnails');
+  
+    try {
+      await fs.mkdir(thumbnailsDir, { recursive: true });
+  
+      const allFiles = await fs.readdir(videosDir);
+      const videoFiles = allFiles.filter(file => {
+          try {
+              // Asegurarse de que es un archivo y tiene una extensión de video
+              return fs.statSync(path.join(videosDir, file)).isFile() && /\.(mp4|webm|ogg|mov)$/i.test(file);
+          } catch {
+              return false;
+          }
+      });
+  
+      const videosData = await Promise.all(videoFiles.map(async (file) => { // Usar Promise.all para eficiencia
+        const videoName = path.parse(file).name;
+        const thumbnailUrl = `/videos_v1/thumbnails/${videoName}.png`;
+        const thumbAbsolutePath = path.join(__dirname, '..', 'public', thumbnailUrl);
+        
+        let finalThumbnailUrl = '/img/placeholder-video.png'; // Placeholder por defecto
+        try {
+          await fs.access(thumbAbsolutePath); // Comprobar si la miniatura existe
+          finalThumbnailUrl = thumbnailUrl; // La miniatura existe
+        } catch (e) {
+          // La miniatura no existe, se usará el placeholder (no hacer nada, ya está asignado)
+        }
+  
+        return {
+          name: videoName,
+          videoUrl: `/videos_v1/${file}`,
+          thumbnailUrl: finalThumbnailUrl
+        };
+      }));
+  
+      res.render('video_v1', { videos: videosData, error: null }); // Renderizar con los datos
+  
+    } catch (error) {
+      console.error("Error al leer el directorio de videos V1:", error);
+      res.render('video_v1', { videos: [], error: "No se pudieron cargar los videos." });
+    }
+  };
+  
+  controlador_videos.upload_v1 = (req, res) => { // Muestra el formulario de subida V1 (GET)
+    res.render('video_upload_v1')
+  };
+  
+  controlador_videos.uploadVideoV1 = async (req, res) => { // Procesa la subida del formulario V1 (POST)
+      if (!req.files || !req.files.video) { // 'video' debe coincidir con el name del input file
+          return res.status(400).json({ success: false, message: 'No se ha subido ningún archivo de video.' });
+      }
+  
+      const videoFile = req.files.video;
+      const videosDir = path.join(__dirname, '..', 'public', 'videos_v1');
+      const thumbnailsDir = path.join(videosDir, 'thumbnails');
+      const videoAbsolutePath = path.join(videosDir, videoFile.name);
+  
+      try {
+          await fs.mkdir(thumbnailsDir, { recursive: true });
+          await videoFile.mv(videoAbsolutePath);
+  
+          // Generar miniatura usando FFmpeg
+          await new Promise((resolve, reject) => {
+              ffmpeg(videoAbsolutePath)
+                  .on('end', () => resolve())
+                  .on('error', (err) => reject(new Error(`Error al generar la miniatura: ${err.message}`)))
+                  .screenshots({
+                      count: 1,
+                      timemarks: ['1'], // Tomar captura en el segundo 1
+                      folder: thumbnailsDir,
+                      filename: `${path.parse(videoFile.name).name}.png`,
+                      size: '320x240'
+                  });
+          });
+  
+          res.json({ success: true, message: 'Video y miniatura subidos correctamente.' });
+      } catch (error) {
+          console.error("Error en la subida V1:", error);
+          res.status(500).json({ success: false, message: error.message });
+      }
+  };
+  
+  //videos de ayuda sigma
+  controlador_videos.videos_v2 = (req, res) => { // Muestra la galería V2 (desde la BD)
+    req.getConnection((err, conn) => {
+      if (err) {
+        console.error("Error al obtener conexión para videos V2:", err);
+        // Renderiza la página de error o una vista con un mensaje de error
+        return res.status(500).render('videos_v2', { videos: [], error: "Error de conexión con la base de datos." });
+      }
+  
+      const query = "SELECT video_id, video_nombre, video_descripcion, video_path_url, video_origen FROM videos WHERE video_estado = 'ACTIVO' ORDER BY video_reg DESC";
+      
+      conn.query(query, (err, videos) => {
+        if (err) {
+          console.error("Error al consultar videos V2:", err);
+          return res.status(500).render('videos_v2', { videos: [], error: "Error al consultar los videos." });
+        }
+        res.render('videos_v2', { videos: videos, error: null });
+      });
+    });
+  };
+  controlador_videos.upload_v2 = (req, res) => {
+    // Renderiza la vista correcta para la subida de videos V2
+    res.render('videos_upload_v2')
+  };
+  
+  /** Helper para obtener la fecha y hora actual en formato para la BD */
+  const reg_DB = () => {
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = String(today.getMonth() + 1).padStart(2, '0');
+      const day = String(today.getDate()).padStart(2, '0');
+      const hora = `${String(today.getHours()).padStart(2, '0')}:${String(today.getMinutes()).padStart(2, '0')}:${String(today.getSeconds()).padStart(2, '0')}`;
+      return `${year}-${month}-${day} ${hora}`;
+  };
+  
+  /**
+   * @function uploadVideo
+   * @description Procesa la subida de un video, lo guarda en el servidor y registra en la BD.
+   * @param {Object} req - Objeto de solicitud de Express.
+   * @param {Object} res - Objeto de respuesta de Express.
+   */
+  controlador_videos.uploadVideo = async (req, res) => {
+      try {
+          const { nombre, descripcion, origen } = req.body;
+          const urlExterna = req.body.url;
+  
+          if (!nombre || !descripcion || !origen) {
+              return res.status(400).json({ success: false, message: 'Faltan campos obligatorios (nombre, descripción, origen).' });
+          }
+  
+          let videoPathUrl = '';
+          let videoObservacion = '';
+  
+          if (origen === 'Local') {
+              if (!req.files || !req.files.archivo) {
+                  return res.status(400).json({ success: false, message: 'No se ha subido ningún archivo de video.' });
+              }
+  
+              const videoFile = req.files.archivo;
+              const fileExtension = path.extname(videoFile.name);
+              const newFileName = `${uuidv4()}${fileExtension}`;
+              const uploadPath = path.join(__dirname, '..', 'public', 'videos', newFileName);
+  
+              await videoFile.mv(uploadPath);
+              videoPathUrl = `/videos/${newFileName}`; // Ruta pública para acceder al video
+              videoObservacion = `Archivo local original: ${videoFile.name}`;
+          } else {
+              if (!urlExterna) {
+                  return res.status(400).json({ success: false, message: 'La URL del video es obligatoria para orígenes externos.' });
+              }
+              videoPathUrl = urlExterna;
+              videoObservacion = `Video externo de ${origen}`;
+          }
+  
+          req.getConnection((err, conn) => {
+              if (err) return res.status(500).json({ success: false, message: 'Error de conexión con la base de datos.' });
+  
+              const nuevoVideo = { video_nombre: nombre, video_descripcion: descripcion, video_path_url: videoPathUrl, video_estado: 'ACTIVO', video_reg: reg_DB(), video_observacion: videoObservacion, video_origen: origen };
+              conn.query('INSERT INTO videos SET ?', [nuevoVideo], (err, result) => {
+                  if (err) return res.status(500).json({ success: false, message: 'Error al registrar el video en la base de datos.' });
+                  res.status(201).json({ success: true, message: 'Video subido y registrado exitosamente.', videoId: result.insertId });
+              });
+          });
+      } catch (error) {
+          console.error("Error al subir el video:", error);
+          res.status(500).json({ success: false, message: 'Error interno del servidor al procesar la subida.' });
+      }
+  };
+
+  module.exports = controlador_videos; // Exporta el controlador para que pueda ser utilizado en las rutas

src/public/css/app_videos.css

@@ -1,160 +1,185 @@
 body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #121212;
-            color: #e0e0e0;
-        }
-        .banner {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            background-color: #1f1f1f;
-            color: #e0e0e0;
-            padding: 10px 20px;
-            position: fixed;
-            width: 96%;
-            top: 0;
-            z-index: 1000;
-        }
-        .banner .logo {
-            font-size: 24px;
-            font-weight: bold;
-        }
-        .banner .logo img {
-            height: 40px;
-        }
-        .banner .search-bar {
-            flex-grow: 1;
-            display: flex;
-            align-items: center;
-            margin: 0 20px;
-        }
-        .banner input[type="text"] {
-            width: 100%;
-            padding: 5px;
-            border: none;
-            border-radius: 3px;
-            margin-right: 10px;
-            background-color: #333;
-            color: #e0e0e0;
-        }
-        .banner .search-bar button {
-            background: url('https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/icons/search.svg') no-repeat center;
-            background-size: 20px;
-            border: none;
-            width: 30px;
-            height: 30px;
-            cursor: pointer;
-        }
-        .banner .menu {
-            position: relative;
-        }
-        .banner .menu button {
-            background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5nhCKmVjqZVfc19KXRTIXpeT6mweVBNeAmw&s') no-repeat center;
-            background-size: 30px;
-            border: none;
-            width: 40px;
-            height: 40px;
-            cursor: pointer;
-            color: #e0e0e0;
-        }
-        .banner .menu ul {
-            display: none;
-            position: absolute;
-            top: 35px;
-            right: 0;
-            background: #1f1f1f;
-            border: 1px solid #333;
-            border-radius: 5px;
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            z-index: 1000;
-        }
-        .banner .menu ul li {
-            padding: 10px;
-            border-bottom: 1px solid #333;
-            color: #e0e0e0;
-            cursor: pointer;
-        }
-        .banner .menu ul li:last-child {
-            border-bottom: none;
-        }
-        .banner .menu ul li:hover {
-            background: #333;
-        }
-        .video-list {
-            padding: 80px 20px 20px;
-        }
-        .video-carousel {
-            position: relative;
-        }
-        .slick-slide {
-            display: flex;
-            justify-content: center;
-        }
-        .video-item {
-            width: 150px;
-            margin: 10px;
-            background: #2c2c2c;
-            border: 1px solid #444;
-            border-radius: 5px;
-            overflow: hidden;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-        }
-        .video-item img {
-            width: 100%;
-            height: auto;
-        }
-        .video-item .info {
-            padding: 10px;
-            background: #1f1f1f;
-        }
-        .player {
-            display: flex;
-            justify-content: center;
-            margin-top: 20px;
-        }
-        .player iframe,
-        .player video {
-            width: 80%;
-            max-width: 800px;
-            border: 2px solid #444;
-            border-radius: 5px;
-        }
-        .slick-prev,
-        .slick-next {
-            width: 40px;
-            height: 40px;
-            background: #333;
-            color: #e0e0e0;
-            border: none;
-            border-radius: 50%;
-            line-height: 40px;
-            text-align: center;
-            font-size: 20px;
-            cursor: pointer;
-            z-index: 1000;
-        }
-        .slick-prev {
-            left: 10px;
-        }
-        .slick-next {
-            right: 10px;
-        }
-        @media (max-width: 768px) {
-            .video-item {
-                width: 200px;
-            }
-        }
-        @media (max-width: 480px) {
-            .video-item {
-                width: 150px;
-            }
-        }
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+.banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #1f1f1f;
+    color: #e0e0e0;
+    padding: 10px 20px;
+    position: fixed;
+    width: 96%;
+    top: 0;
+    z-index: 1000;
+}
+
+.banner .logo {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.banner .logo img {
+    height: 40px;
+}
+
+.banner .search-bar {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    margin: 0 20px;
+}
+
+.banner input[type="text"] {
+    width: 100%;
+    padding: 5px;
+    border: none;
+    border-radius: 3px;
+    margin-right: 10px;
+    background-color: #333;
+    color: #e0e0e0;
+}
+
+.banner .search-bar button {
+    background: url('https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/icons/search.svg') no-repeat center;
+    background-size: 20px;
+    border: none;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+}
+
+.banner .menu {
+    position: relative;
+}
+
+.banner .menu button {
+    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5nhCKmVjqZVfc19KXRTIXpeT6mweVBNeAmw&s') no-repeat center;
+    background-size: 30px;
+    border: none;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    color: #e0e0e0;
+}
+
+.banner .menu ul {
+    display: none;
+    position: absolute;
+    top: 35px;
+    right: 0;
+    background: #1f1f1f;
+    border: 1px solid #333;
+    border-radius: 5px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    z-index: 1000;
+}
+
+.banner .menu ul li {
+    padding: 10px;
+    border-bottom: 1px solid #333;
+    color: #e0e0e0;
+    cursor: pointer;
+}
+
+.banner .menu ul li:last-child {
+    border-bottom: none;
+}
+
+.banner .menu ul li:hover {
+    background: #333;
+}
+
+.video-list {
+    padding: 80px 20px 20px;
+}
+
+.video-carousel {
+    position: relative;
+}
+
+.slick-slide {
+    display: flex;
+    justify-content: center;
+}
+
+.video-item {
+    width: 150px;
+    margin: 10px;
+    background: #2c2c2c;
+    border: 1px solid #444;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.video-item img {
+    width: 100%;
+    height: auto;
+}
+
+.video-item .info {
+    padding: 10px;
+    background: #1f1f1f;
+}
+
+.player {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.player iframe,
+.player video {
+    width: 80%;
+    max-width: 800px;
+    border: 2px solid #444;
+    border-radius: 5px;
+}
+
+.slick-prev,
+.slick-next {
+    width: 40px;
+    height: 40px;
+    background: #333;
+    color: #e0e0e0;
+    border: none;
+    border-radius: 50%;
+    line-height: 40px;
+    text-align: center;
+    font-size: 20px;
+    cursor: pointer;
+    z-index: 1000;
+}
+
+.slick-prev {
+    left: 10px;
+}
+
+.slick-next {
+    right: 10px;
+}
+
+@media (max-width: 768px) {
+    .video-item {
+        width: 200px;
+    }
+}
+
+@media (max-width: 480px) {
+    .video-item {
+        width: 150px;
+    }
+}

src/public/js/app_videos_upload.js

@@ -6,6 +6,7 @@ document.getElementById('origen').addEventListener('change', function () {
     const fileInput = document.getElementById('videoUpload');
     const previewImg = document.getElementById('previewImg');
 
+
     if (origen === 'Local') {
         fileGroup.style.display = 'block';
         urlGroup.style.display = 'none';
@@ -101,10 +102,11 @@ document.getElementById('uploadForm').addEventListener('submit', function (event
         url: urlOrFile,
         miniatura: origen === 'Local' ? document.getElementById('previewImg').src : document.getElementById('previewUrl').src,
         tipo: document.getElementById('tipo').value,
-        tamano: document.getElementById('tamano').value,
+        //tamano: document.getElementById('tamano').value,
         origen: origen,
     };
 
     console.log('Video subido:', videoData);
     // Aquí puedes agregar código para procesar la subida y guardado de los datos.
-});
+});
+

src/rutas/rt_apps.js

@@ -2,15 +2,26 @@ const express = require('express');
 const rutas =  express.Router();
 
 const controlador_init = require('../controladores/controlador_Apps');
+const controlador_videos = require('../controladores/controlador_videos'); // Controlador para videos
+
 rutas.get('/app_restaurant', controlador_init.app_restaurant);//login testing css / dev
 //rutas.get('/usuarios', controlador_init.user);//
 rutas.get('/dash_board', controlador_init.dashboard);//
 rutas.get('/users', controlador_init.user);//devuelve usuaios con el el ROL meseros
 
 rutas.get('/speedtest', controlador_init.speedtest);//testing velocimetro server 
-rutas.get('/videos', controlador_init.videos);//videos sigma server 
-rutas.get('/video_upload', controlador_init.upload);//videos sigma server 
+
 
 /*** CONFIGURACION DE UN PAGINA QUE CONFIGURE EL ARCHIVO config.js  ***/
 rutas.get('/configuracion', controlador_init.config);//llama a un view de configuracion del archivo config.js
+
+
+rutas.get('/video', controlador_videos.video_v1);//videos sigma server 
+rutas.get('/video_upload', controlador_videos.upload_v1);//(GET) Muestra el formulario de subida V1 (antiguo)
+rutas.post('/video_upload', controlador_videos.uploadVideoV1); //(POST) Procesa la subida del formulario V1 (antiguo)
+
+rutas.get('/videos', controlador_videos.videos_v2);//videos sigma server 
+rutas.get('/videos_upload', controlador_videos.upload_v2);//videos sigma server (version nueva)
+rutas.post('/videos_upload', controlador_videos.uploadVideo); // Nueva ruta para manejar la subida
+
 module.exports = rutas;

src/views/video_v1.ejs

@@ -0,0 +1,720 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SIGMA - Reproductor de Videos</title>
+    <!-- Uix CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
+    <!-- Slick Carousel CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            min-height: 100vh;
+            color: #e0e0e0;
+            overflow-x: hidden;
+        }
+
+        /* Banner mejorado */
+        .banner {
+            background: rgba(15, 15, 35, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .logo img {
+            height: 45px;
+            filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+            transition: all 0.3s ease;
+        }
+
+        .logo img:hover {
+            filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
+            transform: scale(1.05);
+        }
+
+        .search-bar {
+            display: flex;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 30px;
+            padding: 0.5rem 1.5rem;
+            backdrop-filter: blur(10px);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.3s ease;
+            flex-grow: 1;
+            max-width: 400px;
+            margin: 0 2rem;
+        }
+
+        .search-bar:hover, .search-bar:focus-within {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: #64ffda;
+            box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
+        }
+
+        .search-bar input {
+            background: none;
+            border: none;
+            color: white;
+            padding: 0.7rem;
+            width: 100%;
+            outline: none;
+            font-size: 15px;
+        }
+
+        .search-bar input::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        .search-bar button {
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            border: none;
+            padding: 0.7rem 1.2rem;
+            border-radius: 25px;
+            color: #0f0f23;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .search-bar button::before {
+            content: "🔍";
+            margin-right: 8px;
+        }
+
+        .search-bar button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
+            background: linear-gradient(45deg, #4fc3f7, #29b6f6);
+        }
+
+        .menu {
+            position: relative;
+        }
+
+        .menu button {
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            padding: 0.8rem;
+            border-radius: 50%;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .menu button::before {
+            content: "☰";
+            font-size: 20px;
+        }
+
+        .menu button:hover {
+            background: rgba(100, 255, 218, 0.2);
+            border-color: #64ffda;
+            transform: rotate(90deg);
+            box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
+        }
+
+        .menu ul {
+            display: none;
+            position: absolute;
+            top: 110%;
+            right: 0;
+            background: rgba(15, 15, 35, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 15px;
+            padding: 1rem 0;
+            min-width: 220px;
+            margin-top: 10px;
+            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            animation: fadeInDown 0.3s ease;
+        }
+
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .menu ul li {
+            list-style: none;
+            padding: 1rem 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 15px;
+        }
+
+        .menu ul li:hover {
+            background: rgba(100, 255, 218, 0.1);
+            color: #64ffda;
+            transform: translateX(10px);
+        }
+
+        /* Contenedor principal */
+        .main-content {
+            padding-top: 100px;
+            min-height: 100vh;
+        }
+
+        .content-grid {
+            display: grid;
+            grid-template-columns: 1fr 380px;
+            gap: 2rem;
+            padding: 2rem;
+            max-width: 1600px;
+            margin: 0 auto;
+        }
+
+        /* Reproductor mejorado */
+        .player {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
+            transition: all 0.4s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .player::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #64ffda, #00bcd4, #3f51b5);
+            animation: shimmer 2s infinite;
+        }
+
+        @keyframes shimmer {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 1; }
+        }
+
+        .player:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 35px 100px rgba(0, 0, 0, 0.4);
+            border-color: rgba(100, 255, 218, 0.3);
+        }
+
+        .video-container {
+            position: relative;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+            background: #000;
+        }
+
+        #main-video, #video-frame {
+            width: 100%;
+            height: 450px;
+            border-radius: 15px;
+            border: none;
+        }
+
+        .video-info {
+            padding: 2rem 0 1rem;
+            text-align: center;
+        }
+
+        .video-info h2 {
+            font-size: 2rem;
+            margin-bottom: 0.8rem;
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+
+        .video-info p {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 1.1rem;
+            line-height: 1.6;
+        }
+
+        /* Lista de videos lateral */
+        .video-list {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        .video-list h3 {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 1.8rem;
+            background: linear-gradient(45deg, #3f51b5, #9c27b0);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+
+        .video-carousel {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .video-item {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 15px;
+            padding: 1.2rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .video-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.1), transparent);
+            transition: left 0.5s ease;
+        }
+
+        .video-item:hover::before {
+            left: 100%;
+        }
+
+        .video-item:hover {
+            background: rgba(255, 255, 255, 0.15);
+            transform: translateX(10px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+            border-color: rgba(100, 255, 218, 0.3);
+        }
+
+        .video-item.active {
+            background: rgba(100, 255, 218, 0.15);
+            border-color: #64ffda;
+            box-shadow: 0 10px 30px rgba(100, 255, 218, 0.3);
+        }
+
+        .video-item img {
+            width: 100%;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 10px;
+            margin-bottom: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .video-item:hover img {
+            transform: scale(1.05);
+        }
+
+        .video-item .info h4 {
+            font-size: 1.1rem;
+            margin-bottom: 0.5rem;
+            color: #fff;
+            font-weight: 600;
+        }
+
+        .video-item .info p {
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.6);
+            line-height: 1.5;
+        }
+
+        /* Scrollbar personalizada */
+        .video-list::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .video-list::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+        }
+
+        .video-list::-webkit-scrollbar-thumb {
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            border-radius: 10px;
+        }
+
+        .video-list::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(45deg, #4fc3f7, #29b6f6);
+        }
+
+        /* Responsive */
+        @media (max-width: 1200px) {
+            .content-grid {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+            
+            .video-list {
+                max-height: 400px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .banner {
+                padding: 1rem;
+                flex-wrap: wrap;
+            }
+            
+            .search-bar {
+                order: 3;
+                width: 100%;
+                margin: 1rem 0 0 0;
+                max-width: none;
+            }
+            
+            .content-grid {
+                padding: 1rem;
+            }
+            
+            .player, .video-list {
+                padding: 1.5rem;
+            }
+            
+            #main-video, #video-frame {
+                height: 300px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .banner {
+                padding: 0.8rem;
+            }
+            
+            .logo img {
+                height: 35px;
+            }
+            
+            .video-info h2 {
+                font-size: 1.5rem;
+            }
+        }
+
+        /* Efectos adicionales */
+        .play-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(100, 255, 218, 0.9);
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #0f0f23;
+            font-size: 24px;
+            opacity: 0;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+        .video-item:hover .play-icon {
+            opacity: 1;
+        }
+
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+            color: #64ffda;
+        }
+
+        .loading.active {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="banner">
+        <div class="logo">
+            <img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo">
+        </div>
+        <div class="search-bar">
+            <input type="text" placeholder="Buscar videos..." id="search-input">
+            <button onclick="buscarVideos()">Buscar</button>
+        </div>
+        <div class="menu">
+            <button></button>
+            <ul>
+                <li><i class="uix uix-user"></i> Información de Usuario</li>
+                <li><i class="uix uix-settings"></i> Configuración</li>
+                <li><i class="uix uix-logout"></i> Cerrar Sesión</li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="content-grid">
+            <div class="player">
+                <div class="video-container">
+                    <video id="main-video" controls>
+                        <source src="../files/DAPSI_ws.mp4" type="video/mp4">
+                        Tu navegador no soporta el elemento de video.
+                    </video>
+                    
+                    <iframe 
+                        id="video-frame" 
+                        style="display: none;" 
+                        src="https://www.youtube.com/embed/t__kI83_BK0?si=_pCitHfYKsk7BHFh" 
+                        title="YouTube video player" 
+                        frameborder="0" 
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        referrerpolicy="strict-origin-when-cross-origin" 
+                        allowfullscreen>
+                    </iframe>
+                    
+                    <div class="loading">
+                        <p>Cargando video...</p>
+                    </div>
+                </div>
+                
+                <div class="video-info">
+                    <h2 id="current-video-title">Video Principal SIGMA</h2>
+                    <p id="current-video-description">Selecciona un video de la lista para reproducir</p>
+                </div>
+            </div>
+
+            <div class="video-list">
+                <h3>🎬 Lista de Videos</h3>
+                <div class="video-carousel">
+                    <!-- Los videos se cargarán aquí dinámicamente -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script>
+        $(document).ready(function () {
+            // Toggle menu
+            $('.banner .menu button').click(function () {
+                $('.banner .menu ul').toggle();
+            });
+
+            // Cerrar menú al hacer click fuera
+            $(document).click(function(e) {
+                if (!$(e.target).closest('.menu').length) {
+                    $('.menu ul').hide();
+                }
+            });
+
+            // Lista de videos mejorada
+            var videos = [
+                { 
+                    "nombre": "¿Qué es SIGMA?", 
+                    "descripcion": "Introducción completa al sistema SIGMA", 
+                    "miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg", 
+                    "url": "../files/QueEsSigma.mp4",
+                    "tipo": "local"
+                },
+                { 
+                    "nombre": "App SIGMA", 
+                    "descripcion": "Funcionalidades de la aplicación SIGMA", 
+                    "miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg", 
+                    "url": "../files/AppSIGMA.mp4",
+                    "tipo": "local"
+                },
+                { 
+                    "nombre": "SIGMA OSX", 
+                    "descripcion": "Versión para macOS de SIGMA", 
+                    "miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg", 
+                    "url": "../files/SIGMA-OSX.mp4",
+                    "tipo": "local"
+                },
+                { 
+                    "nombre": "DAPSI Workspace", 
+                    "descripcion": "Espacio de trabajo DAPSI integrado", 
+                    "miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg", 
+                    "url": "../files/DAPSI_ws.mp4",
+                    "tipo": "local"
+                },
+                { 
+                    "nombre": "SIGMA Bot IA", 
+                    "descripcion": "Inteligencia artificial integrada", 
+                    "miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg", 
+                    "url": "../files/SIGMA_BOT_IA.mp4",
+                    "tipo": "local"
+                },
+                { 
+                    "nombre": "Nueva IA", 
+                    "descripcion": "Últimas actualizaciones de IA", 
+                    "miniatura": "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg", 
+                    "url": "../files/IA_NUEVA_P.mp4",
+                    "tipo": "local"
+                },
+                { 
+                    "nombre": "Tutorial YouTube", 
+                    "descripcion": "Video tutorial desde YouTube", 
+                    "miniatura": "https://i.ytimg.com/vi/t__kI83_BK0/maxresdefault.jpg", 
+                    "url": "https://www.youtube.com/embed/t__kI83_BK0?si=d6BEy237vtC5_O_r",
+                    "tipo": "youtube"
+                },
+                { 
+                    "nombre": "Demo Avanzado", 
+                    "descripcion": "Demostración avanzada de características", 
+                    "miniatura": "https://i.ytimg.com/vi/t__kI83_BK0/maxresdefault.jpg", 
+                    "url": "https://www.youtube.com/embed/t__kI83_BK0?si=oQxTNbThHroUxZ5v",
+                    "tipo": "youtube"
+                }
+            ];
+
+            var videosOriginales = [...videos]; // Copia para búsquedas
+
+            // Generar elementos de video
+            function cargarVideos(listaVideos) {
+                $('.video-carousel').empty();
+                listaVideos.forEach(function (video, index) {
+                    var icono = video.tipo === 'youtube' ? '🎥' : '📹';
+                    var elemento = `
+                    <div class="video-item" data-url="${video.url}" data-tipo="${video.tipo}" data-index="${index}">
+                        <img src="${video.miniatura}" alt="${video.nombre}" onerror="this.src='https://via.placeholder.com/300x180/333/fff?text=Video'">
+                        <div class="play-icon">▶</div>
+                        <div class="info">
+                            <h4>${icono} ${video.nombre}</h4>
+                            <p>${video.descripcion}</p>
+                        </div>
+                    </div>`;
+                    $('.video-carousel').append(elemento);
+                });
+            }
+
+            // Cargar videos inicialmente
+            cargarVideos(videos);
+
+            // Función mejorada para cambiar video
+            function cambiarVideo(url, tipo, nombre, descripcion, index) {
+                $('.loading').addClass('active');
+                $('.video-item').removeClass('active');
+                $(`.video-item[data-index="${index}"]`).addClass('active');
+                
+                $('#current-video-title').text(nombre);
+                $('#current-video-description').text(descripcion);
+
+                setTimeout(() => {
+                    if (tipo === 'youtube' || url.includes('youtube.com') || url.includes('youtu.be')) {
+                        // Convertir URL de YouTube si es necesario
+                        let embedUrl = url;
+                        if (url.includes('youtu.be/')) {
+                            const videoId = url.split('youtu.be/')[1].split('?')[0];
+                            embedUrl = `https://www.youtube.com/embed/${videoId}`;
+                        } else if (url.includes('youtube.com/watch?v=')) {
+                            const videoId = url.split('v=')[1].split('&')[0];
+                            embedUrl = `https://www.youtube.com/embed/${videoId}`;
+                        }
+                        
+                        $('#main-video').hide();
+                        $('#video-frame').show().attr('src', embedUrl);
+                    } else {
+                        $('#video-frame').hide();
+                        $('#main-video').show();
+                        $('#main-video').attr('src', url);
+                        $('#main-video')[0].load();
+                    }
+                    $('.loading').removeClass('active');
+                }, 500);
+            }
+
+            // Event listener para clicks en videos
+            $(document).on('click', '.video-item', function() {
+                const url = $(this).data('url');
+                const tipo = $(this).data('tipo');
+                const index = $(this).data('index');
+                const nombre = $(this).find('h4').text();
+                const descripcion = $(this).find('p').text();
+                
+                cambiarVideo(url, tipo, nombre, descripcion, index);
+            });
+
+            // Función de búsqueda
+            window.buscarVideos = function() {
+                const termino = $('#search-input').val().toLowerCase().trim();
+                
+                if (termino === '') {
+                    cargarVideos(videosOriginales);
+                    return;
+                }
+
+                const videosFiltrados = videosOriginales.filter(video => 
+                    video.nombre.toLowerCase().includes(termino) || 
+                    video.descripcion.toLowerCase().includes(termino)
+                );
+
+                cargarVideos(videosFiltrados);
+
+                if (videosFiltrados.length === 0) {
+                    $('.video-carousel').html('<p style="text-align: center; color: rgba(255,255,255,0.6); padding: 2rem;">No se encontraron videos que coincidan con tu búsqueda.</p>');
+                }
+            };
+
+            // Búsqueda en tiempo real
+            $('#search-input').on('input', function() {
+                clearTimeout(window.searchTimeout);
+                window.searchTimeout = setTimeout(buscarVideos, 300);
+            });
+
+            // Búsqueda con Enter
+            $('#search-input').on('keypress', function(e) {
+                if (e.which === 13) {
+                    buscarVideos();
+                }
+            });
+
+            // Marcar primer video como activo
+            $('.video-item').first().addClass('active');
+        });
+    </script>
+</body>
+
+</html>

src/views/videos.ejs

@@ -1,152 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Lista de Videos</title>
-    <!-- Uix CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
-    <!-- Slick Carousel CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
-    <link rel="stylesheet" href="../css/app_videos.css">
-</head>
-
-<body>
-    <div class="banner">
-        <div class="logo">
-            <img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="Logo">
-        </div>
-        <div class="search-bar">
-            <input type="text" placeholder="Buscar...">
-            <button></button>
-        </div>
-        <div class="menu">
-            <button></button>
-            <ul>
-                <li><i class="uix uix-user"></i> Información de Usuario</li>
-                <li><i class="uix uix-settings"></i> Configuración</li>
-                <li><i class="uix uix-logout"></i> Cerrar Sesión</li>
-            </ul>
-        </div>
-    </div>
-
-    <div class="video-list">
-        <div class="video-carousel">
-            <!-- Lista de miniaturas de videos se generará aquí -->
-        </div>
-    </div>
-
-    <div class="player">
-        <video id="main-video" width="640" height="480"  controls>
-            <source src="../files/DAPSI_ws.mp4" type="video/mp4">
-            Tu navegador no soporta el elemento de video.
-        </video>
-        
-        <iframe 
-            id="video-frame" 
-            style="display: none;" 
-            width="640" height="480" 
-            src="https://www.youtube.com/embed/t__kI83_BK0?si=_pCitHfYKsk7BHFh" 
-            title="YouTube video player" 
-            frameborder="0" 
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-            referrerpolicy="strict-origin-when-cross-origin" 
-            allowfullscreen>
-        </iframe>
-    </div>
-
-    <!-- Slick Carousel JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
-    <script>
-        $(document).ready(function () {
-            $('.video-carousel').slick({
-                slidesToShow: 4,
-                slidesToScroll: 1,
-                infinite: true,
-                speed: 500,
-                easing: 'linear',
-                draggable: true,
-                touchMove: true, // Habilita el movimiento táctil
-                prevArrow: '<button class="slick-prev">&#9664;</button>',
-                nextArrow: '<button class="slick-next">&#9654;</button>',
-                responsive: [
-                    {
-                        breakpoint: 768,
-                        settings: {
-                            slidesToShow: 3,
-                        }
-                    },
-                    {
-                        breakpoint: 480,
-                        settings: {
-                            slidesToShow: 2,
-                        }
-                    }
-                ]
-            });
-
-            // Toggle menu
-            $('.banner .menu button').click(function () {
-                $('.banner .menu ul').toggle();
-            });
-
-            // Agregar miniaturas y URL de video al carrusel
-            var videos = [
-                { "nombre": "Video 1", "descripcion": "Descripción del video 1", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/QueEsSigma.mp4" },
-                { "nombre": "Video 2", "descripcion": "Descripción del video 2", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/AppSIGMA.mp4" },
-                { "nombre": "Video 3", "descripcion": "Descripción del video 3", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/SIGMA-OSX.mp4" },
-                { "nombre": "Video 4", "descripcion": "Descripción del video 4", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/DAPSI_ws.mp4" },
-                { "nombre": "Video 5", "descripcion": "Descripción del video 5", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/SIGMA_BOT_IA.mp4" },
-                { "nombre": "Video 6", "descripcion": "Descripción del video 6", "miniatura": "https://via.placeholder.com/250x150", "url": "../files/IA_NUEVA_P.mp4" },
-                { "nombre": "Video 7", "descripcion": "Descripción del video 7", "miniatura": "https://via.placeholder.com/250x150", "url": "https://youtu.be/t__kI83_BK0?si=d6BEy237vtC5_O_r" },
-                { "nombre": "Video 8", "descripcion": "Descripción del video 8", "miniatura": "https://via.placeholder.com/250x150", "url": "https://www.youtube.com/embed/t__kI83_BK0?si=oQxTNbThHroUxZ5v" }
-            ];
-
-            // Agregar videos al carrusel
-            videos.forEach(function (video) {
-                var elemento = `
-                <div class="video-item" onclick="cambiarVideo('${video.url}')">
-                    <img src="${video.miniatura}" alt="${video.nombre}">
-                    <div class="info">
-                        <h4>${video.nombre}</h4>
-                        <p>${video.descripcion}</p>
-                    </div>
-                </div>`;
-                $('.video-carousel').slick('slickAdd', elemento);
-            });
-
-            // Reproducir video al hacer clic en un elemento del carrusel
-            /*$('.video-carousel').on('click', '.video-item', function () {
-                var videoUrl = $(this).data('url');
-                if (videoUrl.includes('youtube.com')) {
-                    $('#main-video').hide();
-                    $('#video-frame').show().attr('src', videoUrl);
-                } else {
-                    $('#video-frame').hide();
-                    $('#main-video').show().find('source').attr('src', videoUrl);
-                    $('#main-video')[0].load();
-                    $('#main-video')[0].play();
-                }
-            });*/
-        });
-        // Función para cambiar el video principal
-        function cambiarVideo(url) {
-            console.log('Cambiando video a:', url);
-            if (url.includes('youtube.com')) {
-                $('#main-video').hide();
-                $('#video-frame').show().attr('src', url);
-            } else {
-                $('#video-frame').hide();
-                $('#main-video').show();
-                $('#main-video').attr('src', url);
-                $('#main-video')[0].load();
-                $('#main-video')[0].play();
-            }
-        }
-    </script>
-</body>
-
-</html>

src/views/videos_upload.ejs

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SIGMA - Subir Video</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            min-height: 100vh;
+            color: #e0e0e0;
+            overflow-x: hidden;
+        }
+
+        .banner {
+            background: rgba(15, 15, 35, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .logo img {
+            height: 45px;
+            filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+            transition: all 0.3s ease;
+        }
+
+        .logo img:hover {
+            transform: scale(1.05);
+        }
+
+        .main-content {
+            padding-top: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 2rem;
+        }
+
+        .upload-container {
+            width: 100%;
+            max-width: 700px;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 2.5rem;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
+            transition: all 0.4s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .upload-container:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 35px 100px rgba(0, 0, 0, 0.4);
+            border-color: rgba(100, 255, 218, 0.3);
+        }
+
+        .upload-container h2 {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2rem;
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.7rem;
+            color: rgba(255, 255, 255, 0.8);
+            font-weight: 600;
+        }
+
+        .form-group input,
+        .form-group textarea,
+        .form-group select {
+            width: 100%;
+            padding: 0.9rem 1.2rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            outline: none;
+        }
+
+        .form-group textarea {
+            resize: vertical;
+            min-height: 100px;
+        }
+
+        .form-group input:focus,
+        .form-group textarea:focus,
+        .form-group select:focus {
+            border-color: #64ffda;
+            box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
+        }
+
+        .form-group select {
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right 1rem center;
+            background-size: 1em;
+        }
+
+        .form-group input[type="file"] {
+            padding: 0.5rem;
+            cursor: pointer;
+        }
+
+        .form-group input[type="file"]::-webkit-file-upload-button {
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            border: none;
+            padding: 0.7rem 1.2rem;
+            border-radius: 8px;
+            color: #0f0f23;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            margin-right: 1rem;
+        }
+
+        .form-group input[type="file"]::-webkit-file-upload-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
+        }
+
+        button[type="submit"] {
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            border: none;
+            border-radius: 10px;
+            color: #0f0f23;
+            font-size: 1.1rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 1rem;
+        }
+
+        button[type="submit"]:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 30px rgba(100, 255, 218, 0.4);
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        #previewContainer {
+            text-align: center;
+            margin-top: 1rem;
+        }
+
+        #previewImg {
+            max-width: 200px;
+            border-radius: 10px;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+        }
+
+        #statusMessage {
+            text-align: center;
+            margin-top: 1.5rem;
+            padding: 1rem;
+            border-radius: 10px;
+            font-weight: 600;
+            display: none; /* Oculto por defecto */
+            transition: all 0.3s ease;
+        }
+
+        #statusMessage.success {
+            background-color: rgba(100, 255, 218, 0.2);
+            border: 1px solid #64ffda;
+            color: #64ffda;
+            display: block;
+        }
+
+        #statusMessage.error {
+            background-color: rgba(255, 100, 100, 0.2);
+            border: 1px solid #ff6464;
+            color: #ff6464;
+            display: block;
+        }
+
+        button[type="submit"]:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="banner">
+        <div class="logo">
+            <a href="/videos"><img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo"></a>
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="upload-container">
+            <h2>
+                <i class="uix uix-cloud-upload"></i>
+                <span>Subir Contenido Multimedia</span>
+            </h2>
+            <form id="uploadForm" action="/videos_upload" method="POST" enctype="multipart/form-data">
+                <div class="form-group">
+                    <label for="nombre">Nombre del Video</label>
+                    <input type="text" id="nombre" name="nombre" required>
+                </div>
+                <div class="form-group">
+                    <label for="descripcion">Descripción</label>
+                    <textarea id="descripcion" name="descripcion" required></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="origen">Origen del Contenido</label>
+                    <select id="origen" name="origen" required>
+                        <option value="Local" selected>Local (Subir archivo)</option>
+                        <option value="YouTube">YouTube</option>
+                        <option value="Vimeo">Vimeo</option>
+                        <option value="Twitch">Twitch</option>
+                    </select>
+                </div>
+                <div class="form-group hidden" id="urlGroup">
+                    <label for="url">URL del Video</label>
+                    <input type="url" id="url" name="url" placeholder="https://www.youtube.com/watch?v=...">
+                </div>
+                <div class="form-group" id="fileGroup">
+                    <label for="videoUpload">Seleccionar Archivo de Video</label>
+                    <input type="file" id="videoUpload" name="archivo" accept="video/*">
+                </div>
+                <div id="previewContainer" class="hidden">
+                    <img id="previewImg" src="" alt="Miniatura">
+                </div>
+                <div class="form-group">
+                    <button type="submit">Subir Video</button>
+                </div>
+            </form>
+            <div id="statusMessage"></div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const origenSelect = document.getElementById('origen');
+            const urlGroup = document.getElementById('urlGroup');
+            const fileGroup = document.getElementById('fileGroup');
+            const urlInput = document.getElementById('url');
+            const fileInput = document.getElementById('videoUpload');
+            const uploadForm = document.getElementById('uploadForm');
+            const statusMessage = document.getElementById('statusMessage');
+            const submitButton = uploadForm.querySelector('button[type="submit"]');
+
+            function toggleInputs() {
+                const selectedOrigin = origenSelect.value;
+                if (selectedOrigin === 'Local') {
+                    urlGroup.classList.add('hidden');
+                    fileGroup.classList.remove('hidden');
+                    urlInput.required = false;
+                    fileInput.required = true;
+                } else {
+                    urlGroup.classList.remove('hidden');
+                    fileGroup.classList.add('hidden');
+                    urlInput.required = true;
+                    fileInput.required = false;
+                }
+            }
+
+            origenSelect.addEventListener('change', toggleInputs);
+
+            // Initial state
+            toggleInputs();
+
+            uploadForm.addEventListener('submit', async function (event) {
+                event.preventDefault(); // Prevenir el envío tradicional del formulario
+
+                submitButton.disabled = true;
+                submitButton.textContent = 'Subiendo...';
+                statusMessage.className = '';
+                statusMessage.textContent = '';
+
+                const formData = new FormData(uploadForm);
+
+                try {
+                    const response = await fetch('/videos_upload', {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    const result = await response.json();
+
+                    if (response.ok && result.success) {
+                        statusMessage.className = 'success';
+                        statusMessage.textContent = result.message + '. Redirigiendo a la lista de videos...';
+                        uploadForm.reset();
+                        setTimeout(() => {
+                            window.location.href = '/videos';
+                        }, 2000); // Redirige después de 2 segundos para que el usuario vea el mensaje.
+                    } else {
+                        statusMessage.className = 'error';
+                        statusMessage.textContent = result.message || 'Ocurrió un error desconocido.';
+                        submitButton.disabled = false;
+                        submitButton.textContent = 'Subir Video';
+                    }
+                } catch (error) {
+                    console.error('Error en el fetch:', error);
+                    statusMessage.className = 'error';
+                    statusMessage.textContent = 'Error de conexión. No se pudo contactar al servidor.';
+                    submitButton.disabled = false;
+                    submitButton.textContent = 'Subir Video';
+                }
+            });
+        });
+    </script>
+</body>
+
+</html>

src/views/videos_upload_v2.ejs

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SIGMA - Subir Video</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            min-height: 100vh;
+            color: #e0e0e0;
+            overflow-x: hidden;
+        }
+
+        .banner {
+            background: rgba(15, 15, 35, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .logo img {
+            height: 45px;
+            filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+            transition: all 0.3s ease;
+        }
+
+        .logo img:hover {
+            transform: scale(1.05);
+        }
+
+        .main-content {
+            padding-top: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 2rem;
+        }
+
+        .upload-container {
+            width: 100%;
+            max-width: 700px;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 2.5rem;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
+            transition: all 0.4s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .upload-container:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 35px 100px rgba(0, 0, 0, 0.4);
+            border-color: rgba(100, 255, 218, 0.3);
+        }
+
+        .upload-container h2 {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2rem;
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.7rem;
+            color: rgba(255, 255, 255, 0.8);
+            font-weight: 600;
+        }
+
+        .form-group input,
+        .form-group textarea,
+        .form-group select {
+            width: 100%;
+            padding: 0.9rem 1.2rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            outline: none;
+        }
+
+        .form-group textarea {
+            resize: vertical;
+            min-height: 100px;
+        }
+
+        .form-group input:focus,
+        .form-group textarea:focus,
+        .form-group select:focus {
+            border-color: #64ffda;
+            box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
+        }
+
+        .form-group select {
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right 1rem center;
+            background-size: 1em;
+        }
+
+        .form-group input[type="file"] {
+            padding: 0.5rem;
+            cursor: pointer;
+        }
+
+        .form-group input[type="file"]::-webkit-file-upload-button {
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            border: none;
+            padding: 0.7rem 1.2rem;
+            border-radius: 8px;
+            color: #0f0f23;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            margin-right: 1rem;
+        }
+
+        .form-group input[type="file"]::-webkit-file-upload-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
+        }
+
+        button[type="submit"] {
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(45deg, #64ffda, #00bcd4);
+            border: none;
+            border-radius: 10px;
+            color: #0f0f23;
+            font-size: 1.1rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 1rem;
+        }
+
+        button[type="submit"]:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 30px rgba(100, 255, 218, 0.4);
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        #previewContainer {
+            text-align: center;
+            margin-top: 1rem;
+        }
+
+        #previewImg {
+            max-width: 200px;
+            border-radius: 10px;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+        }
+
+        #statusMessage {
+            text-align: center;
+            margin-top: 1.5rem;
+            padding: 1rem;
+            border-radius: 10px;
+            font-weight: 600;
+            display: none; /* Oculto por defecto */
+            transition: all 0.3s ease;
+        }
+
+        #statusMessage.success {
+            background-color: rgba(100, 255, 218, 0.2);
+            border: 1px solid #64ffda;
+            color: #64ffda;
+            display: block;
+        }
+
+        #statusMessage.error {
+            background-color: rgba(255, 100, 100, 0.2);
+            border: 1px solid #ff6464;
+            color: #ff6464;
+            display: block;
+        }
+
+        button[type="submit"]:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="banner">
+        <div class="logo">
+            <a href="/videos"><img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo"></a>
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="upload-container">
+            <h2>
+                <i class="uix uix-cloud-upload"></i>
+                <span>Subir Contenido Multimedia</span>
+            </h2>
+            <form id="uploadForm" action="/videos_upload" method="POST" enctype="multipart/form-data">
+                <div class="form-group">
+                    <label for="nombre">Nombre del Video</label>
+                    <input type="text" id="nombre" name="nombre" required>
+                </div>
+                <div class="form-group">
+                    <label for="descripcion">Descripción</label>
+                    <textarea id="descripcion" name="descripcion" required></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="origen">Origen del Contenido</label>
+                    <select id="origen" name="origen" required>
+                        <option value="Local" selected>Local (Subir archivo)</option>
+                        <option value="YouTube">YouTube</option>
+                        <option value="Vimeo">Vimeo</option>
+                        <option value="Twitch">Twitch</option>
+                    </select>
+                </div>
+                <div class="form-group hidden" id="urlGroup">
+                    <label for="url">URL del Video</label>
+                    <input type="url" id="url" name="url" placeholder="https://www.youtube.com/watch?v=...">
+                </div>
+                <div class="form-group" id="fileGroup">
+                    <label for="videoUpload">Seleccionar Archivo de Video</label>
+                    <input type="file" id="videoUpload" name="archivo" accept="video/*">
+                </div>
+                <div id="previewContainer" class="hidden">
+                    <img id="previewImg" src="" alt="Miniatura">
+                </div>
+                <div class="form-group">
+                    <button type="submit">Subir Video</button>
+                </div>
+            </form>
+            <div id="statusMessage"></div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const origenSelect = document.getElementById('origen');
+            const urlGroup = document.getElementById('urlGroup');
+            const fileGroup = document.getElementById('fileGroup');
+            const urlInput = document.getElementById('url');
+            const fileInput = document.getElementById('videoUpload');
+            const uploadForm = document.getElementById('uploadForm');
+            const statusMessage = document.getElementById('statusMessage');
+            const submitButton = uploadForm.querySelector('button[type="submit"]');
+
+            function toggleInputs() {
+                const selectedOrigin = origenSelect.value;
+                if (selectedOrigin === 'Local') {
+                    urlGroup.classList.add('hidden');
+                    fileGroup.classList.remove('hidden');
+                    urlInput.required = false;
+                    fileInput.required = true;
+                } else {
+                    urlGroup.classList.remove('hidden');
+                    fileGroup.classList.add('hidden');
+                    urlInput.required = true;
+                    fileInput.required = false;
+                }
+            }
+
+            origenSelect.addEventListener('change', toggleInputs);
+
+            // Initial state
+            toggleInputs();
+
+            uploadForm.addEventListener('submit', async function (event) {
+                event.preventDefault(); // Prevenir el envío tradicional del formulario
+
+                submitButton.disabled = true;
+                submitButton.textContent = 'Subiendo...';
+                statusMessage.className = '';
+                statusMessage.textContent = '';
+
+                const formData = new FormData(uploadForm);
+
+                try {
+                    const response = await fetch('/videos_upload', {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    const result = await response.json();
+
+                    if (response.ok && result.success) {
+                        statusMessage.className = 'success';
+                        statusMessage.textContent = result.message + '. Redirigiendo a la lista de videos...';
+                        uploadForm.reset();
+                        setTimeout(() => {
+                            window.location.href = '/videos';
+                        }, 2000); // Redirige después de 2 segundos
+                    } else {
+                        statusMessage.className = 'error';
+                        statusMessage.textContent = result.message || 'Ocurrió un error desconocido.';
+                        submitButton.disabled = false;
+                        submitButton.textContent = 'Subir Video';
+                    }
+                } catch (error) {
+                    console.error('Error en el fetch:', error);
+                    statusMessage.className = 'error';
+                    statusMessage.textContent = 'Error de conexión. No se pudo contactar al servidor.';
+                    submitButton.disabled = false;
+                    submitButton.textContent = 'Subir Video';
+                }
+            });
+        });
+    </script>
+</body>
+
+</html>

src/views/videos_v2.ejs

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SIGMA - Galería de Videos (V2)</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            color: #e0e0e0;
+            margin: 0;
+        }
+
+        .banner {
+            background: rgba(15, 15, 35, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
+
+        .logo img { height: 45px; }
+        .main-content { padding: 2rem; }
+        .main-content h2 {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2rem;
+            color: #64ffda;
+        }
+
+        .video-gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .video-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 15px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .video-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+            border-color: #64ffda;
+        }
+
+        .thumbnail {
+            width: 100%;
+            height: 180px;
+            background-color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            color: #64ffda;
+        }
+
+        .thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .video-info {
+            padding: 1rem;
+        }
+
+        .video-info h3 {
+            margin: 0 0 0.5rem 0;
+            font-size: 1.1rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .video-info p {
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.7);
+            height: 40px;
+            overflow: hidden;
+        }
+
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        .modal-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .modal-content {
+            background: #1a1a2e;
+            padding: 1rem;
+            border-radius: 15px;
+            width: 90%;
+            max-width: 900px;
+            position: relative;
+        }
+
+        .modal-close {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            background: #64ffda;
+            color: #0f0f23;
+            border: none;
+            border-radius: 50%;
+            width: 35px;
+            height: 35px;
+            font-size: 1.5rem;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #videoPlayer {
+            width: 100%;
+            border-radius: 10px;
+        }
+
+        .error-message, .empty-message {
+            text-align: center;
+            font-size: 1.2rem;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 15px;
+        }
+        .empty-message a {
+            color: #64ffda;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="banner">
+        <div class="logo">
+            <a href="/videos"><img src="https://sigmac.app/wp-content/uploads/2023/10/SIGMA64.png" alt="SIGMA Logo"></a>
+        </div>
+        <a href="/videos_upload" class="uix-button uix-button--primary">Subir Video (V2)</a>
+    </div>
+
+    <div class="main-content">
+        <h2>Galería de Videos (V2 - Base de Datos)</h2>
+        <% if (error) { %>
+            <p class="error-message"><i class="uix uix-exclamation-triangle"></i> <%= error %></p>
+        <% } else if (!videos || videos.length === 0) { %>
+            <p class="empty-message">No hay videos disponibles en la base de datos. <a href="/videos_upload">¡Sube uno ahora!</a></p>
+        <% } else { %>
+            <div class="video-gallery">
+                <% videos.forEach(video => { %>
+                    <div class="video-card" data-video-url="<%= video.video_path_url %>" data-video-name="<%= video.video_nombre %>" data-video-origin="<%= video.video_origen %>">
+                        <div class="thumbnail">
+                            <% if (video.video_origen === 'Local') { %>
+                                <i class="uix uix-film"></i>
+                            <% } else if (video.video_origen === 'YouTube') { %>
+                                <i class="uix uix-youtube"></i>
+                            <% } else { %>
+                                <i class="uix uix-link"></i>
+                            <% } %>
+                        </div>
+                        <div class="video-info">
+                            <h3><%= video.video_nombre %></h3>
+                            <p><%= video.video_descripcion %></p>
+                        </div>
+                    </div>
+                <% }); %>
+            </div>
+        <% } %>
+    </div>
+
+    <div class="modal-overlay" id="videoModal">
+        <div class="modal-content">
+            <button class="modal-close" id="closeModal">&times;</button>
+            <div id="playerContainer"></div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const videoCards = document.querySelectorAll('.video-card');
+            const modal = document.getElementById('videoModal');
+            const playerContainer = document.getElementById('playerContainer');
+            const closeModal = document.getElementById('closeModal');
+
+            videoCards.forEach(card => {
+                card.addEventListener('click', () => {
+                    const videoUrl = card.dataset.videoUrl;
+                    const videoOrigin = card.dataset.videoOrigin;
+                    playerContainer.innerHTML = ''; // Limpiar contenedor
+
+                    if (videoOrigin === 'Local') {
+                        playerContainer.innerHTML = `<video id="videoPlayer" width="100%" controls autoplay src="${videoUrl}"></video>`;
+                    } else {
+                        // Para YouTube, Vimeo, etc., usamos un iframe
+                        // Nota: Esto requiere que las URLs sean de tipo "embed"
+                        // Se necesitaría una lógica más avanzada para convertir URLs normales a embed.
+                        let embedUrl = videoUrl;
+                        if (videoOrigin === 'YouTube' && videoUrl.includes('watch?v=')) {
+                            const videoId = new URL(videoUrl).searchParams.get('v');
+                            embedUrl = `https://www.youtube.com/embed/${videoId}`;
+                        }
+                        playerContainer.innerHTML = `<iframe width="100%" height="500" src="${embedUrl}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
+                    }
+                    modal.classList.add('active');
+                });
+            });
+
+            const closePlayer = () => {
+                modal.classList.remove('active');
+                playerContainer.innerHTML = ''; // Detener la reproducción al limpiar el contenedor
+            };
+
+            closeModal.addEventListener('click', closePlayer);
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    closePlayer();
+                }
+            });
+        });
+    </script>
+</body>
+
+</html>