☰

xHamster Plus

A kinder xHamster. Because you're worth it.

  1. // ==UserScript==
  2. // @author      LD
  3. // @version     1.0
  4. // @name        xHamster Plus
  5. // @description A kinder xHamster. Because you're worth it.
  6. // @namespace   LD
  7. // @date        2018-08-08
  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.   /* Available options */
  18.   const options = {
  19.     autoresizePlayer:
  20.       JSON.parse(localStorage.getItem('plus_autoresizePlayer')) || false
  21.   }
  22.   /* Empty tag function, for VS Code syntax highlight for CSS in literals */
  23.   const css = (strings, ...values) => {
  24.     /* Re-assemble input string and return untouched */
  25.     return strings.reduce((output, string, index) => {
  26.       return `${output}${string}${values[index] || ''}`;
  27.     }, '');
  28.   };
  29.   
  30.   /* Styles - Shared between all "Plus" userscripts */
  31.   
  32.   const sharedStyles = css`
  33.     /* Our own elements */
  34.  
  35.     .plus-buttons {
  36.       background: rgba(67, 67, 67, 0.85);
  37.       box-shadow: 0px 0px 12px rgba(20, 111, 223, 0.85);
  38.       font-size: 12px;
  39.       position: fixed;
  40.       bottom: 10px;
  41.       padding: 10px 22px 8px 24px;
  42.       right: 0;
  43.       z-index: 100;
  44.       transition: all 0.3s ease;
  45.  
  46.       /* Negative margin-right calculated later based on width of buttons */
  47.     }
  48.  
  49.     .plus-buttons:hover {
  50.       box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  51.     }
  52.  
  53.     .plus-buttons .plus-button {
  54.       margin: 10px 0;
  55.       padding: 6px 15px;
  56.       border-radius: 4px;
  57.       font-weight: 700;
  58.       display: block;
  59.       position: relative;
  60.       text-align: center;
  61.       vertical-align: top;
  62.       cursor: pointer;
  63.       border: none;
  64.       text-decoration: none;
  65.     }
  66.  
  67.     .plus-buttons a.plus-button {
  68.       background: rgb(221, 221, 221);
  69.       color: rgb(51, 51, 51);
  70.     }
  71.  
  72.     .plus-buttons a.plus-button:hover {
  73.       background: rgb(187, 187, 187);
  74.       color: rgb(51, 51, 51);
  75.     }
  76.  
  77.     .plus-buttons a.plus-button.plus-button-isOn {
  78.       background: rgb(20, 111, 223);
  79.       color: rgb(255, 255, 255);
  80.     }
  81.  
  82.     .plus-buttons a.plus-button.plus-button-isOn:hover {
  83.       background: rgb(0, 91, 203);
  84.       color: rgb(255, 255, 255);
  85.     }
  86.  
  87.     .plus-hidden {
  88.       display: none !important;
  89.     }
  90.   `;
  91.   
  92.   /* Styles - Color theme */
  93.   
  94.   const themeStyles = css`
  95.     .plus-buttons {
  96.       box-shadow: 0px 0px 18px rgba(227, 68, 73, 1);
  97.     }
  98.  
  99.     .plus-buttons:hover {
  100.       box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  101.     }
  102.  
  103.     .plus-buttons a.plus-button {
  104.       background: rgb(218, 218, 218);
  105.       color: rgb(48, 48, 48);
  106.     }
  107.  
  108.     .plus-buttons a.plus-button:hover {
  109.       background: rgb(204, 204, 204);
  110.       color: rgb(48, 48, 48);
  111.     }
  112.  
  113.     .plus-buttons a.plus-button.plus-button-isOn {
  114.       background: rgb(227, 68, 73);
  115.       color: rgb(255, 255, 255);
  116.     }
  117.  
  118.     .plus-buttons a.plus-button.plus-button-isOn:hover {
  119.       background: rgb(212, 32, 37);
  120.       color: rgb(255, 255, 255);
  121.     }
  122.   `;
  123.   
  124.   /* Styles - General site-specific */
  125.   
  126.   const generalStyles = css`
  127.     /* Hide elements */
  128.  
  129.     .up-arrow,
  130.     .premium-overlay,
  131.     .bottom-widget-section,
  132.     .clipstore-bottom,
  133.     .wid-spot-container,
  134.     .wid-banner-container {
  135.       display: none !important;
  136.     }
  137.  
  138.     /* Increase large player size */
  139.  
  140.     .video-page.video-page--large-mode .player-container__player {
  141.       height: 720px;
  142.     }
  143.  
  144.     /* Show all playlists without scrolling when adding to favorites */
  145.  
  146.     .favorites-dropdown__list {
  147.       max-height: unset !important;
  148.     }
  149.  
  150.     .video-page:not(.video-page--large-mode) .player-container {
  151.       margin: 10px auto 0;
  152.     }
  153.  
  154.     .video-page:not(.video-page--large-mode) .entity-container,
  155.     .video-page:not(.video-page--large-mode) .comments-wrap {
  156.       margin: 0 auto;
  157.     }
  158.  
  159.     /* Minor stylistic improvements */
  160.  
  161.     .entity-container {
  162.       margin: 22px 0;
  163.       margin-bottom: 22px;
  164.       border-top: 1px solid #ccc;
  165.     }
  166.   `;
  167.   
  168.   /*
  169.    * Run after page has loaded
  170.    */
  171.   
  172.   window.addEventListener('DOMContentLoaded', () => {
  173.     const player = document.querySelector('#player-container');
  174.     const video = document.querySelector('#player-container video');
  175.     
  176.     /*
  177.      * Use wide player by default
  178.      */
  179.     
  180.     if (video && options.autoresizePlayer) {
  181.       /* Button is not always available right away -- wait for `canplay` */
  182.       video.addEventListener('canplay', function onCanPlay() {
  183.           let largePlayerButton = document.querySelector('.large-mode');
  184.         
  185.           /* Click large player button */
  186.           largePlayerButton.dispatchEvent(new MouseEvent('click'));
  187.         
  188.           /* Only run once */
  189.           video.removeEventListener('canplay', onCanPlay, false);
  190.       });
  191.     }
  192.     
  193.     /*
  194.      * Add buttons for certain options
  195.      */
  196.     
  197.     /* Buttons container */
  198.     
  199.     let buttons = document.createElement('div');
  200.     let scrollButton = document.createElement('a');
  201.     let scrollButtonText = document.createElement('span');
  202.     let autoresizeButton = document.createElement('a');
  203.     let autoresizeButtonText = document.createElement('span');
  204.     let autoresizeButtonState = options.autoresizePlayer ? 'plus-button-isOn' : 'plus-button-isOff';
  205.     
  206.     buttons.classList.add('plus-buttons');
  207.     
  208.     scrollButtonText.textContent = "Scroll to top";
  209.     scrollButtonText.classList.add('text');
  210.     scrollButton.appendChild(scrollButtonText);
  211.     scrollButton.classList.add('plus-button');
  212.     scrollButton.addEventListener('click', () => {
  213.       window.scrollTo({ top: 0 });
  214.     });
  215.     
  216.     buttons.appendChild(scrollButton);
  217.     buttons.appendChild(autoresizeButton);
  218.     
  219.     autoresizeButtonText.textContent = 'Auto-resize player';
  220.     autoresizeButtonText.classList.add('text');
  221.     autoresizeButton.appendChild(autoresizeButtonText);
  222.     autoresizeButton.classList.add(autoresizeButtonState, 'plus-button');
  223.     autoresizeButton.addEventListener('click', () => {
  224.       options.autoresizePlayer = !options.autoresizePlayer;
  225.       localStorage.setItem('plus_autoresizePlayer', options.autoresizePlayer);
  226.       
  227.       if (options.autoresizePlayer) {
  228.         autoresizeButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  229.       } else {
  230.         autoresizeButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  231.       }
  232.     });
  233.     
  234.     document.body.appendChild(buttons);
  235.     
  236.     /*
  237.      * Add styles
  238.      */
  239.     
  240.     GM_addStyle(sharedStyles);
  241.     GM_addStyle(themeStyles);
  242.     GM_addStyle(generalStyles);
  243.     
  244.     /*
  245.      * Add dynamic styles
  246.      */
  247.     
  248.     const dynamicStyles = css`
  249.       .plus-buttons {
  250.         margin-right: -${buttons.getBoundingClientRect().width - 23}px;
  251.       }
  252.  
  253.       .plus-buttons:hover {
  254.         margin-right: 0;
  255.       }
  256.  
  257.       .video-page.video-page--large-mode .player-container__player {
  258.         max-height: ${window.innerHeight - 60}px;
  259.       }
  260.     `;
  261.     
  262.     GM_addStyle(dynamicStyles);
  263.     
  264.     if (player) {
  265.       window.addEventListener('resize', () => {
  266.         if (player.classList.contains('xplayer-large-mode')) {
  267.           player.style.maxHeight = `${window.innerHeight - 60}px`;
  268.         }
  269.       });
  270.     }
  271.   });
  272. })();