271 lines
No EOL
9 KiB
HTML
271 lines
No EOL
9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ parrilla.nombre }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<div class="header-content">
|
|
<h1>🎬 {{ parrilla.nombre }}</h1>
|
|
<span class="badge {% if parrilla.activo %}badge-success{% else %}badge-secondary{% endif %}">
|
|
{% if parrilla.activo %}Activa{% else %}Inactiva{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button onclick="generarVideo({{ parrilla.id }})" class="btn btn-primary">▶ Generar Video Ahora</button>
|
|
<a href="{{ url_for('parrillas.index') }}" class="btn btn-secondary">Volver</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-layout">
|
|
<!-- Sidebar Info -->
|
|
<div class="sidebar">
|
|
<div class="info-card">
|
|
<h3>Configuración</h3>
|
|
<p class="desc">{{ parrilla.descripcion }}</p>
|
|
|
|
<ul class="info-list">
|
|
<li><strong>Tipo:</strong> {{ parrilla.tipo_filtro }}</li>
|
|
{% if parrilla.pais_nombre %}
|
|
<li><strong>País:</strong> {{ parrilla.pais_nombre }}</li>
|
|
{% endif %}
|
|
{% if parrilla.categoria_nombre %}
|
|
<li><strong>Categoría:</strong> {{ parrilla.categoria_nombre }}</li>
|
|
{% endif %}
|
|
<li><strong>Máx. Noticias:</strong> {{ parrilla.max_noticias }}</li>
|
|
<li><strong>Frecuencia:</strong> {{ parrilla.frecuencia }}</li>
|
|
<li><strong>Idioma:</strong> {{ parrilla.idioma_voz }}</li>
|
|
<li><strong>Subtítulos:</strong> {% if parrilla.include_subtitles %}Sí{% else %}No{% endif %}</li>
|
|
<li><strong>Última Gen:</strong> {{ parrilla.ultima_generacion or 'Nunca' }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="preview-card">
|
|
<h3>📰 Preview Contenido</h3>
|
|
<div id="preview-list">Cargando noticias...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<h2>Videos Generados</h2>
|
|
|
|
{% if videos %}
|
|
<div class="videos-list">
|
|
{% for video in videos %}
|
|
<div class="video-item status-{{ video.status }}">
|
|
<div class="video-info">
|
|
<h4>{{ video.titulo }}</h4>
|
|
<span class="date">{{ video.fecha_generacion }}</span>
|
|
<span class="status-badge {{ video.status }}">{{ video.status }}</span>
|
|
{% if video.error_message %}
|
|
<p class="error-msg">{{ video.error_message }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="video-actions">
|
|
{% if video.status == 'completed' %}
|
|
<audio controls style="height: 30px; margin-right: 10px;">
|
|
<source src="{{ url_for('parrillas.serve_file', video_id=video.id, filename='audio.wav') }}"
|
|
type="audio/wav">
|
|
Tu navegador no soporta audio.
|
|
</audio>
|
|
<a href="{{ url_for('parrillas.serve_file', video_id=video.id, filename='script.txt') }}"
|
|
target="_blank" class="btn btn-sm btn-outline">📝 Ver Script</a>
|
|
<a href="{{ url_for('parrillas.serve_file', video_id=video.id, filename='audio.wav') }}"
|
|
download class="btn btn-sm btn-outline">📥 Bajar Audio</a>
|
|
{% endif %}
|
|
<button onclick="verLog({{ video.id }})" class="btn btn-sm btn-outline">📜 Ver Log</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>No se han generado videos todavía.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Modal -->
|
|
<div id="logModal" class="modal"
|
|
style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
|
|
<div class="modal-content"
|
|
style="background:var(--paper-color); margin:10% auto; padding:20px; width:80%; max-width:800px; border-radius:10px; position:relative;">
|
|
<span onclick="document.getElementById('logModal').style.display='none'"
|
|
style="position:absolute; top:10px; right:15px; cursor:pointer; font-size:24px;">×</span>
|
|
<h3>Log de Generación</h3>
|
|
<pre id="logContent"
|
|
style="background:#1e1e1e; color:#d4d4d4; padding:15px; border-radius:5px; overflow:auto; max-height:500px; font-family:monospace;"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.grid-layout {
|
|
display: grid;
|
|
grid-template-columns: 350px 1fr;
|
|
gap: 30px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.info-card,
|
|
.preview-card {
|
|
background: var(--paper-color);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.info-card h3,
|
|
.preview-card h3 {
|
|
margin-top: 0;
|
|
border-bottom: 2px solid var(--accent-color);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.info-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.info-list li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.videos-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.video-item {
|
|
background: var(--paper-color);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.video-item.status-completed {
|
|
border-left-color: #28a745;
|
|
}
|
|
|
|
.video-item.status-error {
|
|
border-left-color: #dc3545;
|
|
}
|
|
|
|
.video-item.status-processing {
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-badge.completed {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-badge.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.status-badge.processing {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.preview-item {
|
|
padding: 10px;
|
|
background: rgba(0, 0, 0, 0.02);
|
|
margin-bottom: 10px;
|
|
border-radius: 6px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 4px 8px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
async function loadPreview() {
|
|
try {
|
|
const res = await fetch(`/parrillas/api/{{ parrilla.id }}/preview`);
|
|
const data = await res.json();
|
|
|
|
const container = document.getElementById('preview-list');
|
|
if (data.noticias && data.noticias.length > 0) {
|
|
container.innerHTML = data.noticias.map(n => `
|
|
<div class="preview-item">
|
|
<strong>${n.titulo_trad || n.titulo}</strong><br>
|
|
<small>${n.fecha}</small>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
container.innerHTML = '<p>No hay noticias recientes que coincidan con los filtros.</p>';
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
document.getElementById('preview-list').innerHTML = 'Error cargando preview.';
|
|
}
|
|
}
|
|
|
|
async function generarVideo(id) {
|
|
if (!confirm('¿Generar nuevo video?')) return;
|
|
try {
|
|
const res = await fetch(`/parrillas/api/${id}/generar`, { method: 'POST' });
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
} catch (e) {
|
|
alert('Error de conexión');
|
|
}
|
|
}
|
|
|
|
async function verLog(id) {
|
|
const modal = document.getElementById('logModal');
|
|
const content = document.getElementById('logContent');
|
|
content.textContent = "Cargando log...";
|
|
modal.style.display = 'block';
|
|
|
|
try {
|
|
const res = await fetch(`/parrillas/files/${id}/generation.log`);
|
|
if (res.ok) {
|
|
const text = await res.text();
|
|
content.textContent = text || "Log vacío.";
|
|
} else {
|
|
content.textContent = "No se pudo cargar el log. (Posiblemente el video es antiguo o falló antes de crear logs).";
|
|
}
|
|
} catch (e) {
|
|
content.textContent = "Error de conexión al cargar log.";
|
|
}
|
|
}
|
|
|
|
// Init
|
|
loadPreview();
|
|
</script>
|
|
{% endblock %}
|
|
``` |