☰

Facebook Reel: Video Controls

Make Facebook Reel: Video Controls

// ==UserScript==
// @name        Facebook Reel: Video Controls
// @namespace   UserScript
// @match       https://www.facebook.com/*
// @version     0.2.30
// @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 lastXid = "";

  let addCSS = () => {
    if (addCSS.done) return;
    addCSS.done = true;
    document.head.appendChild(document.createElement('style')).textContent = `
    [frvc-might-empty]:empty {
      display: none;
    }
    [frvc-css="cursor-passthrough"] {
      pointer-events: none;
    }
  
    [frvc-css="cursor-passthrough"] [role], [frvc-css="cursor-passthrough"] [tabindex] {
      pointer-events: initial;
    }


    [frvc-css="sized-holder"] {
      height: auto !important;
      box-sizing: border-box !important;
      padding-top: 16px !important;
    }
  
    `

  };

  const setVideoTargetStyles = (videoTarget) => {
    Object.assign(videoTarget.style, {
      'position': 'relative',
      'zIndex': 999,
      'pointerEvents': 'all',
      'height': 'calc(100% - var(--frvc-reel-control-height))'
    });
  };

  const attributeRemoves = (list) => {
    for (const m of list) {
      for (const s of document.querySelectorAll(`[${m}]`)) {
        s.removeAttribute(m);
      }
    }
  };

  let cid = 0;
  let videoCached = null;
  let statusA = 0;

  const videoTargetCacheFn = (evt) => {
    const videoTarget = (evt || 0).target;
    if (videoTarget instanceof HTMLVideoElement) {
      if (videoCached !== videoTarget) {
        if (location.href.indexOf('reel') < 0) return;
        if (!(videoTarget.duration > 0.25)) return;
        if (!videoTarget.closest('div[class][role="button"][tabindex], div[role="main"]')) return;
        videoCached = videoTarget;
      }
      statusA |= 1;
      if ((statusA & 3) === 3) {
        statusA = 0;
        if (!cid) {
          cid = 1;
          Promise.resolve().then(() => {
            delayMain(videoCached);
          });
        }
      }
    }
  }

  document.addEventListener('play',videoTargetCacheFn , true);

  document.addEventListener('durationchange', videoTargetCacheFn, true);

  document.addEventListener('playing', videoTargetCacheFn, true);

  // document.addEventListener('timeupdate', videoTargetCacheFn, true);

  new MutationObserver(()=>{

    if (videoCached) {
      const videoTarget = videoCached;
      if (lastXid && videoTarget.hasAttribute('controls') && document.querySelector(`[frvc-id="sizing_${lastXid}"]`)) {
        return;
      }
      if (!videoTarget.isConnected) return;
      statusA |= 2;
      if ((statusA & 3) === 3) {
        statusA = 0;
        if (!cid) {
          cid = 1;
          Promise.resolve().then(() => {
            delayMain(videoCached);
          });
        }
      }
    }

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

  const delayMain = (videoTarget) => {
    cid = 0;

    if (location.href.indexOf('reel') < 0) return;

    if (lastXid && videoTarget.hasAttribute('controls') && document.querySelector(`[frvc-id="sizing_${lastXid}"]`)) {
      return;
    }

    try {

      const debugInfo = {};
      Promise.resolve(debugInfo).then(console.debug);

      const videoLayerContainer = videoTarget.closest('div[class][role="button"][tabindex], div[role="main"]');
      debugInfo.videoLayerContainer = videoLayerContainer;
      if (!videoLayerContainer) return;

      videoTarget.setAttribute('controls', '');
      addCSS();


      document.documentElement.style.removeProperty('--frvc-reel-control-height');
      attributeRemoves(['frvc-debug', 'frvc-holder', 'frvc-css', 'frvc-might-empty']);

      setVideoTargetStyles(videoTarget);

      const floatingLayer = [...videoLayerContainer.querySelectorAll('.x10l6tqk.x13vifvy:not(.x1m3v4wt)')].filter(elm => !elm.contains(videoTarget));
      debugInfo.floatingLayer = floatingLayer;

      for (const c of floatingLayer) {
        c.setAttribute("frvc-debug", "clickableHolder-bypass");
      }

      const clickable = videoLayerContainer.querySelectorAll('a[role="link"][href]');
      debugInfo.clickable = clickable;
      const clickableHolder = [...new Set([...clickable].map(e => {
        do {
          if (floatingLayer.includes(e.parentNode)) return e;
        } while ((e = e.parentNode) instanceof HTMLElement);
        return null;
      }))].filter(e => !!e).map(e => {
        const f = (e) => {
          const { firstElementChild, lastElementChild } = e;
          if (firstElementChild === lastElementChild) return f(firstElementChild);
          const validChildren = [...e.children].filter(e => e.firstElementChild !== null);
          if (validChildren.length === 1) return f(validChildren[0]);
          return e;
        }
        return f(e);
      });
      debugInfo.clickableHolder = clickableHolder;
      if (clickableHolder.length === 0) return;

      const xid = `${Math.floor(Math.random() * 29002921 + 29002921).toString(36)}`;

      const clickableHolderSized = [];
      for (const c of clickableHolder) {
        c.setAttribute("frvc-holder", `m_${xid}`);

        const clickable = c.querySelectorAll('a[role="link"][href]');
        const s = new Set();
        for (let e of clickable) {
          if (!e.parentNode) break;
          do {
            if (e.parentNode === c) break;
            s.add(e.parentNode);
          } while ((e = e.parentNode) instanceof HTMLElement);
        }
        for (const p of s) {
          p.setAttribute("frvc-holder", `s_${xid}`);
        }
        const ret = [[c, c.getBoundingClientRect().height, 0]];
        const elements = c.querySelectorAll(`[frvc-holder="s_${xid}"]`);
        let i = 0;
        for (const element of elements) {
          const p = element.getBoundingClientRect();
          ret.push([element, p.height, ++i]);
        }
        ret.sort((a, b) => b[1] - a[1] || a[2] - b[2]);
        clickableHolderSized.push(ret[0][0]);
      }

      for (const s of floatingLayer) {

        Object.assign(s.style, {
          'pointerEvents': 'none'
        });
        s.setAttribute('frvc-css', "cursor-passthrough");

      }

      for (const s of clickable) {

        Object.assign(s.style, {
          'pointerEvents': 'initial'
        });
      }

      const videoElmBRect = videoTarget.getBoundingClientRect();
      let effctiveHolder = null;
      for (const s of clickableHolderSized) {

        if (effctiveHolder === null) {
          const clickableHolderBRect = s.getBoundingClientRect();
          const conditions = {
            bottom: Math.abs(clickableHolderBRect.bottom - videoElmBRect.bottom) < 48,
            top: clickableHolderBRect.top + 1 > videoElmBRect.top,
            left: Math.abs(clickableHolderBRect.left - videoElmBRect.left) < 5,
            right: Math.abs(clickableHolderBRect.right - videoElmBRect.right) < 5
          }
          debugInfo.debug = conditions;
          if (conditions.bottom && conditions.top && conditions.left && conditions.right) {
            effctiveHolder = s;
          }
        }

        Object.assign(s.style, {
          'pointerEvents': 'initial',
        });

      }

      debugInfo.effctiveHolder = effctiveHolder;
      if (effctiveHolder) {
        effctiveHolder.setAttribute("frvc-css", "sized-holder");
        addCSS();
        for (const s of effctiveHolder.querySelectorAll('div[class]:empty')) {
          s.setAttribute('frvc-might-empty', "");
        }
        effctiveHolder.setAttribute("frvc-debug", "sizing");
        lastXid = xid;
        effctiveHolder.setAttribute("frvc-id", `sizing_${lastXid}`);
        resizeObserver.disconnect();
        resizeObserver.observe(effctiveHolder);
      } else {
        console.warn("frvc: sizing element is not found");
      }

    } catch (e) {
      console.error("frvc", e);
    }

  };

})();