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 @@ -
-
+
+
+
+ + +
+
+ +
+

Share a title plus either a hosted video URL or a magnet link. Providing both helps Bitvid fall back gracefully.

@@ -166,6 +192,15 @@ Publish +
+ +
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). */