☰

youtube auto-hide header

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

اعتبارا من 24-04-2022. شاهد أحدث إصدار.

// ==UserScript==
// @name         youtube auto-hide header
// @namespace    http://tampermonkey.net/
// @version      2.0
// @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://greatest.deepsurf.us/scripts/419955-y-method/code/y_method.js?version=1043484
// @noframes
// ==/UserScript==

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

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

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


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

// 再生ページ用のスタイルを随時設定
$(document).on('pagetransition', () => {
    console.log('pagetransition');
    if (location.pathname == '/watch') {
        y_method.addStyle('watchStyle', `
        ytd-app {
            margin-top: -56px;
        }
        ytd-masthead {
            transition: transform 0.3s ease-out;
            transform: translateY(-100%);
        }
        ytd-masthead.show {
            transform: translateY(0);
        }`);
    } else {
        $('#watchStyle').remove();
    }
}).trigger('pagetransition');


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-masthead').addClass('show');
}
function hide() {
    let act = document.activeElement
    if (act.tagName == 'INPUT' && act.id == 'search') return;
    $('ytd-masthead').removeClass('show');
}

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

// hover
let over, leave;
$(document).on('mouseover', '#masthead-container', () => {
    if (!GM_getValue('yah-2')) return;
    clearTimeout(over);
    clearTimeout(leave);
    over = setTimeout(show, SHOW_INTERVAL_HOVER);
})
$(document).on('mouseleave', '#masthead-container', () => {
    if (!GM_getValue('yah-2')) return;
    clearTimeout(over);
    clearTimeout(leave);
    leave = setTimeout(hide, HIDE_INTERVAL_HOVER);
})

// blur
$(document).on('blur', 'input#search', hide)