youtube auto-hide header

youtubeのヘッダーを自動で隠します（スクロールか画面上部ホバーで表示）

// ==UserScript==
// @name         youtube auto-hide header
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  youtubeのヘッダーを自動で隠します（スクロールか画面上部ホバーで表示）
// @author       y_kahou
// @match        https://www.youtube.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @license      MIT
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// @require      https://greasyfork.org/scripts/419955-y-method/code/y_method.js?version=1051149
// @noframes
// ==/UserScript==

/** スクロール後ヘッダーが表示されている時間 */
const SHOW_INTERVAL_SCROLL = 3000;

/** topにマウスを載せてからヘッダーが出るまでの時間 */
const SHOW_INTERVAL_HOVER = 300;

/** topからマウスをどけてヘッダーが消えるまでの時間 */
const HIDE_INTERVAL_HOVER = 1000;


let mouseX = -1, mouseY = -1;

(function() {

    // ページ遷移を検知できるようにする
    y_method.DetectPagetransition();

    y_method.PageLauncher([
        {
            match: 'https://www.youtube.com/watch',
            css: `html:not([fullscreen]) ytd-app { margin-top: -56px; }`,
            run: hide
        }
    ]);
    // 最初の一回
    y_method.TriggerPagetransition();


    y_method.addStyle('auto-hide-header', `
    #yah-setting {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: #888b;
        z-index: 10000;
        user-select: none;
    }
    #yah-setting .modal-back {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    #yah-setting .modal {
        display: grid;
        justify-items: center;
        margin: 100px auto;
        padding: 50px;
        width: fit-content;
        background: white;
    }
    #yah-setting label {
        font-size: large;
    }
    `);

    const defaultValue = (key, val) =>
        (typeof GM_getValue(key) == "undefined") ? GM_setValue(key, val) : '';
    defaultValue('yah-1', true);
    defaultValue('yah-2', false);

    // setting
    GM_registerMenuCommand('Setting', () => {
        $(document.body).append(`
        <div id="yah-setting">
            <div class="modal-back"></div>
            <div class="modal">
                <h1>show action</h1>
                <label><input type="checkbox" id="yah-1">scroll</label>
                <label><input type="checkbox" id="yah-2">hover top</label>
            </div>
        </div>`)

        function col(id) {
            const chk = document.querySelector('#' + id);
            chk.checked = GM_getValue(id);
            chk.addEventListener('change', e => GM_setValue(id, e.currentTarget.checked));
        }
        col('yah-1');
        col('yah-2');
        $('#yah-setting .modal-back').on('click', e => $('#yah-setting').remove())
    })


    function show() {
        $('ytd-app').removeAttr('masthead-hidden')
    }
    function hide() {
        let act = document.activeElement
        if (act.tagName == 'INPUT' && act.id == 'search') return;
        if (0 <= mouseY && mouseY <= 56) return;
        $('ytd-app').attr('masthead-hidden', '')
    }

    // scroll
    let interval;
    window.onscroll = () => {
        if (!GM_getValue('yah-1')) return;
        show();
        clearTimeout(interval);
        interval = setTimeout(hide, SHOW_INTERVAL_SCROLL);
    }


    let hover;
    $(document).on('mousemove', e => {
        mouseX = e.clientX;
        mouseY = e.clientY;

        if (0 <= mouseY && mouseY <= 56) {
            if (!hover) {
                hover = true;
                $(document).trigger('headhover');
            }
        } else {
            if (hover) {
                hover = false;
                $(document).trigger('headleave');
            }
        }
    })
    $(document).on('mouseleave', e => {
        if (hover) {
            hover = false;
            mouseY = -1;
            $(document).trigger('headleave');
        }
    })

    let over, leave;
    $(document).on('headhover', () => {
        if (!GM_getValue('yah-2')) return;
        clearTimeout(over);
        clearTimeout(leave);
        over = setTimeout(show, SHOW_INTERVAL_HOVER);
    })
    $(document).on('headleave', () => {
        // if (!GM_getValue('yah-2')) return;
        clearTimeout(over);
        clearTimeout(leave);
        leave = setTimeout(hide, HIDE_INTERVAL_HOVER);
    })


    // blur
    $(document).on('blur', 'input#search', e => {
        e.currentTarget.blur();
        hide();
    });


    // fullscreen
    document.addEventListener('fullscreenchange', e => {
        if (document.fullscreenElement) {
            document.querySelector('html').setAttribute('fullscreen', '')
        } else {
            document.querySelector('html').removeAttribute('fullscreen')
        }
    })
})();