☰

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.

目前为 2019-10-04 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Twitch - Mute ads and optionally hide them
  3. // @namespace   TWITCHADS
  4. // @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.
  5. // @include     https://www.twitch.tv/*
  6. // @include     https://twitch.tv/*
  7. // @version     1.11
  8. // @license     MIT
  9. // @author      Harest
  10. // @grant       none
  11. // ==/UserScript==
  12. (function() {
  13.   var _tmuteVars = { "timerCheck": 1000, // Checking rate of ad in progress (in ms ; EDITABLE)
  14.                     "playerMuted": false, // Player muted or not
  15.                     "adsDisplayed": 0, // Number of ads displayed
  16.                     "disableDisplay": false, // Disable the player display during an ad (true = yes, false = no (default) ; EDITABLE)
  17.                     "alreadyMuted": false, // Used to check if the player is muted at the start of an ad
  18.                     "adElapsedTime": undefined, // Used to check if Twitch forgot to remove the ad notice
  19.                     "adUnlockAt": 150, // Unlock the player if this amount of seconds elapsed during an ad (EDITABLE)
  20.                     "adMinTime": 15, // Minimum amount of seconds the player will be muted/hidden since an ad started (EDITABLE ; Recommended to really avoid any ad: 30 to 45)
  21.                     "squadPage": false, // Either the current page is a squad page or not
  22.                     "playerIdAds": 0, // Player ID where ads may be displayed (default 0, varying on squads page)
  23.                     "displayingOptions": false, // Either ads options are currently displayed or not
  24.                     "highwindPlayer": undefined // If you've the Highwind Player or not (automatically checked)
  25.                    };
  26.   
  27.   // Selectors for the old player and the highwind one
  28.   var _tmuteSelectors = { "old": { "player": "player-video", // Player class
  29.                                    "playerVideo": ".player-video", // Player video selector
  30.                                    "muteButton": ".player-button--volume", // (un)mute button selector
  31.                                    "adNotice": "player-ad-notice" // Ad notice class
  32.   																},
  33.                           "hw":  { "player": "highwind-video-player__container", // Player class
  34.                                    "playerVideo": ".highwind-video-player__container video", // Player video selector
  35.                                    "muteButton": "button[data-a-target='player-mute-unmute-button']", // (un)mute button selector
  36.                                    "adNotice": "tw-absolute tw-c-background-overlay tw-c-text-overlay tw-inline-block tw-left-0 tw-pd-1 tw-top-0" // Ad notice class
  37.                           				}
  38.   											};
  39. 	// Current selector (either old or highwind player, automatically set below)
  40.   var currentSelector = undefined;
  41. 	
  42.   // Check if there's an ad
  43.   function checkAd()
  44.   { 
  45.     // Check if you're watching a stream, useless to continue if not
  46.     if (_tmuteVars.highwindPlayer === undefined) {
  47.       var isOldPlayer = document.getElementsByClassName(_tmuteSelectors.old.player).length;
  48.       var isHwPlayer = document.getElementsByClassName(_tmuteSelectors.hw.player).length;
  49.       var isViewing = Boolean(isOldPlayer + isHwPlayer);
  50.       if (isViewing === false) return;
  51.       
  52.       // We set the type of player currently used (old or highwind one)
  53.       _tmuteVars.highwindPlayer = Boolean(isHwPlayer);
  54.       currentSelector = (_tmuteVars.highwindPlayer === true) ? _tmuteSelectors.hw : _tmuteSelectors.old;
  55.       console.log("You're currently using the " + ((_tmuteVars.highwindPlayer === true) ? "Highwind" : "old") + " player.");
  56.     } else {
  57.       var isViewing = Boolean(document.getElementsByClassName(currentSelector.player).length);
  58.       if (isViewing === false) return;
  59.     }
  60.     
  61.     // Initialize the ads options if necessary.
  62.     var optionsInitialized = (document.getElementById("_tmads_options") === null) ? false : true;
  63.     if (optionsInitialized === false) adsOptions("init");
  64.     
  65.     var advert = document.getElementsByClassName(currentSelector.adNotice);
  66.     
  67.     if (_tmuteVars.adElapsedTime !== undefined)
  68.     {
  69.       _tmuteVars.adElapsedTime++;
  70.       if (_tmuteVars.adElapsedTime >= _tmuteVars.adUnlockAt && advert[0] !== undefined) 
  71.       {
  72.         advert[0].parentNode.removeChild(advert[0]);
  73.         console.log("Unlocking Twitch player as Twitch forgot to remove the ad notice after the ad(s).");
  74.       }
  75.     }
  76.     
  77.     if ((advert.length >= 1 && _tmuteVars.playerMuted === false) || (_tmuteVars.playerMuted === true && advert.length === 0)) 
  78.     {
  79.       // Update at the start of an ad if the player is already muted or not
  80.       if (advert.length >= 1) _tmuteVars.alreadyMuted = Boolean(document.querySelectorAll(currentSelector.muteButton)[_tmuteVars.playerIdAds].getAttribute("aria-label") === "Unmute (m)"); 
  81.       
  82.       // Keep the player muted/hidden for the minimum ad time set (Twitch started to remove the ad notice before the end of some ads)
  83.       if (advert.length === 0 && _tmuteVars.adElapsedTime !== undefined && _tmuteVars.adElapsedTime < _tmuteVars.adMinTime) return;
  84.  
  85.       mutePlayer();
  86.     }
  87.   }
  88.  
  89.   // (un)Mute Player
  90.   function mutePlayer()
  91.   {
  92.     if (document.querySelectorAll(currentSelector.muteButton).length >= 1)
  93.     {
  94.       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.
  95.       _tmuteVars.playerMuted = !(_tmuteVars.playerMuted);
  96.  
  97.       if (_tmuteVars.playerMuted === true)
  98.       {
  99.         _tmuteVars.adsDisplayed++;
  100.         _tmuteVars.adElapsedTime = 1;
  101.         console.log("Ad #" + _tmuteVars.adsDisplayed + " detected. Player " + (_tmuteVars.alreadyMuted === true ? "already " : "") + "muted.");
  102.         if (_tmuteVars.disableDisplay === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = "hidden";
  103.       } else {
  104.         console.log("Ad #" + _tmuteVars.adsDisplayed + " finished (lasted " + _tmuteVars.adElapsedTime + "s)." + (_tmuteVars.alreadyMuted === true ? "" : " Player unmuted."));
  105.         _tmuteVars.adElapsedTime = undefined;
  106.         if (_tmuteVars.disableDisplay === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = "visible";
  107.       }
  108.     } else {
  109.       console.log("No volume button found (class changed ?).");
  110.     }
  111.   }
  112.   
  113.   // Manage ads options
  114.   function adsOptions(changeType = "show")
  115.   {
  116.     switch(changeType) {
  117.       // Manage player display during an ad (either hiding the ads or still showing them)
  118.     	case "display":
  119.         _tmuteVars.disableDisplay = !(_tmuteVars.disableDisplay);
  120.         // Update the player display if an ad is supposedly in progress
  121.         if (_tmuteVars.playerMuted === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = (_tmuteVars.disableDisplay === true) ? "hidden" : "visible";
  122.         document.getElementById("_tmads_display").innerText = (_tmuteVars.disableDisplay === true ? "Show" : "Hide") + " player during ads";
  123.         break;
  124.       // Force a player unlock if Twitch didn't remove the ad notice properly instead of waiting the auto unlock
  125.     	case "unlock":
  126.         var advert = document.getElementsByClassName(currentSelector.adNotice);
  127.         if (_tmuteVars.adElapsedTime === undefined && advert[0] === undefined)
  128.         {
  129.           alert("There's no ad notice displayed. No unlock to do.");
  130.         } else {
  131.           // We set the elapsed time to the unlock timer to trigger it during the next check.
  132.           _tmuteVars.adElapsedTime = _tmuteVars.adUnlockAt;
  133.           console.log("Unlock requested.");
  134.         }
  135.         break;
  136.       // Display the ads options button
  137.       case "init":
  138.         if (document.getElementsByClassName("channel-info-bar__viewers-wrapper")[0] === undefined && document.getElementsByClassName("squad-stream-top-bar__container")[0] === undefined) break;
  139.         
  140.         // Append ads options and events related
  141.         var optionsTemplate = document.createElement("div");
  142.         optionsTemplate.id = "_tmads_options-wrapper";
  143.         optionsTemplate.className = "tw-inline-flex";
  144.         optionsTemplate.innerHTML = `
  145.         <span id="_tmads_options" style="display: none;">
  146.           <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>
  147.           <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>
  148.         </span>
  149.         <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>`;
  150.         
  151.         // Normal player page
  152.         if (document.getElementsByClassName("channel-info-bar__viewers-wrapper")[0] !== undefined)
  153.         {
  154.           _tmuteVars.squadPage = false;
  155.           _tmuteVars.playerIdAds = 0;
  156.           document.getElementsByClassName("channel-info-bar__viewers-wrapper")[0].parentNode.appendChild(optionsTemplate);
  157.         // Squad page
  158.         } else if (document.getElementsByClassName("squad-stream-top-bar__container")[0] !== undefined)
  159.         {
  160.           _tmuteVars.squadPage = true;
  161.           _tmuteVars.playerIdAds = 0;
  162.           // Since the primary player is never at the same place, we've to find it.
  163.           for (var i = 0; i < parseInt(document.querySelectorAll(currentSelector.playerVideo).length); i++)
  164.           {
  165.             if (document.getElementsByClassName("multi-stream-player-layout__player-container")[0].childNodes[i].classList.contains("multi-stream-player-layout__player-primary"))
  166.             {
  167.               _tmuteVars.playerIdAds = i;
  168.               break;
  169.             }
  170.           }
  171.           document.getElementsByClassName("squad-stream-top-bar__container")[0].appendChild(optionsTemplate);
  172.         }
  173.         
  174.         document.getElementById("_tmads_showoptions").addEventListener("click", adsOptions, false);
  175.         document.getElementById("_tmads_display").addEventListener("click", function() { adsOptions("display"); }, false);
  176.         document.getElementById("_tmads_unlock").addEventListener("click", function() { adsOptions("unlock"); }, false);
  177.         console.log("Ads options initialized.");
  178.         
  179.         break;
  180.       // Display/Hide the ads options
  181.     	case "show":
  182.     	default:
  183.         _tmuteVars.displayingOptions = !(_tmuteVars.displayingOptions);
  184.         document.getElementById("_tmads_options").style.display = (_tmuteVars.displayingOptions === false) ? "none" : "inline-flex";
  185. 		} 
  186.   }
  187.   
  188.   // Start the background check
  189.   _tmuteVars.autoCheck = setInterval(checkAd, _tmuteVars.timerCheck);
  190.   
  191. })();