From 0acdba0b73169a0c5c2f82c1fad861c514a5b4f3 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Fri, 24 Oct 2025 16:36:19 -0400 Subject: [PATCH] Adjust video modal comments and torrent stats --- components/video-modal.html | 78 +++++++++-------- js/app.js | 15 ++++ js/ui/components/VideoModal.js | 131 ++++++++++++++++++++++++---- tests/video-modal-comments.test.mjs | 7 +- 4 files changed, 175 insertions(+), 56 deletions(-) diff --git a/components/video-modal.html b/components/video-modal.html index 63a0040a..a37e9a97 100644 --- a/components/video-modal.html +++ b/components/video-modal.html @@ -68,6 +68,39 @@ + +
@@ -413,6 +446,16 @@

+ +
- -
-
-
-
- -

-
-
- Peers: 0 - Speed: 0 KB/s - Downloaded: 0 MB / 0 MB -
-
-
diff --git a/js/app.js b/js/app.js index 3033d980..6bbdbec7 100644 --- a/js/app.js +++ b/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 } = {}) => { diff --git a/js/ui/components/VideoModal.js b/js/ui/components/VideoModal.js index 56c028c0..3675f0d0 100644 --- a/js/ui/components/VideoModal.js +++ b/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 || ""; diff --git a/tests/video-modal-comments.test.mjs b/tests/video-modal-comments.test.mjs index 1e9e1ee6..ce666ffd 100644 --- a/tests/video-modal-comments.test.mjs +++ b/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 = [];