Add source toggle to upload modal

components/upload-modal.html

@@ -50,8 +50,34 @@
       </div>
 
       <!-- Form Content -->
-      <div class="p-6 space-y-4">
-        <form id="uploadForm" class="space-y-4">
+      <div class="p-6 space-y-6">
+        <div class="flex justify-center">
+          <div
+            class="inline-flex items-center rounded-full bg-gray-800/80 p-1 text-sm"
+            role="group"
+            aria-label="Upload mode selector"
+          >
+            <button
+              type="button"
+              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-gray-700/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+              data-upload-mode="custom"
+              aria-pressed="true"
+            >
+              Custom
+            </button>
+            <button
+              type="button"
+              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-gray-700/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+              data-upload-mode="cloudflare"
+              aria-pressed="false"
+            >
+              Cloudflare
+            </button>
+          </div>
+        </div>
+
+        <div id="customUploadSection">
+          <form id="uploadForm" class="space-y-4">
           <p class="text-sm text-gray-400">
             Share a title plus either a hosted video URL or a magnet link. Providing both helps Bitvid fall back gracefully.
           </p>
@@ -166,6 +192,15 @@
             Publish
           </button>
         </form>
+        </div>
+
+        <div id="cloudflareUploadSection" class="hidden">
+          <div
+            class="flex min-h-[320px] items-center justify-center rounded-lg border border-dashed border-gray-700 bg-black/20 p-8 text-center text-sm text-gray-400"
+          >
+            Cloudflare uploads are coming soon.
+          </div>
+        </div>
       </div>
     </div>
   </div>

js/app.js

@@ -455,6 +455,10 @@ class bitvidApp {
     this.closeUploadModalBtn =
       document.getElementById("closeUploadModal") || null;
     this.uploadForm = document.getElementById("uploadForm") || null;
+    this.uploadModeToggleButtons = [];
+    this.customUploadSection = null;
+    this.cloudflareUploadSection = null;
+    this.activeUploadMode = "custom";
 
     // Optional small inline player stats
     this.status = document.getElementById("status") || null;
@@ -1041,6 +1045,13 @@ class bitvidApp {
       this.closeUploadModalBtn =
         document.getElementById("closeUploadModal") || null;
       this.uploadForm = document.getElementById("uploadForm") || null;
+      this.uploadModeToggleButtons = Array.from(
+        document.querySelectorAll(".upload-mode-toggle[data-upload-mode]")
+      );
+      this.customUploadSection =
+        document.getElementById("customUploadSection") || null;
+      this.cloudflareUploadSection =
+        document.getElementById("cloudflareUploadSection") || null;
 
       // Optional: if close button found, wire up
       if (this.closeUploadModalBtn) {
@@ -1058,6 +1069,17 @@ class bitvidApp {
         });
       }
 
+      if (this.uploadModeToggleButtons.length > 0) {
+        this.uploadModeToggleButtons.forEach((btn) => {
+          btn.addEventListener("click", () => {
+            const mode = btn.dataset.uploadMode || "custom";
+            this.setUploadMode(mode);
+          });
+        });
+      }
+
+      this.setUploadMode(this.activeUploadMode);
+
       console.log("Upload modal initialization successful");
       return true;
     } catch (error) {
@@ -1067,6 +1089,42 @@ class bitvidApp {
     }
   }
 
+  setUploadMode(mode) {
+    const normalized = mode === "cloudflare" ? "cloudflare" : "custom";
+    this.activeUploadMode = normalized;
+
+    if (this.customUploadSection) {
+      if (normalized === "custom") {
+        this.customUploadSection.classList.remove("hidden");
+      } else {
+        this.customUploadSection.classList.add("hidden");
+      }
+    }
+
+    if (this.cloudflareUploadSection) {
+      if (normalized === "cloudflare") {
+        this.cloudflareUploadSection.classList.remove("hidden");
+      } else {
+        this.cloudflareUploadSection.classList.add("hidden");
+      }
+    }
+
+    if (Array.isArray(this.uploadModeToggleButtons)) {
+      this.uploadModeToggleButtons.forEach((btn) => {
+        if (!btn || !btn.dataset) {
+          return;
+        }
+
+        const isActive = btn.dataset.uploadMode === normalized;
+        btn.classList.toggle("bg-blue-500", isActive);
+        btn.classList.toggle("text-white", isActive);
+        btn.classList.toggle("shadow", isActive);
+        btn.classList.toggle("text-gray-300", !isActive);
+        btn.setAttribute("aria-pressed", isActive ? "true" : "false");
+      });
+    }
+  }
+
   /**
    * (Optional) Initialize a separate profile modal (profile-modal.html).
    */