Fix video modal layering and playback readiness

css/style.css

@@ -990,6 +990,8 @@ body.modal-open #app {
 body.modal-open #sidebar,
 body.modal-open #sidebarOverlay {
   pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
 }
 
 body.modal-open #sidebar {
@@ -1000,6 +1002,13 @@ body.modal-open #sidebarOverlay {
   z-index: calc(var(--z-sidebar-overlay) - 1);
 }
 
+#sidebar.is-modal-hidden,
+#sidebarOverlay.is-modal-hidden {
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
 /* Modal Content Container */
 .modal-content {
   width: 100%;

js/app.js

@@ -1187,35 +1187,39 @@ class Application {
   /**
    * Show the modal and set the "Please stand by" poster on the video.
    */
-  showModalWithPoster(video = this.currentVideo) {
+  async showModalWithPoster(video = this.currentVideo) {
     if (!this.videoModal) {
-      return Promise.resolve(null);
+      return null;
     }
 
     const targetVideo = video || this.currentVideo;
 
-    return this.ensureVideoModalReady({ ensureVideoElement: true })
-      .then(({ root }) => {
-        if (!this.videoModal) {
-          return root || null;
-        }
-        this.videoModal.open(targetVideo);
-        this.applyModalLoadingPoster();
-        return (
-          root ||
-          (typeof this.videoModal.getRoot === "function"
-            ? this.videoModal.getRoot()
-            : null)
-        );
-      })
-      .catch((error) => {
-        console.error(
-          "[Application] Failed to open the video modal before playback:",
-          error
-        );
-        this.showError("Could not open the video player. Please try again.");
-        return null;
+    try {
+      const { root } = await this.ensureVideoModalReady({
+        ensureVideoElement: true,
       });
+
+      if (!this.videoModal) {
+        return root || null;
+      }
+
+      this.videoModal.open(targetVideo);
+      this.applyModalLoadingPoster();
+
+      return (
+        root ||
+        (typeof this.videoModal.getRoot === "function"
+          ? this.videoModal.getRoot()
+          : null)
+      );
+    } catch (error) {
+      console.error(
+        "[Application] Failed to open the video modal before playback:",
+        error
+      );
+      this.showError("Could not open the video player. Please try again.");
+      return null;
+    }
   }
 
   applyModalLoadingPoster() {
@@ -7400,7 +7404,7 @@ class Application {
       legacyInfoHash ||
       "";
 
-    this.showModalWithPoster(this.currentVideo);
+    await this.showModalWithPoster(this.currentVideo);
 
     const playbackPromise = this.playVideoWithFallback({
       url: trimmedUrl,
@@ -7529,7 +7533,7 @@ class Application {
       });
     }
 
-    this.showModalWithPoster(this.currentVideo);
+    await this.showModalWithPoster(this.currentVideo);
 
     const urlObj = new URL(window.location.href);
     urlObj.searchParams.delete("v");

js/services/playbackService.js

@@ -434,7 +434,7 @@ class PlaybackSession extends SimpleEventEmitter {
       }
 
       if (typeof showModalWithPoster === "function") {
-        showModalWithPoster();
+        await Promise.resolve(showModalWithPoster());
       }
 
       this.emit("status", { message: "Preparing video..." });

js/ui/components/VideoModal.js

@@ -391,6 +391,34 @@ export class VideoModal {
     this.dispatch("creator:navigate", { video: this.activeVideo });
   }
 
+  toggleBackgroundInert(enable) {
+    const ids = ["sidebar", "sidebarOverlay"];
+    for (const id of ids) {
+      const element = this.document.getElementById(id);
+      if (!element) {
+        continue;
+      }
+
+      if (enable) {
+        if (!element.hasAttribute("inert")) {
+          element.setAttribute("inert", "");
+        }
+        element.dataset.modalInert = "true";
+        element.setAttribute("aria-hidden", "true");
+        element.classList.add("is-modal-hidden");
+      } else {
+        if (element.dataset.modalInert === "true") {
+          element.removeAttribute("inert");
+          delete element.dataset.modalInert;
+        }
+        if (element.getAttribute("aria-hidden") === "true") {
+          element.removeAttribute("aria-hidden");
+        }
+        element.classList.remove("is-modal-hidden");
+      }
+    }
+  }
+
   open(video) {
     this.activeVideo = video || null;
     if (!this.playerModal) {
@@ -401,6 +429,7 @@ export class VideoModal {
     this.playerModal.classList.remove("hidden");
     this.document.body.classList.add("modal-open");
     this.document.documentElement.classList.add("modal-open");
+    this.toggleBackgroundInert(true);
     if (this.scrollRegion) {
       this.scrollRegion.scrollTop = 0;
     }
@@ -416,6 +445,7 @@ export class VideoModal {
     }
     this.document.body.classList.remove("modal-open");
     this.document.documentElement.classList.remove("modal-open");
+    this.toggleBackgroundInert(false);
     this.setGlobalModalState("player", false);
     this.forceRemovePoster("close");
   }