☰

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.

当前为 2020-11-01 提交的版本，查看 最新版本。

  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.13
  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.                                    "viewersCount": "channel-info-bar__viewers-wrapper", // Viewers count wrapper class
  33.                                    "squadHeader": "squad-stream-top-bar__container", // Squad bar container class
  34.                                    "squadPlayer": "multi-stream-player-layout__player-container", // Squad player class
  35.                                    "squadPlayerMain": "multi-stream-player-layout__player-primary" // Squad primary player class
  36.   																},
  37.                           "hw":  { "player": "video-player__container", // Player class
  38.                                    "playerVideo": ".video-player__container video", // Player video selector
  39.                                    "muteButton": "button[data-a-target='player-mute-unmute-button']", // (un)mute button selector
  40.                                    "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
  41.                                    "viewersCount": "tw-align-items-center tw-flex tw-flex-wrap tw-full-width tw-justify-content-end tw-mg-l-1 tw-mg-t-05", // Viewers count wrapper class
  42.                                    "squadHeader": "squad-stream-top-bar__container", // Squad bar container class
  43.                                    "squadPlayer": "multi-stream-player-layout__player-container", // Squad player class
  44.                                    "squadPlayerMain": "multi-stream-player-layout__player-primary" // Squad primary player class
  45.                           				}
  46.   											};
  47. 	// Current selector (either old or highwind player, automatically set below)
  48.   var currentSelector = undefined;
  49. 	
  50.   // Check if there's an ad
  51.   function checkAd()
  52.   { 
  53.     // Check if you're watching a stream, useless to continue if not
  54.     if (_tmuteVars.highwindPlayer === undefined) {
  55.       var isOldPlayer = document.getElementsByClassName(_tmuteSelectors.old.player).length;
  56.       var isHwPlayer = document.getElementsByClassName(_tmuteSelectors.hw.player).length;
  57.       var isViewing = Boolean(isOldPlayer + isHwPlayer);
  58.       if (isViewing === false) return;
  59.       
  60.       // We set the type of player currently used (old or highwind one)
  61.       _tmuteVars.highwindPlayer = Boolean(isHwPlayer);
  62.       currentSelector = (_tmuteVars.highwindPlayer === true) ? _tmuteSelectors.hw : _tmuteSelectors.old;
  63.       console.log("You're currently using the " + ((_tmuteVars.highwindPlayer === true) ? "Highwind" : "old") + " player.");
  64.     } else {
  65.       var isViewing = Boolean(document.getElementsByClassName(currentSelector.player).length);
  66.       if (isViewing === false) return;
  67.     }
  68.     
  69.     // Initialize the ads options if necessary.
  70.     var optionsInitialized = (document.getElementById("_tmads_options") === null) ? false : true;
  71.     if (optionsInitialized === false) adsOptions("init");
  72.     
  73.     var advert = document.getElementsByClassName(currentSelector.adNotice);
  74.     
  75.     if (_tmuteVars.adElapsedTime !== undefined)
  76.     {
  77.       _tmuteVars.adElapsedTime++;
  78.       if (_tmuteVars.adElapsedTime >= _tmuteVars.adUnlockAt && advert[0] !== undefined) 
  79.       {
  80.         advert[0].parentNode.removeChild(advert[0]);
  81.         console.log("Unlocking Twitch player as Twitch forgot to remove the ad notice after the ad(s).");
  82.       }
  83.     }
  84.     
  85.     if ((advert.length >= 1 && _tmuteVars.playerMuted === false) || (_tmuteVars.playerMuted === true && advert.length === 0)) 
  86.     {
  87.       // Update at the start of an ad if the player is already muted or not
  88.       if (advert.length >= 1) {
  89.         var muteButton = document.querySelectorAll(currentSelector.muteButton)[_tmuteVars.playerIdAds];
  90.         if (_tmuteVars.highwindPlayer === true) {
  91.         	_tmuteVars.alreadyMuted = Boolean(muteButton.getAttribute("aria-label") === "Unmute (m)");
  92.         } else {
  93.         	_tmuteVars.alreadyMuted = Boolean(muteButton.childNodes[0].className === "unmute-button");
  94.         }
  95.       }
  96.       
  97.       // Keep the player muted/hidden for the minimum ad time set (Twitch started to remove the ad notice before the end of some ads)
  98.       if (advert.length === 0 && _tmuteVars.adElapsedTime !== undefined && _tmuteVars.adElapsedTime < _tmuteVars.adMinTime) return;
  99.  
  100.       mutePlayer();
  101.     }
  102.   }
  103.  
  104.   // (un)Mute Player
  105.   function mutePlayer()
  106.   {
  107.     if (document.querySelectorAll(currentSelector.muteButton).length >= 1)
  108.     {
  109.       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.
  110.       _tmuteVars.playerMuted = !(_tmuteVars.playerMuted);
  111.  
  112.       if (_tmuteVars.playerMuted === true)
  113.       {
  114.         _tmuteVars.adsDisplayed++;
  115.         _tmuteVars.adElapsedTime = 1;
  116.         console.log("Ad #" + _tmuteVars.adsDisplayed + " detected. Player " + (_tmuteVars.alreadyMuted === true ? "already " : "") + "muted.");
  117.         if (_tmuteVars.disableDisplay === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = "hidden";
  118.       } else {
  119.         console.log("Ad #" + _tmuteVars.adsDisplayed + " finished (lasted " + _tmuteVars.adElapsedTime + "s)." + (_tmuteVars.alreadyMuted === true ? "" : " Player unmuted."));
  120.         _tmuteVars.adElapsedTime = undefined;
  121.         if (_tmuteVars.disableDisplay === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = "visible";
  122.       }
  123.     } else {
  124.       console.log("No volume button found (class changed ?).");
  125.     }
  126.   }
  127.   
  128.   // Manage ads options
  129.   function adsOptions(changeType = "show")
  130.   {
  131.     switch(changeType) {
  132.       // Manage player display during an ad (either hiding the ads or still showing them)
  133.     	case "display":
  134.         _tmuteVars.disableDisplay = !(_tmuteVars.disableDisplay);
  135.         // Update the player display if an ad is supposedly in progress
  136.         if (_tmuteVars.playerMuted === true) document.querySelectorAll(currentSelector.playerVideo)[_tmuteVars.playerIdAds].style.visibility = (_tmuteVars.disableDisplay === true) ? "hidden" : "visible";
  137.         document.getElementById("_tmads_display").innerText = (_tmuteVars.disableDisplay === true ? "Show" : "Hide") + " player during ads";
  138.         break;
  139.       // Force a player unlock if Twitch didn't remove the ad notice properly instead of waiting the auto unlock
  140.     	case "unlock":
  141.         var advert = document.getElementsByClassName(currentSelector.adNotice);
  142.         if (_tmuteVars.adElapsedTime === undefined && advert[0] === undefined)
  143.         {
  144.           alert("There's no ad notice displayed. No unlock to do.");
  145.         } else {
  146.           // We set the elapsed time to the unlock timer to trigger it during the next check.
  147.           _tmuteVars.adElapsedTime = _tmuteVars.adUnlockAt;
  148.           console.log("Unlock requested.");
  149.         }
  150.         break;
  151.       // Display the ads options button
  152.       case "init":
  153.         if (document.getElementsByClassName(currentSelector.viewersCount)[0] === undefined && document.getElementsByClassName(currentSelector.squadHeader)[0] === undefined) break;
  154.         
  155.         // Append ads options and events related
  156.         var optionsTemplate = document.createElement("div");
  157.         optionsTemplate.id = "_tmads_options-wrapper";
  158.         optionsTemplate.className = "tw-inline-flex";
  159.         optionsTemplate.innerHTML = `
  160.         <span id="_tmads_options" style="display: none;">
  161.           <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>
  162.           <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>
  163.         </span>
  164.         <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>`;
  165.         
  166.         // Normal player page
  167.         if (document.getElementsByClassName(currentSelector.viewersCount)[0] !== undefined)
  168.         {
  169.           _tmuteVars.squadPage = false;
  170.           _tmuteVars.playerIdAds = 0;
  171.           document.getElementsByClassName(currentSelector.viewersCount)[0].childNodes[0].appendChild(optionsTemplate);
  172.         // Squad page
  173.         } else if (document.getElementsByClassName(currentSelector.squadHeader)[0] !== undefined)
  174.         {
  175.           _tmuteVars.squadPage = true;
  176.           _tmuteVars.playerIdAds = 0;
  177.           // Since the primary player is never at the same place, we've to find it.
  178.           for (var i = 0; i < parseInt(document.querySelectorAll(currentSelector.playerVideo).length); i++)
  179.           {
  180.             if (document.getElementsByClassName(currentSelector.squadPlayer)[0].childNodes[i].classList.contains(currentSelector.squadPlayerMain))
  181.             {
  182.               _tmuteVars.playerIdAds = i;
  183.               break;
  184.             }
  185.           }
  186.           document.getElementsByClassName(currentSelector.squadHeader)[0].appendChild(optionsTemplate);
  187.         }
  188.         
  189.         document.getElementById("_tmads_showoptions").addEventListener("click", adsOptions, false);
  190.         document.getElementById("_tmads_display").addEventListener("click", function() { adsOptions("display"); }, false);
  191.         document.getElementById("_tmads_unlock").addEventListener("click", function() { adsOptions("unlock"); }, false);
  192.         console.log("Ads options initialized.");
  193.         
  194.         break;
  195.       // Display/Hide the ads options
  196.     	case "show":
  197.     	default:
  198.         _tmuteVars.displayingOptions = !(_tmuteVars.displayingOptions);
  199.         document.getElementById("_tmads_options").style.display = (_tmuteVars.displayingOptions === false) ? "none" : "inline-flex";
  200. 		} 
  201.   }
  202.   
  203.   // Start the background check
  204.   _tmuteVars.autoCheck = setInterval(checkAd, _tmuteVars.timerCheck);
  205.   
  206. })();