Motherless Plus.user.js

// ==UserScript==
// @author      			Mr. Nope
// @version     			2023-05-25
// @name								Motherless Plus
// @match       			*://*.motherless.com/*
// @description 	A kinder Motherless. Because you're worth it.
// @run-at						document_end
// @date        				2023-05-25
// @license     			MIT
// ==/UserScript==

'use strict';

setTimeout(() => {
  const OPTIONS = {
    cinemaMode: JSON.parse(localStorage.getItem('plus_cinemaMode')) || false
  };

  // const playerSettings = JSON.parse(localStorage.getItem('mgp_player'));

  // Change default quality from 720p to 1080p
  // playerSettings.quality = 1080;

  // Prevent problem with videos not loading unless clearing cache and reloading.
  // localStorage.setItem('mgp_player', JSON.stringify(playerSettings));

  /**
   * Shared styles
   */
  const sharedStyles = `
    /* Our own elements */

    .plus-buttons {
      background: rgba(27, 27, 27, 0.9);
      box-shadow: 0px 0px 12px rgba(20, 111, 223, 0.9);
      font-size: 12px;
      position: fixed;
      bottom: 10px;
      padding: 10px 22px 8px 24px;
      right: 0;
      z-index: 100;
      transition: all 0.2s 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;
    }

    .plus-letters {
      align-items: center;
      color: #ccc;
      display: flex;
      justify-content: space-between;
      margin: 0 22px 18px;
      text-transform: uppercase;
    }

    .plus-letters span {
      cursor: pointer;
    }
  `;

  /**
   * Color Theme
   */
  const themeStyles = `
    .plus-buttons {
      box-shadow: 0px 0px 12px rgba(236, 86, 124, 0.85);
    }

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

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

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

    .plus-buttons a.plus-button.plus-button-isOn {
      background: rgb(236, 86, 124);
      color: rgb(235, 235, 235);
    }

    .plus-buttons a.plus-button.plus-button-isOn:hover {
      background: rgb(236, 86, 124);
      color: rgb(255, 255, 255);
    }
  `;

  /**
   * Site-Specific Styles
   */
  
  const generalStyles = `
    /* Hide elements */

    .realsex,
    .mhp1138_cinemaState,
    .networkBar,
    .sniperModeEngaged,
    .footer,
    .footer-title,
    .ad-link,
    .removeAdLink,
    .removeAdLink + iframe,
    .abovePlayer,
    .streamatesModelsContainer,
    #welcome,
    #welcomePremium,
    #headerUpgradePremiumBtn,
    #PornhubNetworkBar,
    #js-abContainterMain,
    #hd-rightColVideoPage > :not(#relatedVideosVPage),
    .bottomNotification,
    .trailerUnderplayerPreview,
    .sectionCarousel {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      height: 0 !important;
      width: 0 !important;
    }

    /* Allow narrower page width */

    html.supportsGridLayout.fluidContainer .container,
    html.supportsGridLayout.fluidContainer .section_wrapper {
      min-width: 700px !important;
    }

    /* Hide tricky ads with obfuscated tag names */
    .adLinks + *,
    .adLinks + * + *,
    .wrapper.hd + * {
      display: none !important;
    }

    /* Full-width video */
    #vpContentContainer {
      display: block !important;
    }

    /* Recommended videos */
    #recommendedVideosVPage {
      text-align: center !important;
    }

    /* "Recommended Porn" heading */
    #recommendedVideosVPage h3 {
      text-align: center !important;
      display: block !important;
      float: unset !important;
    }

    /* Recommended videos layout */
    #recommendedVideos {
      list-style: none !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      text-align: left !important;
    }

    /* Thumbnail wrapper */
    #recommendedVideosPage .videoBox {
      font-size: 0.813rem !important; /* 13px/16px = 0.813rem */
      color: #a6adc8 !important; /* Mocha -> Subtext0 */
      margin: 0 5px !important;
    }

    /* Thumbnail wrapper */
    #recommendedVideos .videoBox .phimage {
      width: auto !important;
      border-radius: 4px !important;
    }

    /* Thumbnail info wrapper */
    .thumbnail-info-wrapper {
      color: #a6adc8 !important; /* Mocha -> Subtext0 */
      font-size: 0.813rem !important; /* 13px/16px = 0.813rem */
      float: none !important;
      width: auto !important;
    }

    /* Title of video or playlist */
    .thumbnail-info-wrapper .title {
      font-size: 0.813rem !important;
      font-weight: 700 !important;
      margin: 12px 0 3px !important;
    }

    /* The user/channel name wrapper */
    .thumbnail-info-wrapper .usernameWrap {
      margin-top: -1px; /* Fixes slight off-center text */
    }

    /* The user/channel name link */
    .thumbnail-info-wrapper .usernameWrap a {
      font-size: 0.813rem !important; /* 13px/16px = 0.813rem */
      color: #a6adc8 !important;
    }

    /* The verified badge and user/channel name wrapper */
    .thumbnail-info-wrapper .videoUploaderBlock {
      margin-bottom: 5px !important;
    }

    /* The verified badge */
    .thumbnail-info-wrapper .own-video-thumbnail {
      margin-right: 2px !important;
    }

    /* The views and likes wrapper */
    .thumbnail-info-wrapper .videoDetailsBlock {
      margin-bottom: 5px !important;
    }

    /* The views */
    .thumbnail-info-wrapper .videoDetailsBlock .views {
      font-size: 0.813rem !important; /* 13px/16px = 0.813rem */
    }

    /* The rating */
    .thumbnail-info-wrapper .videoDetailsBlock .rating-container i,
    .thumbnail-info-wrapper .videoDetailsBlock .rating-container .value {
      font-size: 0.813rem !important; /* 13px/16px = 0.813rem */
    }

    /* The "load more" button */
    .more_recommended_btn {
      margin: 2rem 0 !important;
    }

    /* Make "HD" icon more visible on thumbnails */

    .hd-thumbnail {
      color: #f90 !important;
    }

    /* Show all playlists without scrolling in "add to" */

    .slimScrollDiv {
      height: auto !important;
    }

    #scrollbar_watch {
      max-height: unset !important;
    }

    /* Hide premium video from related videos sidebar */

    #relateRecommendedItems li:nth-of-type(5) {
      display: none !important;
    }

    /* Prevent animating player size change on each page load */

    #main-container .video-wrapper #player.wide {
      transition: none !important;
    }

    /* Allow narrower player */

    #player {
      min-width: 0 !important;
    }

    /* Fit more playlists into "add to" popup */

    .playlist-menu-addTo {
      display: none;
    }

    .add-to-playlist-menu #scrollThumbs,
    .playlist-option-menu #scrollThumbs {
      height: 320px !important;
      max-height: 35vh !important;
    }

    .add-to-playlist-menu ul.custom-playlist li {
      font-size: 12px;
      height: 24px;
    }

    .add-to-playlist-menu .playlist-menu-createNew {
      font-size: 12px !important;
      height: 38px !important;
    }

    .add-to-playlist-menu .playlist-menu-createNew a {
      padding-top: 8px !important;
      font-weight: 400 !important;
    }

    /* Hide playlist bar if disabled in options */

    .playlist-bar {
      display: ${OPTIONS.hidePlaylistBar ? 'none' : 'block'};
    }

    /**
     * Improve loading indicator lines on thumbnails
     *
     * Using colors from the Catppuccin palette available at https://github.com/catppuccin.
     */

    .preloadLine {
      background: #81c8be;              /* Mocha -> Teal */
      box-shadow: 0 0 3px #1e1e2e;      /* Mocha -> Base */
    }

    /* Fade in and out semitransparent elements */

    .tab-menu-item {
      opacity: 0.4 !important;
      padding: 0 16px !important;
      transition: all 0.2s ease !important;
    }

    .tab-menu-item.active {
      opacity: 0.5 !important;
    }

    .tab-menu-wrapper-cell:hover .tab-menu-item {
      opacity: 1 !important;
    }

    .votes-fav-wrap .icon-wrapper:hover,
    .votes-fav-wrap .icon-wrapper.active:hover {
      opacity: 1 !important;
    }

    .votes-fav-wrap .icon-wrapper {
      opacity: 0.4 !important;
      transition: all 0.2s ease !important;
    }

    .votes-fav-wrap .icon-wrapper.active {
      opacity: 0.7 !important;
    }
  `;

  /**
   * References to video element and container if they exist on the page
   */
  const videoContainer = document.querySelector('#ml-main-video');
  const video = document.querySelector('#ml-main-video_html5_api');
  const distractions = [
    'header'
  ];
  const isOnVideoPage =
    /^http[s]*:\/\/(www\.)*motherless\.com\/watch\//.test(window.location.href) && !!videoContainer;

  const handleDistractions = () => {
    distractions.forEach((distraction) => {
      console.log(distraction);
      const element = document.querySelector(distraction);

      if (element) {
        const handleMouseOver = () => {
          element.style.opacity = 1;
        };

        const handleMouseOut = () => {
          element.style.opacity = 0.2;
        };

        if (OPTIONS.cinemaMode) {
          element.style.transition = 'all 0.2s ease';
          element.style.opacity = 0.2;

          element.addEventListener('mouseover', handleMouseOver, false);
          element.addEventListener('mouseout', handleMouseOut, false);
        } else {
          element.style.opacity = 1;
          element.removeEventListener('mouseover', handleMouseOver, false);
          element.removeEventListener('mouseout', handleMouseOut, false);
        }
      }
    });
  };

  /**
   * Returns an `on` or `off` CSS class name based on the boolean evaluation
   * of the `state` parameter, as convenience method when setting UI state.
   */
  const getButtonState = state => {
    return state ? 'plus-button-isOn' : 'plus-button-isOff';
  };

  /**
   * Option buttons
   */

  const cinemaButton = document.createElement('a');
  const cinemaButtonText = document.createElement('span');
  const cinemaButtonState = getButtonState(OPTIONS.cinemaMode);

  const scrollButton = document.createElement('a');
  const scrollButtonText = document.createElement('span');

  cinemaButtonText.textContent = 'Cinema mode';
  cinemaButtonText.classList.add('text');
  cinemaButton.appendChild(cinemaButtonText);
  cinemaButton.classList.add(cinemaButtonState, 'plus-button');
  cinemaButton.addEventListener('click', () => {
    OPTIONS.cinemaMode = !OPTIONS.cinemaMode;
    localStorage.setItem('plus_cinemaMode', OPTIONS.cinemaMode);

    if (OPTIONS.cinemaMode) {
      cinemaButton.classList.replace('plus-button-isOff', 'plus-button-isOn');
    } else {
      cinemaButton.classList.replace('plus-button-isOn', 'plus-button-isOff');
    }

    if (isOnVideoPage) {
      video.addEventListener('click', () => {
        const playButton = document.querySelector('.vjs-big-play-button');

      	if (playButton.offsetParent !== null) {
        	const event = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true,
          });

          playButton.dispatchEvent(event);
        }
    	});

      handleDistractions();
    }
  });

  scrollButtonText.textContent = "Scroll to video";
  scrollButtonText.classList.add('text');
  scrollButton.appendChild(scrollButtonText);
  scrollButton.classList.add('plus-button');
  scrollButton.addEventListener('click', () => {
    const container = document.querySelector('.main_content');
    const header = document.querySelector('header');

    if (container && header) {
      const destination = {
        left: container.scrollX,
        top: container.offsetTop - header.scrollHeight,
        behavior: 'smooth'
      };
      window.scroll(destination);
    }
  });

  /**
   * Order option buttons in a container
   */

  const buttons = document.createElement('div');

  buttons.classList.add('plus-buttons');

  buttons.appendChild(cinemaButton);
  buttons.appendChild(scrollButton);

  document.body.appendChild(buttons); // Button container ready and added to page

  if (isOnVideoPage) {
  }


  /*
   * Add styles
   */

  GM_addStyle(sharedStyles);
  GM_addStyle(themeStyles);
  GM_addStyle(generalStyles);

  /*
   * Add dynamic styles
   */

  const dynamicStyles = `
    .plus-buttons {
      margin-right: -${buttons.getBoundingClientRect().width - 18}px;
      margin-top: -${buttons.getBoundingClientRect().height - 18}px;
    }

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

  GM_addStyle(dynamicStyles);
}, 1000);