Control YouTube videos correctly using arrow keys

Control video volume and seek with arrow keys
目前為 2024-08-19 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Control YouTube videos correctly using arrow keys
// @name:ru      Правильное управление видео на YouTube с помощью клавиш со стрелками
// @namespace    http://tampermonkey.net/
// @license      MIT
// @version      1
// @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;
    }

    // Add event listener for keydown event
    document.addEventListener('keydown', function(event) {
        const video = getVideoElement();
        if (!video || event.altKey) return; // Ignore event if Alt key is pressed

        // 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');
        }
    });

})();
欢迎访问Greasy Fork镜像
