Make Asmr.one download dialog bigger

Make asmr.one download dialog bigger.

// ==UserScript==
// @name              Make Asmr.one download dialog bigger
// @name:zn-CN        放大 Asmr.one 的下载对话框
// @namespace         http://tampermonkey.net/
// @version           1.1.0-20240801
// @description:en    For further tuning, search for "look here" in script.
// @description:zh-CN 如需微调大小，搜索脚本中的 "look here"
// @author            Homo Hamstern (仓猿)
// @match             https://asmr.one/work/*
// @match             https://*.asmr.one/work/*
// @grant             none
// @license           MIT
// @description Make asmr.one download dialog bigger.
// ==/UserScript==

// CSS小白，不知道用!import可以override inline style我哭，下个版本refactor

(async () => {
    "use strict";

    function waitAppearThenDo() {
        let watcher; // 防止 memery leak，但是想多了，下个版本refactor
        /*\
(https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe)
Usage notes
Reusing MutationObservers
You can call observe() multiple times on the same MutationObserver to watch for changes to different parts of the DOM tree and/or different types of changes. There are some caveats to note:

If you call observe() on a node that's already being observed by the same MutationObserver, all existing observers are automatically removed from all targets being observed before the new observer is activated.
If the same MutationObserver is not already in use on the target, then the existing observers are left alone and the new one is added.
*/
        waitForElement(".q-gutter-y-sm .q-scrollarea", {
            afterDisappear: () => {
                watcher.disconnect();
                waitAppearThenDo();
            },
        }).then((element) => {
            watcher = watchOnElement({
                element,
                handler: () => {
                    console.log("");
                    element.style.height = "65vh"; // look here
                },
                attrs: ["style"],
            });
        });
        waitForElement(".q-dialog-plugin").then((elm) => {
            elm.style.width = "800px"; // look here
            elm.style.maxWidth = "800px"; // look here
        });
    }

    waitAppearThenDo();

    function waitForElement(
        selector,
        { parent = document.body, afterDisappear = () => {} } = {},
    ) {
        const observeOptions = {
            childList: true,
            subtree: true,
        };
        return new Promise((resolve) => {
            const target = parent.querySelector(selector);
            if (target) {
                return resolve(target);
            }
            let ping = new MutationObserver((mutations, observer) => {
                const target = parent.querySelector(selector);
                if (target) {
                    observer.disconnect();
                    resolve(target);
                    let pong = new MutationObserver((mutations, observer) => {
                        if (!parent.querySelector(selector)) {
                            observer.disconnect();
                            afterDisappear();
                        }
                    });
                    pong.observe(parent, observeOptions);
                }
            });
            ping.observe(parent, observeOptions);
        });
    }

    function watchOnElement({ element, handler, attrs }) {
        handler();
        const observeOptions = { attributeFilter: attrs };
        let observer = new MutationObserver(() => {
            handler();
        });
        observer.observe(element, observeOptions);
        return observer;
    }
})();