Ryan Chen
9bcd439024
- 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>
59 lines
2.2 KiB
HTML
59 lines
2.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Add Channel - YottoB{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="add-channel-page">
|
|
<div class="page-header">
|
|
<h2>Add New Channel</h2>
|
|
<p>Subscribe to a YouTube channel to download and track videos</p>
|
|
</div>
|
|
|
|
<div class="form-container">
|
|
<form method="POST" action="/add-channel" class="channel-form">
|
|
<div class="form-group">
|
|
<label for="rss_url">YouTube Channel RSS URL</label>
|
|
<input
|
|
type="url"
|
|
id="rss_url"
|
|
name="rss_url"
|
|
placeholder="https://www.youtube.com/feeds/videos.xml?channel_id=..."
|
|
required
|
|
class="form-input"
|
|
>
|
|
<small class="form-help">
|
|
Enter the RSS feed URL for the YouTube channel.
|
|
Format: https://www.youtube.com/feeds/videos.xml?channel_id=CHANNEL_ID
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">Subscribe & Fetch Videos</button>
|
|
<a href="/channels" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h3>How to find a channel's RSS URL</h3>
|
|
<ol>
|
|
<li>Go to the YouTube channel page</li>
|
|
<li>Look at the URL in your browser - it will contain the channel ID</li>
|
|
<li>The channel URL format is usually:
|
|
<ul>
|
|
<li><code>youtube.com/channel/CHANNEL_ID</code> or</li>
|
|
<li><code>youtube.com/@username</code> (you'll need to find the channel ID from the page source)</li>
|
|
</ul>
|
|
</li>
|
|
<li>Use the format: <code>https://www.youtube.com/feeds/videos.xml?channel_id=CHANNEL_ID</code></li>
|
|
</ol>
|
|
|
|
<h4>Example</h4>
|
|
<p>
|
|
For channel: <code>https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw</code><br>
|
|
RSS URL: <code>https://www.youtube.com/feeds/videos.xml?channel_id=UC_x5XG1OV2P6uZZ5FSM9Ttw</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|