// ==UserScript==
// @name          Auto expand and/or darken
// @version       1.0.0
// @description   The script auto expands, and/or darkens, the video player when the page loads, without the need for clicking anything.
// @namespace     Gotenks
// @license       MIT
// @match         https://zoro.to/watch/*
// @grant         GM_addStyle
// @run-at        document-idle
// @downloadURL none
// ==/UserScript==


const autoExpand = true;

const autoDark = true;




// Sets the background color when the light is switched to 'off'.
// You can change it to any other color.
GM_addStyle(`
#mask-overlay {
  background-color: black;
}
`);


const element = (selector) => {
  return new Promise(resolve => {
    const ele = document.querySelector(selector);

    // if element already exists, return it. (no need for observer)
    if(ele) {
      resolve(ele);
      return;
    }

    // starts observing the document for "ele".
    new MutationObserver((_, observer) => {
      // if "ele" found, then return it and stop observer.
      if(ele) {
        resolve(ele);
        observer.disconnect();
      }
    })
    .observe(document.documentElement, {
      childList: true,
      subtree: true
    });

  });
};


const switches = (resizeBtn, lightSwitchBtn) => {
  if(autoExpand && resizeBtn.textContent === 'Expand') {
    resizeBtn.click();
  }
  if(autoDark && !lightSwitchBtn.classList.contains('off')) {
    lightSwitchBtn.click();
  }
};


const start = async () => {
  const resizeBtn = await element('#media-resize');
  const lightSwitchBtn = document.getElementById('turn-off-light');

  switches(resizeBtn, lightSwitchBtn);

  const prevBtn = await element('.block-prev');
  const nextBtn = document.querySelector('.block-next');

  prevBtn.onclick = () => switches(resizeBtn, lightSwitchBtn);
  nextBtn.onclick = () => switches(resizeBtn, lightSwitchBtn);
};



start();