Merge pull request #864 from PR0M3TH3AN/codex/debug-nostr-comments-issue-in-video-modal

Adjust video modal comments handling and torrent stats placement

components/video-modal.html

@@ -68,6 +68,39 @@
               </div>
             </div>
 
+            <div
+              class="watch-container"
+              data-video-stats-container
+              hidden
+            >
+              <div
+                class="video-modal__stats rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5 shadow-sm"
+                data-video-stats
+              >
+                <div class="video-modal__progress">
+                  <progress
+                    id="modalProgress"
+                    class="progress"
+                    max="100"
+                    value="0"
+                    data-variant="accent"
+                    aria-label="Download progress"
+                  ></progress>
+                  <p
+                    id="modalProgressStatus"
+                    class="sr-only"
+                    role="status"
+                    aria-live="polite"
+                  ></p>
+                </div>
+                <div class="video-modal__stat-metrics flex flex-wrap items-center justify-between gap-3 text-sm text-muted">
+                  <span id="modalPeers">Peers: 0</span>
+                  <span id="modalSpeed">Speed: 0 KB/s</span>
+                  <span id="modalDownloaded">Downloaded: 0 MB / 0 MB</span>
+                </div>
+              </div>
+            </div>
+
             <div class="watch-container">
               <div class="modal-info-panel">
                 <div class="video-modal__details flex flex-col gap-6">
@@ -413,6 +446,16 @@
                   </p>
                 </div>
 
+                <div
+                  class="comment-thread__disabled"
+                  data-comments-disabled-placeholder
+                  role="status"
+                  aria-live="polite"
+                  hidden
+                >
+                  Comments have been turned off for this video.
+                </div>
+
                 <section
                   class="video-modal__comments comment-thread"
                   aria-labelledby="videoModalCommentsHeading"
@@ -460,16 +503,6 @@
                     Load more comments
                   </button>
 
-                  <div
-                    class="comment-thread__disabled"
-                    data-comments-disabled
-                    role="status"
-                    aria-live="polite"
-                    hidden
-                  >
-                    Comments are turned off for this video.
-                  </div>
-
                   <form
                     class="comment-composer"
                     data-comments-composer
@@ -555,31 +588,6 @@
               </section>
             </div>
 
-            <div class="watch-container">
-              <div class="video-modal__stats rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5 shadow-sm">
-                <div class="video-modal__progress">
-                  <progress
-                    id="modalProgress"
-                    class="progress"
-                    max="100"
-                    value="0"
-                    data-variant="accent"
-                    aria-label="Download progress"
-                  ></progress>
-                  <p
-                    id="modalProgressStatus"
-                    class="sr-only"
-                    role="status"
-                    aria-live="polite"
-                  ></p>
-                </div>
-                <div class="video-modal__stat-metrics flex flex-wrap items-center justify-between gap-3 text-sm text-muted">
-                  <span id="modalPeers">Peers: 0</span>
-                  <span id="modalSpeed">Speed: 0 KB/s</span>
-                  <span id="modalDownloaded">Downloaded: 0 MB / 0 MB</span>
-                </div>
-              </div>
-            </div>
           </aside>
         </div>
       </div>

js/app.js

@@ -2328,8 +2328,13 @@ class Application {
 
     this.teardownModalCommentSubscription({ resetUi: false });
 
+    this.videoModal.hideCommentsDisabledMessage?.();
+
     if (video.enableComments === false) {
       this.resetModalCommentState();
+      this.videoModal.showCommentsDisabledMessage?.(
+        "Comments have been turned off for this video."
+      );
       return;
     }
 
@@ -2398,6 +2403,9 @@ class Application {
     }
 
     if (this.currentVideo?.enableComments === false) {
+      this.videoModal.showCommentsDisabledMessage?.(
+        "Comments have been turned off for this video."
+      );
       this.videoModal.setCommentComposerState?.({
         disabled: true,
         reason: "disabled",
@@ -2405,6 +2413,8 @@ class Application {
       return;
     }
 
+    this.videoModal.hideCommentsDisabledMessage?.();
+
     if (!this.isUserLoggedIn()) {
       this.videoModal.setCommentComposerState?.({
         disabled: true,
@@ -8222,6 +8232,7 @@ class Application {
 
       if (this.videoModal) {
         this.videoModal.updateStatus("Streaming via WebTorrent");
+        this.videoModal.setTorrentStatsVisibility?.(true);
       }
 
       const torrentInstance = await torrentClient.streamVideo(
@@ -8511,6 +8522,10 @@ class Application {
 
     subscribe("sourcechange", ({ source } = {}) => {
       this.playSource = source || null;
+      const usingTorrent = source === "torrent";
+      if (this.videoModal) {
+        this.videoModal.setTorrentStatsVisibility?.(usingTorrent);
+      }
     });
 
     subscribe("error", ({ error, message } = {}) => {

js/ui/components/VideoModal.js

@@ -61,6 +61,8 @@ export class VideoModal {
     this.modalStatus = null;
     this.modalProgress = null;
     this.modalProgressStatus = null;
+    this.modalStatsContainer = null;
+    this.modalStats = null;
     this.modalPeers = null;
     this.modalSpeed = null;
     this.modalDownloaded = null;
@@ -145,7 +147,8 @@ export class VideoModal {
     this.commentsEmptyState = null;
     this.commentsList = null;
     this.commentsLoadMoreButton = null;
-    this.commentsDisabledMessage = null;
+    this.commentsDisabledPlaceholder = null;
+    this.commentsDisabledPlaceholderDefaultText = "";
     this.commentsComposer = null;
     this.commentsInput = null;
     this.commentsSubmitButton = null;
@@ -397,17 +400,27 @@ export class VideoModal {
     this.similarContentList = similarList;
     this.similarContentContainer = similarContainer;
 
+    const statsContainerCandidate =
+      playerModal.querySelector("[data-video-stats-container]") ||
+      playerModal
+        .querySelector("[data-video-stats]")
+        ?.closest("[data-video-stats-container]") ||
+      playerModal
+        .querySelector("[data-video-stats]")
+        ?.closest(".watch-container") ||
+      playerModal.querySelector("[data-video-stats]") ||
+      playerModal
+        .querySelector(".video-modal__stats")
+        ?.closest(".watch-container") ||
+      playerModal.querySelector(".video-modal__stats") ||
+      null;
+
     this.normalizeModalLayoutStructure(playerModal, {
       layout: playerModal.querySelector(".video-modal__layout") || null,
       primary: playerModal.querySelector(".video-modal__primary") || null,
       secondary: playerModal.querySelector(".video-modal__secondary") || null,
       similarContainer,
-      statsContainer:
-        playerModal
-          .querySelector(".video-modal__stats")
-          ?.closest(".watch-container") ||
-        playerModal.querySelector(".video-modal__stats") ||
-        null,
+      statsContainer: statsContainerCandidate,
     });
 
     this.setupSimilarContentMediaQuery();
@@ -428,10 +441,21 @@ export class VideoModal {
     this.modalProgress = playerModal.querySelector("#modalProgress") || null;
     this.modalProgressStatus =
       playerModal.querySelector("#modalProgressStatus") || null;
+    this.modalStatsContainer =
+      playerModal.querySelector("[data-video-stats-container]") ||
+      statsContainerCandidate ||
+      null;
+    this.modalStats =
+      playerModal.querySelector("[data-video-stats]") ||
+      this.modalStatsContainer?.querySelector("[data-video-stats]") ||
+      this.modalStatsContainer?.querySelector(".video-modal__stats") ||
+      playerModal.querySelector(".video-modal__stats") ||
+      null;
     this.modalPeers = playerModal.querySelector("#modalPeers") || null;
     this.modalSpeed = playerModal.querySelector("#modalSpeed") || null;
     this.modalDownloaded =
       playerModal.querySelector("#modalDownloaded") || null;
+    this.setTorrentStatsVisibility(false);
     this.videoTitle = playerModal.querySelector("#videoTitle") || null;
     this.videoDescription =
       playerModal.querySelector("#videoDescription") || null;
@@ -512,8 +536,10 @@ export class VideoModal {
       commentsRoot?.querySelector("[data-comments-list]") || null;
     this.commentsLoadMoreButton =
       commentsRoot?.querySelector("[data-comments-load-more]") || null;
-    this.commentsDisabledMessage =
-      commentsRoot?.querySelector("[data-comments-disabled]") || null;
+    this.commentsDisabledPlaceholder =
+      playerModal.querySelector("[data-comments-disabled-placeholder]") ||
+      commentsRoot?.querySelector("[data-comments-disabled]") ||
+      null;
     this.commentsComposer =
       commentsRoot?.querySelector("[data-comments-composer]") || null;
     this.commentsInput =
@@ -558,8 +584,12 @@ export class VideoModal {
       }
     }
 
-    if (this.commentsDisabledMessage) {
-      this.commentsDisabledMessage.setAttribute("hidden", "");
+    if (this.commentsDisabledPlaceholder) {
+      const disabledText = this.commentsDisabledPlaceholder.textContent || "";
+      if (disabledText) {
+        this.commentsDisabledPlaceholderDefaultText = disabledText;
+      }
+      this.commentsDisabledPlaceholder.setAttribute("hidden", "");
     }
     if (this.commentsComposer) {
       this.commentsComposer.removeAttribute("hidden");
@@ -847,6 +877,36 @@ export class VideoModal {
     }
   }
 
+  showCommentsDisabledMessage(message) {
+    const placeholder = this.commentsDisabledPlaceholder;
+    if (placeholder) {
+      const fallbackText = this.commentsDisabledPlaceholderDefaultText || "";
+      const nextText =
+        typeof message === "string" && message.trim()
+          ? message.trim()
+          : fallbackText;
+      if (nextText) {
+        placeholder.textContent = nextText;
+      } else if (fallbackText) {
+        placeholder.textContent = fallbackText;
+      }
+      placeholder.removeAttribute("hidden");
+      placeholder.classList?.remove("hidden");
+    }
+    this.setCommentsVisibility(false);
+  }
+
+  hideCommentsDisabledMessage() {
+    const placeholder = this.commentsDisabledPlaceholder;
+    if (placeholder) {
+      if (this.commentsDisabledPlaceholderDefaultText) {
+        placeholder.textContent = this.commentsDisabledPlaceholderDefaultText;
+      }
+      placeholder.setAttribute("hidden", "");
+      placeholder.classList?.add("hidden");
+    }
+  }
+
   setCommentComposerState({ disabled = false, reason = "" } = {}) {
     const normalizedReason = typeof reason === "string" ? reason : "";
 
@@ -871,12 +931,8 @@ export class VideoModal {
       this.commentsInput.disabled = shouldDisable;
     }
 
-    if (this.commentsDisabledMessage) {
-      if (normalizedReason === "disabled") {
-        this.commentsDisabledMessage.removeAttribute("hidden");
-      } else {
-        this.commentsDisabledMessage.setAttribute("hidden", "");
-      }
+    if (normalizedReason !== "disabled") {
+      this.hideCommentsDisabledMessage();
     }
 
     if (this.commentsComposer) {
@@ -914,6 +970,7 @@ export class VideoModal {
       this.commentsInput.disabled = false;
       this.commentsInput.value = "";
     }
+    this.hideCommentsDisabledMessage();
     this.commentComposerState = {
       disabled: false,
       reason: "",
@@ -1477,7 +1534,8 @@ export class VideoModal {
     this.commentsEmptyState = null;
     this.commentsList = null;
     this.commentsLoadMoreButton = null;
-    this.commentsDisabledMessage = null;
+    this.commentsDisabledPlaceholder = null;
+    this.commentsDisabledPlaceholderDefaultText = "";
     this.commentsComposer = null;
     this.commentsInput = null;
     this.commentsSubmitButton = null;
@@ -2486,6 +2544,7 @@ export class VideoModal {
     this.updateSpeed("");
     this.updateDownloaded("");
     this.updateProgress("0%");
+    this.setTorrentStatsVisibility(false);
   }
 
   updateStatus(message) {
@@ -2494,6 +2553,42 @@ export class VideoModal {
     }
   }
 
+  setTorrentStatsVisibility(shouldShow) {
+    const visible = Boolean(shouldShow);
+    const container = this.modalStatsContainer;
+    const stats = this.modalStats;
+    const toggle = (element, show) => {
+      if (!element) {
+        return;
+      }
+      if (show) {
+        element.removeAttribute("hidden");
+        element.classList?.remove("hidden");
+      } else {
+        element.setAttribute("hidden", "");
+        element.classList?.add("hidden");
+      }
+    };
+
+    if (container) {
+      toggle(container, visible);
+      if (stats) {
+        if (visible) {
+          stats.removeAttribute("hidden");
+          stats.classList?.remove("hidden");
+        } else {
+          stats.setAttribute("hidden", "");
+          stats.classList?.add("hidden");
+        }
+      }
+      return;
+    }
+
+    if (stats) {
+      toggle(stats, visible);
+    }
+  }
+
   updatePeers(text) {
     if (this.modalPeers) {
       this.modalPeers.textContent = text || "";

tests/video-modal-comments.test.mjs

@@ -117,7 +117,7 @@ test("VideoModal comment composer updates messaging and dispatches events", asyn
   modal.setCommentComposerState({ disabled: true, reason: "login-required" });
   assert.equal(modal.commentsInput.disabled, true);
   assert.equal(modal.commentsComposer.hasAttribute("hidden"), false);
-  assert.equal(modal.commentsDisabledMessage.hasAttribute("hidden"), true);
+  assert.equal(modal.commentsDisabledPlaceholder.hasAttribute("hidden"), true);
   assert.equal(modal.commentComposerHint.textContent.trim(), "Log in to add a comment.");
   assert.equal(modal.commentsStatusMessage.textContent.trim(), "");
 
@@ -131,13 +131,14 @@ test("VideoModal comment composer updates messaging and dispatches events", asyn
   );
   assert.ok(modal.commentRetryButton, "retry button should be rendered for error state");
 
+  modal.showCommentsDisabledMessage("Comments have been turned off for this video.");
   modal.setCommentComposerState({ disabled: true, reason: "disabled" });
   assert.equal(modal.commentsComposer.hasAttribute("hidden"), true);
-  assert.equal(modal.commentsDisabledMessage.hasAttribute("hidden"), false);
+  assert.equal(modal.commentsDisabledPlaceholder.hasAttribute("hidden"), false);
 
   modal.setCommentComposerState({ disabled: false, reason: "" });
   assert.equal(modal.commentsComposer.hasAttribute("hidden"), false);
-  assert.equal(modal.commentsDisabledMessage.hasAttribute("hidden"), true);
+  assert.equal(modal.commentsDisabledPlaceholder.hasAttribute("hidden"), true);
   assert.equal(modal.commentComposerHint.textContent.trim(), defaultHint.trim());
 
   const loginRequests = [];