From 1122c702aff1a21071afaadc20cf9708afba5a91 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 9 Oct 2025 21:55:05 -0400
Subject: [PATCH 1/2] Add NSFW and kid-friendly toggles to upload flows

---
 components/upload-modal.html    | 70 +++++++++++++++++++++++++++++++++
 js/app.js                       | 24 ++++++++---
 js/services/r2Service.js        |  4 ++
 js/ui/components/UploadModal.js | 64 +++++++++++++++++++++++++-----
 4 files changed, 146 insertions(+), 16 deletions(-)

diff --git a/components/upload-modal.html b/components/upload-modal.html
index d44f7976..7805f992 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -711,6 +711,7 @@
                 id="uploadEnableComments"
                 class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
                 checked
+                data-default-checked="true"
               />
               <div>
                 <label for="uploadEnableComments" class="text-sm font-medium text-gray-200"
@@ -721,6 +722,40 @@
                 </p>
               </div>
             </div>
+            <div class="grid gap-3 md:grid-cols-2">
+              <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
+                <input
+                  type="checkbox"
+                  id="uploadIsNsfw"
+                  class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  data-default-checked="false"
+                />
+                <div>
+                  <label for="uploadIsNsfw" class="text-sm font-medium text-gray-200"
+                    >Is this content NSFW?</label
+                  >
+                  <p class="mt-1 text-xs text-gray-400">
+                    Flag mature or explicit uploads so clients can warn viewers before playback.
+                  </p>
+                </div>
+              </div>
+              <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
+                <input
+                  type="checkbox"
+                  id="uploadIsForKids"
+                  class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  data-default-checked="false"
+                />
+                <div>
+                  <label for="uploadIsForKids" class="text-sm font-medium text-gray-200"
+                    >Is this content created for Kids?</label
+                  >
+                  <p class="mt-1 text-xs text-gray-400">
+                    Mark clearly kid-friendly videos so parental controls and playlists stay accurate.
+                  </p>
+                </div>
+              </div>
+            </div>
             <!--
             <div class="flex items-center space-x-2">
               <input
@@ -1385,6 +1420,7 @@
                     id="cloudflareEnableComments"
                     class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
                     checked
+                    data-default-checked="true"
                   />
                   <div>
                     <label for="cloudflareEnableComments" class="text-sm font-medium text-gray-200"
@@ -1395,6 +1431,40 @@
                     </p>
                   </div>
                 </div>
+                <div class="grid gap-3 md:grid-cols-2">
+                  <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
+                    <input
+                      type="checkbox"
+                      id="cloudflareIsNsfw"
+                      class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                      data-default-checked="false"
+                    />
+                    <div>
+                      <label for="cloudflareIsNsfw" class="text-sm font-medium text-gray-200"
+                        >Is this content NSFW?</label
+                      >
+                      <p class="mt-1 text-xs text-gray-400">
+                        Turn this on to signal mature or explicit material to downstream clients.
+                      </p>
+                    </div>
+                  </div>
+                  <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
+                    <input
+                      type="checkbox"
+                      id="cloudflareIsForKids"
+                      class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                      data-default-checked="false"
+                    />
+                    <div>
+                      <label for="cloudflareIsForKids" class="text-sm font-medium text-gray-200"
+                        >Is this content created for Kids?</label
+                      >
+                      <p class="mt-1 text-xs text-gray-400">
+                        Highlight family-safe uploads so moderation tooling and filters stay accurate.
+                      </p>
+                    </div>
+                  </div>
+                </div>
                 <div>
                   <label for="cloudflareFile" class="block text-sm font-medium text-gray-200"
                     >Video or HLS file</label
diff --git a/js/app.js b/js/app.js
index a6b4bd32..ff6f2d8b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2163,6 +2163,16 @@ class Application {
         .filter((entry) => Boolean(entry));
     };
 
+    const normalizeBooleanFlag = (value, defaultValue = false) => {
+      if (value === true) {
+        return true;
+      }
+      if (value === false) {
+        return false;
+      }
+      return Boolean(defaultValue);
+    };
+
     const normalizeImetaVariant = (variant) => {
       if (!variant || typeof variant !== "object") {
         return null;
@@ -2377,12 +2387,12 @@ class Application {
     const description = normalizeString(legacyPayload?.description || "");
     const ws = normalizeString(legacyPayload?.ws || "");
     const xs = normalizeString(legacyPayload?.xs || "");
-    const enableComments =
-      legacyPayload?.enableComments === false
-        ? false
-        : legacyPayload?.enableComments === true
-          ? true
-          : true;
+    const enableComments = normalizeBooleanFlag(
+      legacyPayload?.enableComments,
+      true
+    );
+    const isNsfw = normalizeBooleanFlag(legacyPayload?.isNsfw, false);
+    const isForKids = normalizeBooleanFlag(legacyPayload?.isForKids, false);
 
     const legacyFormData = {
       version: 3,
@@ -2393,6 +2403,8 @@ class Application {
       description,
       mode: isDevMode ? "dev" : "live",
       enableComments,
+      isNsfw,
+      isForKids,
     };
 
     const normalizedNip71 = normalizeNip71Metadata(rawNip71);
diff --git a/js/services/r2Service.js b/js/services/r2Service.js
index 2e45869c..8b307c28 100644
--- a/js/services/r2Service.js
+++ b/js/services/r2Service.js
@@ -673,6 +673,8 @@ class R2Service {
     const ws = String(metadata.ws || "").trim();
     const xs = String(metadata.xs || "").trim();
     const enableComments = metadata.enableComments !== false;
+    const isNsfw = metadata.isNsfw === true;
+    const isForKids = metadata.isForKids === true;
 
     const accountId = (this.cloudflareSettings?.accountId || "").trim();
     const accessKeyId = (this.cloudflareSettings?.accessKeyId || "").trim();
@@ -769,6 +771,8 @@ class R2Service {
           ws,
           xs,
           enableComments,
+          isNsfw,
+          isForKids,
         };
 
         const mergedNip71 = this.buildNip71MetadataForUpload(metadata?.nip71, {
diff --git a/js/ui/components/UploadModal.js b/js/ui/components/UploadModal.js
index 200a89f9..15e3bf4f 100644
--- a/js/ui/components/UploadModal.js
+++ b/js/ui/components/UploadModal.js
@@ -62,6 +62,8 @@ export class UploadModal {
     this.cloudflareWsInput = null;
     this.cloudflareXsInput = null;
     this.cloudflareEnableCommentsInput = null;
+    this.cloudflareIsNsfwInput = null;
+    this.cloudflareIsForKidsInput = null;
     this.cloudflareAdvancedToggle = null;
     this.cloudflareAdvancedToggleLabel = null;
     this.cloudflareAdvancedToggleIcon = null;
@@ -167,6 +169,8 @@ export class UploadModal {
       thumbnail: context.querySelector("#uploadThumbnail") || null,
       description: context.querySelector("#uploadDescription") || null,
       enableComments: context.querySelector("#uploadEnableComments") || null,
+      isNsfw: context.querySelector("#uploadIsNsfw") || null,
+      isForKids: context.querySelector("#uploadIsForKids") || null,
       isPrivate: context.querySelector("#uploadIsPrivate") || null,
     };
 
@@ -196,6 +200,9 @@ export class UploadModal {
     this.cloudflareXsInput = context.querySelector("#cloudflareXs") || null;
     this.cloudflareEnableCommentsInput =
       context.querySelector("#cloudflareEnableComments") || null;
+    this.cloudflareIsNsfwInput = context.querySelector("#cloudflareIsNsfw") || null;
+    this.cloudflareIsForKidsInput =
+      context.querySelector("#cloudflareIsForKids") || null;
     this.cloudflareAdvancedToggle =
       context.querySelector("#cloudflareAdvancedToggle") || null;
     this.cloudflareAdvancedToggleLabel =
@@ -215,6 +222,26 @@ export class UploadModal {
     this.nip71FormManager.registerSection("cloudflare", this.cloudflareSection);
   }
 
+  readCheckboxValue(input, defaultValue = false) {
+    if (!input) {
+      return Boolean(defaultValue);
+    }
+    return input.checked === true;
+  }
+
+  resetCheckbox(input, defaultValue = false) {
+    if (!input) {
+      return;
+    }
+    let fallback = Boolean(defaultValue);
+    if (input.dataset && typeof input.dataset.defaultChecked === "string") {
+      fallback = input.dataset.defaultChecked === "true";
+    } else if (typeof input.defaultChecked === "boolean") {
+      fallback = input.defaultChecked;
+    }
+    input.checked = fallback;
+  }
+
   buildAutoGeneratedImetaVariant(file) {
     if (!file) {
       return null;
@@ -444,13 +471,19 @@ export class UploadModal {
       xs: this.customFormInputs.xs?.value?.trim() || "",
       thumbnail: this.customFormInputs.thumbnail?.value?.trim() || "",
       description: this.customFormInputs.description?.value?.trim() || "",
-      enableComments: this.customFormInputs.enableComments
-        ? !!this.customFormInputs.enableComments.checked
-        : true,
+      enableComments: this.readCheckboxValue(
+        this.customFormInputs.enableComments,
+        true
+      ),
+      isNsfw: this.readCheckboxValue(this.customFormInputs.isNsfw, false),
+      isForKids: this.readCheckboxValue(this.customFormInputs.isForKids, false),
     };
 
     if (this.customFormInputs.isPrivate) {
-      payload.isPrivate = !!this.customFormInputs.isPrivate.checked;
+      payload.isPrivate = this.readCheckboxValue(
+        this.customFormInputs.isPrivate,
+        false
+      );
     }
 
     const nip71Metadata = this.nip71FormManager.collectSection("custom");
@@ -631,7 +664,11 @@ export class UploadModal {
     if (this.cloudflareWsInput) this.cloudflareWsInput.value = "";
     if (this.cloudflareXsInput) this.cloudflareXsInput.value = "";
     if (this.cloudflareEnableCommentsInput)
-      this.cloudflareEnableCommentsInput.checked = true;
+      this.resetCheckbox(this.cloudflareEnableCommentsInput, true);
+    if (this.cloudflareIsNsfwInput)
+      this.resetCheckbox(this.cloudflareIsNsfwInput, false);
+    if (this.cloudflareIsForKidsInput)
+      this.resetCheckbox(this.cloudflareIsForKidsInput, false);
     if (this.cloudflareFileInput) this.cloudflareFileInput.value = "";
     this.nip71FormManager.resetSection("cloudflare");
     this.updateCloudflareProgress(Number.NaN);
@@ -647,9 +684,13 @@ export class UploadModal {
     if (this.customFormInputs.description)
       this.customFormInputs.description.value = "";
     if (this.customFormInputs.enableComments)
-      this.customFormInputs.enableComments.checked = true;
+      this.resetCheckbox(this.customFormInputs.enableComments, true);
+    if (this.customFormInputs.isNsfw)
+      this.resetCheckbox(this.customFormInputs.isNsfw, false);
+    if (this.customFormInputs.isForKids)
+      this.resetCheckbox(this.customFormInputs.isForKids, false);
     if (this.customFormInputs.isPrivate)
-      this.customFormInputs.isPrivate.checked = false;
+      this.resetCheckbox(this.customFormInputs.isPrivate, false);
     this.nip71FormManager.resetSection("custom");
   }
 
@@ -713,9 +754,12 @@ export class UploadModal {
       magnet: this.cloudflareMagnetInput?.value?.trim() || "",
       ws: this.cloudflareWsInput?.value?.trim() || "",
       xs: this.cloudflareXsInput?.value?.trim() || "",
-      enableComments: this.cloudflareEnableCommentsInput
-        ? !!this.cloudflareEnableCommentsInput.checked
-        : true,
+      enableComments: this.readCheckboxValue(
+        this.cloudflareEnableCommentsInput,
+        true
+      ),
+      isNsfw: this.readCheckboxValue(this.cloudflareIsNsfwInput, false),
+      isForKids: this.readCheckboxValue(this.cloudflareIsForKidsInput, false),
     };
 
     const nip71Metadata = this.nip71FormManager.collectSection("cloudflare");

From d33ca197d79d0fa54684536f5f0a6caba4fcb34d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 9 Oct 2025 22:03:58 -0400
Subject: [PATCH 2/2] Prevent conflicting audience flags in upload forms

---
 js/app.js                       |  6 ++-
 js/services/r2Service.js        |  5 ++-
 js/ui/components/UploadModal.js | 75 +++++++++++++++++++++++++++++++--
 3 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/js/app.js b/js/app.js
index ff6f2d8b..95a83d2e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2391,8 +2391,10 @@ class Application {
       legacyPayload?.enableComments,
       true
     );
-    const isNsfw = normalizeBooleanFlag(legacyPayload?.isNsfw, false);
-    const isForKids = normalizeBooleanFlag(legacyPayload?.isForKids, false);
+    const rawIsNsfw = normalizeBooleanFlag(legacyPayload?.isNsfw, false);
+    const rawIsForKids = normalizeBooleanFlag(legacyPayload?.isForKids, false);
+    const isNsfw = rawIsNsfw;
+    const isForKids = rawIsNsfw ? false : rawIsForKids;
 
     const legacyFormData = {
       version: 3,
diff --git a/js/services/r2Service.js b/js/services/r2Service.js
index 8b307c28..f6518809 100644
--- a/js/services/r2Service.js
+++ b/js/services/r2Service.js
@@ -674,7 +674,10 @@ class R2Service {
     const xs = String(metadata.xs || "").trim();
     const enableComments = metadata.enableComments !== false;
     const isNsfw = metadata.isNsfw === true;
-    const isForKids = metadata.isForKids === true;
+    const isForKids = metadata.isForKids === true && !isNsfw;
+
+    metadata.isNsfw = isNsfw;
+    metadata.isForKids = isForKids;
 
     const accountId = (this.cloudflareSettings?.accountId || "").trim();
     const accessKeyId = (this.cloudflareSettings?.accessKeyId || "").trim();
diff --git a/js/ui/components/UploadModal.js b/js/ui/components/UploadModal.js
index 15e3bf4f..0b21a96b 100644
--- a/js/ui/components/UploadModal.js
+++ b/js/ui/components/UploadModal.js
@@ -76,6 +76,7 @@ export class UploadModal {
     this.r2BaseDomainInput = null;
 
     this.nip71FormManager = new Nip71FormManager();
+    this.cleanupHandlers = [];
   }
 
   addEventListener(type, listener, options) {
@@ -242,6 +243,39 @@ export class UploadModal {
     input.checked = fallback;
   }
 
+  sanitizeAudienceFlags(flags = {}) {
+    const isNsfw = flags?.isNsfw === true;
+    const isForKids = flags?.isForKids === true && !isNsfw;
+    return { isNsfw, isForKids };
+  }
+
+  setupMutuallyExclusiveCheckboxes(firstInput, secondInput) {
+    if (!firstInput || !secondInput) {
+      return;
+    }
+
+    const enforceExclusion = (primary, secondary) => {
+      if (primary.checked) {
+        secondary.checked = false;
+      }
+    };
+
+    const handleFirstChange = () => enforceExclusion(firstInput, secondInput);
+    const handleSecondChange = () => enforceExclusion(secondInput, firstInput);
+
+    if (firstInput.checked && secondInput.checked) {
+      secondInput.checked = false;
+    }
+
+    firstInput.addEventListener("change", handleFirstChange);
+    secondInput.addEventListener("change", handleSecondChange);
+
+    this.cleanupHandlers.push(() => {
+      firstInput.removeEventListener("change", handleFirstChange);
+      secondInput.removeEventListener("change", handleSecondChange);
+    });
+  }
+
   buildAutoGeneratedImetaVariant(file) {
     if (!file) {
       return null;
@@ -318,6 +352,20 @@ export class UploadModal {
       });
     }
 
+    if (this.customFormInputs?.isNsfw && this.customFormInputs?.isForKids) {
+      this.setupMutuallyExclusiveCheckboxes(
+        this.customFormInputs.isNsfw,
+        this.customFormInputs.isForKids
+      );
+    }
+
+    if (this.cloudflareIsNsfwInput && this.cloudflareIsForKidsInput) {
+      this.setupMutuallyExclusiveCheckboxes(
+        this.cloudflareIsNsfwInput,
+        this.cloudflareIsForKidsInput
+      );
+    }
+
     this.nip71FormManager.bindSection("custom");
     this.nip71FormManager.bindSection("cloudflare");
   }
@@ -463,6 +511,10 @@ export class UploadModal {
   }
 
   handleCustomSubmit() {
+    const audienceFlags = this.sanitizeAudienceFlags({
+      isNsfw: this.readCheckboxValue(this.customFormInputs.isNsfw, false),
+      isForKids: this.readCheckboxValue(this.customFormInputs.isForKids, false),
+    });
     const payload = {
       title: this.customFormInputs.title?.value?.trim() || "",
       url: this.customFormInputs.url?.value?.trim() || "",
@@ -475,8 +527,7 @@ export class UploadModal {
         this.customFormInputs.enableComments,
         true
       ),
-      isNsfw: this.readCheckboxValue(this.customFormInputs.isNsfw, false),
-      isForKids: this.readCheckboxValue(this.customFormInputs.isForKids, false),
+      ...audienceFlags,
     };
 
     if (this.customFormInputs.isPrivate) {
@@ -747,6 +798,10 @@ export class UploadModal {
 
     const npub = this.safeEncodeNpub(pubkey) || "";
     const file = this.cloudflareFileInput?.files?.[0] || null;
+    const audienceFlags = this.sanitizeAudienceFlags({
+      isNsfw: this.readCheckboxValue(this.cloudflareIsNsfwInput, false),
+      isForKids: this.readCheckboxValue(this.cloudflareIsForKidsInput, false),
+    });
     const metadata = {
       title: this.cloudflareTitleInput?.value?.trim() || "",
       description: this.cloudflareDescriptionInput?.value?.trim() || "",
@@ -758,8 +813,7 @@ export class UploadModal {
         this.cloudflareEnableCommentsInput,
         true
       ),
-      isNsfw: this.readCheckboxValue(this.cloudflareIsNsfwInput, false),
-      isForKids: this.readCheckboxValue(this.cloudflareIsForKidsInput, false),
+      ...audienceFlags,
     };
 
     const nip71Metadata = this.nip71FormManager.collectSection("cloudflare");
@@ -793,6 +847,19 @@ export class UploadModal {
   }
 
   destroy() {
+    if (Array.isArray(this.cleanupHandlers)) {
+      this.cleanupHandlers.forEach((cleanup) => {
+        try {
+          if (typeof cleanup === "function") {
+            cleanup();
+          }
+        } catch (error) {
+          console.warn("[UploadModal] Failed to remove handler", error);
+        }
+      });
+      this.cleanupHandlers = [];
+    }
+
     if (Array.isArray(this.r2Unsubscribes)) {
       this.r2Unsubscribes.forEach((unsubscribe) => {
         try {