Fix: Ensure comments controller is initialized when opening video modal

This addresses an issue where comments would not display on the first load of the video modal if the DOM elements were not fully bound. The `open()` method now checks if the `commentsList` is missing or disconnected and re-initializes the `CommentsController` if necessary.

Also updated `tests/video-modal-accessibility.test.mjs` to fix a JSDOM environment issue with `navigator` mocking.

js/ui/components/VideoModal.js

@@ -2604,6 +2604,16 @@ export class VideoModal {
     if (!this.videoTitle) {
       this.videoTitle = this.playerModal.querySelector("#videoTitle") || null;
     }
+
+    // Ensure comments controller is initialized if elements are missing
+    if (
+      this.commentsController &&
+      (!this.commentsList || !this.commentsList.isConnected)
+    ) {
+      this.commentsController.destroy();
+      this.commentsController.initialize({ playerModal: this.playerModal });
+    }
+
     // Set title immediately when opening if video has a title
     if (this.videoTitle && video && typeof video.title === "string" && video.title.trim()) {
       this.videoTitle.textContent = video.title.trim();

package-lock.json

@@ -14,7 +14,7 @@
         "webtorrent": "^1.9.7"
       },
       "devDependencies": {
-        "@playwright/test": "^1.56.1",
+        "@playwright/test": "^1.57.0",
         "@tailwindcss/typography": "^0.5.15",
         "autoprefixer": "^10.4.19",
         "cross-env": "^7.0.3",
@@ -912,13 +912,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz",
-      "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
+      "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.56.1"
+        "playwright": "1.57.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4092,13 +4092,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz",
-      "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+      "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.56.1"
+        "playwright-core": "1.57.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4111,9 +4111,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz",
-      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {

package.json

@@ -23,7 +23,7 @@
     "test:unit": "node scripts/run-unit-tests.mjs"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",

tests/video-modal-accessibility.test.mjs

@@ -32,7 +32,11 @@ export async function setupModal({ lazyLoad = false } = {}) {
   globalThis.Event = window.Event;
   globalThis.Node = window.Node;
   globalThis.EventTarget = window.EventTarget;
-  globalThis.navigator = window.navigator;
+  Object.defineProperty(globalThis, "navigator", {
+    value: window.navigator,
+    configurable: true,
+    writable: true,
+  });
   globalThis.location = window.location;
   globalThis.KeyboardEvent = window.KeyboardEvent;
   globalThis.MouseEvent = window.MouseEvent;