☰

Youtube scroll lock time link in picture-in-picture

When using Picture-in-Picture (PiP), don't scroll to the top of the page when clicking on a link that displays the time of the video.

ของเมื่อวันที่ 18-09-2022 ดู เวอร์ชันล่าสุด

// ==UserScript==
// @name           Youtube scroll lock time link in picture-in-picture
// @name:ja        YouTubeでピクチャーインピクチャー使用時、時間リンクでページトップ遷移防止
// @namespace      https://github.com/ziopuzzle/
// @version        1.0
// @description    When using Picture-in-Picture (PiP), don't scroll to the top of the page when clicking on a link that displays the time of the video.
// @description:ja 動画をポップアウトしていても、動画時間リンクでページトップに戻ってしまう現象を解決します。
// @author         ziopuzzle
// @match          https://www.youtube.com/*
// @grant          none
// @license        MIT
// ==/UserScript==

(function() {
    'use strict';

    function loadPage(fn) {
        // Fook page change(Youtube is single page application)
        // Note: https://stackoverflow.com/questions/24297929/
        document.addEventListener('yt-navigate-finish', fn, false);
    }
    // Disabled script if youtube is embedded
    if (window.top === window.self) {
        loadPage(() => {
            const videoID = new URL(window.location.href).searchParams.get('v');
            // Observe comment elements to be added
            new MutationObserver((mutations, observerCommentsSection) => {
                mutations.forEach((mutation) => { mutation.addedNodes.forEach((element) => {
                    if (element.tagName == 'YTD-COMMENT-RENDERER') {
                        // Extract links where the time written.
                        element.querySelectorAll('a[href*="t="][href*="v=' + videoID + '"]').forEach((element) => {
                            // Make event when a link is clicked
                            element.addEventListener('click', (event) => {
                                // If using Picture-in-Picture
                                if (document.pictureInPictureElement) {
                                    // After scrolling back to the top by Youtube, restore the scroll position.
                                    const scroll = document.documentElement.scrollTop;
                                    document.addEventListener('yt-autonav-pause-scroll', (event) => {
                                        console.log("scroll to ", scroll);
                                        document.documentElement.scrollTop = scroll;
                                    }, {once : true});
                                }
                            }, false);
                        });
                    }
                });});
            }).observe(document.getElementById('content'), { childList: true, subtree: true });
        });
    }

})();