Facebook Reel: Video Controls

Make Facebook Reel: Video Controls
目前为 2025-03-21 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name        Facebook Reel: Video Controls
// @namespace   UserScript
// @match       https://www.facebook.com/*
// @version     0.2.0
// @license     MIT
// @author      CY Fung
// @description Make Facebook Reel: Video Controls
// @run-at      document-start
// @grant       none
// @unwrap
// ==/UserScript==
 
(() => {
 
  const resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      if (entry.contentRect.height > 0) {
        document.documentElement.style.setProperty('--frvc-reel-control-height', entry.contentRect.height + 'px');
      }
    }
  });
 
  let addCSS = () => {
    if (addCSS.done) return;
    addCSS.done = true;
    document.head.appendChild(document.createElement('style')).textContent = `
    .frvc-div-might-empty:empty {
      display: none;
      
    }
    .frvc-cursor-passthrough {
      pointer-events: none;
    }
  
    .frvc-cursor-passthrough [role], .frvc-cursor-passthrough [tabindex] {
      pointer-events: initial;
    }
  
    `
 
  }
 
  document.addEventListener('play', (evt) => {
    const target = (evt || 0).target;
 
    if (target instanceof HTMLVideoElement) {
 
      if (target.hasAttribute('controls')) return;
      if (location.href.indexOf('reel') < 0) return;
 
      let buttonLayer = target.closest('div[class][role="button"][tabindex]');
      if (!buttonLayer) return;
 
 
      target.setAttribute('controls', '');
      addCSS();
 
 
      setTimeout(() => {
 
 
        Object.assign(target.style, {
          'position': 'relative',
          'zIndex': 999,
          'pointerEvents': 'all',
          'height': 'calc(100% - var(--frvc-reel-control-height))'
        });
 
        let arr = [...buttonLayer.querySelectorAll('.x10l6tqk.x13vifvy:not(.x1m3v4wt)')].filter(elm => !elm.contains(target));
 
 
        const clickable = buttonLayer.querySelectorAll('a[role="link"][href]');
        const clickableHolder = [...new Set([...clickable].map(e => {
          do {
            if (arr.includes(e.parentNode)) return e;
          } while ((e = e.parentNode) instanceof HTMLElement);
          return null;
        }))].filter(e => !!e);
 
        for (const s of arr) {
 
          Object.assign(s.style, {
            'pointerEvents': 'none'
          });
          s.classList.add('frvc-cursor-passthrough')
 
        }
 
        for (const s of clickable) {
 
          Object.assign(s.style, {
            'pointerEvents': 'initial'
          });
        }
 
        const videoElmBRect = target.getBoundingClientRect();
        let p = null;
        for (const s of clickableHolder) {
 
          const clickableHolderBRect = s.getBoundingClientRect();
          if (p === null && clickableHolderBRect.bottom === clickableHolderBRect.bottom && clickableHolderBRect.top > videoElmBRect.top && clickableHolderBRect.left === clickableHolderBRect.left && clickableHolderBRect.right === clickableHolderBRect.right) {
            p = s;
 
          }
 
 
          Object.assign(s.style, {
            'pointerEvents': 'initial',
            'height': 'auto',
            'boxSizing': 'border-box',
            'paddingTop': '16px'
          });
        }
 
        if (p) {
          addCSS();
          for (const s of p.querySelectorAll('div[class]:empty')) {
            s.classList.add('frvc-div-might-empty');
          }
          resizeObserver.disconnect();
          resizeObserver.observe(p);
        }
 
      }, 1)
 
    }
 
  }, true);
 
})();
欢迎访问Greasy Fork镜像
