video fullpage

将 video 作为全页显示，隐藏其他元素
目前為 2024-07-19 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name        video fullpage
// @namespace   github.q962
// @match       https://*/*
// @version     1.6
// @author      q962
// @grant       GM_registerMenuCommand
// @grant       GM_addStyle
// @grant       GM_deleteValue
// @grant       GM_deleteValues
// @grant       GM_setValue
// @grant       GM_setValues
// @grant       GM_getValue
// @grant       GM_getValues
// @grant       GM_listValues
// @grant       GM_addElement
// @license     MIT

// @description 将 video 作为全页显示，隐藏其他元素

// ==/UserScript==

let global_css = `
.__visiable_true.__level_up {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: unset !important;
  max-height: unset !important;
  min-width: unset !important;
  min-height: unset !important;
  margin: unset !important;
  padding: unset !important;
  overflow: hidden !important;
  position: unset !important;
}

.__hidden_all > :not(.__visiable_true, .__dialog) {
  display: none !important;
}

.__dialog {
  position: fixed;
  width: 600px;
  height: auto;
  top: 30vh;
  z-index: 99999;
  background: white;
  border: 1px #aaa solid;
  border-radius: 5px;
  padding: 10px;
  left: calc( ( 100vw - 600px ) / 2 );
  box-shadow: 0px 4px 8px 0px black;
}
.__dialog > *, .__dialog > h1 {
  color: black;
  width: 100%;

}
.__dialog input {
  width: 90%;
}
`;

GM_addStyle(global_css);

///////////////////////////////

var upCount = get_upCount();
var current_video_elem = null;
var current_video_elem_controls = undefined;

/////////////////////////////////////////////////////////

var count_dialog = GM_addElement('div');
count_dialog.classList.add("__dialog");
count_dialog.innerHTML = `
  <h1>设置上层层数</h1>
  <label>正则：<input id="regex"/></label><br/>
  <label>层数：<input id="count" min=0 max=15 type="number"  value=0 /></label><br/>
  <br/>
  <button id="ok">确定</button>
  <button id="cancel">取消</button>
  <p id="msg"></p>
`;
count_dialog.hidden = true;

var regex_elem = count_dialog.querySelector("#regex");
var count_elem = count_dialog.querySelector("#count");
var msg_elem = count_dialog.querySelector("#msg");

count_dialog.querySelector("#ok").addEventListener("click", ()=>{
  let regex_str = regex_elem.value;
  let count = count_elem.value;

  if( !regex_str ) return;
  try{
    new RegExp(regex_str);
  } catch(error){
    msg_elem.innerText = error;
    return;
  }

  if( count>15 || count < 0 ){
    msg_elem.innerText = "0 <= 层数  <=15";
    return;
  }

  GM_setValue(location.origin, JSON.stringify({regex: regex_str, count: count}));

  count_dialog.hidden = true;

  upCount = count;

});

count_dialog.querySelector("#cancel").addEventListener("click", ()=>{
  count_dialog.hidden = true;
});

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function get_upCount(){
  let j = JSON.parse(GM_getValue(location.origin)||null);
  if(!j) return 0;

  if( j.regex ) {
    try{
      let regex = new RegExp(j.regex);
      if( !regex.test(location.href) ) return 0;
   } catch(error){return 0;}
  }

  return parseInt(j.count);
}

function settings(){
  count_elem.value = 0;
  regex_elem.value = (location.origin+location.pathname).replaceAll(".","\\.");

  let j = JSON.parse(GM_getValue(location.origin)||null);
  if( j ) {
    if( j.regex ) regex_elem.value = j.regex;
    if( j.count ) count_elem.value = j.count;
  }

  msg_elem.innerText = "";

  count_dialog.hidden = false;
}

function do_full(target){
  let action = '';
  if(target.classList.contains("__visiable_this")){
    action = 'remove';

    if (target instanceof HTMLVideoElement ) {
      target.controls = current_video_elem_controls;
    }
  } else{
    action = 'add';

    if (target instanceof HTMLVideoElement ) {
      target.controls = true;
    }
  }

  target.classList[action]("__visiable_this");

  let p = target;
  while(p){

    p.classList[action]("__visiable_true");
    p.classList[action]("__level_up");

    if( p.parentElement )
      p.parentElement.classList[action]("__hidden_all");

    p = p.parentElement;
  }

  return action == "add";
}

function try_iframe(){
  let playing_href = GM_getValue("playing_href");

  let all_iframes = document.querySelectorAll("iframe");
  for(let i=0;i<all_iframes.length;i++){
    let frame = all_iframes[i];

    if( playing_href == frame.src ) {
      return frame;
    }
  }
}

function try_find(){
  let all = document.querySelectorAll("video");
  for(let i=0;i < all.length;i++){
    let videl_elem = all[i];

    if( videl_elem.currentTime > 0 && !videl_elem.paused && !videl_elem.ended ) {
      return videl_elem;
    }
  }
  return false;
}

let oldUpCount = undefined;
let isFull = false;

function set_fullpage(){
  current_video_elem = current_video_elem || try_find() || try_iframe();

  if(!current_video_elem) return;

  if (current_video_elem instanceof HTMLVideoElement ) {
    current_video_elem_controls = current_video_elem.controls;
  }

  let target = current_video_elem;
  let _upCount = upCount;

  // 如果在全页状态下，当前的 upCount 发生了改变时，
  // 需要保证移除 class 的结点要正确
  if( isFull && oldUpCount != undefined && oldUpCount != upCount )
    _upCount = oldUpCount;

  for( let i=0; i < _upCount; i++ ) {
      target = target.parentElement;
  }

  oldUpCount = upCount;
  isFull = do_full( target );
}

GM_registerMenuCommand('全页', set_fullpage);
GM_registerMenuCommand('设置', settings);

//////////////////////////////////////////////////////////////////////////////

function bind_evnet(elem){
  elem.addEventListener('play',  function(e) {
    // 记录当前的 location，用于判读 iframe
    GM_setValue("playing_href", location.href);
    current_video_elem = e.target;
  });
}

const observer = new MutationObserver( function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      for (let node of mutation.addedNodes) {
        if (node.tagName === 'VIDEO') {
          bind_evnet(node);
        }
      }
    }
  }
});

observer.observe(document.body, { childList: true, subtree: true });

function FindAllVideoElems(){

  let video_elems = document.querySelectorAll("video");
  for( let index=0; index < video_elems.length; index++){
    bind_evnet( video_elems[index] );
  }
}

FindAllVideoElems();