Creates a button to widen and shorten the video container on IMovies.cc

imovies_video_widener.js

// ==UserScript==
// @name        imovies_video_widener 
// @namespace   Violentmonkey Scripts
// @match       https://www.imovies.cc/ka/movies/**
// @grant       none
// @version     1.0
// @author      Vakho10
// @description Creates a button to widen and shorten the video container on IMovies.cc
// ==/UserScript==

(function () {

  'use strict';

  function waitForElement(query, maxTries = 10, intervalTime = 500, delayTime = 250) {
    return new Promise((resolve, reject) => {
      let tryNumber = 1;
      let handle = setInterval(() => {
        const element = document.querySelector(query);
        if (element) {
          console.log(`Found query: '${query}', after ${tryNumber} tries.`);
          clearInterval(handle); 
          handle = 0; 
          setTimeout(() => resolve(element), delayTime);
        } else if (tryNumber >= maxTries) {
          console.log(`End of ${tryNumber} tries.`);
          clearInterval(handle);
          handle = 0;
          reject(new Error(`Couldn't locate the query: '${query}', after ${tryNumber} tries!`));
        } else {
          tryNumber += 1;
          console.log(`Increased try number for: '${query}',  to ${tryNumber}.`);
        }
      }, intervalTime);
    });
  }

  // Updates the button styles when the mode changes
  function updateToggleButtonStyle(btn) {
    const htmlElement = document.querySelector('html');
    if (htmlElement && htmlElement.classList.contains('dark')) {
      btn.classList.remove('btn-light');
      btn.classList.add('btn-outline-light', 'border-0');        
    } else {
      btn.classList.remove('btn-outline-light', 'border-0');
      btn.classList.add('btn-light');
    }
  }

  function process(elements) {

    const moviePlayerContainer = elements[0];
    const movieActionsList = elements[1];
    const nightModeSwitch = elements[2];

    // Create and add button to movie actions' list
    const div = document.createElement('div');
    div.className = 'mr-3';  
    const btnToggle = document.createElement('button');
    btnToggle.setAttribute('type', 'button');
    btnToggle.classList.add('btn');
    updateToggleButtonStyle(btnToggle);
    const btnToggleContent = document.createTextNode('გაგანიერება');
    btnToggle.appendChild(btnToggleContent);  
    div.appendChild(btnToggle);
    movieActionsList.firstChild.prepend(div);

    // Attach event listener to the newly created toggle button
    btnToggle.addEventListener('click', e => {   

      const containerToChange = moviePlayerContainer.querySelector('.row > .player-column');    
      let classFrom = 'col-md-8', classTo = 'col-md-12';    
      if (containerToChange.classList.contains(classTo)) {
          const tmpClassName = classFrom;
          classFrom = classTo;
          classTo = tmpClassName;
      }
      containerToChange.classList.replace(classFrom, classTo); 

      let textTo = 'გაგანიერება';
      if (classTo == 'col-md-12') {
          textTo = 'დაპატარავება';
      }
      e.target.innerText = textTo;
    });    

    // Attach event listener to nightmode switch  
    nightModeSwitch.addEventListener('click', e => {    
      setTimeout(() => updateToggleButtonStyle(btnToggle), 250); // Delayed execution...
    });
  }

  Promise.all([
    waitForElement('div.player-container.movie-player-container'),
    waitForElement('div.movie-actions-list'),
    waitForElement('div.night-mode-switch')
  ]).then((elements) => process(elements)).catch(err => console.error('Error resolving promises!', err));
    
})();