☰

xHamster Plus

A kinder xHamster. Because you're worth it.

  1. // ==UserScript==
  2. // @author      Mr. Nope
  3. // @version     1.3
  4. // @name        xHamster Plus
  5. // @description A kinder xHamster. Because you're worth it.
  6. // @namespace   Nope
  7. // @date        2019-02-23
  8. // @include     *xhamster.com*
  9. // @run-at      document-start
  10. // @grant       none
  11. // @license     Public Domain
  12. // @icon        https://static-cl.xhcdn.com/xh-tpl3/images/favicon/apple-touch-icon.png
  13. // @grant       GM_addStyle
  14. // ==/UserScript==
  15.  
  16. (() => {
  17.   const OPTIONS = {
  18.     cinemaMode:
  19.       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(67, 67, 67, 0.85);
  30.       box-shadow: 0px 0px 12px rgba(20, 111, 223, 0.85);
  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 18px rgba(227, 68, 73, 1);
  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(218, 218, 218);
  99.       color: rgb(48, 48, 48);
  100.     }
  101.  
  102.     .plus-buttons a.plus-button:hover {
  103.       background: rgb(204, 204, 204);
  104.       color: rgb(48, 48, 48);
  105.     }
  106.  
  107.     .plus-buttons a.plus-button.plus-button-isOn {
  108.       background: rgb(227, 68, 73);
  109.       color: rgb(255, 255, 255);
  110.     }
  111.  
  112.     .plus-buttons a.plus-button.plus-button-isOn:hover {
  113.       background: rgb(212, 32, 37);
  114.       color: rgb(255, 255, 255);
  115.     }
  116.   `;
  117.   
  118.   /**
  119.    * Site-Specific Styles
  120.    */
  121.   const generalStyles = `
  122.     /* Hide elements */
  123.  
  124.     .up-arrow,
  125.     .premium-overlay,
  126.     .bottom-widget-section,
  127.     .clipstore-bottom,
  128.     .wid-spot-container,
  129.     .wid-banner-container {
  130.       display: none !important;
  131.     }
  132.  
  133.     /* Increase large player size */
  134.  
  135.     .video-page.video-page--large-mode .player-container__player {
  136.       height: 720px;
  137.     }
  138.  
  139.     /* Show all playlists without scrolling when adding to favorites */
  140.  
  141.     .favorites-dropdown__list {
  142.       max-height: unset !important;
  143.     }
  144.  
  145.     .video-page:not(.video-page--large-mode) .player-container {
  146.       margin: 10px auto 0;
  147.     }
  148.  
  149.     .video-page:not(.video-page--large-mode) .entity-container,
  150.     .video-page:not(.video-page--large-mode) .comments-wrap {
  151.       margin: 0 auto;
  152.     }
  153.  
  154.     /* Minor stylistic improvements */
  155.  
  156.     .entity-container {
  157.       margin: 22px 0;
  158.       margin-bottom: 22px;
  159.       border-top: 1px solid #ccc;
  160.     }
  161.   `;
  162.   
  163.   /**
  164.    * Run after page has loaded
  165.    */
  166.   window.addEventListener('DOMContentLoaded', () => {
  167.     const player = document.querySelector('#player-container');
  168.     const video = document.querySelector('#player-container video');
  169.     
  170.     /**
  171.      * Toggle cinema mode if enabled
  172.      */
  173.     if (video && OPTIONS.cinemaMode) {
  174.       // Button is not always available right away, so we wait for `canplay`
  175.       video.addEventListener('canplay', function onCanPlay() {
  176.           const largePlayerButton = document.querySelector('.large-mode');
  177.         
  178.           // Click large player button
  179.           largePlayerButton.dispatchEvent(new MouseEvent('click'));
  180.         
  181.           // Only run once
  182.           video.removeEventListener('canplay', onCanPlay, false);
  183.       });
  184.     }
  185.     
  186.     /**
  187.      * Create buttons for options
  188.      */
  189.     
  190.     const buttons = document.createElement('div');
  191.     const scrollButton = document.createElement('a');
  192.     const scrollButtonText = document.createElement('span');
  193.     const cinemaModeButton = document.createElement('a');
  194.     const cinemaModeButtonText = document.createElement('span');
  195.     const cinemaModeButtonState = OPTIONS.cinemaMode ? 'plus-button-isOn' : 'plus-button-isOff';
  196.     
  197.     scrollButtonText.textContent = "Scroll to Top";
  198.     scrollButtonText.classList.add('text');
  199.     scrollButton.appendChild(scrollButtonText);
  200.     scrollButton.classList.add('plus-button');
  201.     scrollButton.addEventListener('click', () => {
  202.       window.scrollTo({ top: 0 });
  203.     });
  204.     
  205.     cinemaModeButtonText.textContent = 'Cinema Mode';
  206.     cinemaModeButtonText.classList.add('text');
  207.     cinemaModeButton.appendChild(cinemaModeButtonText);
  208.     cinemaModeButton.classList.add(cinemaModeButtonState, 'plus-button');
  209.     cinemaModeButton.addEventListener('click', () => {
  210.       OPTIONS.cinemaMode = !OPTIONS.cinemaMode;
  211.       localStorage.setItem('plus_cinemaMode', OPTIONS.cinemaMode);
  212.       
  213.       if (OPTIONS.cinemaMode) {
  214.         cinemaModeButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  215.       } else {
  216.         cinemaModeButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  217.       }
  218.     });
  219.     
  220.     buttons.classList.add('plus-buttons');
  221.     
  222.     buttons.appendChild(scrollButton);
  223.     buttons.appendChild(cinemaModeButton);
  224.     
  225.     document.body.appendChild(buttons);
  226.     
  227.     /**
  228.      * Add styles
  229.      */
  230.     
  231.     GM_addStyle(sharedStyles);
  232.     GM_addStyle(themeStyles);
  233.     GM_addStyle(generalStyles);
  234.     
  235.     /**
  236.      * Add dynamic styles
  237.      */
  238.     
  239.     const dynamicStyles = `
  240.       .plus-buttons {
  241.         margin-right: -${buttons.getBoundingClientRect().width - 23}px;
  242.       }
  243.  
  244.       .plus-buttons:hover {
  245.         margin-right: 0;
  246.       }
  247.  
  248.       .video-page.video-page--large-mode .player-container__player {
  249.         max-height: ${window.innerHeight - 60}px;
  250.       }
  251.     `;
  252.     
  253.     GM_addStyle(dynamicStyles);
  254.     
  255.     /**
  256.      * Updating dynamic styles on window resize
  257.      */
  258.  
  259.     if (player) {
  260.       window.addEventListener('resize', () => {
  261.         if (player.classList.contains('xplayer-large-mode')) {
  262.           player.style.maxHeight = `${window.innerHeight - 60}px`;
  263.         }
  264.       });
  265.     }
  266.   });
  267. })();