Youtube key shortcuts FIX

Fix player controls Space, Left, Right, Up, Down to behave consistently after page load or clicking individual controls. Not focusing the mute button anymore.
安装此脚本？
访问作者的支持站点，提供反馈或发表评价，或举报此脚本。
换行
// ==UserScript==
// @name         Youtube key shortcuts FIX
// @namespace    https://github.com/h93
// @homepageURL  https://github.com/h93/YoutubeKeysFix
// @supportURL   https://github.com/h93/YoutubeKeysFix/issues
// @version      1.1.2
// @description  Fix player controls Space, Left, Right, Up, Down to behave consistently after page load or clicking individual controls. Not focusing the mute button anymore.
// @icon         http://youtube.com/yts/img/favicon_32-vflOogEID.png
// @author       Greg Herendi
// @license      MIT
// @copyright    2018, Greg Herendi (https://github.com/GregHerendi)
// @match        *://www.youtube.com/*
// @match        *://*.youtube.com/*
// @exclude      *://*.youtube.com/tv*
// @exclude      *://*.youtube.com/live_chat*
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==

/* To test classicUI add the appropriate one of the following to Youtube url:
&disable_polymer=1
?disable_polymer=1
*/

(function () {
  "use strict";

  var playerContainer; // = document.getElementById('player-container') || document.getElementById('player') in embeds
  var playerElem; // = document.getElementById('movie_player') || playerContainer.querySelector('.html5-video-player') in embeds
  //var playerFocused;
  var isMaterialUI, isClassicUI;
  var lastFocusedPageArea;
  var areaOrder = [null],
    areaContainers = [null],
    areaFocusDefault = [null],
    areaFocusedSubelement = [null];
  //var areaContainers= {}, areaFocusedSubelement= {};

  function isSubelementOf(elementWithin, ancestor) {
    if (!ancestor) return null;
    for (; elementWithin; elementWithin = elementWithin.parentElement) {
      if (elementWithin.id == ancestor) return true;
    }
    return false;
  }

  function getAreaOf(elementWithin) {
    for (var i = 1; i < areaContainers.length; i++)
      if (isSubelementOf(elementWithin, areaContainers[i])) return i;
    return 0;
    //for (var area in areaContainers)  if (isSubelementOf(document.activeElement, areaContainers[area]))  return area;
  }
  function getFocusedArea() {
    return getAreaOf(document.activeElement);
  }

  function tryFocus(newFocus) {
    newFocus = $(newFocus);
    if (!newFocus.length) return null;
    if (!newFocus.is(":visible()")) return false;
    //var oldFocus= document.activeElement;
    window.scrollTo(0,0);
    newFocus.focus();
    var done = newFocus[0] === document.activeElement;
    if (!done)
      console.log(
        "YoutubeKeysFix: failed to focus newFocus=, activeElement=",
        newFocus[0],
        document.activeElement
      );
    return done;
  }

  function focusNextArea() {
    // Focus next area's areaFocusedSubelement (activeElement)
    var currentArea = getFocusedArea() || 0;
    var nextArea =
      lastFocusedPageArea && lastFocusedPageArea !== currentArea
        ? lastFocusedPageArea
        : currentArea + 1;
    // captureFocus() will store lastFocusedPageArea again if moving to a non-player area
    // if moving to the player then lastFocusedPageArea resets, Shift-Esc will move to search bar (area 2)
    lastFocusedPageArea = null;
    // To enter player after last area: nextArea= 1;  To skip player: nextArea= 2;
    if (nextArea >= areaContainers.length) nextArea = 2;

    var done = tryFocus(areaFocusedSubelement[nextArea]);
    if (!done) done = tryFocus($(areaFocusDefault[nextArea]));
    //if (! done)  done= tryFocus( areaContainers[nextArea] );
    return done;
  }

  function focusPlayer() {
    var player = $(areaFocusDefault[1]);
    if (!player[0]) return false;
    // If focus was outside player
    var focusSubelement =
      !player[0].contains(document.activeElement) && areaFocusedSubelement[1];
    // And focusSubelement is inside player then focus that finally
    if (
      focusSubelement === player[0] ||
      (focusSubelement && !player[0].contains(focusSubelement))
    )
      focusSubelement = null;

    // Focus player first to scroll into view, then the subelement
    var done = tryFocus(player);
    if (!done) return false;

    // Focus player's areaFocusedSubelement if focus was outside player area
    done = focusSubelement && tryFocus(focusSubelement);
    // Show that focus indicator blue frame and background if subelement got focus
    if (done) player.addClass("ytp-probably-keyboard-focus");

    return true;
  }

  function handleEsc(event) {
    if (event.shiftKey) {
      // Shift-Esc only implemented for watch page
      if (window.location.pathname !== "/watch") return;
      // Not in fullscreen
      if (getFullscreen()) return;
      // show focus outline when navigating focus
      $(document.documentElement).removeClass("no-focus-outline");
      // Bring focus to next area
      focusNextArea();
    } else {
      var handled = focusPlayer();
      if (!handled) return;
    }

    event.preventDefault();
    event.stopPropagation();
  }

  function onKeydown(event) {
    // Debug log of key event
    //if (event.key != 'Shift')  console.log("YoutubeKeysFix: " + event.type + " " + event.which + " ->", event.target, event);
    if (event.which == 9) {
      // show focus outline when navigating focus
      $(document.documentElement).removeClass("no-focus-outline");
    }

    // event.target is the focused element (that received the keypress)
    // event not received when fullscreen in Opera (already handled by browser)
    if (event.which == 27) return handleEsc(event);
  }

  function redirectEvent(event, cloneEvent) {
    if (!playerElem) initPlayer();
    if (!playerElem || !$(playerElem).is(":visible()")) return;
    cloneEvent = cloneEvent || new Event(event.type);
    //var cloneEvent= $.extend(cloneEvent, event);
    cloneEvent.redirectedEvent = event;
    // shallow copy every property
    for (var k in event) if (!(k in cloneEvent)) cloneEvent[k] = event[k];

    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    //console.log('YoutubeKeysFix: dispatch cloneEvent=', cloneEvent);
    playerElem.dispatchEvent(cloneEvent);
  }

  // Tag list from Youtube Plus: https://github.com/ParticleCore/Particle/blob/master/src/Userscript/YouTubePlus.user.js#L885
  var keyHandlingElements = {
    INPUT: 1,
    TEXTAREA: 1,
    IFRAME: 1,
    OBJECT: 1,
    EMBED: 1,
  };

  function captureKeydown(event) {
    // Debug log of key event
    //if (event.key != 'Shift')  console.log("YoutubeKeysFix: capture " + event.type + " " + event.which + " ->", event);  //, event);

    // Esc switches focus between player(player-api/player-container(movie_player)) and webpage outside the player(masthead(buttons)/main(related/info/meta/comments))
    // event.target is focused (received the keypress)
    // captureKeydown not executed when fullscreen, and this should not handle Esc
    var textbox =
      keyHandlingElements[event.target.tagName] ||
      event.target.isContentEditable; //  ||  event.target.getAttribute('role') == 'textbox';
    // capture only in textboxes to override their behaviour, general handling in onKeydown()
    if (event.which == 27 && textbox) return handleEsc(event);

    // Tab: do the default
    //if (event.which == 9)  return;

    // Ignore events for the playerElem to avoid recursion
    //if (playerElem == document.activeElement)  return;
    if (playerElem === event.target) return;

    // Redirect Space (32) to pause video, if not in a textbox
    var redirectSpace = 32 == event.which && !textbox;
    // Sliders' key handling behaviour is inconsistent with the default player behaviour. To disable them
    // arrowkey events (33-40: PageUp/PageDown/End/Home/Left/Up/Right/Down) are redirected to page scroll/video position/volume
    var redirectArrows =
      33 <= event.which &&
      event.which <= 40 &&
      event.target.getAttribute("role") == "slider" &&
      isSubelementOf(event.target, "player-container");
    if (redirectSpace || redirectArrows) return redirectEvent(event);
  }

  function captureMouse(event) {
    // Called when mouse button is pressed/released over an element.
    // Debug log of mouse button event
    //console.log("YoutubeKeysFix: capture " + event.type + " ->", event.target);

    // hide focus outline when clicking
    $(document.documentElement).addClass("no-focus-outline");
  }

  function redirectFocus(event, newFocus) {
    if (!newFocus) return;
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    //console.log('YoutubeKeysFix: redirect focus=', newFocus);
    newFocus.focus();
  }

  function onMouse(event) {
    // Called when mouse button is pressed over an element.
    // Debug log of mouse button event
    //console.log("YoutubeKeysFix: " + event.type + " ->", event.target);

    // click outside of areas focuses player
    if (0 === getAreaOf(event.target)) return redirectFocus(event, playerElem);
  }

  function onWheel(event) {
    console.log(
      "YoutubeKeysFix: " +
        event.type +
        " " +
        event.deltaY +
        " phase " +
        event.eventPhase +
        " ->",
      event.currentTarget,
      event
    );
    if (!playerElem || !playerElem.contains(event.target)) return;

    var deltaY = null !== event.deltaY ? event.deltaY : event.wheelDeltaY;
    var up = deltaY <= 0; // null == 0 -> up
    var cloneEvent = new Event("keydown");
    cloneEvent.which = cloneEvent.keyCode = up ? 38 : 40;
    cloneEvent.key = up ? "ArrowUp" : "ArrowDown";
    redirectEvent(event, cloneEvent);
  }

  function getFullscreen() {
    return (
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement
    );
  }

  function onFullscreen(event) {
    var fullscreen = getFullscreen();
    if (fullscreen) {
      if (!fullscreen.contains(document.activeElement)) {
        onFullscreen.prevFocus = document.activeElement;
        fullscreen.focus();
      }
    } else if (onFullscreen.prevFocus) {
      onFullscreen.prevFocus.focus();
      onFullscreen.prevFocus = null;
    }
  }

  function captureFocus(event) {
    // Called when an element gets focus (by clicking or TAB)
    // Debug log of focused element
    //console.log("YoutubeKeysFix: capture " + event.type + " ->", event.target);

    // Window will focus the activeElement, do nothing at the moment
    if (event.target === window) return;

    // Focus player if focusing body (default focus, eg. pressing Esc)
    if (event.target === document.body)
      return redirectFocus(event, areaFocusedSubelement[1] || playerElem);

    // Save focused element inside player or on page
    var area = getAreaOf(event.target);
    //if (0 === area)  return redirectFocus(event, playerElem);
    if (0 !== area) {
      areaFocusedSubelement[area] = event.target;
      //if (areaContainers[area])  document.getElementById(areaContainers[area]).activeElement= event.target;
      // store if not focusing player area
      if (area !== 1) lastFocusedPageArea = area;
    }
  }

  function chainInitFunc(f1, f2) {
    return function () {
      //$(document).ready(f1);
      if (f1) f1.apply(this, arguments);
      if (f2) f2.apply(this, arguments);
    };
  }

  // Run init on onYouTubePlayerReady ('#movie_player' created).
  //console.log("YoutubeKeysFix: loading, onYouTubePlayerReady=", window.onYouTubePlayerReady);
  window.onYouTubePlayerReady = chainInitFunc(
    initPlayer,
    window.onYouTubePlayerReady
  );
  initEvents();
  initStyle();
  initDom();

  //document.addEventListener("DOMContentLoaded", function() {
  $(document).ready(function () {
    //console.log("YoutubeKeysFix: $(document).ready()");
    //initDom();
    initPlayer();
  });

  function initEvents() {
    // Handlers are capture type to see all events before they are consumed
    document.addEventListener("mousedown", captureMouse, true);
    //document.addEventListener('mouseup', captureMouse, true);

    // captureFocus captures focus changes before the event is handled
    // does not capture body.focus() in Opera, material design
    document.addEventListener("focus", captureFocus, true);
    //window.addEventListener('focusin', captureFocus);

    //         document.addEventListener('mousedown', onMouse);
    // mousewheel over player area adjusts volume
    //document.addEventListener('wheel', onWheel, true);
    // captureKeydown is run before original handlers to have a chance to modify the events
    document.addEventListener("keydown", captureKeydown, true);
    // onKeydown handles keypress in the bubbling phase to handle Esc if not handled by the focused element
    document.addEventListener("keydown", onKeydown);

    if (document.onfullscreenchange !== undefined)
      document.addEventListener("fullscreenchange", onFullscreen);
    else if (document.onwebkitfullscreenchange !== undefined)
      document.addEventListener("webkitfullscreenchange", onFullscreen);
    else if (document.onmozfullscreenchange !== undefined)
      document.addEventListener("mozfullscreenchange", onFullscreen);
    else if (document.MSFullscreenChange !== undefined)
      document.addEventListener("MSFullscreenChange", onFullscreen);
  }

  function initStyle() {
    // Style for materialUI player, video list item, comment highlight:
    // #masthead-container is present on all materialUI pages: index, watch, etc.
    if (document.getElementById("masthead"))
      $(document.head).append(
        '<style name="yt-fix-materialUI type="text/css">\n\
#player-container:focus-within { box-shadow: 0 0 0px 0px rgba(0,0,0,0.8); }\n\
.ytp-probably-keyboard-focus :focus { background-color: rgba(120, 180, 255, 0.6); }\n\
//html:not(.no-focus-outline) ytd-video-primary-info-renderer > #container > #info:focus-within, \n\
//html:not(.no-focus-outline) ytd-video-secondary-info-renderer > #container > #top-row:focus-within, \n\
//html:not(.no-focus-outline) ytd-video-secondary-info-renderer > #container > .description:focus-within \n\
//{ box-shadow: 0 0 10px 0px rgba(0,0,0,0.4); }\n\
html:not(.no-focus-outline) ytd-compact-video-renderer #dismissable:focus-within { box-shadow: 0 0 15px 1px rgba(0,0,100,0.4); }\n\
a.yt-simple-endpoint.ytd-compact-video-renderer { margin-top: 3px; }\n\
</style>'
      );

    // Style for classicUI player, video list item, comment-simplebox highlight and layout rearranging for the highlight:
    // #yt-masthead-container is present on all classicUI pages: index, watch, etc.
    if (document.getElementById("yt-masthead-container"))
      $(document.head).append(
        '<style name="yt-fix-classicUI" type="text/css">\n\
#player-api:focus-within { box-shadow: 0 0 20px 0px rgba(0,0,0,0.8); }\n\
.ytp-probably-keyboard-focus :focus { background-color: rgba(120, 180, 255, 0.6); }\n\
#masthead-search-terms.masthead-search-terms-border:focus-within { border: 1px solid #4d90fe; box-shadow: inset 0px 0px 8px 0px #4d90fe; }\n\
html:not(.no-focus-outline) #watch-header:focus-within, \n\
html:not(.no-focus-outline) #action-panel-details:focus-within, \n\
html:not(.no-focus-outline) #watch-discussion:focus-within \n\
{ box-shadow: 0 0 10px 0px rgba(0,0,0,0.4); }\n\
html:not(.no-focus-outline) .video-list-item:focus-within { box-shadow: 0 0 15px 1px rgba(0,0,100,0.4); }\n\
html:not(.no-focus-outline) .video-list-item:focus-within .related-item-action-menu .yt-uix-button { opacity: 1; }\n\
html:not(.no-focus-outline) .video-list-item:focus-within .video-actions { right: 2px; }\n\
html:not(.no-focus-outline) .video-list-item:focus-within .video-time, \n\
html:not(.no-focus-outline) .related-list-item:focus-within .video-time-overlay { right: -60px; }\n\
#watch7-sidebar-contents { padding-right: 10px; }\n\
#watch7-sidebar-contents .checkbox-on-off { margin-right: 5px; }\n\
#watch7-sidebar .watch-sidebar-head { margin-bottom: 5px; margin-left: 0; }\n\
#watch7-sidebar .watch-sidebar-section { padding-left: 5px; margin-bottom: 0; }\n\
#watch7-sidebar .watch-sidebar-separation-line { margin: 10px 5px; }\n\
.video-list-item .thumb-wrapper { margin: 0; }\n\
.video-list-item { margin-left: 5px; }\n\
.video-list-item .content-wrapper a { padding-top: 3px; min-height: 91px; }\n\
.related-list-item .content-wrapper { margin-left: 176px; margin-right: 5px; }\n\
.related-list-item .related-item-action-menu { top: 3px; right: 0; }\n\
.related-item-dismissable .related-item-action-menu .yt-uix-button { margin: 0; height: 20px; width: 20px; }\n\
</style>'
      );
  }

  function initDom() {
    isMaterialUI = null !== document.getElementById("masthead");
    isClassicUI = null !== document.getElementById("yt-masthead-container");
    // MaterialUI has an extra  #player.skeleton > #player-api element, remnant of the classicUI, different from the one expected here
    // The one with the video:  ytd-watch > #top > #player > #player-container.ytd-watch (> #movie_player.html5-video-player)
    playerContainer = isMaterialUI
      ? document.getElementById("player-container")
      : isClassicUI
      ? document.getElementById("player-api")
      : document.getElementById("player");
    // isEmbeddedUI= !isMaterialUI && !isClassicUI;

    // Areas' root elements
    areaOrder = [null, "player", "masthead", "videos", "content"];
    areaContainers = isMaterialUI
      ? [null, "player-container", "masthead-container", "related", "main"]
      : [
          null,
          "player-api",
          "yt-masthead-container",
          "watch7-sidebar",
          "watch7-content",
        ];

    // Areas' default element to focus
    areaFocusDefault[0] = null;
    areaFocusDefault[1] =
      isMaterialUI || isClassicUI
        ? "#movie_player"
        : "#player .html5-video-player";
    areaFocusDefault[2] = isMaterialUI
      ? "#masthead input#search"
      : "#masthead-search-term";
    areaFocusDefault[3] = isMaterialUI
      ? "#items a.ytd-compact-video-renderer:first()"
      : "#watch7-sidebar-modules a.content-link:first()";
    areaFocusDefault[4] = isMaterialUI
      ? "#info #menu #top-level-buttons button:last()"
      : "#watch8-action-buttons button:first()";
    areaFocusDefault.length = 5;
  }

  function initPlayer() {
    if (playerElem) return;

    // The movie player frame '#movie_player', might not be generated yet.
    playerElem =
      document.getElementById("movie_player") ||
      $("#player .html5-video-player")[0];
    if (!playerElem) {
      console.log(
        "YoutubeKeysFix failed to find '#movie_player' element: not created yet"
      );
      return false;
    }

    //console.log("YoutubeKeysFix: initPlayer()");
    // Movie player frame (element) is focused when loading the page to get movie player keyboard controls.
    if (window.location.pathname === "/watch") playerElem.focus();

    $("#player .caption-window").attr("tabindex", "-1");
    //var caption= playerElem.querySelector && playerElem.querySelector('.caption-window');  if (caption)  caption.setAttribute('tabindex', -1);
  }
})();
欢迎访问Greasy Fork镜像
