root
4101d98a41
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
73 lines
3.0 KiB
HTML
73 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="ohmstream">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ filename }} - Ohm Stream Player</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="min-h-screen bg-base-100 p-4 md:p-8">
|
|
<div class="max-w-5xl mx-auto">
|
|
<!-- Header -->
|
|
<div class="text-center mb-6">
|
|
<h1 class="text-2xl md:text-3xl font-bold text-primary">
|
|
<i class="fa-solid fa-film"></i> Ohm Stream Player
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Video Info Bar -->
|
|
<div class="flex justify-between items-center bg-base-200 rounded-box border border-base-300 p-4 mb-4 flex-wrap gap-2">
|
|
<span class="font-medium text-base-content">{{ filename }}</span>
|
|
<span class="badge badge-ghost">{{ "%.2f"|format(file_size / 1024 / 1024) }} MB</span>
|
|
</div>
|
|
|
|
<!-- Video Wrapper -->
|
|
<div class="bg-black rounded-box overflow-hidden">
|
|
<video id="player" playsinline controls preload="metadata">
|
|
<source src="/stream/{{ filename }}" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="flex justify-center gap-3 mt-4 flex-wrap">
|
|
<a href="/web" class="btn btn-ghost">
|
|
<i class="fa-solid fa-arrow-left"></i> Retour
|
|
</a>
|
|
<a href="/stream/{{ filename }}" class="btn btn-primary" download>
|
|
<i class="fa-solid fa-download"></i> Télécharger
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
|
|
<script>
|
|
const player = new Plyr('#player', {
|
|
captions: { active: true, update: true, language: 'auto' },
|
|
speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] }
|
|
});
|
|
|
|
// Error handling
|
|
player.on('error', (error) => {
|
|
console.error('Plyr error:', error);
|
|
const wrapper = document.querySelector('.bg-black');
|
|
wrapper.innerHTML = `
|
|
<div class="alert alert-error m-4">
|
|
<i class="fa-solid fa-circle-exclamation"></i>
|
|
<div>
|
|
<p>Erreur lors de la lecture du flux vidéo.</p>
|
|
<div class="flex gap-2 mt-2">
|
|
<a href="/video/{{ task_id }}" class="btn btn-sm btn-primary">Réessayer</a>
|
|
<a href="/stream/{{ filename }}" download class="btn btn-sm btn-ghost">Télécharger</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|