Add real fullscreen mode using the Fullscreen API (like YouTube videos)

[nileshpahari]

Context

Currently, the BookReader fullscreen button only maximizes the viewer inside the browser tab.
It would be great to have true fullscreen support (like YouTube videos) using the Fullscreen API, where the browser UI is hidden and only the book pages are visible.

This would improve reading immersion.

Proposal & Constraints

• Add a true fullscreen mode to BookReader using the Fullscreen API (element.requestFullscreen()

Precedent:

• YouTube, Dailymotion and many web-based document/image viewers already use the Fullscreen API successfully.

• The Fullscreen API is well-supported across all modern browsers, including mobile.

Additional Resources

Example implementation: element.requestFullscreen()
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Success Metrics

• Increase in time spent per reading session (less distraction → more immersion)

• Positive user feedback about fullscreen mode

Stakeholders

@cdrini

[nileshpahari]

Also I would like to work on this feature if approved.

[Manish636342]

// Select the container you want to fullscreen
const bookReader = document.getElementById("BookReader");

// Toggle fullscreen
function toggleFullscreen() {
if (!document.fullscreenElement) {
enterFullscreen();
} else {
exitFullscreen();
}
}

function enterFullscreen() {
if (bookReader.requestFullscreen) {
bookReader.requestFullscreen();
} else if (bookReader.webkitRequestFullscreen) { // Safari
bookReader.webkitRequestFullscreen();
} else if (bookReader.msRequestFullscreen) { // Old MS browsers
bookReader.msRequestFullscreen();
}
}

function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}

// Listen for fullscreen change to update UI (optional)
document.addEventListener("fullscreenchange", () => {
const isFullscreen = !!document.fullscreenElement;
console.log("Fullscreen:", isFullscreen);

// Example: change button icon
const btn = document.getElementById("fullscreenBtn");
btn.textContent = isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen";
});