174 lines
9.9 KiB
HTML
174 lines
9.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="px-4 sm:px-0 max-w-7xl mx-auto">
|
|
<div class="mb-8">
|
|
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 via-sky-400 to-cyan-400 mb-2 tracking-tight">Encoder Dashboard</h1>
|
|
<p class="text-gray-300 text-lg">Monitor your video and audio encoding jobs</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Video Encoder Column -->
|
|
<div class="bg-gray-900 rounded-2xl modern-shadow p-8 transition-all hover:scale-[1.01]">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-white flex items-center">
|
|
<svg class="w-7 h-7 mr-2 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
Video Encoder
|
|
</h2>
|
|
<a href="{{ url_for('reports', encoder_type='video') }}" class="text-sky-400 hover:text-white text-base font-semibold transition-all">View Reports</a>
|
|
</div>
|
|
|
|
<!-- Current Job Status -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-white mb-3">Current Job</h3>
|
|
<div class="bg-gray-800 rounded-xl p-4">
|
|
<div id="video-status">
|
|
{% if current_video_job %}
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span class="text-sm">Processing: {{ current_video_job.file_path.split('/')[-1] }}</span>
|
|
<span class="text-xs text-gray-400">({{ current_video_job_duration|format_duration }})</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-gray-500 rounded-full"></div>
|
|
<span class="text-sm">Idle</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Queue -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-white mb-3">
|
|
Queue (<span id="video-queue-length">{{ video_queue_length }}</span>)
|
|
</h3>
|
|
<div class="bg-gray-800 rounded-xl p-4 max-h-64 overflow-y-auto">
|
|
<div id="video-queue-container">
|
|
{% if video_queue %}
|
|
<div class="space-y-2">
|
|
{% for file_path in video_queue %}
|
|
<div class="flex items-center space-x-2 text-sm">
|
|
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
|
<span class="text-gray-300">{{ file_path.split('/')[-1] }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-gray-400 text-sm">No files in queue</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
|
|
<div id="video-total-jobs" class="text-3xl font-extrabold text-sky-400">{{ video_stats.total_jobs or 0 }}</div>
|
|
<div class="text-base text-gray-400">Total Jobs</div>
|
|
</div>
|
|
<div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
|
|
<div id="video-total-saved" class="text-3xl font-extrabold text-green-400">{{ video_stats.total_saved|format_bytes }}</div>
|
|
<div class="text-base text-gray-400">Space Saved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Encoder Column -->
|
|
<div class="bg-gray-900 rounded-2xl modern-shadow p-8 transition-all hover:scale-[1.01]">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-white flex items-center">
|
|
<svg class="w-7 h-7 mr-2 text-fuchsia-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
|
|
</svg>
|
|
Audio Encoder
|
|
</h2>
|
|
<a href="{{ url_for('reports', encoder_type='audio') }}" class="text-fuchsia-400 hover:text-white text-base font-semibold transition-all">View Reports</a>
|
|
</div>
|
|
|
|
<!-- Current Job Status -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-white mb-3">Current Job</h3>
|
|
<div class="bg-gray-800 rounded-xl p-4">
|
|
<div id="audio-status">
|
|
{% if current_audio_job %}
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span class="text-sm">Processing: {{ current_audio_job.file_path.split('/')[-1] }}</span>
|
|
<span class="text-xs text-gray-400">({{ current_audio_job_duration|format_duration }})</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-gray-500 rounded-full"></div>
|
|
<span class="text-sm">Idle</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Queue -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-white mb-3">
|
|
Queue (<span id="audio-queue-length">{{ audio_queue_length }}</span>)
|
|
</h3>
|
|
<div class="bg-gray-800 rounded-xl p-4 max-h-64 overflow-y-auto">
|
|
<div id="audio-queue-container">
|
|
{% if audio_queue %}
|
|
<div class="space-y-2">
|
|
{% for file_path in audio_queue %}
|
|
<div class="flex items-center space-x-2 text-sm">
|
|
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
|
<span class="text-gray-300">{{ file_path.split('/')[-1] }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-gray-400 text-sm">No files in queue</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
|
|
<div id="audio-total-jobs" class="text-3xl font-extrabold text-fuchsia-400">{{ audio_stats.total_jobs or 0 }}</div>
|
|
<div class="text-base text-gray-400">Total Jobs</div>
|
|
</div>
|
|
<div class="bg-gray-800 rounded-xl p-4 flex flex-col items-center">
|
|
<div id="audio-total-saved" class="text-3xl font-extrabold text-green-400">{{ audio_stats.total_saved|format_bytes }}</div>
|
|
<div class="text-base text-gray-400">Space Saved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overall Statistics -->
|
|
<div class="mt-8 bg-gradient-to-r from-fuchsia-900 via-gray-900 to-sky-900 rounded-2xl modern-shadow p-8">
|
|
<h2 class="text-2xl font-bold text-white mb-4">Overall Statistics</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div class="bg-gray-800 rounded-xl p-4 text-center">
|
|
<div id="overall-total-jobs" class="text-3xl font-extrabold text-sky-400">{{ (video_stats.total_jobs or 0) + (audio_stats.total_jobs or 0) }}</div>
|
|
<div class="text-base text-gray-400">Total Jobs Processed</div>
|
|
</div>
|
|
<div class="bg-gray-800 rounded-xl p-4 text-center">
|
|
<div id="overall-total-saved" class="text-3xl font-extrabold text-green-400">{{ ((video_stats.total_saved or 0) + (audio_stats.total_saved or 0))|format_bytes }}</div>
|
|
<div class="text-base text-gray-400">Total Space Saved</div>
|
|
</div>
|
|
<div class="bg-gray-800 rounded-xl p-4 text-center">
|
|
<div id="overall-original-size" class="text-3xl font-extrabold text-yellow-400">{{ ((video_stats.total_original_size or 0) + (audio_stats.total_original_size or 0))|format_bytes }}</div>
|
|
<div class="text-base text-gray-400">Original Size</div>
|
|
</div>
|
|
<div class="bg-gray-800 rounded-xl p-4 text-center">
|
|
<div id="overall-encoded-size" class="text-3xl font-extrabold text-fuchsia-400">{{ ((video_stats.total_encoded_size or 0) + (audio_stats.total_encoded_size or 0))|format_bytes }}</div>
|
|
<div class="text-base text-gray-400">Encoded Size</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|