Files
youtube-sync-docker/templates/channels.html
azcomputerguru b3f378a8ef Add web UI for configuration and management
- Flask-based web interface on port 8080
- Dashboard with channel statistics and sync status
- Channel management (add/remove channels via UI)
- Settings page for all configuration options
- Cookie file upload interface
- Real-time log viewer
- Manual sync trigger from web UI
- Updated Dockerfile to include Flask and web assets
- Updated Unraid template with WebUI port
- Updated README with web UI documentation
2026-05-08 19:00:36 -04:00

79 lines
3.0 KiB
HTML

{% extends "base.html" %}
{% block title %}Channels{% endblock %}
{% block content %}
<div class="page-header">
<h2>Channel Management</h2>
</div>
<div class="card">
<h3>Add New Channel</h3>
<form method="POST" action="{{ url_for('add_channel') }}" class="form">
<div class="form-group">
<label for="channel_id">Channel ID <span class="required">*</span></label>
<input type="text" id="channel_id" name="channel_id" required
placeholder="UCfDNi1aEljAQ17mUrfUjkvg" class="form-control">
<small class="form-help">Find this in the channel URL or page source</small>
</div>
<div class="form-group">
<label for="channel_name">Channel Name <span class="required">*</span></label>
<input type="text" id="channel_name" name="channel_name" required
placeholder="Alton Brown" class="form-control">
<small class="form-help">Display name for the channel folder</small>
</div>
<button type="submit" class="btn btn-primary">Add Channel</button>
</form>
</div>
<div class="card">
<h3>Configured Channels</h3>
{% if channels %}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Channel Name</th>
<th>Channel ID</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for channel in channels %}
<tr>
<td><strong>{{ channel.name }}</strong></td>
<td><code>{{ channel.id }}</code></td>
<td>
<a href="https://www.youtube.com/channel/{{ channel.id }}"
target="_blank" class="btn btn-sm btn-secondary">View on YouTube</a>
<a href="{{ url_for('delete_channel', index=loop.index0) }}"
class="btn btn-sm btn-danger"
onclick="return confirm('Delete {{ channel.name }}? Downloaded videos will not be deleted.')">Delete</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="empty-state">
<p>No channels configured yet. Add your first channel above to get started!</p>
</div>
{% endif %}
</div>
<div class="card info-card">
<h3>How to Find Channel IDs</h3>
<ol>
<li>Go to the YouTube channel page</li>
<li>Right-click and select "View Page Source" (or press Ctrl+U / Cmd+U)</li>
<li>Search for "channelId" (Ctrl+F / Cmd+F)</li>
<li>Copy the value that looks like: <code>UCfDNi1aEljAQ17mUrfUjkvg</code></li>
</ol>
<p><strong>Alternative:</strong> Some channel URLs include the ID directly:<br>
<code>youtube.com/channel/<strong>CHANNEL_ID_HERE</strong>/videos</code></p>
</div>
{% endblock %}