pablinux/APP-SIGMA-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

creacion de midleware seedtest, videos and upload

Browse Source
This commit is contained in:
Pablinux
2024-08-20 19:38:01 -05:00
parent 52fad1dd43
commit 208ebe7420
25 changed files with 1722 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/public/plantilla_html/video_upload.html Normal file
View 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>