ryan/yottob
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add complete frontend interface with Jinja2 templates

Browse Source 
- Created base.html template with navigation and flash messages
- Created dashboard.html for video listing sorted by date
- Created channels.html for channel management
- Created add_channel.html with subscription form
- Created watch.html with HTML5 video player
- Created static/style.css with YouTube-inspired dark theme
- Updated main.py with frontend routes:
  - / (index): Dashboard with all videos
  - /channels: Channel management page
  - /add-channel: Add new channel form (GET/POST)
  - /watch/<video_id>: Video player page
- Added new API endpoints:
  - /api/videos/refresh/<channel_id>: Refresh channel videos
  - /api/video/stream/<video_id>: Stream/download video files
- Enhanced /api/download/<video_id> with status checks
- Updated CLAUDE.md with comprehensive frontend documentation

Features:
- Video grid with thumbnails and download status badges
- Inline download buttons for pending videos
- Channel subscription and refresh functionality
- HTML5 video player for downloaded videos
- Auto-refresh during video downloads
- Responsive design for mobile/desktop
- Flash message system for user feedback
- Dark theme with hover effects and animations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ryan Chen
2025-11-26 14:18:33 -05:00
parent cf692d2299
commit 9bcd439024
8 changed files with 1198 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
templates/base.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}YottoB - YouTube Downloader{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<h1 class="logo"><a href="/">YottoB</a></h1>
<ul class="nav-menu">
<li><a href="/" class="{% if request.path == '/' %}active{% endif %}">Videos</a></li>
<li><a href="/channels" class="{% if request.path == '/channels' %}active{% endif %}">Channels</a></li>
<li><a href="/add-channel" class="{% if request.path == '/add-channel' %}active{% endif %}">Add Channel</a></li>
</ul>
</div>
</nav>
<main class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<footer class="footer">
<p>&copy; 2025 YottoB - YouTube Video Downloader</p>
</footer>
{% block scripts %}{% endblock %}
</body>
</html>