Facebook Reel: Video Controls

Make Facebook Reel: Video Controls

// ==UserScript==
// @name        Facebook Reel: Video Controls
// @namespace   UserScript
// @match       https://www.facebook.com/*
// @version     0.1.1
// @license MIT
// @author      CY Fung
// @description Make Facebook Reel: Video Controls
// @run-at document-start
// @grant       none
// @unwrap
// ==/UserScript==

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', '');

    setTimeout(() => {


      Object.assign(target.style, {
        'position': 'relative',
        'zIndex': 999,
        'pointerEvents': 'all'
      });

      let arr = [...buttonLayer.querySelectorAll('.x10l6tqk.x13vifvy:not(.x1m3v4wt)')].filter(elm => !elm.contains(target));

      for (const s of arr) {

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

      }

    }, 1)



  }

}, true)