From d75f599711e84ef070b257aac8183630964e393f Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Tue, 22 Jul 2025 16:11:49 -0400
Subject: [PATCH] Allow Twitch URL or username input in add stream form

- Add extractTwitchUsername() function to parse various URL formats
- Support https://twitch.tv/username, www.twitch.tv/username, and plain usernames
- Real-time URL parsing - automatically extracts username as user types
- Updated UI labels and placeholder to indicate both input options
- Maintains existing validation and backend compatibility
- Seamless UX - users can paste full URLs or type usernames directly
---
 app/streams/page.tsx | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/streams/page.tsx b/app/streams/page.tsx
index 2f23e7c..2e4f52f 100644
--- a/app/streams/page.tsx
+++ b/app/streams/page.tsx
@@ -66,9 +66,37 @@ export default function AddStream() {
   }, [fetchData]);
 
 
+  const extractTwitchUsername = (input: string): string => {
+    const trimmed = input.trim();
+    
+    // If it's a URL, extract username
+    const urlPatterns = [
+      /^https?:\/\/(www\.)?twitch\.tv\/([a-zA-Z0-9_]+)\/?$/,
+      /^(www\.)?twitch\.tv\/([a-zA-Z0-9_]+)\/?$/,
+      /^twitch\.tv\/([a-zA-Z0-9_]+)\/?$/
+    ];
+    
+    for (const pattern of urlPatterns) {
+      const match = trimmed.match(pattern);
+      if (match) {
+        return match[match.length - 1]; // Last capture group is always the username
+      }
+    }
+    
+    // Otherwise assume it's just a username
+    return trimmed;
+  };
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
+    
+    // Special handling for twitch_username to extract from URL if needed
+    if (name === 'twitch_username') {
+      const username = extractTwitchUsername(value);
+      setFormData((prev) => ({ ...prev, [name]: username }));
+    } else {
+      setFormData((prev) => ({ ...prev, [name]: value }));
+    }
     
     // Clear validation error when user starts typing
     if (validationErrors[name]) {
@@ -213,7 +241,7 @@ export default function AddStream() {
           {/* Twitch Username */}
           <div>
             <label className="block text-white font-semibold mb-3">
-              Twitch Username
+              Twitch Username or URL
             </label>
             <input
               type="text"
@@ -224,7 +252,7 @@ export default function AddStream() {
               className={`input ${
                 validationErrors.twitch_username ? 'border-red-500/60 bg-red-500/10' : ''
               }`}
-              placeholder="Enter Twitch username"
+              placeholder="Enter username or paste full Twitch URL (e.g., 'streamer' or 'https://twitch.tv/streamer')"
             />
             {validationErrors.twitch_username && (
               <div className="text-red-400 text-sm mt-2">