Sleazy Fork is available in English.

xHamster Plus

A kinder xHamster. Because you're worth it.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @author      LD
// @version     1.0
// @name        xHamster Plus
// @description A kinder xHamster. Because you're worth it.
// @namespace   LD
// @date        2018-08-08
// @include     *xhamster.com/*
// @run-at      document-start
// @grant       none
// @license     Public Domain
// @icon        https://static-cl.xhcdn.com/xh-tpl3/images/favicon/apple-touch-icon.png
// @grant       GM_addStyle
// ==/UserScript==

(() => {
  /* Available options */
  const options = {
    autoresizePlayer:
      JSON.parse(localStorage.getItem('plus_autoresizePlayer')) || false
  }
  /* Empty tag function, for VS Code syntax highlight for CSS in literals */
  const css = (strings, ...values) => {
    /* Re-assemble input string and return untouched */
    return strings.reduce((output, string, index) => {
      return `${output}${string}${values[index] || ''}`;
    }, '');
  };
  
  /* Styles - Shared between all "Plus" userscripts */
  
  const sharedStyles = css`
    /* Our own elements */

    .plus-buttons {
      background: rgba(67, 67, 67, 0.85);
      box-shadow: 0px 0px 12px rgba(20, 111, 223, 0.85);
      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 = css`
    .plus-buttons {
      box-shadow: 0px 0px 18px rgba(227, 68, 73, 1);
    }

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

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

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

    .plus-buttons a.plus-button.plus-button-isOn {
      background: rgb(227, 68, 73);
      color: rgb(255, 255, 255);
    }

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

    .up-arrow,
    .premium-overlay,
    .bottom-widget-section,
    .clipstore-bottom,
    .wid-spot-container,
    .wid-banner-container {
      display: none !important;
    }

    /* Increase large player size */

    .video-page.video-page--large-mode .player-container__player {
      height: 720px;
    }

    /* Show all playlists without scrolling when adding to favorites */

    .favorites-dropdown__list {
      max-height: unset !important;
    }

    .video-page:not(.video-page--large-mode) .player-container {
      margin: 10px auto 0;
    }

    .video-page:not(.video-page--large-mode) .entity-container,
    .video-page:not(.video-page--large-mode) .comments-wrap {
      margin: 0 auto;
    }

    /* Minor stylistic improvements */

    .entity-container {
      margin: 22px 0;
      margin-bottom: 22px;
      border-top: 1px solid #ccc;
    }
  `;
  
  /*
   * Run after page has loaded
   */
  
  window.addEventListener('DOMContentLoaded', () => {
    const player = document.querySelector('#player-container');
    const video = document.querySelector('#player-container video');
    
    /*
     * Use wide player by default
     */
    
    if (video && options.autoresizePlayer) {
      /* Button is not always available right away -- wait for `canplay` */
      video.addEventListener('canplay', function onCanPlay() {
          let largePlayerButton = document.querySelector('.large-mode');
        
          /* Click large player button */
          largePlayerButton.dispatchEvent(new MouseEvent('click'));
        
          /* Only run once */
          video.removeEventListener('canplay', onCanPlay, false);
      });
    }
    
    /*
     * 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 = css`
      .plus-buttons {
        margin-right: -${buttons.getBoundingClientRect().width - 23}px;
      }

      .plus-buttons:hover {
        margin-right: 0;
      }

      .video-page.video-page--large-mode .player-container__player {
        max-height: ${window.innerHeight - 60}px;
      }
    `;
    
    GM_addStyle(dynamicStyles);
    
    if (player) {
      window.addEventListener('resize', () => {
        if (player.classList.contains('xplayer-large-mode')) {
          player.style.maxHeight = `${window.innerHeight - 60}px`;
        }
      });
    }
  });
})();