☰

PornHub Plus

A kinder PornHub. Because you're worth it.

  1. // ==UserScript==
  2. // @author      LD
  3. // @version     1.0
  4. // @name        PornHub Plus
  5. // @description A kinder PornHub. Because you're worth it.
  6. // @namespace   LD
  7. // @date        2018-08-08
  8. // @include     *pornhub.com/*
  9. // @run-at      document-start
  10. // @grant       none
  11. // @license     Public Domain
  12. // @icon        http://www.techthisoutnews.com/wp-content/uploads/2018/03/porn.jpg
  13. // @grant       GM_addStyle
  14. // ==/UserScript==
  15.  
  16. (() => {
  17.   const OPTIONS = {
  18.     openWithoutPlaylist: true,
  19.     showOnlyVerified: JSON.parse(localStorage.getItem('plus_showOnlyVerified')) || false,
  20.     redirectToVideos: JSON.parse(localStorage.getItem('plus_redirectToVideos')) || false,
  21.     autoresizePlayer: JSON.parse(localStorage.getItem('plus_autoresizePlayer')) || false,
  22.     durationFilter: JSON.parse(localStorage.getItem('plus_durationFilter')) || { max: 0, min: 0 }
  23.   }
  24.   
  25.   /* Styles - Shared between all "Plus" userscripts */
  26.   
  27.   const sharedStyles = `
  28.     /* Our own elements */
  29.  
  30.     .plus-buttons {
  31.       background: rgba(27, 27, 27, 0.9);
  32.       box-shadow: 0px 0px 12px rgba(20, 111, 223, 0.9);
  33.       font-size: 12px;
  34.       position: fixed;
  35.       bottom: 10px;
  36.       padding: 10px 22px 8px 24px;
  37.       right: 0;
  38.       z-index: 100;
  39.       transition: all 0.3s ease;
  40.  
  41.       /* Negative margin-right calculated later based on width of buttons */
  42.     }
  43.  
  44.     .plus-buttons:hover {
  45.       box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  46.     }
  47.  
  48.     .plus-buttons .plus-button {
  49.       margin: 10px 0;
  50.       padding: 6px 15px;
  51.       border-radius: 4px;
  52.       font-weight: 700;
  53.       display: block;
  54.       position: relative;
  55.       text-align: center;
  56.       vertical-align: top;
  57.       cursor: pointer;
  58.       border: none;
  59.       text-decoration: none;
  60.     }
  61.  
  62.     .plus-buttons a.plus-button {
  63.       background: rgb(221, 221, 221);
  64.       color: rgb(51, 51, 51);
  65.     }
  66.  
  67.     .plus-buttons a.plus-button:hover {
  68.       background: rgb(187, 187, 187);
  69.       color: rgb(51, 51, 51);
  70.     }
  71.  
  72.     .plus-buttons a.plus-button.plus-button-isOn {
  73.       background: rgb(20, 111, 223);
  74.       color: rgb(255, 255, 255);
  75.     }
  76.  
  77.     .plus-buttons a.plus-button.plus-button-isOn:hover {
  78.       background: rgb(0, 91, 203);
  79.       color: rgb(255, 255, 255);
  80.     }
  81.  
  82.     .plus-hidden {
  83.       display: none !important;
  84.     }
  85.   `;
  86.   
  87.   /* Styles - Color theme */
  88.   
  89.   const themeStyles = `
  90.     .plus-buttons {
  91.       box-shadow: 0px 0px 12px rgba(255, 153, 0, 0.85);
  92.     }
  93.  
  94.     .plus-buttons:hover {
  95.       box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  96.     }
  97.  
  98.     .plus-buttons a.plus-button {
  99.       background: rgb(47, 47, 47);
  100.       color: rgb(172, 172, 172);
  101.     }
  102.  
  103.     .plus-buttons a.plus-button:hover {
  104.       background: rgb(79, 79, 79);
  105.       color: rgb(204, 204, 204);
  106.     }
  107.  
  108.     .plus-buttons a.plus-button.plus-button-isOn {
  109.       background: rgb(255, 153, 0);
  110.       color: rgb(0, 0, 0);
  111.     }
  112.  
  113.     .plus-buttons a.plus-button.plus-button-isOn:hover {
  114.       background: rgb(255, 153, 0);
  115.       color: rgb(255, 255, 255);
  116.     }
  117.   `;
  118.   
  119.   /* Styles - General site-specific */
  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.     /* Show all playlists without scrolling in "add to" */
  135.  
  136.     .slimScrollDiv {
  137.       height: auto !important;
  138.     }
  139.  
  140.     #scrollbar_watch {
  141.       max-height: unset !important;
  142.     }
  143.  
  144.     /* Hide premium video from related videos sidebar */
  145.  
  146.     #relateRecommendedItems li:nth-of-type(5) {
  147.       display: none !important;
  148.     }
  149.  
  150.     /* Prevent animating player size change on each page load */
  151.  
  152.     #main-container .video-wrapper #player.wide {
  153.       transition: none !important;
  154.     }
  155.   `;
  156.   
  157.   /*
  158.    * Run after page has loaded
  159.    */
  160.   
  161.   window.addEventListener('DOMContentLoaded', () => {
  162.     const player = document.querySelector('#player');
  163.     const video = document.querySelector('video');
  164.     // const largePlayerButton = document.querySelector('.mhp1138_cinema');
  165.     
  166.     /*
  167.      * Use wide player by default
  168.      */
  169.     
  170.     if (player && OPTIONS.autoresizePlayer) {
  171.       player.classList.remove('original');
  172.       player.classList.add('wide');
  173.       document.querySelector('#hd-rightColVideoPage').classList.add('wide');
  174.       
  175.       setTimeout(() => {
  176.         document.querySelector('.mhp1138_cinema').classList.add('mhp1138_active');
  177.       }, 2000);
  178.       
  179.       // if (video.readyState >= 2) {
  180.       //   // Video cached and ready
  181.       //   largePlayerButton.dispatchEvent(new MouseEvent('mouseup'));
  182.       // } else {
  183.       //   // Wait for video to be ready
  184.       //   video.addEventListener('canplay', function onCanPlay() {
  185.       //     /* Click large player button */
  186.       //     largePlayerButton.dispatchEvent(new MouseEvent('mouseup'));
  187.       // 
  188.       //     /* Only run once */
  189.       //     video.removeEventListener('canplay', onCanPlay, false);
  190.       //   });
  191.       // }
  192.     }
  193.     
  194.     /*
  195.      * Clicking a video on a playlist page opens it without the playlist at the top
  196.      * 
  197.      * If this option is disabled, add it as a link after the video title.
  198.      */
  199.  
  200.     if (OPTIONS.openWithoutPlaylist) {
  201.       const playlistLinks = document.querySelectorAll('#playlistWrapper #videoPlaylist li a');
  202.       for (link of playlistLinks) link.href = link.href.replace('pkey', 'nopkey');
  203.     } else {
  204.       const links = document.querySelectorAll('#playlistWrapper #videoPlaylist li .title a');
  205.     
  206.       for (link of links) {
  207.         let newLink = document.createElement('a');
  208.         newLink.href = link.href.replace('pkey', 'nopkey');
  209.         newLink.appendChild(document.createTextNode('[↗]'));
  210.         link.parentNode.appendChild(newLink);
  211.       }
  212.     }
  213.     
  214.     /*
  215.      * Allow scrolling the page when mouse hovers playlists in "add to"
  216.      */
  217.     
  218.     /* Clone playlist scroll container to remove listeners that preventDefault() */
  219.     var scrollContainer = document.getElementById('scrollbar_watch');
  220.     
  221.     if (scrollContainer) {
  222.       var newScrollContainer = scrollContainer.cloneNode(true);
  223.       
  224.       scrollContainer.parentNode.replaceChild(newScrollContainer, scrollContainer);
  225.     }
  226.     
  227.     /*
  228.      * Automatically "load more" to show all videos on user video pages
  229.      
  230.     
  231.     var autoloadTimer = null; 
  232.     var loadMoreButton = document.getElementById('moreDataBtn');
  233.     
  234.     function autoloadMore() {
  235.       if (loadMoreButton.style.display === 'none') {
  236.         clearInterval(autoloadTimer);
  237.         
  238.       } else {
  239.         loadMoreButton.onclick();
  240.       }
  241.     }
  242.     
  243.     if (loadMoreButton) {
  244.       autoloadTimer = setInterval(autoloadMore, 5000);
  245.     }*/
  246.     
  247.     /*
  248.      * Add buttons for certain options
  249.      */
  250.     
  251.     /* Buttons container */
  252.     
  253.     let buttons = document.createElement('div');
  254.     let scrollButton = document.createElement('a');
  255.     let scrollButtonText = document.createElement('span');
  256.     let verifiedButton = document.createElement('a');
  257.     let verifiedButtonText = document.createElement('span');
  258.     let verifiedButtonState = OPTIONS.showOnlyVerified ? 'plus-button-isOn' : 'plus-button-isOff';
  259.     let redirectToVideosButton = document.createElement('a');
  260.     let redirectToVideosButtonText = document.createElement('span');
  261.     let redirectToVideosButtonState = OPTIONS.redirectToVideos ? 'plus-button-isOn' : 'plus-button-isOff';
  262.     let autoresizeButton = document.createElement('a');
  263.     let autoresizeButtonText = document.createElement('span');
  264.     let autoresizeButtonState = OPTIONS.autoresizePlayer ? 'plus-button-isOn' : 'plus-button-isOff';
  265.     let durationShortButton = document.createElement('a');
  266.     let durationShortButtonText = document.createElement('span');
  267.     let durationShortButtonState = !OPTIONS.durationFilter.min ? 'plus-button-isOn' : 'plus-button-isOff';
  268.     
  269.     buttons.classList.add('plus-buttons');
  270.     
  271.     scrollButtonText.textContent = "Scroll to top";
  272.     scrollButtonText.classList.add('text');
  273.     scrollButton.appendChild(scrollButtonText);
  274.     scrollButton.classList.add('plus-button');
  275.     scrollButton.addEventListener('click', () => {
  276.       window.scrollTo({ top: 0 });
  277.     });
  278.     
  279.     buttons.appendChild(scrollButton);
  280.     
  281.     verifiedButtonText.textContent = 'Show only verified';
  282.     verifiedButtonText.classList.add('text');
  283.     verifiedButton.appendChild(verifiedButtonText);
  284.     verifiedButton.classList.add(verifiedButtonState, 'plus-button');
  285.     verifiedButton.addEventListener('click', () => {
  286.       setShowOnlyVerified(!OPTIONS.showOnlyVerified);
  287.     });
  288.     
  289.     buttons.appendChild(redirectToVideosButton);
  290.     
  291.     redirectToVideosButtonText.textContent = 'Redirect profiles to uploads';
  292.     redirectToVideosButtonText.classList.add('text');
  293.     redirectToVideosButton.appendChild(redirectToVideosButtonText);
  294.     redirectToVideosButton.classList.add(redirectToVideosButtonState, 'plus-button');
  295.     redirectToVideosButton.addEventListener('click', () => {
  296.       OPTIONS.redirectToVideos = !OPTIONS.redirectToVideos;
  297.       localStorage.setItem('plus_redirectToVideos', OPTIONS.redirectToVideos);
  298.       
  299.       if (OPTIONS.redirectToVideos) {
  300.         redirectToVideosButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  301.       } else {
  302.         redirectToVideosButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  303.       }
  304.     });
  305.     
  306.     buttons.appendChild(autoresizeButton);
  307.     
  308.     durationShortButtonText.textContent = 'Show short videos (< 8 min)';
  309.     durationShortButtonText.classList.add('text');
  310.     durationShortButton.appendChild(durationShortButtonText);
  311.     durationShortButton.classList.add(durationShortButtonState, 'plus-button');
  312.     durationShortButton.addEventListener('click', () => {
  313.       OPTIONS.durationFilter.min = OPTIONS.durationFilter.min ? 0 : 8;
  314.       localStorage.setItem('plus_durationFilter', JSON.stringify(OPTIONS.durationFilter));
  315.       
  316.       if (!OPTIONS.durationFilter.min) {
  317.         durationShortButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  318.         updateDurationFilter();
  319.       } else {
  320.         durationShortButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  321.         updateDurationFilter();
  322.       }
  323.     });
  324.     
  325.     buttons.appendChild(durationShortButton);
  326.     
  327.     autoresizeButtonText.textContent = 'Auto-resize player';
  328.     autoresizeButtonText.classList.add('text');
  329.     autoresizeButton.appendChild(autoresizeButtonText);
  330.     autoresizeButton.classList.add(autoresizeButtonState, 'plus-button');
  331.     autoresizeButton.addEventListener('click', () => {
  332.       OPTIONS.autoresizePlayer = !OPTIONS.autoresizePlayer;
  333.       localStorage.setItem('plus_autoresizePlayer', OPTIONS.autoresizePlayer);
  334.       
  335.       if (OPTIONS.autoresizePlayer) {
  336.         autoresizeButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  337.       } else {
  338.         autoresizeButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  339.       }
  340.     });
  341.     
  342.     document.body.appendChild(buttons);
  343.     
  344.     if (window.location.href.includes('/playlist/')) {
  345.       buttons.appendChild(verifiedButton);
  346.  
  347.       setTimeout(() => {
  348.         setShowOnlyVerified(OPTIONS.showOnlyVerified);
  349.       }, 1000);
  350.     }
  351.     
  352.     /* Redirect profile page to all uploads, except if we just came from there */
  353.     
  354.     if (
  355.       /^https:\/\/www\.pornhub\.com\/pornstar\/([^\/]+)$/.test(window.location.href) ||
  356.       /^https:\/\/www\.pornhub\.com\/model\/([^\/]+)$/.test(window.location.href) ||
  357.       /^https:\/\/www\.pornhub\.com\/users\/([^\/]+)$/.test(window.location.href) ||
  358.       /^https:\/\/www\.pornhub\.com\/channels\/([^\/]+)$/.test(window.location.href)) {
  359.       if (OPTIONS.redirectToVideos && !/.+\/videos\/upload.*/.test(document.referrer)) {
  360.         window.location.href = window.location.href + '/videos/upload';
  361.       }
  362.     }
  363.     
  364.     function setShowOnlyVerified(state) {
  365.       OPTIONS.showOnlyVerified = state;
  366.       localStorage.setItem('plus_showOnlyVerified', state);
  367.       
  368.       if (state) {
  369.         verifiedButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
  370.       } else {
  371.         verifiedButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
  372.       }
  373.       
  374.       document.querySelectorAll('.videoBox').forEach((box) => {
  375.         if (!box.innerHTML.includes('Video of verified member')) {
  376.           if (state) {
  377.             box.classList.add('plus-hidden');
  378.           } else {
  379.             box.classList.remove('plus-hidden');
  380.           }
  381.         }
  382.       });
  383.     }
  384.     
  385.     function updateDurationFilter() {
  386.       document.querySelectorAll('.videoBox').forEach((box) => {
  387.         let durationParts = box.querySelector('.duration').textContent.split(":");
  388.         let duration = { minutes: parseInt(durationParts[0]), seconds: parseInt(durationParts[1]) }
  389.         
  390.         if (duration.minutes >= OPTIONS.durationFilter.min &&
  391.             (!OPTIONS.durationFilter.max || duration.minutes <= OPTIONS.durationFilter.max)) {
  392.           box.classList.remove('plus-hidden');
  393.         } else {
  394.           box.classList.add('plus-hidden');
  395.         }
  396.       });
  397.     }
  398.     
  399.     let loadMoreButton = document.querySelector('.more_related_btn');
  400.     
  401.     if (loadMoreButton)
  402.       loadMoreButton.addEventListener('click', updateDurationFilter);
  403.     
  404.     updateDurationFilter();
  405.     
  406.     /*
  407.      * Add styles
  408.      */
  409.     
  410.     GM_addStyle(sharedStyles);
  411.     GM_addStyle(themeStyles);
  412.     GM_addStyle(generalStyles);
  413.     
  414.     /*
  415.      * Add dynamic styles
  416.      */
  417.     
  418.     const dynamicStyles = `
  419.       .plus-buttons {
  420.         margin-right: -${buttons.getBoundingClientRect().width - 23}px;
  421.       }
  422.  
  423.       .plus-buttons:hover {
  424.         margin-right: 0;
  425.       }
  426.     `;
  427.     
  428.     GM_addStyle(dynamicStyles);
  429.   });
  430. })();