Control YouTube videos correctly using arrow keys

Control video volume and seek with arrow keys

目前為 2024-08-12 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Control YouTube videos correctly using arrow keys
// @name:ru      Правильное управление видео на YouTube с помощью клавиш со стрелками
// @namespace    http://tampermonkey.net/
// @license      MIT
// @version      0.9
// @description  Control video volume and seek with arrow keys
// @description:ru Управляйте громкостью видео и поиском с помощью клавиш со стрелками
// @author       Boss of this gym
// @match        www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to find the first video element on the page
    function getVideoElement() {
        return document.querySelector('video');
    }

    // Function to change volume
    function changeVolume(video, delta) {
        if (video) {
            video.volume = Math.min(Math.max(video.volume + delta, 0), 1);
        }
    }

    // Function to seek video
    function seekVideo(video, time) {
        if (video) {
            video.currentTime = Math.min(Math.max(video.currentTime + time, 0), video.duration);
        }
    }

    // Function to check if the active element is an input or textarea inside a YouTube comment or search form
    function isElementInYouTubeCommentOrSearch(target) {
        if (!target) return false;

        const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
        const isSearchBox = isInput && target.closest('form') && target.closest('form').id === 'search-form';
        const isCommentBox = target.closest('ytd-commentbox') !== null;
        const isCommentReplyButton = target.closest('ytd-comment-replies-renderer') !== null;
        const isCommentActionButton = target.closest('ytd-comment-action-buttons-renderer') !== null;

        return isSearchBox || isCommentBox || isCommentReplyButton || isCommentActionButton;
    }

    // Function to skip content warning
    function skipContentWarning() {
        const button = document.querySelector('button#confirm-button'); // Selector for the "I understand and wish to proceed" button
        if (button) {
            button.click();
        }
    }

    // Periodically check for the content warning dialog
    setInterval(skipContentWarning, 1000);

    // Add event listener for keydown event
    document.addEventListener('keydown', function(event) {
        const video = getVideoElement();
        if (!video) return;

        // Check if the focused element is part of YouTube comments or search
        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key) && !isElementInYouTubeCommentOrSearch(document.activeElement)) {
            event.preventDefault();

            // Force focus on the video element
            video.focus();

            switch(event.key) {
                case 'ArrowUp':
                    changeVolume(video, 0.1); // Increase volume
                    break;
                case 'ArrowDown':
                    changeVolume(video, -0.1); // Decrease volume
                    break;
                case 'ArrowRight':
                    seekVideo(video, 5); // Seek forward 5 seconds
                    break;
                case 'ArrowLeft':
                    seekVideo(video, -5); // Seek backward 5 seconds
                    break;
            }
        }
    });

    // Set the video element to be focusable
    document.addEventListener('DOMContentLoaded', (event) => {
        const video = getVideoElement();
        if (video) {
            video.setAttribute('tabindex', '-1');
        }
    });

})();