Add channel URL lookup and auto-detection

- Accept YouTube URLs in any format (@handle, /c/, /user/, /channel/)
- Auto-extract channel ID from URLs using yt-dlp
- Auto-detect channel name from URL (optional field)
- Support direct channel ID input (backwards compatible)
- Prevent duplicate channels
- Updated UI with better instructions and examples
- Improved user experience - just paste channel URL

templates/channels.html

@@ -11,17 +11,20 @@
     <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>
+            <label for="channel_id">Channel URL or 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>
+                   placeholder="https://www.youtube.com/@AltonBrown or UCfDNi1aEljAQ17mUrfUjkvg" class="form-control">
+            <small class="form-help">
+                Paste any YouTube channel URL or enter the channel ID directly<br>
+                <strong>Supported formats:</strong> youtube.com/@handle, youtube.com/channel/ID, youtube.com/c/name, youtube.com/user/name
+            </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>
+            <label for="channel_name">Channel Name</label>
+            <input type="text" id="channel_name" name="channel_name"
+                   placeholder="Alton Brown (optional - auto-detected from URL)" class="form-control">
+            <small class="form-help">Display name for the channel folder. Leave blank to auto-detect from URL.</small>
         </div>
 
         <button type="submit" class="btn btn-primary">Add Channel</button>
@@ -65,14 +68,26 @@
 </div>
 
 <div class="card info-card">
-    <h3>How to Find Channel IDs</h3>
+    <h3>How to Add Channels</h3>
+
+    <h4>Option 1: Paste the Channel URL (Easiest)</h4>
     <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>
+        <li>Go to the YouTube channel you want to sync</li>
+        <li>Copy the URL from your browser address bar</li>
+        <li>Paste it into the "Channel URL or ID" field above</li>
+        <li>Click "Add Channel" - the name will be detected automatically!</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>
+
+    <h4>Option 2: Enter Channel ID Directly</h4>
+    <p>If you have the channel ID (starts with "UC" and is 24 characters long), just paste it directly.</p>
+    <p><strong>Example:</strong> <code>UCfDNi1aEljAQ17mUrfUjkvg</code></p>
+
+    <h4>Supported URL Formats</h4>
+    <ul>
+        <li><code>https://www.youtube.com/@AltonBrown</code> - Modern @ handle format</li>
+        <li><code>https://www.youtube.com/channel/UCfDNi1aEljAQ17mUrfUjkvg</code> - Channel ID format</li>
+        <li><code>https://www.youtube.com/c/AltonBrown</code> - Custom URL format</li>
+        <li><code>https://www.youtube.com/user/altonbrown</code> - Legacy user format</li>
+    </ul>
 </div>
 {% endblock %}