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>
This commit is contained in:
@@ -12,18 +12,17 @@
|
||||
<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>
|
||||
<label for="channel_id">YouTube Channel ID</label>
|
||||
<input
|
||||
type="url"
|
||||
id="rss_url"
|
||||
name="rss_url"
|
||||
placeholder="https://www.youtube.com/feeds/videos.xml?channel_id=..."
|
||||
type="text"
|
||||
id="channel_id"
|
||||
name="channel_id"
|
||||
placeholder="UC_x5XG1OV2P6uZZ5FSM9Ttw"
|
||||
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
|
||||
Enter the YouTube channel ID (starts with UC or UU).
|
||||
</small>
|
||||
</div>
|
||||
|
||||
@@ -35,23 +34,24 @@
|
||||
</div>
|
||||
|
||||
<div class="help-section">
|
||||
<h3>How to find a channel's RSS URL</h3>
|
||||
<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 - it will contain the channel ID</li>
|
||||
<li>The channel URL format is usually:
|
||||
<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><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>
|
||||
<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>
|
||||
<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>
|
||||
For channel URL: <code>https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw</code><br>
|
||||
Channel ID: <code>UC_x5XG1OV2P6uZZ5FSM9Ttw</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
{% if current_user.is_authenticated %}
|
||||
<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="/downloads" class="{% if request.path == '/downloads' %}active{% endif %}">Downloads</a></li>
|
||||
<li><a href="/add-channel" class="{% if request.path == '/add-channel' %}active{% endif %}">Add Channel</a></li>
|
||||
<li class="nav-user">
|
||||
<span>{{ current_user.username }}</span>
|
||||
|
||||
79
templates/downloads.html
Normal file
79
templates/downloads.html
Normal file
@@ -0,0 +1,79 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Downloads - YottoB{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="downloads-page">
|
||||
<div class="page-header">
|
||||
<h2>Download Jobs</h2>
|
||||
<p>View and manage all video downloads</p>
|
||||
</div>
|
||||
|
||||
{% if videos %}
|
||||
<div class="downloads-list">
|
||||
{% for video in videos %}
|
||||
<div class="download-card">
|
||||
<div class="download-thumbnail">
|
||||
{% if video.thumbnail_url %}
|
||||
<img src="{{ video.thumbnail_url }}" alt="{{ video.title }}">
|
||||
{% else %}
|
||||
<div class="thumbnail-placeholder">No thumbnail</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="download-info">
|
||||
<h3 class="download-title">
|
||||
<a href="/watch/{{ video.id }}">{{ video.title }}</a>
|
||||
</h3>
|
||||
<p class="download-channel">{{ video.channel.title }}</p>
|
||||
<div class="download-meta">
|
||||
<span class="download-date">Published: {{ video.published_at.strftime('%Y-%m-%d') }}</span>
|
||||
{% if video.download_started_at %}
|
||||
<span class="download-date">Started: {{ video.download_started_at.strftime('%Y-%m-%d %H:%M') }}</span>
|
||||
{% endif %}
|
||||
{% if video.download_completed_at %}
|
||||
<span class="download-date">Completed: {{ video.download_completed_at.strftime('%Y-%m-%d %H:%M') }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download-status-section">
|
||||
{% if video.download_status.value == 'completed' %}
|
||||
<span class="badge badge-success">Completed</span>
|
||||
{% if video.file_size %}
|
||||
<span class="download-size">{{ (video.file_size / 1024 / 1024) | round(2) }} MB</span>
|
||||
{% endif %}
|
||||
{% elif video.download_status.value == 'downloading' %}
|
||||
<span class="badge badge-info">Downloading...</span>
|
||||
{% elif video.download_status.value == 'failed' %}
|
||||
<span class="badge badge-error">Failed</span>
|
||||
{% if video.download_error %}
|
||||
<p class="download-error">{{ video.download_error }}</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="badge badge-info">Pending</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="download-actions">
|
||||
{% if video.download_status.value == 'pending' or video.download_status.value == 'failed' %}
|
||||
<form method="POST" action="/api/download/{{ video.id }}" style="display: inline;">
|
||||
<button type="submit" class="btn btn-primary">Download</button>
|
||||
</form>
|
||||
{% elif video.download_status.value == 'completed' %}
|
||||
<a href="/watch/{{ video.id }}" class="btn btn-primary">Watch</a>
|
||||
<a href="/api/video/stream/{{ video.id }}?download=1" class="btn btn-secondary">Download File</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<h3>No Videos Yet</h3>
|
||||
<p>Subscribe to channels to see videos here.</p>
|
||||
<a href="/add-channel" class="btn btn-primary">Add Channel</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -5,12 +5,12 @@
|
||||
{% block content %}
|
||||
<div class="watch-page">
|
||||
<div class="video-player-container">
|
||||
{% if video.download_status == 'completed' and video.download_path %}
|
||||
{% if video.download_status.value == 'completed' and video.download_path %}
|
||||
<video controls class="video-player">
|
||||
<source src="/api/video/stream/{{ video.id }}" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
{% elif video.download_status == 'downloading' %}
|
||||
{% elif video.download_status.value == 'downloading' %}
|
||||
<div class="video-placeholder">
|
||||
<div class="placeholder-content">
|
||||
<h3>Video is downloading...</h3>
|
||||
@@ -18,7 +18,7 @@
|
||||
<button class="btn btn-secondary" onclick="location.reload()">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
{% elif video.download_status == 'failed' %}
|
||||
{% elif video.download_status.value == 'failed' %}
|
||||
<div class="video-placeholder error">
|
||||
<div class="placeholder-content">
|
||||
<h3>Download failed</h3>
|
||||
@@ -49,7 +49,7 @@
|
||||
</div>
|
||||
<div class="video-stats">
|
||||
<span class="publish-date">Published: {{ video.published_at.strftime('%B %d, %Y') }}</span>
|
||||
{% if video.download_status == 'completed' and video.download_completed_at %}
|
||||
{% if video.download_status.value == 'completed' and video.download_completed_at %}
|
||||
<span class="download-date">Downloaded: {{ video.download_completed_at.strftime('%B %d, %Y') }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
<div class="video-links">
|
||||
<a href="{{ video.video_url }}" target="_blank" class="btn btn-link">Watch on YouTube</a>
|
||||
{% if video.download_status == 'completed' and video.download_path %}
|
||||
{% if video.download_status.value == 'completed' and video.download_path %}
|
||||
<a href="/api/video/stream/{{ video.id }}?download=1" class="btn btn-secondary" download>Download MP4</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -103,7 +103,7 @@
|
||||
}
|
||||
|
||||
// Auto-refresh if video is downloading
|
||||
{% if video.download_status == 'downloading' %}
|
||||
{% if video.download_status.value == 'downloading' %}
|
||||
setTimeout(() => location.reload(), 10000); // Refresh every 10 seconds
|
||||
{% endif %}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user