Google Play Books Minimalistic - TamperMonkey

google-play-books-minimalistic.js

// ==UserScript==
// @name         Google Play Books Minimalistic
// @namespace    http://tampermonkey.net/
// @version      1
// @description  
// @author       zurfyx
// @homepageURL  https://gist.github.com/zurfyx/bc39aa7119d1ebbc469daee7c04fd0fd
// @match        https://books.googleusercontent.com/books/reader/frame*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    let handleMouseMove;

    function customizeReader() {
        // Function to remove element by class name
        function removeElementByClass(doc, className) {
            let elements = doc.getElementsByClassName(className);
            while (elements.length > 0) {
                elements[0].parentNode.removeChild(elements[0]);
            }
        }

        // Remove the element with class "scrubber"
        removeElementByClass(document, "scrubber");

        // Initially hide the reader-app-bar
        let readerAppBar = document.querySelector("reader-app-bar");
        if (readerAppBar) {
            readerAppBar.style.transition = "opacity 0.3s";
            readerAppBar.style.opacity = "0";
            readerAppBar.style.pointerEvents = "none";

            // Remove the previous debounced event listener if it exists
            if (handleMouseMove) {
                document.removeEventListener("mousemove", handleMouseMove);
            }

            // Add debounced event listener to show reader-app-bar on mouse hover
            handleMouseMove = debounce(function(event) {
                if (readerAppBar) {
                    const rect = readerAppBar.getBoundingClientRect();
                    if (
                        event.clientX >= rect.left &&
                        event.clientX <= rect.right &&
                        event.clientY >= rect.top &&
                        event.clientY <= rect.bottom
                    ) {
                        readerAppBar.style.opacity = "1";
                        readerAppBar.style.pointerEvents = "auto";
                    } else {
                        readerAppBar.style.opacity = "0";
                        readerAppBar.style.pointerEvents = "none";
                    }
                }
            }, 50);

            document.addEventListener("mousemove", handleMouseMove);
        }

        // Remove the "Previous Page" and "Next Page" buttons by aria-label
        let buttons = document.querySelectorAll("button[aria-label='Previous Page'], button[aria-label='Next Page']");
        buttons.forEach(button => {
            button.parentNode.removeChild(button);
        });

        // Apply CSS justify-content: center and color #5f6368 to class "page-controls"
        let pageControls = document.getElementsByClassName("page-controls");
        for (let control of pageControls) {
            control.style.justifyContent = "center";
            control.style.color = "#5f6368";
        }

        // Remove the min-width style from the element inside class "page-nums"
        let pageNums = document.getElementsByClassName("page-nums");
        if (pageNums.length > 0) {
            let rangeElement = pageNums[0].querySelector(".range");
            if (rangeElement && rangeElement.style.minWidth) {
                rangeElement.style.minWidth = null;
            }
        }
    }

    // Use MutationObserver to wait until the target elements are loaded
    const observer = new MutationObserver((mutations, obs) => {
        let readerAppBar = document.querySelector("reader-app-bar");
        let pageNums = document.querySelector(".page-nums");
        let rangeElement = pageNums ? pageNums.querySelector(".range") : null;
        if (readerAppBar && pageNums && rangeElement) {
            customizeReader();
            obs.disconnect();
        }
    });

    // Observe the document for added nodes
    observer.observe(document, { childList: true, subtree: true });

    // Use ResizeObserver to detect body size changes
    const resizeObserver = new ResizeObserver(debounce(() => {
        customizeReader();
    }, 1000));

    resizeObserver.observe(document.body);
})();