☰

Twitch - Mute ads and optionally hide them

Automatically mutes the Twitch player when an advertisement started and unmute it once finished. You can also hide ads by setting disableDisplay to true.

À partir de 2023-10-06. Voir la dernière version.

// ==UserScript==
// @name        Twitch - Mute ads and optionally hide them
// @namespace   TWITCHADS
// @description Automatically mutes the Twitch player when an advertisement started and unmute it once finished. You can also hide ads by setting disableDisplay to true.
// @include     https://www.twitch.tv/*
// @include     https://twitch.tv/*
// @version     1.15
// @license     MIT
// @author      Harest
// @grant       none
// ==/UserScript==
(function() {
  
  var _tmuteVars = { "timerCheck": 1000, // Checking rate of ad in progress (in ms ; EDITABLE)
                    "playerMuted": false, // Player muted or not (due to ad in progress)
                    "adsDisplayed": 0, // Number of ads displayed
                    "disableDisplay": false, // Disable the player display during an ad (true = yes, false = no (default) ; EDITABLE)
                    "alreadyMuted": false, // Used to check if the player is muted at the start of an ad
                    "adElapsedTime": undefined, // Used to check if Twitch forgot to remove the ad notice
                    "adUnlockAt": 270, // Unlock the player if this amount of seconds elapsed during an ad (EDITABLE)
                    "adMinTime": 7, // Minimum amount of seconds the player will be muted/hidden since an ad started (EDITABLE)
                    "squadPage": false, // Either the current page is a squad page or not
                    "playerIdAds": 0, // Player ID where ads may be displayed (default 0, varying on squads page)
                    "displayingOptions": false, // Either ads options are currently displayed or not
                    "highwindPlayer": undefined, // If you've the Highwind Player or not
                    "currentPage": undefined, // Current page to know if we need to reset ad detection on init
                    "volumePremute": undefined // Main player volume, used to set the volume of the stream top right during an ad
                   };
  
  // Selectors for the current player (hw: highwind player, only one existing currently)
  var _tmuteSelectors = { "hw":  { "player": "video-player__container", // Player class
                                   "playerVideo": ".video-player__container video", // Player video selector
                                   "playerDuringAd": "pbyp-player-instance", // Top-right player class, existing sometimes during an ad
                                   "muteButton": "button[data-a-target='player-mute-unmute-button']", // (un)mute button selector
                                   "adNotice": undefined, // Ad notice class
                                   "adNoticeFinder": "[data-a-target='ax-overlay']", // Ad notice selector to find the class
                                   "viewersCount": "metadata-layout__support", // Viewers count wrapper class
                                   "squadHeader": "squad-stream-top-bar__container", // Squad bar container class
                                   "squadPlayer": "multi-stream-player-layout__player-container", // Squad player class
                                   "squadPlayerMain": "multi-stream-player-layout__player-primary" // Squad primary player class
                          				}
  											};
	// Current selector (automatically set below)
  var currentSelector = undefined;
	
  // Check if there's an ad
  function checkAd()
  { 
    // Check if you're watching a stream, useless to continue if not
    if (_tmuteVars.highwindPlayer === undefined) {
      var isHwPlayer = document.getElementsByClassName(_tmuteSelectors.hw.player).length;
      var isViewing = Boolean(isHwPlayer);
      if (isViewing === false) return;
      
      // We set the type of player currently used
      _tmuteVars.highwindPlayer = Boolean(isHwPlayer);
      currentSelector = (_tmuteVars.highwindPlayer === true) ? _tmuteSelectors.hw : null;
      console.log("You're currently using the " + ((_tmuteVars.highwindPlayer === true) ? "Highwind" : "new unknown") + " player.");
      if (currentSelector === null) {
        clearInterval(_tmuteVars.autoCheck);
        console.log("Script stopped. Failed to find the player, Twitch changed something. Feel free to contact the author of the script.");
      }
    } else {
      var isViewing = Boolean(document.getElementsByClassName(currentSelector.player).length);
      if (isViewing === false) return;
    }
    
    // Initialize the ads options if necessary.
    var optionsInitialized = (document.getElementById("_tmads_options") === null) ? false : true;
    if (optionsInitialized === false) {
      adsOptions("init");
      if (currentSelector.adNotice === undefined) return;
    }
    
    var selectorId = _tmuteVars.playerIdAds * 2;
    var advert = document.getElementsByClassName(currentSelector.adNotice)[selectorId];
    
    if (_tmuteVars.adElapsedTime !== undefined)
    {
      _tmuteVars.adElapsedTime += _tmuteVars.timerCheck / 1000;
      if (_tmuteVars.adElapsedTime >= _tmuteVars.adUnlockAt && advert.childNodes[1] !== undefined) 
      {
        for (var i = 0; i < advert.childElementCount; i++)
        {
          if (!advert.childNodes[i].classList.contains(currentSelector.adNotice)) advert.removeChild(advert.childNodes[i]);
        }
        console.log("Unlocking Twitch player as Twitch forgot to remove the ad notice after the ad(s).");
      }
    }
    
    if ((advert.childElementCount > 2 && _tmuteVars.playerMuted === false) || (_tmuteVars.playerMuted === true && advert.childElementCount <= 2)) 
    {
      // Update at the start of an ad if the player is already muted or not
      if (advert.childElementCount > 2) {
        var muteButton = document.querySelectorAll(currentSelector.muteButton)[_tmuteVars.playerIdAds];
        if (_tmuteVars.highwindPlayer === true) {
        	_tmuteVars.alreadyMuted = Boolean(muteButton.getAttribute("aria-label") === "Unmute (m)");
        } else {
        	_tmuteVars.alreadyMuted = Boolean(muteButton.childNodes[0].className === "unmute-button");
        }
      }
      
      // Keep the player muted/hidden for the minimum ad time set (Twitch started to remove the ad notice before the end of some ads)
      if (advert.childElementCount <= 2 && _tmuteVars.adElapsedTime !== undefined && _tmuteVars.adElapsedTime < _tmuteVars.adMinTime) return;

      mutePlayer();
    }
  }

  // (un)Mute Player
  function mutePlayer()
  {
    if (document.querySelectorAll(currentSelector.muteButton).length >= 1)
    {
      _tmuteVars.volumePremute = document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].volume;
      if (_tmuteVars.alreadyMuted === false) document.querySelectorAll(currentSelector.muteButton)[_tmuteVars.playerIdAds].click(); // If the player is already muted before an ad, we avoid to unmute it.
      _tmuteVars.playerMuted = !(_tmuteVars.playerMuted);

      if (_tmuteVars.playerMuted === true)
      {
        _tmuteVars.adsDisplayed++;
        _tmuteVars.adElapsedTime = 1;
        console.log("Ad #" + _tmuteVars.adsDisplayed + " detected. Player " + (_tmuteVars.alreadyMuted === true ? "already " : "") + "muted.");
        if (_tmuteVars.disableDisplay === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = "hidden";
        
        // Unmute the stream showing top right during an ad if the player was initially unmuted
        var playerDuringAd = document.getElementsByClassName(currentSelector.playerDuringAd)[0];
        if (playerDuringAd !== undefined) {
          playerDuringAd.childNodes[0].setAttribute("controls", true);
          if (_tmuteVars.alreadyMuted === false) {
            playerDuringAd.childNodes[0].volume = _tmuteVars.volumePremute;
            playerDuringAd.childNodes[0].muted = false;
          }
        }
      } else {
        console.log("Ad #" + _tmuteVars.adsDisplayed + " finished (lasted " + _tmuteVars.adElapsedTime + "s)." + (_tmuteVars.alreadyMuted === true ? "" : " Player unmuted."));
        _tmuteVars.adElapsedTime = undefined;
        if (_tmuteVars.disableDisplay === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = "visible";
        
        // Mute the stream shown top right during the ad to prevent double audio
        var playerDuringAd = document.getElementsByClassName(currentSelector.playerDuringAd)[0];
        if (playerDuringAd !== undefined) {
          playerDuringAd.childNodes[0].muted = true;
        }
      }
    } else {
      console.log("No volume button found (class changed ?).");
    }
  }
  
  // Manage ads options
  function adsOptions(changeType = "show")
  {
    switch(changeType) {
      // Manage player display during an ad (either hiding the ads or still showing them)
    	case "display":
        _tmuteVars.disableDisplay = !(_tmuteVars.disableDisplay);
        // Update the player display if an ad is supposedly in progress
        if (_tmuteVars.playerMuted === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = (_tmuteVars.disableDisplay === true) ? "hidden" : "visible";
        document.getElementById("_tmads_display").innerText = (_tmuteVars.disableDisplay === true ? "Show" : "Hide") + " player during ads";
        break;
      // Force a player unlock if Twitch didn't remove the ad notice properly instead of waiting the auto unlock
    	case "unlock":
        var advert = document.getElementsByClassName(currentSelector.adNotice)[0];
        
        if (_tmuteVars.adElapsedTime === undefined && advert.childNodes[1] === undefined)
        {
          alert("There's no ad notice displayed. No unlock to do.");
        } else {
          // We set the elapsed time to the unlock timer to trigger it during the next check.
          _tmuteVars.adElapsedTime = _tmuteVars.adUnlockAt;
          console.log("Unlock requested.");
        }
        break;
      // Display the ads options button
      case "init":
        // Do the resets needed if we changed page during an ad
        if (_tmuteVars.playerMuted === true && window.location.pathname != _tmuteVars.currentPage) {
          mutePlayer();
        }
        _tmuteVars.currentPage = window.location.pathname;
        
        if (document.getElementsByClassName(currentSelector.viewersCount)[0] === undefined && document.getElementsByClassName(currentSelector.squadHeader)[0] === undefined) break;
               
        // Finding the ad notice class
        clearInterval(_tmuteVars.autoCheck); // Temporarily stop the checks while we find the ad notice class
        if (document.querySelector(currentSelector.adNoticeFinder) !== null)
        {
          currentSelector.adNotice = document.querySelector(currentSelector.adNoticeFinder).parentNode.className;
          console.log("Ad notice class retrieved (\"" + currentSelector.adNotice + "\") and set.");
          _tmuteVars.autoCheck = setInterval(checkAd, _tmuteVars.timerCheck); // Ad notice class set, we can set the ad auto check back up
        } else {
          console.log("Script stopped. Failed to find the ad notice class, Twitch changed something. Feel free to contact the author of the script.");
        }
        
        // Append ads options and events related
        var optionsTemplate = document.createElement("div");
        optionsTemplate.id = "_tmads_options-wrapper";
        optionsTemplate.className = "tw-inline-flex";
        optionsTemplate.style = "padding-top: 10px;";
        optionsTemplate.innerHTML = `
        <span id="_tmads_options" style="display: none;">
          <button type="button" id="_tmads_unlock" style="padding: 0 2px 0 2px; margin-left: 2px; height: 16px; width: unset;" class="tw-interactive tw-button-icon tw-button-icon--hollow">Unlock player</button>
          <button type="button" id="_tmads_display" style="padding: 0 2px 0 2px; margin-left: 2px; height: 16px; width: unset;" class="tw-interactive tw-button-icon tw-button-icon--hollow">` + (_tmuteVars.disableDisplay === true ? "Show" : "Hide") + ` player during ads</button>
        </span>
        <button type="button" id="_tmads_showoptions" style="padding: 0 2px 0 2px; margin-left: 2px; height: 16px; width: unset;" class="tw-interactive tw-button-icon tw-button-icon--hollow">Ads Options</button>`;
        
        // Normal player page
        if (document.getElementsByClassName(currentSelector.viewersCount)[0] !== undefined)
        {
          _tmuteVars.squadPage = false;
          _tmuteVars.playerIdAds = 0;
          document.getElementsByClassName(currentSelector.viewersCount)[0].parentNode.childNodes[1].appendChild(optionsTemplate);
        // Squad page
        } else if (document.getElementsByClassName(currentSelector.squadHeader)[0] !== undefined)
        {
          _tmuteVars.squadPage = true;
          _tmuteVars.playerIdAds = 0;
          // Since the primary player is never at the same place, we've to find it.
          for (var i = 0; i < parseInt(document.querySelectorAll(currentSelector.playerVideo).length); i++)
          {
            if (document.getElementsByClassName(currentSelector.squadPlayer)[0].childNodes[i].classList.contains(currentSelector.squadPlayerMain))
            {
              _tmuteVars.playerIdAds = i;
              break;
            }
          }
          document.getElementsByClassName(currentSelector.squadHeader)[0].appendChild(optionsTemplate);
        }
        
        document.getElementById("_tmads_showoptions").addEventListener("click", adsOptions, false);
        document.getElementById("_tmads_display").addEventListener("click", function() { adsOptions("display"); }, false);
        document.getElementById("_tmads_unlock").addEventListener("click", function() { adsOptions("unlock"); }, false);
        console.log("Ads options initialized.");
        
        break;
      // Display/Hide the ads options
    	case "show":
    	default:
        _tmuteVars.displayingOptions = !(_tmuteVars.displayingOptions);
        document.getElementById("_tmads_options").style.display = (_tmuteVars.displayingOptions === false) ? "none" : "inline-flex";
		} 
  }
  
  // Start the background check
  _tmuteVars.autoCheck = setInterval(checkAd, _tmuteVars.timerCheck);
  
})();