feat(ipub): ipub-cover, forcing user to interact to enable autoplay

.epub/example/OEBPS/scripts/ipub.js

@@ -163,7 +163,19 @@ class IPUBBody extends IPUBElement {
 
     this.setAttribute("aria-busy", "true");
 
+    // TODO?: Move IPUBCover's "can-play" logic to here
+
+    console.log("IPUBBody: Defining custom element <ipub-cover>");
+    globalThis.customElements.define(IPUBCover.elementName, IPUBCover);
+
+    /** @type {IPUBCover} */
+    const cover = this.querySelector("ipub-cover");
+    if (!cover) {
+      // TODO: automatically create IPUBCover element if it doesn't exists
+      console.error("IPUBBody: Document doesn't has <ipub-cover> element");
       IPUBBody.defineContentElements();
+    }
+    cover.onclose = IPUBBody.defineContentElements;
 
     this.setAttribute("aria-busy", "false");
   }
@@ -176,6 +188,65 @@ globalThis.addEventListener("load", () => {
   globalThis.customElements.define(IPUBBody.elementName, IPUBBody);
 });
 
+class IPUBCover extends IPUBElement {
+  static elementName = "ipub-cover";
+
+  /**
+   * @type {() => void} callback
+   */
+  onclose = () => {};
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    console.debug("IPUBCover: Setting up cover");
+    this.setAttribute("aria-busy", "true");
+
+    const dialog = this.querySelector("dialog");
+
+    // HACK: Test if we can autoplay interactions, soundtracks, etc
+
+    /** @type {HTMLMediaElement | null} */
+    const media =
+      this.parentElement.querySelector("audio") ??
+      this.parentElement.querySelector("video");
+
+    if (!media) {
+      return;
+    }
+
+    const pastVolume = media.volume;
+    media.volume = 0.1; // don't let the user hear the test audio
+
+    media
+      .play()
+      .then(() => {
+        media.pause();
+        media.volume = pastVolume;
+        media.currentTime = 0;
+
+        console.debug("IPUBCover: Can autoplay interactions, removing cover");
+        dialog.close();
+        this.onclose();
+      })
+      .catch(() => {
+        console.debug(
+          "IPUBCover: Cannot autoplay interactions, covering content",
+        );
+
+        dialog.show();
+
+        dialog.parentElement.addEventListener("click", () => {
+          dialog.close();
+          this.onclose();
+        });
+
+        this.setAttribute("aria-busy", "false");
+        return;
+      });
+  }
+}
+
 class IPUBImage extends IPUBElement {
   static elementName = "ipub-image";
 }