From b52be2ab4262cf08f43e4ed41a7745502d76f45b Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 26 Sep 2025 18:37:34 -0400
Subject: [PATCH] Add source toggle to upload modal

---
 components/upload-modal.html | 39 ++++++++++++++++++++++--
 js/app.js                    | 58 ++++++++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/components/upload-modal.html b/components/upload-modal.html
index d361a352..77414892 100644
--- a/components/upload-modal.html
+++ b/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>
diff --git a/js/app.js b/js/app.js
index be73a127..e6289f56 100644
--- a/js/app.js
+++ b/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).
    */