斗鱼直播油猴脚本：自动切换最高画质或最低画质

思路：

1. 播放控件是动态加载，找到元素把父级全 console.log 确认加载顺序。
2. 使用 MutationObserver 监听动态加载元素的父级，找到正确的子孙节点，然后点击画质选项。
   • 元素的 className 是框架动态生成，会变化，所以使用属性选择器 [value="画质 "] 找到元素。
   • 或者使用：
     • [class|="rate-"] (带有 rate- 前缀的元素)
     • [class^="rate-"] (以 rate- 开头的元素)
     • [class*="rate-"] (包含 rate- 的元素)
     • querySelector("#rateId ~ ul") 通过节点 id 定位通用兄弟节点 ul
3. GM_setValue 储存画质选项。
4. GM_registerMenuCommand 菜单栏切换画质。
5. 问题：没有找到元素后，不能自动关闭监听，虽不会再触发。
   • 观察器在内部对节点使用弱引用。也就是说，如果一个节点被从 DOM 中移除了，并且该节点变得不可访问，那么它就可以被垃圾回收。

// ==UserScript==
// @name         斗鱼自动切换最高画质或最低画质
// @namespace    https://github.com/Eished
// @author       Eished
// @version      2021.08.03.5
// @description  斗鱼直播自动调整最低分辨率或最高分辨率；自动调整2K、蓝光、超清、高清清晰度；
// @license      AGPL-3.0
// @match        *://www.douyu.com/*
// @icon         https://www.google.com/s2/favicons?domain=greasyfork.org
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

// console.log(document.querySelector(".layout-Player-videoMain"));
// console.log(document.querySelector(".layout-Player-videoSub"));

// // 以下为动态加载
// console.log(document.querySelector(".room-Player-Box"));
// console.log(document.querySelector(".room-Player"));
// console.log(document.querySelector("#room-html5-player"));

// // 以下为动态一次性加载
// console.log(document.querySelector(".container-cffcd4"));
// console.log(document.querySelector(".right-e7ea5d"));
// console.log(document.querySelector(".rate-5c068c > div > ul"));

(function () {
  'use strict';

  const videoSub = document.querySelector('.layout-Player-videoSub');
  if (videoSub == undefined) {
    return;
  }

  let Clarity = GM_getValue('Clarity');
  if (Clarity == undefined) {
    Clarity = 1;
    GM_setValue('Clarity', Clarity);
  }

  const observer = new MutationObserver(callback);
  observer.observe(videoSub, {
    childList: true,
    subtree: true,
  });

  function callback() {
    const controller = videoSub.querySelector(`[value="画质 "]`);
    if (controller) {
      observer.disconnect();
      let ul = controller.nextElementSibling;
      if (Clarity == 1) {
        ul = ul.firstElementChild; // 最高画质
      } else {
        ul = ul.lastElementChild; // 最低画质
      }
      ul.className ? console.log(ul.className) : ul.click();
    }
  }

  function high() {
    Clarity = 1;
    GM_setValue('Clarity', Clarity);
    location.reload();
  }

  function low() {
    Clarity = 0;
    GM_setValue('Clarity', Clarity);
    location.reload();
  }
  GM_registerMenuCommand('最高画质', high);
  GM_registerMenuCommand('最低画质', low);
})();