170 lines
9.0 KiB
HTML
170 lines
9.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="px-4 sm:px-0">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-white mb-2">Encoder Dashboard</h1>
|
|
<p class="text-gray-300">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-800 rounded-lg shadow-lg p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-semibold text-white flex items-center">
|
|
<svg class="w-6 h-6 mr-2 text-blue-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-blue-400 hover:text-blue-300 text-sm">View Reports</a>
|
|
</div>
|
|
|
|
<!-- Current Job Status -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-medium text-white mb-3">Current Job</h3>
|
|
<div class="bg-gray-700 rounded-lg 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">({{ "%.0f"|format((current_video_job.start_time)) }}s)</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-medium text-white mb-3">
|
|
Queue (<span id="video-queue-length">{{ video_queue|length }}</span>)
|
|
</h3>
|
|
<div class="bg-gray-700 rounded-lg p-4 max-h-64 overflow-y-auto">
|
|
{% 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>
|
|
|
|
<!-- Statistics -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-gray-700 rounded-lg p-4">
|
|
<div class="text-2xl font-bold text-blue-400">{{ video_stats.total_jobs or 0 }}</div>
|
|
<div class="text-sm text-gray-400">Total Jobs</div>
|
|
</div>
|
|
<div class="bg-gray-700 rounded-lg p-4">
|
|
<div class="text-2xl font-bold text-green-400">{{ video_stats.total_saved|format_bytes }}</div>
|
|
<div class="text-sm text-gray-400">Space Saved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Encoder Column -->
|
|
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-semibold text-white flex items-center">
|
|
<svg class="w-6 h-6 mr-2 text-purple-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-purple-400 hover:text-purple-300 text-sm">View Reports</a>
|
|
</div>
|
|
|
|
<!-- Current Job Status -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-medium text-white mb-3">Current Job</h3>
|
|
<div class="bg-gray-700 rounded-lg 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">({{ "%.0f"|format((current_audio_job.start_time)) }}s)</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-medium text-white mb-3">
|
|
Queue (<span id="audio-queue-length">{{ audio_queue|length }}</span>)
|
|
</h3>
|
|
<div class="bg-gray-700 rounded-lg p-4 max-h-64 overflow-y-auto">
|
|
{% 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>
|
|
|
|
<!-- Statistics -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-gray-700 rounded-lg p-4">
|
|
<div class="text-2xl font-bold text-purple-400">{{ audio_stats.total_jobs or 0 }}</div>
|
|
<div class="text-sm text-gray-400">Total Jobs</div>
|
|
</div>
|
|
<div class="bg-gray-700 rounded-lg p-4">
|
|
<div class="text-2xl font-bold text-green-400">{{ audio_stats.total_saved|format_bytes }}</div>
|
|
<div class="text-sm text-gray-400">Space Saved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overall Statistics -->
|
|
<div class="mt-8 bg-gray-800 rounded-lg shadow-lg p-6">
|
|
<h2 class="text-xl font-semibold text-white mb-4">Overall Statistics</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div class="bg-gray-700 rounded-lg p-4 text-center">
|
|
<div class="text-2xl font-bold text-blue-400">{{ (video_stats.total_jobs or 0) + (audio_stats.total_jobs or 0) }}</div>
|
|
<div class="text-sm text-gray-400">Total Jobs Processed</div>
|
|
</div>
|
|
<div class="bg-gray-700 rounded-lg p-4 text-center">
|
|
<div class="text-2xl font-bold text-green-400">{{ ((video_stats.total_saved or 0) + (audio_stats.total_saved or 0))|format_bytes }}</div>
|
|
<div class="text-sm text-gray-400">Total Space Saved</div>
|
|
</div>
|
|
<div class="bg-gray-700 rounded-lg p-4 text-center">
|
|
<div class="text-2xl font-bold text-yellow-400">{{ ((video_stats.total_original_size or 0) + (audio_stats.total_original_size or 0))|format_bytes }}</div>
|
|
<div class="text-sm text-gray-400">Original Size</div>
|
|
</div>
|
|
<div class="bg-gray-700 rounded-lg p-4 text-center">
|
|
<div class="text-2xl font-bold text-purple-400">{{ ((video_stats.total_encoded_size or 0) + (audio_stats.total_encoded_size or 0))|format_bytes }}</div>
|
|
<div class="text-sm text-gray-400">Encoded Size</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|