YouTube Live Filled Up View

Get maximized video-and-chat view with no margins on YouTube Live or Premieres.

// ==UserScript==
// @name        YouTube Live Filled Up View
// @name:ja     YouTube Live Filled Up View
// @name:zh-CN  YouTube Live Filled Up View
// @description Get maximized video-and-chat view with no margins on YouTube Live or Premieres.
// @description:ja YouTube Live やプレミア公開のチャット付きビューで、余白を切り詰めて映像を最大化します。
// @description:zh-CN 在油管中的 YouTube Live 或首映公开的带聊天视图中,截取空白以最大化映像。
// @namespace   knoa.jp
// @include     https://www.youtube.com/*
// @version     1.2.5
// @grant       none
// ==/UserScript==

(function(){
  const SCRIPTID = 'YouTubeLiveFilledUpView';
  const SCRIPTNAME = 'YouTube Live Filled Up View';
  const DEBUG = false;/*
[update]
Now compatibile for Firefox + Greasemonkey. Minor fixes.

[bug]

[todo]
/live 待機ページで左サイドバーが常時表示化されてる?自然と直った?
右側に表示されるチャプター一覧にも対応してほしいらしいね

https://greasyfork.org/ja/scripts/394945-youtube-live-filled-up-view/discussions/64579
Maybe I'll modify the script as below:
- normal mode with chat for keeping current "Filled Up View"
- normal mode with chat closed for (meaningless) YouTube's default
- theater mode with chat for "Filled Up View" with no distracting elements.
- theater mode with chat closed for "Filled Up View" with neither distracting elements nor chats.

コメ欄の比率カスタマイズ (greasyforkでの要望)
  ついでにフォントサイズ、アイコンの有無、余白なども?
  上部ヘッダをマウスオーバーでのみとかなんとか、なんらかの対処はしたい
  チャットを非表示もXボタン化してヘッダ右上に

[possible]

[research]
ヘッダを隠す方法
  LIVEに限らずBigTubeの代替を目指すか
  上部マウスホバーで出現、スクロール上端からさらに上にスクロールでもx秒出現、下スクロールで出現、くらいかな
    動画上部とカチャッと上部のコントロール要素をクリックできない問題は回避しなければならない
  あくまでスクロー位置で調整することにして、多少の前後は自動スクロールでカバーするとか
    きほんシアターモードへの移行でスクロール位置調整
      むしろ本来的にヘッダを隠すのはシアターモードだけでいいよね
  スクロールイベントで3秒表示という手段
  https://greasyfork.org/ja/scripts/414234-youtube-auto-hide-header
infoの高さが変わりうるwindow.onresizeに対応か(パフォーマンスはスロットルすれば平気か)

[memo]
ダークモードはそれ用のユーザースタイルに任せるべき。
YouTubeのヘッダが常時表示なのはちょっと気にかかるが、高さにはまだ余裕がある。
  横幅1920時のinnerHeight: 910px, ChromeのUI: 約100px, Windowsタスクバー: 約40px
  */
  if(window === top && console.time) console.time(SCRIPTID);
  const MS = 1, SECOND = 1000*MS, MINUTE = 60*SECOND, HOUR = 60*MINUTE, DAY = 24*HOUR, WEEK = 7*DAY, MONTH = 30*DAY, YEAR = 365*DAY;
  const INTERVAL = 1*SECOND;/*for core.checkUrl*/
  const DEFAULTRATIO = 9/16;/*for waiting page*/
  const VIDEOURLS = [/*for core.checkUrl*/
    /^https:\/\/www\.youtube\.com\/watch\?/,
    /^https:\/\/www\.youtube\.com\/channel\/[^/]+\/live/,
  ];
  const CHATURLS = [/*for core.checkUrl*/
    /^https:\/\/www\.youtube\.com\/live_chat\?/,
    /^https:\/\/www\.youtube\.com\/live_chat_replay\?/,
  ];
  let site = {
    videoTargets: {
      watchFlexy: () => $('ytd-watch-flexy'),
      video: () => $('#movie_player video'),
      info: () => $('ytd-video-primary-info-renderer'),
      chat: () => $('ytd-live-chat-frame#chat'),
    },
    is: {
      video: () => VIDEOURLS.some(url => url.test(location.href)),
      chat: () => CHATURLS.some(url => url.test(location.href)),
      opened: (chat) => (chat.isConnected === true && chat.hasAttribute('collapsed') === false),
      theater: () => (elements.watchFlexy.theater === true),/* YouTube uses this property */
    },
    get: {
      sizeButton: () => $('button.ytp-size-button'),
      chatFrameToggleButton: () => $('ytd-live-chat-frame paper-button'),
    },
    chatTargets: {
      items: () => $('yt-live-chat-item-list-renderer #items'),
    },
  };
  let elements = {}, timers = {}, sizes = {};
  let core = {
    initialize: function(){
      elements.html = document.documentElement;
      elements.html.classList.add(SCRIPTID);
      if(site.is.chat()){
        core.readyForChat();
      }else{
        core.checkUrl();
      }
    },
    checkUrl: function(){
      let previousUrl = '';
      timers.checkUrl = setInterval(function(){
        if(document.hidden) return;
        /* The page is visible, so... */
        if(location.href === previousUrl) return;
        else previousUrl = location.href;
        /* The URL has changed, so... */
        core.clearVideoStyle();
        if(site.is.video()) return core.readyForVideo();
      }, INTERVAL);
    },
    clearVideoStyle: function(){
      if(elements.videoStyle && elements.videoStyle.isConnected){
        document.head.removeChild(elements.videoStyle);
      }
    },
    addVideoStyle: function(e){
      let chat = elements.chat;
      if(site.is.opened(chat) === false) return;
      /* it also replaces old style */
      let video = elements.video;
      /* adapt to the aspect ratio  */
      if(video.videoWidth){
        sizes.videoAspectRatio = video.videoHeight / video.videoWidth;
        core.addStyle('videoStyle');
      }else{
        sizes.videoAspectRatio = DEFAULTRATIO;
        core.addStyle('videoStyle');
        video.addEventListener('canplay', core.addVideoStyle, {once: true});
      }
      /* for Ads replacing */
      if(video.dataset.observed === 'true') return;
      video.dataset.observed = 'true';
      observe(video, function(records){
        video.addEventListener('canplay', core.addVideoStyle, {once: true});
      }, {attributes: true, attributeFilter: ['src']});
    },
    readyForVideo: function(){
      core.getTargets(site.videoTargets).then(() => {
        log("I'm ready for Video with Chat.");

        sizes.scrollbarWidth = getScrollbarWidth();
        core.getInfoHeight();
        core.replacePlayerSize();
        core.observeChatFrame();
        core.enterDefaultMode();
      }).catch(e => {
        console.error(`${SCRIPTID}:${e.lineNumber} ${e.name}: ${e.message}`);
      });
    },
    getInfoHeight: function(){
      let info = elements.info;
      if(info.offsetHeight === 0) return setTimeout(core.getInfoHeight, 1000);
      sizes.infoHeight = elements.info.offsetHeight;
    },
    replacePlayerSize: function(){
      /* update the size */
      setTimeout(() => window.dispatchEvent(new Event('resize')), 1000);
      let watchFlexy = elements.watchFlexy;
      if(watchFlexy.calculateNormalPlayerSize_original) return;
      /* Thanks for Iridium.user.js > initializeBypasses */
      watchFlexy.calculateNormalPlayerSize_original = watchFlexy.calculateNormalPlayerSize_;
      watchFlexy.calculateCurrentPlayerSize_original = watchFlexy.calculateCurrentPlayerSize_;
      watchFlexy.calculateNormalPlayerSize_ = watchFlexy.calculateCurrentPlayerSize_ = function(){
        let video = elements.video, chat = elements.chat;
        if(site.is.opened(chat) === false){/* chat is closed */
          return watchFlexy.calculateCurrentPlayerSize_original();
        }else{
          if(watchFlexy.theater) return {width: NaN, height: NaN};
          else return {width: video.offsetWidth, height: video.offsetHeight};
        }
      };
    },
    observeChatFrame: function(){
      let chat = elements.chat, isOpened = site.is.opened(chat), button = site.get.chatFrameToggleButton();
      if(!isOpened && button){
        button.click();
        isOpened = !isOpened;
      }
      core.addVideoStyle();
      observe(chat, function(records){
        if(site.is.opened(chat) === isOpened) return;
        isOpened = !isOpened;
        window.dispatchEvent(new Event('resize'));/*for updating controls tooltip positions*/
        if(isOpened) return core.addVideoStyle();
        else return core.clearVideoStyle();
      }, {attributes: true});
    },
    enterDefaultMode: function(){
      if(site.is.theater() === false) return;/* already in default mode */
      let sizeButton = site.get.sizeButton();
      if(sizeButton) sizeButton.click();
    },
    readyForChat: function(){
      core.getTargets(site.chatTargets).then(() => {
        log("I'm ready for Chat.");
        core.addStyle('chatStyle');
      }).catch(e => {
        console.error(`${SCRIPTID}:${e.lineNumber} ${e.name}: ${e.message}`);
      });
    },
    getTarget: function(selector, retry = 10, interval = 1*SECOND){
      const key = selector.name;
      const get = function(resolve, reject){
        let selected = selector();
        if(selected && selected.length > 0) selected.forEach((s) => s.dataset.selector = key);/* elements */
        else if(selected instanceof HTMLElement) selected.dataset.selector = key;/* element */
        else if(--retry) return log(`Not found: ${key}, retrying... (${retry})`), setTimeout(get, interval, resolve, reject);
        else return reject(new Error(`Not found: ${selector.name}, I give up.`));
        elements[key] = selected;
        resolve(selected);
      };
      return new Promise(function(resolve, reject){
        get(resolve, reject);
      });
    },
    getTargets: function(selectors, retry = 10, interval = 1*SECOND){
      return Promise.all(Object.values(selectors).map(selector => core.getTarget(selector, retry, interval)));
    },
    addStyle: function(name = 'style'){
      if(html[name] === undefined) return;
      let style = createElement(html[name]());
      document.head.appendChild(style);
      if(elements[name] && elements[name].isConnected) document.head.removeChild(elements[name]);
      elements[name] = style;
    },
  };
  const html = {
    videoStyle: () => `
      <style type="text/css" id="${SCRIPTID}-videoStyle">
        /* common */
        ytd-watch-flexy{
          --${SCRIPTID}-header-height: var(--ytd-watch-flexy-masthead-height);
          --${SCRIPTID}-info-height: ${sizes.infoHeight}px;
          --ytd-watch-flexy-width-ratio: 1 !important;/*fix for Iridium bug*/
          --ytd-watch-width-ratio: 1 !important;/*fix for Iridium bug*/
          --ytd-watch-flexy-height-ratio: ${sizes.videoAspectRatio} !important;/*fix for Iridium bug*/
          --ytd-watch-height-ratio: ${sizes.videoAspectRatio} !important;/*fix for Iridium bug*/
        }
        ytd-watch-flexy[is-two-columns_]{
          --${SCRIPTID}-primary-width: calc(100vw - ${sizes.scrollbarWidth}px - var(--ytd-watch-flexy-sidebar-width));
          --${SCRIPTID}-secondary-width: var(--ytd-watch-flexy-sidebar-width);
          --${SCRIPTID}-video-height: calc(var(--${SCRIPTID}-primary-width) * ${sizes.videoAspectRatio});
        }
        ytd-watch-flexy:not([is-two-columns_]){
          --${SCRIPTID}-primary-width: 100vw;
          --${SCRIPTID}-secondary-width: 100vw;
          --${SCRIPTID}-video-height: calc(100vw * ${sizes.videoAspectRatio});
        }
        /* columns */
        #columns{
          max-width: 100% !important;
        }
        #primary{
          max-width: var(--${SCRIPTID}-primary-width) !important;
          min-width: var(--${SCRIPTID}-primary-width) !important;
          padding: 0 !important;
          margin: 0 !important;
        }
        #secondary{
          max-width: var(--${SCRIPTID}-secondary-width) !important;
          min-width: var(--${SCRIPTID}-secondary-width) !important;
          padding: 0 !important;
          margin: 0 !important;
        }
        #player-container-outer,
        yt-live-chat-app{
          max-width: 100% !important;
          min-width: 100% !important;
        }
        #primary-inner > *:not(#player){
          padding: 0 24px 0;
        }
        /* video */
        #player,
        #player *{
          max-height: calc(100vh - var(--${SCRIPTID}-header-height)) !important;
        }
        #movie_player .html5-video-container{
          height: 100% !important;
        }
        #movie_player .ytp-chrome-bottom/*controls*/{
          width: calc(100% - 24px) !important;/*fragile!!*/
          max-width: calc(100% - 24px) !important;/*fragile!!*/
        }
        #movie_player video{
          max-width: 100% !important;
          width: 100% !important;
          height: 100% !important;
          left: 0px !important;
          background: black;
        }
        .ended-mode video{
          display: none !important;/*avoid conflicting with Iridium*/
        }
        /* chatframe */
        ytd-watch-flexy[is-two-columns_] ytd-live-chat-frame#chat{
          height: calc(var(--${SCRIPTID}-video-height) + var(--${SCRIPTID}-info-height)) !important;
          min-height: auto !important;
          max-height: calc(100vh - var(--${SCRIPTID}-header-height)) !important;
          border-right: none;
        }
        ytd-watch-flexy:not([is-two-columns_]) ytd-live-chat-frame#chat{
          padding: 0 !important;
          margin: 0 !important;
          height: calc(100vh - var(--${SCRIPTID}-header-height) - var(--${SCRIPTID}-video-height)) !important;
          min-height: auto !important;
          border-top: none;
        }
      </style>
    `,
    chatStyle: () => `
      <style type="text/css" id="${SCRIPTID}-chatStyle">
        /* common */
        :root{
          --${SCRIPTID}-slight-shadow: drop-shadow(0 0 1px rgba(0,0,0,.1));
        }
        /* header and footer */
        yt-live-chat-header-renderer/*header*/{
          filter: var(--${SCRIPTID}-slight-shadow);
          z-index: 100;
        }
        #contents > #ticker/*superchat*/{
          filter: var(--${SCRIPTID}-slight-shadow);
        }
        #contents > #ticker/*superchat*/ > yt-live-chat-ticker-renderer > #container > *{
          padding-top: 4px;
          padding-bottom: 4px;
        }
        iron-pages#panel-pages/*footer*/{
          border-top: 1px solid rgba(128,128,128,.125);
        }
        /* body */
        #docked-item.yt-live-chat-docked-message-renderer/*sticky on the top*/,
        #undocking-item.yt-live-chat-docked-message-renderer/*sticky on the top*/{
          margin: 8px 0;
        }
        #docked-item.yt-live-chat-docked-message-renderer/*sticky on the top*/ > *,
        #undocking-item.yt-live-chat-docked-message-renderer/*sticky on the top*/ > *{
          filter: var(--${SCRIPTID}-slight-shadow);
        }
        #docked-item.yt-live-chat-docked-message-renderer/*sticky on the top*/ > *,
        #undocking-item.yt-live-chat-docked-message-renderer/*sticky on the top*/ > *,
        #items.yt-live-chat-item-list-renderer/*normal chats*/ > *:not(yt-live-chat-placeholder-item-renderer){
          padding: 2px 10px !important;
        }
      </style>
    `,
  };
  const setTimeout = window.setTimeout.bind(window), clearTimeout = window.clearTimeout.bind(window), setInterval = window.setInterval.bind(window), clearInterval = window.clearInterval.bind(window), requestAnimationFrame = window.requestAnimationFrame.bind(window);
  const alert = window.alert.bind(window), confirm = window.confirm.bind(window), prompt = window.prompt.bind(window), getComputedStyle = window.getComputedStyle.bind(window), fetch = window.fetch.bind(window);
  if(!('isConnected' in Node.prototype)) Object.defineProperty(Node.prototype, 'isConnected', {get: function(){return document.contains(this)}});
  class Storage{
    static key(key){
      return (SCRIPTID) ? (SCRIPTID + '-' + key) : key;
    }
    static save(key, value, expire = null){
      key = Storage.key(key);
      localStorage[key] = JSON.stringify({
        value: value,
        saved: Date.now(),
        expire: expire,
      });
    }
    static read(key){
      key = Storage.key(key);
      if(localStorage[key] === undefined) return undefined;
      let data = JSON.parse(localStorage[key]);
      if(data.value === undefined) return data;
      if(data.expire === undefined) return data;
      if(data.expire === null) return data.value;
      if(data.expire < Date.now()) return localStorage.removeItem(key);
      return data.value;
    }
    static delete(key){
      key = Storage.key(key);
      delete localStorage.removeItem(key);
    }
    static saved(key){
      key = Storage.key(key);
      if(localStorage[key] === undefined) return undefined;
      let data = JSON.parse(localStorage[key]);
      if(data.saved) return data.saved;
      else return undefined;
    }
  }
  const $ = function(s, f){
    let target = document.querySelector(s);
    if(target === null) return null;
    return f ? f(target) : target;
  };
  const $$ = function(s){return document.querySelectorAll(s)};
  const createElement = function(html = '<span></span>'){
    let outer = document.createElement('div');
    outer.innerHTML = html;
    return outer.firstElementChild;
  };
  const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
    let observer = new MutationObserver(callback.bind(element));
    observer.observe(element, options);
    return observer;
  };
  const getScrollbarWidth = function(){
    let div = document.createElement('div');
    div.textContent = 'dummy';
    document.body.appendChild(div);
    div.style.overflowY = 'scroll';
    let clientWidth = div.clientWidth;
    div.style.overflowY = 'hidden';
    let offsetWidth = div.offsetWidth;
    document.body.removeChild(div);
    return offsetWidth - clientWidth;
  };
  const log = function(){
    if(!DEBUG) return;
    let l = log.last = log.now || new Date(), n = log.now = new Date();
    let error = new Error(), line = log.format.getLine(error), callers = log.format.getCallers(error);
    //console.log(error.stack);
    console.log(
      (SCRIPTID || '') + ':',
      /* 00:00:00.000  */ n.toLocaleTimeString() + '.' + n.getTime().toString().slice(-3),
      /* +0.000s       */ '+' + ((n-l)/1000).toFixed(3) + 's',
      /* :00           */ ':' + line,
      /* caller.caller */ (callers[2] ? callers[2] + '() => ' : '') +
      /* caller        */ (callers[1] || '') + '()',
      ...arguments
    );
  };
  log.formats = [{
      name: 'Firefox Scratchpad',
      detector: /MARKER@Scratchpad/,
      getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
      getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
    }, {
      name: 'Firefox Console',
      detector: /MARKER@debugger/,
      getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
      getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
    }, {
      name: 'Firefox Greasemonkey 3',
      detector: /\/gm_scripts\//,
      getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
      getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
    }, {
      name: 'Firefox Greasemonkey 4+',
      detector: /MARKER@user-script:/,
      getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 0,
      getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
    }, {
      name: 'Firefox Tampermonkey',
      detector: /MARKER@moz-extension:/,
      getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 2,
      getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
    }, {
      name: 'Chrome Console',
      detector: /at MARKER \(<anonymous>/,
      getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1],
      getCallers: (e) => e.stack.match(/[^ ]+(?= \(<anonymous>)/gm),
    }, {
      name: 'Chrome Tampermonkey',
      detector: /at MARKER \(chrome-extension:.*?\/userscript.html\?name=/,
      getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1] - 1,
      getCallers: (e) => e.stack.match(/[^ ]+(?= \(chrome-extension:)/gm),
    }, {
      name: 'Chrome Extension',
      detector: /at MARKER \(chrome-extension:/,
      getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1],
      getCallers: (e) => e.stack.match(/[^ ]+(?= \(chrome-extension:)/gm),
    }, {
      name: 'Edge Console',
      detector: /at MARKER \(eval/,
      getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1],
      getCallers: (e) => e.stack.match(/[^ ]+(?= \(eval)/gm),
    }, {
      name: 'Edge Tampermonkey',
      detector: /at MARKER \(Function/,
      getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1] - 4,
      getCallers: (e) => e.stack.match(/[^ ]+(?= \(Function)/gm),
    }, {
      name: 'Safari',
      detector: /^MARKER$/m,
      getLine: (e) => 0,/*e.lineが用意されているが最終呼び出し位置のみ*/
      getCallers: (e) => e.stack.split('\n'),
    }, {
      name: 'Default',
      detector: /./,
      getLine: (e) => 0,
      getCallers: (e) => [],
    }];
  log.format = log.formats.find(function MARKER(f){
    if(!f.detector.test(new Error().stack)) return false;
    //console.log('////', f.name, 'wants', 0/*line*/, '\n' + new Error().stack);
    return true;
  });
  const time = function(label){
    if(!DEBUG) return;
    const BAR = '|', TOTAL = 100;
    switch(true){
      case(label === undefined):/* time() to output total */
        let total = 0;
        Object.keys(time.records).forEach((label) => total += time.records[label].total);
        Object.keys(time.records).forEach((label) => {
          console.log(
            BAR.repeat((time.records[label].total / total) * TOTAL),
            label + ':',
            (time.records[label].total).toFixed(3) + 'ms',
            '(' + time.records[label].count + ')',
          );
        });
        time.records = {};
        break;
      case(!time.records[label]):/* time('label') to create and start the record */
        time.records[label] = {count: 0, from: performance.now(), total: 0};
        break;
      case(time.records[label].from === null):/* time('label') to re-start the lap */
        time.records[label].from = performance.now();
        break;
      case(0 < time.records[label].from):/* time('label') to add lap time to the record */
        time.records[label].total += performance.now() - time.records[label].from;
        time.records[label].from = null;
        time.records[label].count += 1;
        break;
    }
  };
  time.records = {};
  core.initialize();
  if(window === top && console.timeEnd) console.timeEnd(SCRIPTID);
})();