capytal/comicverse
1
0
Fork 0
Code Issues Pull Requests Activity

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

Browse Source
This commit is contained in:
Guz
2025-10-23 14:59:08 -03:00
parent 84e3a14677
commit 3bede11393
3 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
.epub/example/OEBPS/scripts/ipub.js
View File

@@ -163,7 +163,15 @@ class IPUBBody extends IPUBElement {
this.setAttribute("aria-busy", "true"); this.setAttribute("aria-busy", "true");
console.log("IPUBBody: defining custom element <ipub-cover>");
globalThis.customElements.define(IPUBCover.elementName, IPUBCover);
/** @type {IPUBCover} */
const cover = this.querySelector("ipub-cover");
if (!cover) {
IPUBBody.defineContentElements(); IPUBBody.defineContentElements();
}
cover.onclose = IPUBBody.defineContentElements;
this.setAttribute("aria-busy", "false"); this.setAttribute("aria-busy", "false");
} }
@@ -176,6 +184,64 @@ globalThis.addEventListener("load", () => {
globalThis.customElements.define(IPUBBody.elementName, IPUBBody); 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");
dialog.show();
// HACK: Test if we can autoplay interactions, soundtracks, etc
/** @type {HTMLMediaElement | null} */
const media =
this.parentElement.querySelector("audio") ??
this.parentElement.querySelector("video");
if (!media) {
dialog.close();
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");
this.onclose();
})
.catch(() => {
console.debug(
"IPUBCover: Cannot autoplay interactions, covering content",
);
dialog.parentElement.addEventListener("click", () => {
dialog.close();
this.onclose();
});
this.setAttribute("aria-busy", "false");
return;
});
}
}
class IPUBImage extends IPUBElement { class IPUBImage extends IPUBElement {
static elementName = "ipub-image"; static elementName = "ipub-image";
} }

11
.epub/example/OEBPS/sections/section0001.xhtml
View File

@@ -10,6 +10,17 @@
</head> </head>
<body xmlns:epub="http://www.idpf.org/2007/ops" class="body"> <body xmlns:epub="http://www.idpf.org/2007/ops" class="body">
<ipub-body style="--ipub-padding: 10%;"> <ipub-body style="--ipub-padding: 10%;">
<ipub-cover>
<dialog>
<header>
<h1>Test comic</h1>
<form method="dialog">
<p>Click anywhere to
<button>start Reading</button></p>
</form>
</header>
</dialog>
</ipub-cover>
<main id="content"> <main id="content">
<ipub-background id="background0001"> <ipub-background id="background0001">
<img src="../images/background0001.jpg" width="100" height="100" /> <img src="../images/background0001.jpg" width="100" height="100" />

23
.epub/example/OEBPS/styles/stylesheet.css
View File

@@ -12,6 +12,25 @@
overflow: clip; overflow: clip;
display: flex; display: flex;
--z-cover: 9;
ipub-cover > dialog[open] {
--ipub-accent-color: #fff;
z-index: var(--z-cover);
background-color: transparent;
border: none;
display: inline-block;
position: absolute;
backdrop-filter: blur(1rem);
background-image: linear-gradient(
rgba(from var(--ipub-accent-color) r g b / 0) 0%,
rgba(from var(--ipub-accent-color) r g b / 0.5)
calc(100% + calc(var(--ipub-fade, 50%) * -1))
);
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
ipub-body { ipub-body {
@@ -24,6 +43,10 @@ ipub-body {
flex-direction: column; flex-direction: column;
overflow: scroll; overflow: scroll;
&:has(ipub-cover > dialog[open]) {
overflow: hidden;
}
--ipub-padding: 0%; --ipub-padding: 0%;
--ipub-gap: 0%; --ipub-gap: 0%;
--ipub-padding-x: var(--ipub-padding, 0%); --ipub-padding-x: var(--ipub-padding, 0%);