YouTube Live In-page Fullscreen

Automatically puts the player full-screen on the page when you go to the live page.
换行
// ==UserScript==
// @name         YouTube Live In-page Fullscreen
// @version      0.2.1
// @description  Automatically puts the player full-screen on the page when you go to the live page.
// @author       dragonish
// @namespace    https://github.com/dragonish
// @license      GNU General Public License v3.0 or later
// @require      https://cdn.jsdelivr.net/npm/[email protected]/minified/arrive.min.js
// @match        *://*.youtube.com/*
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function () {
  const FULLSCREEN = `
    body {
      overflow: hidden !important;
    }
    #player #player-container-outer,
    #player #player-container-inner,
    #player #player-container,
    #player #ytd-player,
    #player #container,
    #player #movie_player,
    #player .html5-video-container,
    #player .html5-main-video,
    #ytd-player #player-container-outer,
    #ytd-player #player-container-inner,
    #ytd-player #player-container,
    #ytd-player #ytd-player,
    #ytd-player #container,
    #ytd-player #movie_player,
    #ytd-player .html5-video-container,
    #ytd-player .html5-main-video {
      position: fixed !important;
      margin: 0 !important;
      padding: 0 !important;
      top: 0 !important;
      left: 0 !important;
      border: none !important;
      width: 100% !important;
      height: 100% !important;
      contain: none !important;
      background-color: #000 !important;
      z-index: 10000;
    }
    #player .html5-main-video,
    #ytd-player .html5-main-video {
      object-fit: contain !important;
    }
    #player #container .html5-video-player > div,
    #ytd-player #container .html5-video-player > div {
      z-index: 10002 !important;
    }
    #player #container .html5-video-player > div.ytp-tooltip.ytp-bottom,
    #ytd-player #container .html5-video-player > div.ytp-tooltip.ytp-bottom {
      top: calc(100% - 90px) !important;
    }
    #player #container .ytp-chrome-bottom,
    #player .ytp-progress-bar .ytp-chapter-hover-container,
    #ytd-player #container .ytp-chrome-bottom,
    #ytd-player .ytp-progress-bar .ytp-chapter-hover-container {
      width: calc(100% - 12px) !important;
    }
    #player .ytp-progress-bar-container .ytp-scrubber-container,
    #ytd-player .ytp-progress-bar-container .ytp-scrubber-container {
      transform: translateX(calc(100vw - 24px)) !important;
    }
    #ylf-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      align-items: center;
      justify-content: center;
      z-index: 10099;
    }
    #ylf-panel-div {
      position: relative;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
      background-color: rgb(21, 32, 43);
      border: 1px solid #000;
      color: #fff;
      width: 300px;
    }
    #ylf-settings-header {
      margin: 20px 15px;
      text-align: center;
      font-size: 1.2em;
      font-weight: bold;
    }
    #ylf-settings-content {
      margin: 0px 10px;
    }
    #ylf-custom-shortcuts-input {
      width: 150px
    }
    #ylf-settings-footer {
      display: inline-block;
      margin: 15px 15px;
      text-align: right;
    }
    #ylf-custom-cancel-btn,
    #ylf-custom-ok-btn {
      cursor: pointer;
    }
    #ylf-custom-ok-btn {
      margin-left: 10px;
    }
  `;
  class Shortcuts {
    constructor() {
      this.keyVal = GM_getValue('shortcuts', '');
    }
    showPanel() {
      if (!this.panel) {
        this.panelGenerator();
      }
      this.panel.style.display = 'flex';
      const input = document.querySelector('#ylf-custom-shortcuts-input');
      if (input) {
        input.disabled = true;
        input.value = this.keyVal;
      }
    }
    hidePanel() {
      if (this.panel) {
        this.panel.style.display = 'none';
      }
    }
    keyHandler(evt) {
      if (!['Control', 'Shift', 'Alt', 'Escape', 'Backspace'].includes(evt.key)) {
        let keyVal = '';
        if (evt.ctrlKey) {
          keyVal = 'Ctrl';
        }
        if (evt.altKey) {
          keyVal = keyVal ? `${keyVal}+Alt` : 'Alt';
        }
        if (evt.shiftKey) {
          keyVal = keyVal ? `${keyVal}+Shift` : 'Shift';
        }
        const u = evt.key.toUpperCase();
        keyVal = keyVal ? `${keyVal}+${u}` : u;
        return keyVal;
      }
      return '';
    }
    panelGenerator() {
      this.panel = document.createElement('div');
      this.panel.id = 'ylf-panel';
      const div = document.createElement('div');
      div.id = 'ylf-panel-div';
      this.panel.appendChild(div);
      const settingsHeader = document.createElement('div');
      settingsHeader.id = 'ylf-settings-header';
      settingsHeader.textContent = 'Settings';
      div.append(settingsHeader);
      const settingsContent = document.createElement('div');
      settingsContent.id = 'ylf-settings-content';
      div.append(settingsContent);
      const label = document.createElement('label');
      label.textContent = 'Shortcuts:';
      settingsContent.appendChild(label);
      const input = document.createElement('input');
      input.id = 'ylf-custom-shortcuts-input';
      input.value = this.keyVal;
      input.addEventListener('keydown', evt => {
        evt.preventDefault();
        evt.stopPropagation();
        input.value = this.keyHandler(evt);
        return false;
      });
      settingsContent.appendChild(input);
      const editBtn = document.createElement('button');
      editBtn.id = 'ylf-custom-edit-shortcuts-btn';
      editBtn.textContent = 'Edit';
      editBtn.addEventListener('click', evt => {
        evt.stopPropagation();
        if (input) {
          input.disabled = false;
          setTimeout(() => {
            input.focus();
          }, 0);
        }
      });
      settingsContent.appendChild(editBtn);
      const settingsFooter = document.createElement('div');
      settingsFooter.id = 'ylf-settings-footer';
      div.appendChild(settingsFooter);
      const cancelBtn = document.createElement('button');
      cancelBtn.id = 'ylf-custom-cancel-btn';
      cancelBtn.textContent = 'Cancel';
      cancelBtn.addEventListener('click', evt => {
        evt.stopPropagation();
        this.hidePanel();
      });
      settingsFooter.appendChild(cancelBtn);
      const okBtn = document.createElement('button');
      okBtn.id = 'ylf-custom-ok-btn';
      okBtn.textContent = 'OK';
      okBtn.addEventListener('click', evt => {
        evt.stopPropagation();
        if (input) {
          const value = input.value;
          GM_setValue('shortcuts', value);
          this.keyVal = value;
        }
        this.hidePanel();
      });
      settingsFooter.appendChild(okBtn);
      this.panel.addEventListener('click', evt => {
        if (evt.target === this.panel) {
          this.hidePanel();
        }
      });
      document.body.appendChild(this.panel);
    }
    isInputElement(element) {
      try {
        return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT';
      } catch {
        return false;
      }
    }
    keyMatcher(evt) {
      if (this.keyVal && !this.isInputElement(evt.target)) {
        return this.keyVal === this.keyHandler(evt);
      }
      return false;
    }
  }
  class FullScreen {
    constructor() {
      this.shortcuts = new Shortcuts();
      GM_registerMenuCommand('Define shortcuts', () => {
        this.shortcuts.showPanel();
      });
      document.addEventListener('keydown', evt => {
        if (evt.key === 'Escape') {
          this.styleElement && this.exitFullscreen();
        } else if (this.shortcuts.keyMatcher(evt)) {
          if (this.styleElement) {
            this.exitFullscreen();
          } else {
            this.fullscreenHandler();
          }
        }
      });
    }
    fullscreenHandler() {
      if (!this.styleElement) {
        this.styleElement = GM_addStyle(FULLSCREEN);
      }
      console.info('enter fullscreen');
      this.menuHandler();
    }
    exitFullscreen() {
      if (this.styleElement) {
        this.styleElement.remove();
        this.styleElement = undefined;
        this.menuHandler();
        console.log('exit fullscreen');
      }
    }
    menuHandler() {
      this.menuKey = GM_registerMenuCommand(this.styleElement ? 'Exit fullscreen' : 'Enter fullscreen', () => {
        if (this.styleElement) {
          this.exitFullscreen();
        } else {
          this.fullscreenHandler();
        }
      }, {
        id: this.menuKey
      });
    }
  }
  function main() {
    const isVideoPage = location.href.includes('watch?v=');
    if (!isVideoPage) return;
    const isLivePage = document.querySelector('.ytp-live') != null;
    console.debug('isLivePage: ', isLivePage);
    if (!isLivePage) return;
    document.body.arrive('#player-container-outer', {
      onceOnly: true,
      existing: true
    }, () => {
      console.debug('found the player element');
      const fs = new FullScreen();
      fs.fullscreenHandler();
    });
  }
  main();
})();