☰

YouTube Live In-page Fullscreen

Automatically puts the player full-screen on the page when you go to the live page.

目前為 2024-10-02 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         YouTube Live In-page Fullscreen
// @version      0.1.0
// @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
// ==/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 {
      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 {
      object-fit: contain !important;
    }
    #player .ytp-chrome-bottom {
      position: fixed !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      z-index: 10001;
    }
  `;
  class FullScreen {
    constructor() {}
    fullscreenHandler() {
      if (!this.styleElement) {
        this.styleElement = GM_addStyle(FULLSCREEN);
      }
      console.info('handle fullscreen');
      this.menuHandler();
    }
    menuHandler() {
      this.menuKey = GM_registerMenuCommand(this.styleElement ? 'Exit fullscreen' : 'Enter fullscreen', () => {
        if (this.styleElement) {
          this.styleElement.remove();
          this.styleElement = undefined;
          this.menuHandler();
        } 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();
})();