Facebook Reel: Video Controls

Make Facebook Reel: Video Controls
当前为 2025-03-21 提交的版本，查看最新版本。
换行
// ==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);

})();