☰

XVIDEOS Plus

A kinder XVIDEOS. Because you're worth it.

  1. // ==UserScript==
  2. // @author      Mr. Nope
  3. // @version     1.2
  4. // @name        XVIDEOS Plus
  5. // @description A kinder XVIDEOS. Because you're worth it.
  6. // @namespace   Nope
  7. // @date        2019-02-23
  8. // @include     *xvideos.com*
  9. // @run-at      document-start
  10. // @grant       none
  11. // @license     Public Domain
  12. // @icon        https://seeklogo.com/images/X/xvideos-logo-77E7B4F168-seeklogo.com.png
  13. // @grant       GM_addStyle
  14. // ==/UserScript==
  15.  
  16. (() => {
  17.   const OPTIONS = {
  18.     autoplay: JSON.parse(localStorage.getItem('plus_autoplay')) || false,
  19.     cinemaMode: JSON.parse(localStorage.getItem('plus_cinemaMode')) || false
  20.   }
  21.   
  22.   /**
  23.    * Shared Styles
  24.    */
  25.   const sharedStyles = `
  26.     /* Our own elements */
  27.  
  28.     .plus-buttons {
  29.       background: rgba(27, 27, 27, 0.9);
  30.       box-shadow: 0px 0px 12px rgba(20, 111, 223, 0.9);
  31.       font-size: 12px;
  32.       position: fixed;
  33.       bottom: 10px;
  34.       padding: 10px 22px 8px 24px;
  35.       right: 0;
  36.       z-index: 100;
  37.       transition: all 0.3s ease;
  38.  
  39.       /* Negative margin-right calculated later based on width of buttons */
  40.     }
  41.  
  42.     .plus-buttons:hover {
  43.       box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  44.     }
  45.  
  46.     .plus-buttons .plus-button {
  47.       margin: 10px 0;
  48.       padding: 6px 15px;
  49.       border-radius: 4px;
  50.       font-weight: 700;
  51.       display: block;
  52.       position: relative;
  53.       text-align: center;
  54.       vertical-align: top;
  55.       cursor: pointer;
  56.       border: none;
  57.       text-decoration: none;
  58.     }
  59.  
  60.     .plus-buttons a.plus-button {
  61.       background: rgb(221, 221, 221);
  62.       color: rgb(51, 51, 51);
  63.     }
  64.  
  65.     .plus-buttons a.plus-button:hover {
  66.       background: rgb(187, 187, 187);
  67.       color: rgb(51, 51, 51);
  68.     }
  69.  
  70.     .plus-buttons a.plus-button.plus-button-isOn {
  71.       background: rgb(20, 111, 223);
  72.       color: rgb(255, 255, 255);
  73.     }
  74.  
  75.     .plus-buttons a.plus-button.plus-button-isOn:hover {
  76.       background: rgb(0, 91, 203);
  77.       color: rgb(255, 255, 255);
  78.     }
  79.  
  80.     .plus-hidden {
  81.       display: none !important;
  82.     }
  83.   `;
  84.   
  85.   /**
  86.    * Color Theme
  87.    */
  88.   const themeStyles = `
  89.     .plus-buttons {
  90.       box-shadow: 0px 0px 12px rgba(255, 153, 0, 0.85);
  91.     }
  92.  
  93.     .plus-buttons:hover {
  94.       box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  95.     }
  96.  
  97.     .plus-buttons a.plus-button {
  98.       background: rgb(47, 47, 47);
  99.       color: rgb(172, 172, 172);
  100.     }
  101.  
  102.     .plus-buttons a.plus-button:hover {
  103.       background: rgb(79, 79, 79);
  104.       color: rgb(204, 204, 204);
  105.     }
  106.  
  107.     .plus-buttons a.plus-button.plus-button-isOn {
  108.       background: rgb(255, 153, 0);
  109.       color: rgb(0, 0, 0);
  110.     }
  111.  
  112.     .plus-buttons a.plus-button.plus-button-isOn:hover {
  113.       background: rgb(255, 153, 0);
  114.       color: rgb(255, 255, 255);
  115.     }
  116.   `;
  117.   
  118.   /**
  119.    * Site-Specific Styles
  120.    */
  121.   const generalStyles = `
  122.     /* Hide elements */
  123.  
  124.     .abovePlayer,
  125.     .streamatesModelsContainer,
  126.     #headerUpgradePremiumBtn,
  127.     #headerUploadBtn,
  128.     #PornhubNetworkBar,
  129.     #js-abContainterMain,
  130.     #hd-rightColVideoPage > :not(#relatedVideosVPage) {
  131.       display: none !important;
  132.     }
  133.  
  134.     #related-videos .thumb-block {
  135.       opacity: 1;
  136.     }
  137.  
  138.     #related-videos .thumb-block:hover {
  139.       opacity: 1;
  140.     }
  141.   `;
  142.   
  143.   /**
  144.    * Run on page load
  145.    */
  146.   window.addEventListener('DOMContentLoaded', () => {
  147.     const video = document.querySelector('#html5video video'); // References the HTML5 Video element
  148.     
  149.     /**
  150.      * Create option buttons
  151.      */
  152.     
  153.     const buttons = document.createElement('div');
  154.     
  155.     const scrollButton = document.createElement('a');
  156.     const scrollButtonText = document.createElement('span');
  157.     
  158.     const autoplayButton = document.createElement('a');
  159.     const autoplayButtonText = document.createElement('span');
  160.     const autoplayButtonState = OPTIONS.autoplay ? 'plus-button-isOn' : 'plus-button-isOff';
  161.     
  162.     const cinemaModeButton = document.createElement('a');
  163.     const cinemaModeButtonText = document.createElement('span');
  164.     const cinemaModeButtonState = OPTIONS.cinemaMode ? 'plus-button-isOn' : 'plus-button-isOff';
  165.     
  166.     scrollButtonText.textContent = "Scroll to Top";
  167.     scrollButtonText.classList.add('text');
  168.     scrollButton.appendChild(scrollButtonText);
  169.     scrollButton.classList.add('plus-button');
  170.     scrollButton.addEventListener('click', () => {
  171.       window.scrollTo({ top: 0 });
  172.     });
  173.     
  174.     cinemaModeButtonText.textContent = 'Cinema Mode';
  175.     cinemaModeButtonText.classList.add('text');
  176.     cinemaModeButton.appendChild(cinemaModeButtonText);
  177.     cinemaModeButton.classList.add(cinemaModeButtonState, 'plus-button');
  178.     cinemaModeButton.addEventListener('click', () => {
  179.       OPTIONS.cinemaMode = !OPTIONS.cinemaMode;
  180.       localStorage.setItem('plus_cinemaMode', OPTIONS.cinemaMode);
  181.       
  182.       if (OPTIONS.cinemaMode) {
  183.         cinemaModeButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  184.       } else {
  185.         cinemaModeButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  186.       }
  187.     });
  188.     
  189.     autoplayButtonText.textContent = 'Autoplay';
  190.     autoplayButtonText.classList.add('text');
  191.     autoplayButton.appendChild(autoplayButtonText);
  192.     autoplayButton.classList.add(autoplayButtonState, 'plus-button');
  193.     autoplayButton.addEventListener('click', () => {
  194.       OPTIONS.autoplay = !OPTIONS.autoplay;
  195.       localStorage.setItem('plus_autoplay', OPTIONS.autoplay);
  196.       
  197.       if (OPTIONS.autoplay) {
  198.         autoplayButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  199.       } else {
  200.         autoplayButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  201.       }
  202.     });
  203.     
  204.     buttons.classList.add('plus-buttons');
  205.     
  206.     buttons.appendChild(scrollButton);
  207.     buttons.appendChild(autoplayButton);
  208.     buttons.appendChild(cinemaModeButton);
  209.     
  210.     document.body.appendChild(buttons);
  211.     
  212.     /**
  213.      * Initialize video pages containing valid video element
  214.      */
  215.     
  216.     if (/^http[s]*:\/\/[www.]*xvideos\.com\/video/.test(window.location.href) && video) {
  217.       /**
  218.        * Auto-enable cinema mode if enabled
  219.        */
  220.       if (OPTIONS.cinemaMode) {
  221.         document.querySelector('.buttons-bar img[src*="icon-screen-expand"]').dispatchEvent(new MouseEvent('click'));
  222.       }
  223.     
  224.       /**
  225.        * Autoplay video if enabled
  226.        */
  227.       if (OPTIONS.autoplay) {
  228.         document.querySelector('.buttons-bar img[src*="icon-play"]').dispatchEvent(new MouseEvent('click'));
  229.       }
  230.     }
  231.     
  232.     /**
  233.      * Add styles
  234.      */
  235.     
  236.     GM_addStyle(sharedStyles);
  237.     GM_addStyle(themeStyles);
  238.     GM_addStyle(generalStyles);
  239.     
  240.     /**
  241.      * Add dynamic styles
  242.      */
  243.     
  244.     const dynamicStyles = `
  245.       .plus-buttons {
  246.         margin-right: -${buttons.getBoundingClientRect().width - 23}px;
  247.       }
  248.  
  249.       .plus-buttons:hover {
  250.         margin-right: 0;
  251.       }
  252.     `;
  253.     
  254.     GM_addStyle(dynamicStyles);
  255.   });
  256. })();