This commit is contained in:
Flatlogic Bot 2026-02-23 08:48:15 +00:00
parent 0c65e736c6
commit b464398843
6 changed files with 81 additions and 6 deletions

View File

@ -155,6 +155,9 @@ STATICFILES_DIRS = [
BASE_DIR / 'node_modules', BASE_DIR / 'node_modules',
] ]
MEDIA_URL = '/outputs/'
MEDIA_ROOT = BASE_DIR / 'outputs'
# Email # Email
EMAIL_BACKEND = os.getenv( EMAIL_BACKEND = os.getenv(
"EMAIL_BACKEND", "EMAIL_BACKEND",
@ -179,4 +182,4 @@ if EMAIL_USE_SSL:
# Default primary key field type # Default primary key field type
# https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

View File

@ -27,3 +27,4 @@ urlpatterns = [
if settings.DEBUG: if settings.DEBUG:
urlpatterns += static("/assets/", document_root=settings.BASE_DIR / "assets") urlpatterns += static("/assets/", document_root=settings.BASE_DIR / "assets")
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

View File

@ -7,6 +7,7 @@
<title>{{ project_name }} - Quran Reels Generator</title> <title>{{ project_name }} - Quran Reels Generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amiri&family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Amiri&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style> <style>
:root { :root {
--primary-emerald: #064E3B; --primary-emerald: #064E3B;
@ -82,6 +83,13 @@
border: 1px solid #D1D5DB; border: 1px solid #D1D5DB;
padding: 0.6rem; padding: 0.6rem;
} }
.video-preview-btn {
cursor: pointer;
transition: color 0.2s;
}
.video-preview-btn:hover {
color: var(--primary-emerald);
}
</style> </style>
</head> </head>
<body> <body>
@ -164,12 +172,17 @@
<div class="col-lg-4"> <div class="col-lg-4">
<div class="card"> <div class="card">
<div class="card-header">Recent Generations</div> <div class="card-header d-flex justify-content-between align-items-center">
<span>Recent Generations</span>
<button class="btn btn-sm btn-link p-0 text-decoration-none" onclick="location.reload()">
<i class="bi bi-arrow-clockwise"></i> Refresh
</button>
</div>
<div class="card-body p-0"> <div class="card-body p-0">
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
{% for task in tasks %} {% for task in tasks %}
<li class="list-group-item"> <li class="list-group-item">
<div class="d-flex justify-content-between align-items-start"> <div class="d-flex justify-content-between align-items-start mb-2">
<div> <div>
<strong class="d-block">{{ task.surah_name }}</strong> <strong class="d-block">{{ task.surah_name }}</strong>
<small class="text-muted">Ayahs {{ task.verse_start }}-{{ task.verse_end }}</small> <small class="text-muted">Ayahs {{ task.verse_start }}-{{ task.verse_end }}</small>
@ -178,10 +191,24 @@
{{ task.status|title }} {{ task.status|title }}
</span> </span>
</div> </div>
{% if task.status == 'completed' %} {% if task.status == 'completed' %}
<a href="{{ task.output_path }}" class="btn btn-sm btn-outline-success mt-2 w-100" download>Download</a> <div class="btn-group w-100 mt-2" role="group">
<button type="button" class="btn btn-sm btn-outline-primary"
onclick="previewVideo('{{ task.output_path }}', '{{ task.surah_name }} ({{ task.verse_start }}-{{ task.verse_end }})')">
<i class="bi bi-play-fill"></i> Preview
</button>
<a href="{{ task.output_path }}" class="btn btn-sm btn-outline-success" download>
<i class="bi bi-download"></i> Download
</a>
</div>
{% elif task.status == 'failed' %} {% elif task.status == 'failed' %}
<p class="text-danger x-small mt-1 mb-0">{{ task.error_message|truncatechars:50 }}</p> <p class="text-danger small mt-1 mb-0"><i class="bi bi-exclamation-triangle"></i> {{ task.error_message|truncatechars:100 }}</p>
{% elif task.status == 'processing' or task.status == 'pending' %}
<div class="progress mt-2" style="height: 5px;">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%"></div>
</div>
<p class="text-muted small mt-1 mb-0">Processing... Please refresh in a moment.</p>
{% endif %} {% endif %}
</li> </li>
{% empty %} {% empty %}
@ -194,6 +221,31 @@
</div> </div>
</div> </div>
<!-- Video Preview Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="videoModalLabel">Video Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0 bg-black">
<div class="ratio ratio-9x16">
<video id="previewPlayer" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="modal-footer">
<a id="downloadBtn" href="" class="btn btn-success" download>Download Video</a>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
document.getElementById('surahSelect').addEventListener('change', function() { document.getElementById('surahSelect').addEventListener('change', function() {
const surahNum = this.value; const surahNum = this.value;
@ -208,7 +260,26 @@
document.getElementById('verseEnd').max = max; document.getElementById('verseEnd').max = max;
}); });
}); });
const videoModal = new bootstrap.Modal(document.getElementById('videoModal'));
const previewPlayer = document.getElementById('previewPlayer');
const downloadBtn = document.getElementById('downloadBtn');
const modalTitle = document.getElementById('videoModalLabel');
function previewVideo(url, title) {
previewPlayer.src = url;
downloadBtn.href = url;
modalTitle.textContent = "Preview: " + title;
videoModal.show();
previewPlayer.play();
}
// Stop video when modal is closed
document.getElementById('videoModal').addEventListener('hidden.bs.modal', function () {
previewPlayer.pause();
previewPlayer.src = "";
});
</script> </script>
</body> </body>
</html> </html>

Binary file not shown.