XVIDEOS Plus

A kinder XVIDEOS. Because you're worth it.

// ==UserScript==
// @author      LD
// @version     1.0
// @name        XVIDEOS Plus
// @description A kinder XVIDEOS. Because you're worth it.
// @namespace   LD
// @date        2018-10-05
// @include     *www.xvideos.com/*
// @run-at      document-start
// @grant       none
// @license     Public Domain
// @icon        https://seeklogo.com/images/X/xvideos-logo-77E7B4F168-seeklogo.com.png
// @grant       GM_addStyle
// ==/UserScript==

(() => {
  const OPTIONS = {
    autoresizePlayer: JSON.parse(localStorage.getItem('plus_autoresizePlayer')) || false
  }
  
  /* Styles - Shared between all "Plus" userscripts */
  
  const sharedStyles = `
    /* Our own elements */

    .plus-buttons {
      background: rgba(27, 27, 27, 0.9);
      box-shadow: 0px 0px 12px rgba(20, 111, 223, 0.9);
      font-size: 12px;
      position: fixed;
      bottom: 10px;
      padding: 10px 22px 8px 24px;
      right: 0;
      z-index: 100;
      transition: all 0.3s ease;

      /* Negative margin-right calculated later based on width of buttons */
    }

    .plus-buttons:hover {
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    }

    .plus-buttons .plus-button {
      margin: 10px 0;
      padding: 6px 15px;
      border-radius: 4px;
      font-weight: 700;
      display: block;
      position: relative;
      text-align: center;
      vertical-align: top;
      cursor: pointer;
      border: none;
      text-decoration: none;
    }

    .plus-buttons a.plus-button {
      background: rgb(221, 221, 221);
      color: rgb(51, 51, 51);
    }

    .plus-buttons a.plus-button:hover {
      background: rgb(187, 187, 187);
      color: rgb(51, 51, 51);
    }

    .plus-buttons a.plus-button.plus-button-isOn {
      background: rgb(20, 111, 223);
      color: rgb(255, 255, 255);
    }

    .plus-buttons a.plus-button.plus-button-isOn:hover {
      background: rgb(0, 91, 203);
      color: rgb(255, 255, 255);
    }

    .plus-hidden {
      display: none !important;
    }
  `;
  
  /* Styles - Color theme */
  
  const themeStyles = `
    .plus-buttons {
      box-shadow: 0px 0px 12px rgba(255, 153, 0, 0.85);
    }

    .plus-buttons:hover {
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    }

    .plus-buttons a.plus-button {
      background: rgb(47, 47, 47);
      color: rgb(172, 172, 172);
    }

    .plus-buttons a.plus-button:hover {
      background: rgb(79, 79, 79);
      color: rgb(204, 204, 204);
    }

    .plus-buttons a.plus-button.plus-button-isOn {
      background: rgb(255, 153, 0);
      color: rgb(0, 0, 0);
    }

    .plus-buttons a.plus-button.plus-button-isOn:hover {
      background: rgb(255, 153, 0);
      color: rgb(255, 255, 255);
    }
  `;
  
  /* Styles - General site-specific */
  
  const generalStyles = `
    /* Hide elements */

    .abovePlayer,
    .streamatesModelsContainer,
    #headerUpgradePremiumBtn,
    #headerUploadBtn,
    #PornhubNetworkBar,
    #js-abContainterMain,
    #hd-rightColVideoPage > :not(#relatedVideosVPage) {
      display: none !important;
    }

    #related-videos .thumb-block {
      opacity: 1;
    }

    #related-videos .thumb-block:hover {
      opacity: 1;
    }
  `;
  
  /*
   * Run after page has loaded
   */
  
  window.addEventListener('DOMContentLoaded', () => {
    const player = document.querySelector('#html5video video');
    
    /*
     * Use wide player by default
     */
    
    if (player && OPTIONS.autoresizePlayer) {
      let largePlayerButton = document.querySelector('.buttons-bar img[src*="icon-screen-expand"]');
        
      /* Click large player button */
      largePlayerButton.dispatchEvent(new MouseEvent('click'));
    }
    
    /*
     * Add buttons for certain options
     */
    
    /* Buttons container */
    
    let buttons = document.createElement('div');
    let scrollButton = document.createElement('a');
    let scrollButtonText = document.createElement('span');
    let autoresizeButton = document.createElement('a');
    let autoresizeButtonText = document.createElement('span');
    let autoresizeButtonState = OPTIONS.autoresizePlayer ? 'plus-button-isOn' : 'plus-button-isOff';
    
    buttons.classList.add('plus-buttons');
    
    scrollButtonText.textContent = "Scroll to top";
    scrollButtonText.classList.add('text');
    scrollButton.appendChild(scrollButtonText);
    scrollButton.classList.add('plus-button');
    scrollButton.addEventListener('click', () => {
      window.scrollTo({ top: 0 });
    });
    
    buttons.appendChild(scrollButton);
    buttons.appendChild(autoresizeButton);
    
    autoresizeButtonText.textContent = 'Auto-resize player';
    autoresizeButtonText.classList.add('text');
    autoresizeButton.appendChild(autoresizeButtonText);
    autoresizeButton.classList.add(autoresizeButtonState, 'plus-button');
    autoresizeButton.addEventListener('click', () => {
      OPTIONS.autoresizePlayer = !OPTIONS.autoresizePlayer;
      localStorage.setItem('plus_autoresizePlayer', OPTIONS.autoresizePlayer);
      
      if (OPTIONS.autoresizePlayer) {
        autoresizeButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
      } else {
        autoresizeButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
      }
    });
    
    document.body.appendChild(buttons);
    
    /*
     * Add styles
     */
    
    GM_addStyle(sharedStyles);
    GM_addStyle(themeStyles);
    GM_addStyle(generalStyles);
    
    /*
     * Add dynamic styles
     */
    
    const dynamicStyles = `
      .plus-buttons {
        margin-right: -${buttons.getBoundingClientRect().width - 23}px;
      }

      .plus-buttons:hover {
        margin-right: 0;
      }
    `;
    
    GM_addStyle(dynamicStyles);
  });
})();