mejoras en galeria de videos
This commit is contained in:
Pablinux
135
package-lock.json
generated
135
package-lock.json
generated
@@ -16,6 +16,8 @@
|
||||
"express-fileupload": "^1.3.1",
|
||||
"express-myconnection": "^1.0.4",
|
||||
"express-session": "^1.17.3",
|
||||
"ffmpeg-static": "^5.2.0",
|
||||
"fluent-ffmpeg": "^2.1.3",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"morgan": "^1.10.0",
|
||||
"mysql": "^2.18.1",
|
||||
@@ -146,6 +148,20 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@derhuerst/http-basic": {
|
||||
"version": "8.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@derhuerst/http-basic/-/http-basic-8.2.4.tgz",
|
||||
"integrity": "sha512-F9rL9k9Xjf5blCz8HsJRO4diy111cayL2vkY2XE4r4t3n0yPXVYy3KD3nJ1qbrSn9743UWSXH4IwuCa/HWlGFw==",
|
||||
"dependencies": {
|
||||
"caseless": "^0.12.0",
|
||||
"concat-stream": "^2.0.0",
|
||||
"http-response-object": "^3.0.1",
|
||||
"parse-cache-control": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
|
||||
@@ -380,7 +396,6 @@
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
|
||||
"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"debug": "4"
|
||||
},
|
||||
@@ -392,7 +407,6 @@
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
|
||||
"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
},
|
||||
@@ -408,8 +422,7 @@
|
||||
"node_modules/agent-base/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
@@ -745,6 +758,11 @@
|
||||
"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
|
||||
"integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
|
||||
},
|
||||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
|
||||
},
|
||||
"node_modules/busboy": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
|
||||
@@ -804,6 +822,11 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/caseless": {
|
||||
"version": "0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
|
||||
"integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
@@ -901,6 +924,33 @@
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
|
||||
},
|
||||
"node_modules/concat-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
|
||||
"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
|
||||
"engines": [
|
||||
"node >= 6.0"
|
||||
],
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"inherits": "^2.0.3",
|
||||
"readable-stream": "^3.0.2",
|
||||
"typedarray": "^0.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-stream/node_modules/readable-stream": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
"util-deprecate": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -1453,6 +1503,21 @@
|
||||
"pend": "~1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ffmpeg-static": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ffmpeg-static/-/ffmpeg-static-5.2.0.tgz",
|
||||
"integrity": "sha512-WrM7kLW+do9HLr+H6tk7LzQ7kPqbAgLjdzNE32+u3Ff11gXt9Kkkd2nusGFrlWMIe+XaA97t+I8JS7sZIrvRgA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@derhuerst/http-basic": "^8.2.0",
|
||||
"env-paths": "^2.2.0",
|
||||
"https-proxy-agent": "^5.0.0",
|
||||
"progress": "^2.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/filelist": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
|
||||
@@ -1509,6 +1574,24 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/fluent-ffmpeg": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fluent-ffmpeg/-/fluent-ffmpeg-2.1.3.tgz",
|
||||
"integrity": "sha512-Be3narBNt2s6bsaqP6Jzq91heDgOEaDCJAXcE3qcma/EJBSy5FB4cvO31XBInuAuKBx8Kptf8dkhjK0IOru39Q==",
|
||||
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
|
||||
"dependencies": {
|
||||
"async": "^0.2.9",
|
||||
"which": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/fluent-ffmpeg/node_modules/async": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
|
||||
"integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@@ -1852,11 +1935,23 @@
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/http-response-object": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/http-response-object/-/http-response-object-3.0.2.tgz",
|
||||
"integrity": "sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==",
|
||||
"dependencies": {
|
||||
"@types/node": "^10.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/http-response-object/node_modules/@types/node": {
|
||||
"version": "10.17.60",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz",
|
||||
"integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw=="
|
||||
},
|
||||
"node_modules/https-proxy-agent": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
|
||||
"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"agent-base": "6",
|
||||
"debug": "4"
|
||||
@@ -1869,7 +1964,6 @@
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
|
||||
"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
},
|
||||
@@ -1885,8 +1979,7 @@
|
||||
"node_modules/https-proxy-agent/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
@@ -2083,6 +2176,11 @@
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
|
||||
},
|
||||
"node_modules/isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
|
||||
},
|
||||
"node_modules/jake": {
|
||||
"version": "10.9.1",
|
||||
"resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz",
|
||||
@@ -2827,6 +2925,11 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-cache-control": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
|
||||
"integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg=="
|
||||
},
|
||||
"node_modules/parse-json": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
|
||||
@@ -3980,6 +4083,11 @@
|
||||
"resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
|
||||
"integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg=="
|
||||
},
|
||||
"node_modules/typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
|
||||
},
|
||||
"node_modules/typegram": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/typegram/-/typegram-3.12.0.tgz",
|
||||
@@ -4080,6 +4188,17 @@
|
||||
"webidl-conversions": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
|
||||
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
|
||||
"dependencies": {
|
||||
"isexe": "^2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"which": "bin/which"
|
||||
}
|
||||
},
|
||||
"node_modules/wrap-ansi": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
|
||||
@@ -25,6 +25,8 @@
|
||||
"express-fileupload": "^1.3.1",
|
||||
"express-myconnection": "^1.0.4",
|
||||
"express-session": "^1.17.3",
|
||||
"ffmpeg-static": "^5.2.0",
|
||||
"fluent-ffmpeg": "^2.1.3",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"morgan": "^1.10.0",
|
||||
"mysql": "^2.18.1",
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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 });
|
||||
|
||||
181
src/controladores/controlador_videos.js
Normal file
181
src/controladores/controlador_videos.js
Normal file
@@ -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
|
||||
@@ -5,6 +5,7 @@ body {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -17,19 +18,23 @@ body {
|
||||
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;
|
||||
@@ -39,6 +44,7 @@ body {
|
||||
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;
|
||||
@@ -47,9 +53,11 @@ body {
|
||||
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;
|
||||
@@ -59,6 +67,7 @@ body {
|
||||
cursor: pointer;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.banner .menu ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -72,28 +81,35 @@ body {
|
||||
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;
|
||||
@@ -108,19 +124,23 @@ body {
|
||||
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%;
|
||||
@@ -128,6 +148,7 @@ body {
|
||||
border: 2px solid #444;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
width: 40px;
|
||||
@@ -142,17 +163,21 @@ body {
|
||||
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;
|
||||
|
||||
@@ -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.
|
||||
});
|
||||
|
||||
|
||||
BIN
src/public/videos/98b17158-0fe4-4833-b801-e2e42e33823a.mp4
Normal file
BIN
src/public/videos/98b17158-0fe4-4833-b801-e2e42e33823a.mp4
Normal file
Binary file not shown.
BIN
src/public/videos/fef1bbca-8802-4bcd-bcc7-070fc4a2e9e3.mp4
Normal file
BIN
src/public/videos/fef1bbca-8802-4bcd-bcc7-070fc4a2e9e3.mp4
Normal file
Binary file not shown.
@@ -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;
|
||||
720
src/views/video_v1.ejs
Normal file
720
src/views/video_v1.ejs
Normal file
@@ -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>
|
||||
@@ -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">◀</button>',
|
||||
nextArrow: '<button class="slick-next">▶</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>
|
||||
349
src/views/videos_upload.ejs
Normal file
349
src/views/videos_upload.ejs
Normal file
@@ -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>
|
||||
349
src/views/videos_upload_v2.ejs
Normal file
349
src/views/videos_upload_v2.ejs
Normal file
@@ -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>
|
||||
253
src/views/videos_v2.ejs
Normal file
253
src/views/videos_v2.ejs
Normal file
@@ -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">×</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>
|
||||
Reference in New Issue
Block a user