creacion de midleware seedtest, videos and upload
This commit is contained in:
Pablinux
@@ -24,4 +24,20 @@ controlador.user = (req, res) => {
|
||||
});
|
||||
}
|
||||
|
||||
//test de velocidad html
|
||||
controlador.speedtest = (req, res) => {
|
||||
//res.render('speedtest');
|
||||
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')
|
||||
};
|
||||
|
||||
module.exports = controlador;
|
||||
@@ -17,6 +17,21 @@ controlador.upload = (req, res) => {
|
||||
});
|
||||
}
|
||||
};
|
||||
controlador.upload_video = (req, res) => {
|
||||
if (!req.files || Object.keys(req.files).lenght === 0) {
|
||||
return res.status(400).send({ message: 'archivos no cargados' });
|
||||
} else {
|
||||
const file = req.files.file_toUpload;
|
||||
const path = req.app.locals.dir.path_dir + '/public/videos/' + file.name;
|
||||
console.log(path);
|
||||
file.mv(path, (err) => {
|
||||
if (err) {
|
||||
return res.status(500).send(err);
|
||||
}
|
||||
return res.send({ status: "success", path: path });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//ruta actual
|
||||
const procesarPath = (path) => {
|
||||
|
||||
160
src/public/css/app_videos.css
Normal file
160
src/public/css/app_videos.css
Normal file
@@ -0,0 +1,160 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
71
src/public/css/app_videos_upload.css
Normal file
71
src/public/css/app_videos_upload.css
Normal file
@@ -0,0 +1,71 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #1f1f1f;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.form-group button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #ff5722;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group button:hover {
|
||||
background-color: #e64a19;
|
||||
}
|
||||
|
||||
.form-group img {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#urlGroup {
|
||||
display: none;
|
||||
}
|
||||
99
src/public/css/login.css
Normal file
99
src/public/css/login.css
Normal file
@@ -0,0 +1,99 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif,sigma_tipografia;
|
||||
}
|
||||
body{
|
||||
/*background: #084C6D;*/
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: #1e293b;
|
||||
}
|
||||
@font-face {
|
||||
font-family: sigma_tipografia;
|
||||
src: url(../tipografias/sigma_font.ttf) format('truetype'), url(../tipografias/sigma_font.otf) format('truetype');
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.login-page{
|
||||
background-color: #0a2938;
|
||||
}
|
||||
.login-logo a, .register-logo a{
|
||||
color: #b5daff
|
||||
}
|
||||
.nom_app{
|
||||
font-family: sigma_tipografia;
|
||||
}
|
||||
.login-logo{
|
||||
margin-top: 5px;
|
||||
font-size:32px;
|
||||
font-family: sigma_tipografia;
|
||||
}
|
||||
.login-box-msg{
|
||||
font-family: 'SIGMA-FONT', sigma_font, sigma_tipografia;
|
||||
}
|
||||
|
||||
.box{
|
||||
position: relative;
|
||||
width: 380px;
|
||||
height: 420px;
|
||||
background-color: #1c1c1c;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 370px;
|
||||
height: 420px;
|
||||
background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);
|
||||
transform-origin: bottom right;
|
||||
animation: animar 6s linear infinite;
|
||||
}
|
||||
|
||||
.box::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 370px;
|
||||
height: 420px;
|
||||
background: linear-gradient(0deg,transparent,#45ff74,#45f3ff);
|
||||
transform-origin: bottom right;
|
||||
animation: animar 6s linear infinite;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
@keyframes animar{
|
||||
0%{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.form-box {
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
background: #28292d;
|
||||
z-index: 10;
|
||||
}
|
||||
.login-box{
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
background: #28292d;
|
||||
z-index: 10;
|
||||
width: 99%;
|
||||
margin-top: 0rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.footer a{
|
||||
margin-left: 30px;
|
||||
}
|
||||
62
src/public/css/speedtest.css
Normal file
62
src/public/css/speedtest.css
Normal file
@@ -0,0 +1,62 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f4f4f4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.btn-measure {
|
||||
padding: 10px 20px;
|
||||
background: #28a745;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-measure:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 4px solid #007bff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 20px auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
BIN
src/public/img/sigma_cloud64.png
Normal file
BIN
src/public/img/sigma_cloud64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/public/img/sigma_cloud_b64.png
Normal file
BIN
src/public/img/sigma_cloud_b64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/public/img/sigma_cloud_w64.png
Normal file
BIN
src/public/img/sigma_cloud_w64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
110
src/public/js/app_videos_upload.js
Normal file
110
src/public/js/app_videos_upload.js
Normal file
@@ -0,0 +1,110 @@
|
||||
document.getElementById('origen').addEventListener('change', function () {
|
||||
const origen = this.value;
|
||||
const urlGroup = document.getElementById('urlGroup');
|
||||
const fileGroup = document.getElementById('fileGroup');
|
||||
const urlInput = document.getElementById('url');
|
||||
const fileInput = document.getElementById('videoUpload');
|
||||
const previewImg = document.getElementById('previewImg');
|
||||
|
||||
if (origen === 'Local') {
|
||||
fileGroup.style.display = 'block';
|
||||
urlGroup.style.display = 'none';
|
||||
urlInput.required = false;
|
||||
fileInput.required = true;
|
||||
} else {
|
||||
fileGroup.style.display = 'none';
|
||||
urlGroup.style.display = 'block';
|
||||
urlInput.required = true;
|
||||
fileInput.required = false;
|
||||
//previewImg.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('getThumbnailBtn').addEventListener('click', function () {
|
||||
const origen = document.getElementById('origen').value;
|
||||
if (origen === 'Local') {
|
||||
obtenerMiniaturaLocal();
|
||||
} else if (origen === 'YouTube') {
|
||||
obtenerMiniaturaYouTube();
|
||||
}
|
||||
else if (origen === 'Vimeo') {
|
||||
obtenerMiniaturaVimeo();
|
||||
}
|
||||
});
|
||||
|
||||
function obtenerMiniaturaLocal() {
|
||||
const fileInput = document.getElementById('videoUpload');
|
||||
const file = fileInput.files[0];
|
||||
const previewImg = document.getElementById('previewImg');
|
||||
|
||||
if (file) {
|
||||
const videoElement = document.createElement('video');
|
||||
videoElement.src = URL.createObjectURL(file);
|
||||
videoElement.muted = true;
|
||||
|
||||
videoElement.addEventListener('loadeddata', function () {
|
||||
videoElement.currentTime = videoElement.duration / 2;
|
||||
});
|
||||
|
||||
videoElement.addEventListener('seeked', function () {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = videoElement.videoWidth / 4;
|
||||
canvas.height = videoElement.videoHeight / 4;
|
||||
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
previewImg.src = canvas.toDataURL();
|
||||
previewImg.style.display = 'block';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function obtenerMiniaturaYouTube() {
|
||||
const url = document.getElementById('url').value;
|
||||
const previewImg = document.getElementById('previewUrl');
|
||||
var thumbnailUrl = 'https://img.youtube.com/vi/' + extractYouTubeVideoId(url) + '/0.jpg';; // Implement this function based on the source
|
||||
previewImg.src = thumbnailUrl;
|
||||
previewImg.style.display = 'block';
|
||||
}
|
||||
function obtenerMiniaturaVimeo() {
|
||||
const url = document.getElementById('url').value;
|
||||
const previewImg = document.getElementById('previewUrl');
|
||||
var thumbnailUrl = 'https://vumbnail.com/' + extractVimeoVideoId(url) + '.jpg'; // Implement this function based on the source
|
||||
|
||||
previewImg.src = thumbnailUrl;
|
||||
previewImg.style.display = 'block';
|
||||
}
|
||||
|
||||
function extractYouTubeVideoId(url) {
|
||||
var match = url.match(/(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
function extractVimeoVideoId(url) {
|
||||
var match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
document.getElementById('uploadForm').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const origen = document.getElementById('origen').value;
|
||||
let urlOrFile;
|
||||
if (origen === 'Local') {
|
||||
urlOrFile = document.getElementById('videoUpload').files[0];
|
||||
} else {
|
||||
urlOrFile = document.getElementById('url').value;
|
||||
}
|
||||
|
||||
const videoData = {
|
||||
nombre: document.getElementById('nombre').value,
|
||||
descripcion: document.getElementById('descripcion').value,
|
||||
url: urlOrFile,
|
||||
miniatura: origen === 'Local' ? document.getElementById('previewImg').src : document.getElementById('previewUrl').src,
|
||||
tipo: document.getElementById('tipo').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.
|
||||
});
|
||||
284
src/public/plantilla_html/rep_video.html
Normal file
284
src/public/plantilla_html/rep_video.html
Normal file
@@ -0,0 +1,284 @@
|
||||
<!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">
|
||||
<style>
|
||||
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: 40px;
|
||||
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: 250px;
|
||||
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 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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</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" controls>
|
||||
<source src="https://74cd-181-198-143-71.ngrok-free.app/files/DAPSI_ws.mp4" type="video/mp4">
|
||||
Tu navegador no soporta el elemento de video.
|
||||
</video>
|
||||
</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": "https://74cd-181-198-143-71.ngrok-free.app/files/QueEsSigma.mp4" },
|
||||
{ "nombre": "Video 2", "descripcion": "Descripción del video 2", "miniatura": "https://via.placeholder.com/250x150", "url": "https://74cd-181-198-143-71.ngrok-free.app/files/AppSIGMA.mp4" },
|
||||
{ "nombre": "Video 3", "descripcion": "Descripción del video 3", "miniatura": "https://via.placeholder.com/250x150", "url": "https://74cd-181-198-143-71.ngrok-free.app/files/SIGMA-OSX.mp4" },
|
||||
{ "nombre": "Video 4", "descripcion": "Descripción del video 4", "miniatura": "https://via.placeholder.com/250x150", "url": "https://74cd-181-198-143-71.ngrok-free.app/files/DAPSI_ws.mp4" },
|
||||
{ "nombre": "Video 5", "descripcion": "Descripción del video 5", "miniatura": "https://via.placeholder.com/250x150", "url": "https://74cd-181-198-143-71.ngrok-free.app/files/SIGMA_BOT_IA.mp4"},
|
||||
{ "nombre": "Video 6", "descripcion": "Descripción del video 6", "miniatura": "https://via.placeholder.com/250x150", "url": "https://74cd-181-198-143-71.ngrok-free.app/files/IA_NUEVA_P.mp4" },
|
||||
{ "nombre": "Video 7", "descripcion": "Descripción del video 7", "miniatura": "https://via.placeholder.com/250x150", "url": "https://www.youtube.com/watch?v=6eR8Nt_TPEU&t=234s" },
|
||||
{ "nombre": "Video 8", "descripcion": "Descripción del video 8", "miniatura": "https://via.placeholder.com/250x150", "url": "https://74cd-181-198-143-71.ngrok-free.app/files/IA_NUEVA_P.mp4" }
|
||||
];
|
||||
|
||||
// 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 videoSrc = videos[$(this).index()].url;
|
||||
$('#main-video').attr('src', videoSrc);
|
||||
$('#main-video')[0].load();
|
||||
$('#main-video')[0].play();
|
||||
});*/
|
||||
});
|
||||
// Función para cambiar el video principal
|
||||
function cambiarVideo(url) {
|
||||
console.log('Cambiando video a:', url);
|
||||
$('#main-video').attr('src', url);
|
||||
$('#main-video')[0].load();
|
||||
$('#main-video')[0].play();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
46
src/public/plantilla_html/speedtest.html
Normal file
46
src/public/plantilla_html/speedtest.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Medidor de Ancho de Banda</title>
|
||||
<link rel="stylesheet" href="../css/speedtest.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Medidor de Ancho de Banda</h2>
|
||||
<button class="btn-measure" onclick="measureBandwidth()">Iniciar Medición</button>
|
||||
<div class="loader" id="loader"></div>
|
||||
<div class="result" id="result">---</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function measureBandwidth() {
|
||||
const loader = document.getElementById('loader');
|
||||
const result = document.getElementById('result');
|
||||
result.innerHTML = '---';
|
||||
loader.style.display = 'block';
|
||||
|
||||
const startTime = new Date().getTime();
|
||||
const image = new Image();
|
||||
|
||||
image.onload = function() {
|
||||
const endTime = new Date().getTime();
|
||||
const duration = (endTime - startTime) / 1000; // en segundos
|
||||
const imageSize = 500000; // tamaño de la imagen en bytes (ejemplo: 500KB)
|
||||
const bandwidth = (imageSize * 8) / (duration * 1024 * 1024); // en Mbps
|
||||
loader.style.display = 'none';
|
||||
result.innerHTML = bandwidth.toFixed(2) + ' Mbps';
|
||||
};
|
||||
|
||||
image.onerror = function() {
|
||||
loader.style.display = 'none';
|
||||
result.innerHTML = 'Error en la medición';
|
||||
};
|
||||
|
||||
// Cargar una imagen desde un servidor de alta disponibilidad
|
||||
image.src = 'http://localhost:3001/files/16475382589308831290985654719674.jpg?t=' + startTime;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
244
src/public/plantilla_html/subir_videos.html
Normal file
244
src/public/plantilla_html/subir_videos.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Subir Video</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #1f1f1f;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.form-group button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #ff5722;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group button:hover {
|
||||
background-color: #e64a19;
|
||||
}
|
||||
|
||||
.form-group img {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#urlGroup {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Subir Video</h2>
|
||||
<form id="uploadForm">
|
||||
<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</label>
|
||||
<select id="origen" name="origen" required>
|
||||
<option value="Local">Local</option>
|
||||
<option value="YouTube">YouTube</option>
|
||||
<option value="Vimeo">Vimeo</option>
|
||||
<option value="Twitch">Twitch</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="urlGroup">
|
||||
<label for="url">URL del Video</label>
|
||||
<input type="url" id="url" name="url" placeholder="https://">
|
||||
<img id="previewUrl" src="" alt="Miniatura" style="display:none;">
|
||||
</div>
|
||||
<div class="form-group" id="fileGroup">
|
||||
<label for="videoUpload">Subir Video</label>
|
||||
<input type="file" id="videoUpload" name="archivo" accept="video/*">
|
||||
<img id="previewImg" src="" alt="Miniatura" style="display:none;">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" id="getThumbnailBtn">Obtener Miniatura</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="tipo">Tipo de Video</label>
|
||||
<input type="text" id="tipo" name="tipo" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="tamano">Tamaño (MB)</label>
|
||||
<input type="number" id="tamano" name="tamano" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit">Subir Video</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('origen').addEventListener('change', function () {
|
||||
const origen = this.value;
|
||||
const urlGroup = document.getElementById('urlGroup');
|
||||
const fileGroup = document.getElementById('fileGroup');
|
||||
const urlInput = document.getElementById('url');
|
||||
const fileInput = document.getElementById('videoUpload');
|
||||
const previewImg = document.getElementById('previewImg');
|
||||
|
||||
if (origen === 'Local') {
|
||||
fileGroup.style.display = 'block';
|
||||
urlGroup.style.display = 'none';
|
||||
urlInput.required = false;
|
||||
fileInput.required = true;
|
||||
} else {
|
||||
fileGroup.style.display = 'none';
|
||||
urlGroup.style.display = 'block';
|
||||
urlInput.required = true;
|
||||
fileInput.required = false;
|
||||
//previewImg.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('getThumbnailBtn').addEventListener('click', function () {
|
||||
const origen = document.getElementById('origen').value;
|
||||
if (origen === 'Local') {
|
||||
obtenerMiniaturaLocal();
|
||||
} else if (origen === 'YouTube') {
|
||||
obtenerMiniaturaYouTube();
|
||||
}
|
||||
else if (origen === 'Vimeo') {
|
||||
obtenerMiniaturaVimeo();
|
||||
}
|
||||
});
|
||||
|
||||
function obtenerMiniaturaLocal() {
|
||||
const fileInput = document.getElementById('videoUpload');
|
||||
const file = fileInput.files[0];
|
||||
const previewImg = document.getElementById('previewImg');
|
||||
|
||||
if (file) {
|
||||
const videoElement = document.createElement('video');
|
||||
videoElement.src = URL.createObjectURL(file);
|
||||
videoElement.muted = true;
|
||||
|
||||
videoElement.addEventListener('loadeddata', function () {
|
||||
videoElement.currentTime = videoElement.duration / 2;
|
||||
});
|
||||
|
||||
videoElement.addEventListener('seeked', function () {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = videoElement.videoWidth / 4;
|
||||
canvas.height = videoElement.videoHeight / 4;
|
||||
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
previewImg.src = canvas.toDataURL();
|
||||
previewImg.style.display = 'block';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function obtenerMiniaturaYouTube() {
|
||||
const url = document.getElementById('url').value;
|
||||
const previewImg = document.getElementById('previewUrl');
|
||||
var thumbnailUrl = 'https://img.youtube.com/vi/' + extractYouTubeVideoId(url) + '/0.jpg';; // Implement this function based on the source
|
||||
previewImg.src = thumbnailUrl;
|
||||
previewImg.style.display = 'block';
|
||||
}
|
||||
function obtenerMiniaturaVimeo() {
|
||||
const url = document.getElementById('url').value;
|
||||
const previewImg = document.getElementById('previewUrl');
|
||||
var thumbnailUrl = 'https://vumbnail.com/' + extractVimeoVideoId(url) + '.jpg'; // Implement this function based on the source
|
||||
|
||||
previewImg.src = thumbnailUrl;
|
||||
previewImg.style.display = 'block';
|
||||
}
|
||||
|
||||
function extractYouTubeVideoId(url) {
|
||||
var match = url.match(/(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
function extractVimeoVideoId(url) {
|
||||
var match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
document.getElementById('uploadForm').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const origen = document.getElementById('origen').value;
|
||||
let urlOrFile;
|
||||
if (origen === 'Local') {
|
||||
urlOrFile = document.getElementById('videoUpload').files[0];
|
||||
} else {
|
||||
urlOrFile = document.getElementById('url').value;
|
||||
}
|
||||
|
||||
const videoData = {
|
||||
nombre: document.getElementById('nombre').value,
|
||||
descripcion: document.getElementById('descripcion').value,
|
||||
url: urlOrFile,
|
||||
miniatura: origen === 'Local' ? document.getElementById('previewImg').src : document.getElementById('previewUrl').src,
|
||||
tipo: document.getElementById('tipo').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.
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
189
src/public/plantilla_html/video_upload.html
Normal file
189
src/public/plantilla_html/video_upload.html
Normal file
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Formulario de Subida de Videos</title>
|
||||
<!-- Uix CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uix@1.1.0/dist/uix.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: #1f1f1f;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
background-color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.form-group button {
|
||||
background-color: #555;
|
||||
border: none;
|
||||
color: #e0e0e0;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group button:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
.thumbnail-preview {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.thumbnail-preview img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Formulario de Subida de Videos</h1>
|
||||
<form id="videoForm">
|
||||
<div class="form-group">
|
||||
<label for="name">Nombre:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="description">Descripción:</label>
|
||||
<input type="text" id="description" name="description">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="source">Origen:</label>
|
||||
<select id="source" name="source">
|
||||
<option value="local">Local</option>
|
||||
<option value="youtube">YouTube</option>
|
||||
<option value="vimeo">Vimeo</option>
|
||||
<option value="twitch">Twitch</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="urlGroup" style="display: none;">
|
||||
<label for="url">URL:</label>
|
||||
<input type="text" id="url" name="url">
|
||||
</div>
|
||||
<div class="form-group" id="fileGroup" style="display: none;">
|
||||
<label for="file">Archivo:</label>
|
||||
<input type="file" id="file" name="file" accept="video/*">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" id="getThumbnail">Obtener Miniatura</button>
|
||||
</div>
|
||||
<div class="form-group thumbnail-preview" id="thumbnailPreview">
|
||||
<!-- Miniatura se mostrará aquí -->
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit">Enviar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('source').addEventListener('change', function () {
|
||||
var source = this.value;
|
||||
var urlGroup = document.getElementById('urlGroup');
|
||||
var fileGroup = document.getElementById('fileGroup');
|
||||
|
||||
if (source === 'local') {
|
||||
urlGroup.style.display = 'none';
|
||||
fileGroup.style.display = 'block';
|
||||
} else {
|
||||
urlGroup.style.display = 'block';
|
||||
fileGroup.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('getThumbnail').addEventListener('click', function () {
|
||||
var source = document.getElementById('source').value;
|
||||
var url = document.getElementById('url').value;
|
||||
var file = document.getElementById('file').files[0];
|
||||
var thumbnailPreview = document.getElementById('thumbnailPreview');
|
||||
|
||||
thumbnailPreview.innerHTML = '';
|
||||
|
||||
if (source === 'local' && file) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var video = document.createElement('video');
|
||||
video.src = e.target.result;
|
||||
video.style.display = 'none';
|
||||
|
||||
video.addEventListener('loadeddata', function () {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = canvas.toDataURL();
|
||||
thumbnailPreview.appendChild(img);
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else if (source !== 'local' && url) {
|
||||
var img = document.createElement('img');
|
||||
var thumbnailUrl = getThumbnailUrl(url, source); // Implement this function based on the source
|
||||
img.src = thumbnailUrl;
|
||||
thumbnailPreview.appendChild(img);
|
||||
}
|
||||
});
|
||||
|
||||
function getThumbnailUrl(url, source) {
|
||||
// Implement this function based on the source
|
||||
// Example placeholders for URLs
|
||||
var thumbnailUrls = {
|
||||
'youtube': 'https://img.youtube.com/vi/' + extractYouTubeVideoId(url) + '/0.jpg',
|
||||
'vimeo': 'https://vumbnail.com/' + extractVimeoVideoId(url) + '.jpg',
|
||||
'twitch': 'https://static-cdn.jtvnw.net/previews-ttv/live_user_' + extractTwitchUserId(url) + '-1920x1080.jpg'
|
||||
};
|
||||
return thumbnailUrls[source] || '';
|
||||
}
|
||||
|
||||
function extractYouTubeVideoId(url) {
|
||||
var match = url.match(/(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
function extractVimeoVideoId(url) {
|
||||
var match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
function extractTwitchUserId(url) {
|
||||
var match = url.match(/(?:https?:\/\/)?(?:www\.)?twitch\.tv\/(\w+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,4 +6,8 @@ rutas.get('/app_restaurant', controlador_init.app_restaurant);//login testing cs
|
||||
//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
|
||||
module.exports = rutas;
|
||||
@@ -6,4 +6,5 @@ const controlador_cloud = require('../controladores/controlador_cloud');
|
||||
rutas.post('/upload', controlador_cloud.upload);//ver productos en modo json/get
|
||||
rutas.post('/cloud_panel/', controlador_cloud.cloud_panel);//ver direcctorio actual
|
||||
rutas.get('/cloud/', controlador_cloud.login_cloud);//ver direcctorio actual
|
||||
|
||||
module.exports = rutas;
|
||||
|
||||
@@ -11,50 +11,36 @@
|
||||
<sectio class="nav">
|
||||
<h1><span class="logo_img"></span><span class="logo_txt">SIGMA</span> TV-ONLINE</h1>
|
||||
<h3 class="span loader">
|
||||
<span class="m">T</span>
|
||||
<span class="m">S</span>
|
||||
<span class="m">o</span>
|
||||
<span class="m">d</span>
|
||||
<span class="m">o</span>
|
||||
<span class="m">s</span>
|
||||
<span class="m"> </span>
|
||||
<span class="m">l</span>
|
||||
<span class="m">o</span>
|
||||
<span class="m">s</span>
|
||||
<span class="m"> </span>
|
||||
<span class="m">T</span>
|
||||
<span class="m">E</span>
|
||||
<span class="m">C</span>
|
||||
<span class="m">H</span>
|
||||
<span class="m">N</span>
|
||||
<span class="m">O</span>
|
||||
<span class="m">L</span>
|
||||
<span class="m">O</span>
|
||||
<span class="m">G</span>
|
||||
<span class="m">I</span>
|
||||
<span class="m">E</span>
|
||||
<span class="m">S</span>
|
||||
<span class="m">t</span>
|
||||
<span class="m">u</span>
|
||||
<span class="m"> </span>
|
||||
<span class="m">e</span>
|
||||
<span class="m">r</span>
|
||||
<span class="m">e</span>
|
||||
<span class="m">s</span>
|
||||
</h3>
|
||||
<div class="nav-container"><a class="nav-tab" href="#tab-svelte">SVELTE</a><a class="nav-tab" href="#tab-esbuild">ESBUILD</a><a class="nav-tab" href="#tab-next">NEXT.JS</a><a class="nav-tab" href="#tab-typescript">TYPESCRIPT</a><a class="nav-tab" href="#tab-vite">VITE</a><span class="nav-tab-slider"></span></div>
|
||||
<div class="nav-container">
|
||||
<a class="nav-tab" href="#tab-futbol">FUTBOL</a>
|
||||
<a class="nav-tab" href="#tab-peliculas">CINE</a>
|
||||
<a class="nav-tab" href="#tab-tv">TV EN VIVO</a><span class="nav-tab-slider"></span>
|
||||
</div>
|
||||
</sectio>
|
||||
<main class="main">
|
||||
<section class="slider" id="tab-svelte">
|
||||
<h1>SVELTE</h1>
|
||||
<section class="slider" id="tab-futbol">
|
||||
<h1>FUTBOL</h1>
|
||||
<h2>another frontend JS framework</h2>
|
||||
</section>
|
||||
<section class="slider" id="tab-esbuild">
|
||||
<h1>ESBUILD</h1>
|
||||
<h2>an extremely fast JavaScript bundler</h2>
|
||||
</section>
|
||||
<section class="slider" id="tab-next">
|
||||
<h1>NEXT.JS</h1>
|
||||
<h2>framework for Production</h2>
|
||||
</section>
|
||||
<section class="slider" id="tab-typescript">
|
||||
<h1>TYPESCRIPT</h1>
|
||||
<section class="slider" id="tab-peliculas">
|
||||
<h1>PELICULAS</h1>
|
||||
<h2>giving you better tooling at any scale</h2>
|
||||
</section>
|
||||
<section class="slider" id="tab-vite">
|
||||
<h1>VITE</h1>
|
||||
<section class="slider" id="tab-tv">
|
||||
<h1>TV ENVIVO</h1>
|
||||
<h2>a frontend build tool</h2>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
}
|
||||
|
||||
function modo_img(file) {
|
||||
var tipoImg = ["jpg", "jpeg", "png"];
|
||||
var tipoImg = ["jpg", "jpeg", "png","gif", "bmp", "tiff", "svg", "webp", "ico", "psd", "ai", "eps", "raw", "cr2", "nef", "orf", "sr2", "rw2", "dng", "arw", "3fr", "dcr", "kdc", "erf", "mrw", "pef", "raf", "x3f", "srw", "rwl", "r3d", "rwz", "z6ii", "z5", "drf", "k25", "bay", "cap", "iiq", "fff", "mef", "mos", "crw", "erf", "kdc", "dcs", "gpr", "mef", "mos", "nef", "nrw", "orf", "raw", "rw2", "rwl", "sr2", "srf", "x3f"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
@@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
function modo_video(file) {
|
||||
var tipoImg = ["mp4", "mpg", "webm"];
|
||||
var tipoImg = ["mp4", "mpg", "webm","avi", "mkv", "mov", "wmv", "flv", "3gp", "m4v"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
console.log(item);
|
||||
@@ -92,7 +92,7 @@
|
||||
return std;
|
||||
}
|
||||
function modo_music(file) {
|
||||
var tipoImg = ["mp3", "acc", "wav"];
|
||||
var tipoImg = ["mp3", "acc", "wav", "wma", "ogg", "m4a"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
|
||||
@@ -39,14 +39,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="password" class="form-control" placeholder="Contraseña" id="pwd"
|
||||
name="password">
|
||||
<input type="password" class="form-control" placeholder="Contraseña" id="pwd" name="password">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text">
|
||||
<span class="fas fa-lock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-1"><a href="#">Generar Codigo de Session</a></p>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Codigo 2FA" id="code" name="code">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text">
|
||||
<span class="fas fa-key"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="icheck-primary">
|
||||
|
||||
@@ -15,14 +15,14 @@
|
||||
<link rel="stylesheet" href="./css/login_cloud.css">
|
||||
|
||||
<link rel="icon" sizes="192x192" href="./img/favicon-32x32.png">
|
||||
<link rel="icon" sizes="64x64" href="./img/pedidos64.png">
|
||||
<link rel="icon" sizes="64x64" href="./img/sigma_cloud64.png">
|
||||
</head>
|
||||
|
||||
<body class="login-page" style="min-height: 497.361px;">
|
||||
<div class="box">
|
||||
<div class="login-box">
|
||||
<div class="login-logo">
|
||||
<a href="https://sigmac.app"><strong><img src="img/pedidos64.png" alt="logo" width="52">
|
||||
<a href="https://sigmac.app"><strong><img src="img/sigma_cloud_b64.png" alt="logo" width="52">
|
||||
<span class="nom_app">SIGMA</span></strong> Cloud.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License
|
||||
-->
|
||||
<html lang="en">
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
56
src/views/speedtest.ejs
Normal file
56
src/views/speedtest.ejs
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Medidor de Ancho de Banda</title>
|
||||
<link rel="stylesheet" href="../css/speedtest.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Medidor de Ancho de Banda</h2>
|
||||
<button class="btn-measure" onclick="measureBandwidth()">Iniciar Medición</button>
|
||||
<div class="loader" id="loader"></div>
|
||||
<div class="result" id="result">---</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function measureBandwidth() {
|
||||
const loader = document.getElementById('loader');
|
||||
const result = document.getElementById('result');
|
||||
result.innerHTML = '---';
|
||||
loader.style.display = 'block';
|
||||
|
||||
const startTime = new Date().getTime();
|
||||
const image = new Image();
|
||||
|
||||
image.onload = function() {
|
||||
const endTime = new Date().getTime();
|
||||
const duration = (endTime - startTime) / 1000; // en segundos
|
||||
const imageSize = 500000; // tamaño de la imagen en bytes (ejemplo: 500KB)
|
||||
const bandwidth = (imageSize * 8) / (duration * 1024 * 1024); // en Mbps
|
||||
loader.style.display = 'none';
|
||||
result.innerHTML = bandwidth.toFixed(2) + ' Mbps';
|
||||
};
|
||||
|
||||
image.onerror = function() {
|
||||
loader.style.display = 'none';
|
||||
result.innerHTML = 'Error en la medición';
|
||||
};
|
||||
|
||||
// Cargar una imagen desde un servidor de alta disponibilidad
|
||||
image.src = 'http://localhost:3001/files/16475382589308831290985654719674.jpg?t=' + startTime;
|
||||
|
||||
let StartTime, EndTime;
|
||||
let imageSize = 500000; // Tamaño de la imagen en bytes (ejemplo: 500KB)
|
||||
let img = new Image();
|
||||
let bitOutput = document.getElementById("bitOutput");
|
||||
let speedOutput = document.getElementById("speedOutput");
|
||||
let progressBar = document.getElementById("progressBar");
|
||||
let progressText = document.getElementById("progressText");
|
||||
let progress = 0;
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
119
src/views/test_velocidad.ejs
Normal file
119
src/views/test_velocidad.ejs
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<!--link rel="stylesheet" href="style.css" /-->
|
||||
<script src="https://www.gstatic.com/charts/loader.js"></script>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#downloadSpeedLabel,
|
||||
#downloadSpeed {
|
||||
margin: 2px;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#downloadSpeed {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
svg>g>text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #353538;
|
||||
color: whitesmoke;
|
||||
font-size: large;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
width: 150px;
|
||||
border: none;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2>Internet Speed Test</h2>
|
||||
<div id="chart_div"></div>
|
||||
<span id="downloadSpeedLabel">Average Download Speed:</span>
|
||||
<span id="downloadSpeed"></span>
|
||||
<button id="testButton">Run Test</button>
|
||||
<script>
|
||||
let fileUrl = "../files/SIGMA OSX.mp4";
|
||||
const testButton = document.getElementById("testButton");
|
||||
testButton.addEventListener("click", startTest);
|
||||
let testTime = 15;
|
||||
google.charts.load("current", { packages: ["corechart", "gauge"] });
|
||||
google.charts.setOnLoadCallback(drawChart);
|
||||
|
||||
function startTest() {
|
||||
downloadSpeed.textContent = "0.00";
|
||||
downloadFile(fileUrl);
|
||||
}
|
||||
|
||||
function drawChart(speed = 0) {
|
||||
let downloadSpeed = speed;
|
||||
let data = google.visualization.arrayToDataTable([
|
||||
["Label", "Value"],
|
||||
["Velocidad de Descarga", downloadSpeed],
|
||||
]);
|
||||
|
||||
let options = {
|
||||
min: 0,
|
||||
max: 500,
|
||||
width: 300,
|
||||
height: 300,
|
||||
minorTicks: 5,
|
||||
majorTicks: ["0", "100", "200", "300", "400", "500"],
|
||||
};
|
||||
let chart = new google.visualization.Gauge(
|
||||
document.getElementById("chart_div")
|
||||
);
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
async function downloadFile(url) {
|
||||
let uniqueUrl = url + "?t=" + new Date().getTime();
|
||||
const response = await fetch(uniqueUrl);
|
||||
const reader = response.body.getReader();
|
||||
let receivedLength = 0;
|
||||
let startTime = new Date();
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
const decoder = new TextDecoder();
|
||||
const text = decoder.decode(value);
|
||||
console.log(text.length);
|
||||
|
||||
receivedLength += text.length;
|
||||
let currentTime = new Date();
|
||||
let timeElapsed = (currentTime - startTime) / 1000;
|
||||
let speed = (8 / 1000000) * (receivedLength / timeElapsed);
|
||||
drawChart(speed);
|
||||
if (done || timeElapsed > testTime) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
currentTime = new Date();
|
||||
timeElapsed = (currentTime - startTime) / 1000;
|
||||
let averageSpeed = (8 / 1000000) * (receivedLength / timeElapsed);
|
||||
drawChart(averageSpeed);
|
||||
averageSpeed = averageSpeed.toFixed(2);
|
||||
downloadSpeed.textContent = `${averageSpeed} mbps`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
59
src/views/video_upload.ejs
Normal file
59
src/views/video_upload.ejs
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Subir Video</title>
|
||||
<link rel="stylesheet" href="../css/app_videos_upload.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2><img src="/img/sigma_cloud64.png" alt="Logo" style="vertical-align: middle;">
|
||||
Subir Video</h2>
|
||||
<form id="uploadForm">
|
||||
<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</label>
|
||||
<select id="origen" name="origen" required>
|
||||
<option value="Local">Local</option>
|
||||
<option value="YouTube">YouTube</option>
|
||||
<option value="Vimeo">Vimeo</option>
|
||||
<option value="Twitch">Twitch</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="urlGroup">
|
||||
<label for="url">URL del Video</label>
|
||||
<input type="url" id="url" name="url" placeholder="https://">
|
||||
<img id="previewUrl" src="" alt="Miniatura" style="display:none;">
|
||||
</div>
|
||||
<div class="form-group" id="fileGroup">
|
||||
<label for="videoUpload">Subir Video</label>
|
||||
<input type="file" id="videoUpload" name="archivo" accept="video/*">
|
||||
<img id="previewImg" src="" alt="Miniatura" style="display:none;">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" id="getThumbnailBtn">Obtener Miniatura</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="tipo">Tipo de Video</label>
|
||||
<input type="text" id="tipo" name="tipo" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit">Subir Video</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="../js/app_videos_upload.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
152
src/views/videos.ejs
Normal file
152
src/views/videos.ejs
Normal file
@@ -0,0 +1,152 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user