Files
yottob/templates/add_channel.html
Ryan Chen acb2ec0654 Implement UI improvements and download management features
- Switch to light mode with black and white color scheme
- Simplify channel subscription to use channel ID only instead of RSS URL
- Add Downloads page to track all video download jobs
- Fix Flask-Login session management bug in user loader
- Always filter YouTube Shorts from feeds (case-insensitive)
- Fix download service video URL attribute error
- Fix watch page enum comparison for download status display

UI Changes:
- Update CSS to pure black/white/grayscale theme
- Remove colored text and buttons
- Use underlines for hover states instead of color changes
- Improve visual hierarchy with grayscale shades

Channel Subscription:
- Accept channel ID directly instead of full RSS URL
- Add validation for channel ID format (UC/UU prefix)
- Update help text and examples for easier onboarding

Downloads Page:
- New route at /downloads showing all video download jobs
- Display status, progress, and metadata for each download
- Sortable by status (downloading, pending, failed, completed)
- Actions to download, retry, or watch videos
- Responsive grid layout with thumbnails

Bug Fixes:
- Fix user loader to properly use database session context manager
- Fix download service accessing wrong attribute (link → video_url)
- Fix watch page template enum value comparisons
- Fix session detachment issues when accessing channel data

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 15:36:26 -05:00

59 lines
2.0 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="channel_id">YouTube Channel ID</label>
<input
type="text"
id="channel_id"
name="channel_id"
placeholder="UC_x5XG1OV2P6uZZ5FSM9Ttw"
required
class="form-input"
>
<small class="form-help">
Enter the YouTube channel ID (starts with UC or UU).
</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 ID</h3>
<ol>
<li>Go to the YouTube channel page</li>
<li>Look at the URL in your browser</li>
<li>If the URL is <code>youtube.com/channel/CHANNEL_ID</code>, copy the CHANNEL_ID part</li>
<li>If the URL is <code>youtube.com/@username</code>, you'll need to:
<ul>
<li>Right-click the page and select "View Page Source"</li>
<li>Search for "channelId" or "browse_id"</li>
<li>Copy the ID that starts with "UC"</li>
</ul>
</li>
</ol>
<h4>Example</h4>
<p>
For channel URL: <code>https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw</code><br>
Channel ID: <code>UC_x5XG1OV2P6uZZ5FSM9Ttw</code>
</p>
</div>
</div>
{% endblock %}