☰

Bitchute - Extras

Adds extra functionality to Bitchute, such as: mark watched videos and allow to block comments based on username and content.

  1. // ==UserScript==
  2. // @name        Bitchute - Extras
  3. // @author      "Dilxe"
  4. // @namespace   https://github.com/Dilxe/
  5. // @version     0.91.1
  6. // @icon        https://i.imgur.com/iarBFdu.png
  7. // @description Adds extra functionality to Bitchute, such as: mark watched videos and allow to block comments based on username and content.
  8. // @match       https://www.bitchute.com/*
  9. // @grant       GM.getValue
  10. // @grant       GM.setValue
  11. // @grant       GM.deleteValue
  12. // @grant       GM.getResourceUrl
  13. // @grant       GM_addStyle
  14. // @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
  15. // @require     https://gf.qytechs.cn/scripts/383527-wait-for-key-elements/code/Wait_for_key_elements.js?version=701631
  16. // @run-at      document-idle
  17. // ==/UserScript==
  18.  
  19. // Others //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  20. // For Tampermonkey    https://github.com/Tampermonkey/tampermonkey/issues/848#issuecomment-569205508
  21. /* globals, jQuery, $, waitForKeyElements */
  22.  
  23. // Mutation Observer ------------------------------------------------------------------------------------------------------------------------------
  24. //// Dynamically detects changes to the HTML. It's used here to, when the user scrolls through the videos list, mark the older videos as they load.
  25. //// Source: https://stackoverflow.com/a/11546242
  26.  
  27. function detectMutation()
  28. { 
  29.   if (document.getElementById("mutation-detector") == null)
  30.   {
  31.     MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  32.  
  33.     if(!document.URL.includes('video'))
  34.     {
  35.       var observer = new MutationObserver(
  36.         function(mutations, observer)
  37.         {
  38.           // fired when a mutation occurs
  39.           //console.log(mutations, observer);
  40.           markWatchedVideos();
  41.           // ...
  42.         });
  43.  
  44.       var configMain = { attributes: false, childList: true, characterData: false, subtree: false };
  45.  
  46.       // define what element should be observed by the observer
  47.       // and what types of mutations trigger the callback
  48.  
  49.       if (document.URL.includes('channel') == true) { observer.observe(document.getElementsByClassName("channel-videos-list")[0], configMain); }
  50.       
  51.       else if (document.URL.length <= 25) { observer.observe(document.getElementsByClassName("row auto-clear")[1], configMain); }
  52.       
  53.     }
  54.  
  55.  
  56.         //Day-Night theme change detector
  57.  
  58.         var observerTheme = new MutationObserver(
  59.           function(mutations, observerTheme)
  60.           {
  61.             if (document.getElementById("night-theme").classList == "user-link") 
  62.             {
  63.               document.getElementById("btn-debug").setAttribute("style","position:absolute; top:29%; right:25%; background-color:#dee0dd; color:#4d4b4e; font-size: 0.9vw; width: 12vw; height: 1.9vw; outline: #d2d2d2 outset 2px;");
  64.               document.getElementById("txt-amount-removed-comments").setAttribute("style","display:block; position:absolute; bottom:1%; right:0.5%; width:49.3%; height:88%; overflow:auto; background-color:#dee0dd; color:#4d4b4e; border:4px solid #4d4b4e; text-align:center; z-index:inherit;");
  65.           		document.getElementById("div-amount-removed-comments").setAttribute("style","position:absolute; top:1%; right:0.5%; background-color:#dee0dd; color:#4d4b4e; font-size:1vw; font-weight:bold; width:49.3%; height:11%; border:4px solid #4d4b4e; line-height:275%;");
  66.             	document.getElementById("div-debug").setAttribute("style","display:none; position:absolute; top:69%; left:19.9%; width:60.1vw; height:30vw; background-color:#dee0dd; color:#4d4b4e; text-align:center; z-index:inherit;");
  67.             	document.getElementById("txt-debug-list").setAttribute("style","display:block; position:absolute; bottom:-1%; left:-1%; width:102%; height:92%; overflow:auto; background-color:#dee0dd; color:#4d4b4e; border:4px solid #4d4b4e; text-align:center; z-index:inherit;");
  68.             	document.getElementById("div-debug-editable-list").setAttribute("style","display:block; position:absolute; top:1%; left:0.5%; width:49.3%; height:98%; background-color:#dee0dd; color:#4d4b4e; border:4px solid #4d4b4e; text-align:center; z-index:inherit;");
  69.             	document.getElementById("btn-save-list").setAttribute("style","position:absolute; top:1.3%; left:61.5%; background-color:#dee0dd; color:#4d4b4e; font-size:0.9vw; width:11vw; height:1.9vw; outline: #d2d2d2 outset 2px;");
  70.             	document.getElementById("div-marked-videos-title").setAttribute("style","position:absolute; top:-1%; left:-1%; background-color:#dee0dd; color:#4d4b4e; font-size:0.9vw; font-weight:bold; line-height:275%; border:4px solid #4d4b4e; width:61.7%;");
  71.               
  72.               for (commentNum = 0; commentNum < document.getElementsByClassName('comment-wrapper').length; commentNum++)
  73.               {
  74.                 document.getElementById("menu_" + commentNum).setAttribute("style","display:inherit; position:relative; background-color:rgb(238, 238, 238); text-align:center; font-size:.9em; line-height:inherit; opacity:0.75; border: outset; margin: auto; width: 85px; border-radius: 15px;");
  75.               }
  76.             }
  77.             
  78.             else 
  79.             {
  80.               document.getElementById("btn-debug").setAttribute("style","position:absolute; top:29%; right:25%; background-color:#211f22; color:#908f90; font-size: 0.9vw; width: 12vw; height: 1.9vw; outline: none;");
  81.               document.getElementById("txt-amount-removed-comments").setAttribute("style","display:block; position:absolute; bottom:1%; right:0.5%; width:49.3%; height:88%; overflow:auto; background-color:#211f22; color:#908f90; border:4px solid white; text-align:center; z-index:inherit;");
  82.           		document.getElementById("div-amount-removed-comments").setAttribute("style","position:absolute; top:1%; right:0.5%; background-color:#211f22; color:#908f90; font-size:1vw; font-weight:bold; width:49.3%; height:11%; border:4px solid white; line-height:275%;");
  83.             	document.getElementById("div-debug").setAttribute("style","display:none; position:absolute; top:69%; left:19.9%; width:60.1vw; height:30vw; background-color:#211f22; color:#908f90; text-align:center; z-index:inherit;");
  84.             	document.getElementById("txt-debug-list").setAttribute("style","display:block; position:absolute; bottom:-1%; left:-1%; width:102%; height:92%; overflow:auto; background-color:#211f22; color:#908f90; border:4px solid white; text-align:center; z-index:inherit;");
  85.             	document.getElementById("div-debug-editable-list").setAttribute("style","display:block; position:absolute; top:1%; left:0.5%; width:49.3%; height:98%; background-color:#211f22; color:#908f90; border:4px solid white; text-align:center; z-index:inherit;");
  86.             	document.getElementById("btn-save-list").setAttribute("style","position:absolute; top:1.3%; left:61.5%; background-color:#211f22; color:#908f90; font-size:0.9vw; width:11vw; height:1.9vw; outline: none;");
  87.             	document.getElementById("div-marked-videos-title").setAttribute("style","position:absolute; top:-1%; left:-1%; background-color:#211f22; color:#908f90; font-size:0.9vw; font-weight:bold; line-height:275%; border:4px solid white; width:61.7%;");
  88.             
  89.               for (commentNum = 0; commentNum < document.getElementsByClassName('comment-wrapper').length; commentNum++)
  90.               {
  91.                 document.getElementById("menu_" + commentNum).setAttribute("style","display:inherit; position:relative; background-color:rgb(23, 23, 23); text-align:center; font-size:.9em; line-height:inherit; opacity:0.5; border: outset; margin: auto; width: 85px; border-radius: 15px;");
  92.               }
  93.             }
  94.           }
  95.         );
  96.  
  97.  
  98.         var configTheme = { attributes: true, childList: false, characterData: false, subtree: false };
  99.  
  100.         observerTheme.observe(document.getElementById("night-theme"), configTheme);
  101.   }
  102.   
  103.   elementForDataDisplay("","div","mutation-detector","display:none;",'nav-top-menu');
  104. }
  105.  
  106.  
  107.  
  108.  
  109.  
  110.  
  111. // Detect URL Change ---------------------------------------------------------
  112. //// This is to avoid having to refresh the page (F5) or open in a new window.
  113. /*--- Note, gmMain () will fire under all these conditions:
  114.     1) The page initially loads or does an HTML reload (F5, etc.).
  115.     2) The scheme, host, or port change.  These all cause the browser to
  116.        load a fresh page.
  117.     3) AJAX changes the URL (even if it does not trigger a new HTML load).
  118.     Source: https://stackoverflow.com/a/18997637
  119. */
  120. var fireOnHashChangesToo    = true;
  121. var pageURLCheckTimer       = setInterval (
  122.     function ()
  123.   	{
  124. 													
  125.         if (this.lastPathStr  !== location.pathname || this.lastQueryStr !== location.search || (fireOnHashChangesToo && this.lastHashStr !== location.hash))
  126.         {
  127.             this.lastPathStr  = location.pathname;
  128.             this.lastQueryStr = location.search;
  129.             this.lastHashStr  = location.hash;
  130.           
  131.           	
  132.                 // [For Debugging] - If the message (of the amount of removed comments) exists, it'll be removed.
  133.                 if(document.getElementById('div-debug') != null)
  134.                 {
  135.                   document.getElementById('div-debug').remove();
  136.                   document.getElementById('btn-debug').remove();
  137.                 }
  138.           
  139.           
  140.             window.addEventListener ("hashchange", gmMain, false);
  141.           	document.addEventListener("visibilitychange", gmMain);	//https://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active#comment111113309_1760250
  142.           	gmMain();
  143.           
  144.         }
  145.     }    , 111);
  146.  
  147.  
  148.  
  149.  
  150. function gmMain()
  151. {
  152. 	if (document.getElementById("loader-container").style.display == "none")
  153.   {
  154.     
  155.     if(document.URL.includes('video') == true)
  156.     {
  157.       /* waitForKeyElements() - Needs jQuery.
  158.       It's used for the same reasons one would use setTimeout, while being more exact due to only running the code after the chosen elements are loaded.
  159.       Source: https://stackoverflow.com/a/17385193			//			https://stackoverflow.com/questions/16290039/script-stops-working-after-first-run */
  160.  
  161.  
  162.       waitForKeyElements ( "#comment-list",       filterComments );
  163.       waitForKeyElements ( ".sidebar-video",   	  markWatchedVideos() );
  164.     }
  165.  
  166.     else if(document.URL.includes('channel') == true)
  167.     {
  168.       waitForKeyElements ( "#channel-videos",    markWatchedVideos() );
  169.     }
  170.  
  171.     else
  172.     {
  173.       detectMutation();  
  174.       waitForKeyElements ( ".row.auto-clear",    markWatchedVideos() );
  175.     }
  176.   }
  177.   
  178.   else
  179.   {
  180.     setTimeout(gmMain, 1000);
  181.   }
  182. }
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189. // Main //
  190.  
  191. // Mark Watched Videos ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  192.  
  193. async function markWatchedVideos()
  194. {
  195.   let allVideos = [];	// Creates an array to put all the videos on the page. Needed because channel videos have different classes.
  196.   const	globalVideos = document.getElementsByClassName('video-card'); 	 	 	 	 	 	// Fetches the videos from the element
  197.   const channelVideos = document.getElementsByClassName('channel-videos-image-container'); 	// Same as above but for the channels
  198.   Array.prototype.push.apply(allVideos, Array.from(globalVideos)); 	 	 	 	 	 	 // Add the videos to the array
  199.   Array.prototype.push.apply(allVideos, Array.from(channelVideos)); 	 	 	 	 	 // Same as above but for the channels
  200.   let totalNumVideos = allVideos.length; 	 	 	 	 	 	 	 	 	 	 	  	// Counts the total nº of videos
  201.   let watchedVideos = await GM.getValue("videoHREF"); 	 	 	 	 	 	 	 	 // Loads the list of watched videos
  202.  
  203.   
  204.   // If it's the first time using the script it would get an undefined error without this.
  205.   if (! watchedVideos)
  206.   {
  207.     await GM.setValue("videoHREF", "");
  208.   }
  209.   
  210.   // Checks the video count. If bigger than X threshold, remove an older video.
  211.   if (watchedVideos.split("|").length > 4000)
  212.   {
  213.     let olderVideoRemoved = watchedVideos.replace("|" + watchedVideos.split("|")[1],"");
  214.     await GM.setValue("videoHREF", olderVideoRemoved);
  215.   }
  216.  
  217.   
  218.   
  219.   // Checks if it's a video page, has been watched and, therefore on GM(GreaseMonkey)'s list. If it's not, gets added.
  220.   if (document.URL.includes('video') == true && watchedVideos.indexOf(document.baseURI.split("/")[4]) == -1)
  221.   {
  222.     let markCurrentVideo = watchedVideos + '|' + document.baseURI.split("/")[4];
  223.     await GM.setValue("videoHREF", markCurrentVideo);
  224.   }
  225.  
  226.  
  227.  
  228.   // Checks video by video whether they're watched, if so, marks.
  229.   for (videoNum = 0; videoNum < totalNumVideos; videoNum++)
  230.   {
  231.     // If it's in the list, add CSS
  232.     if (watchedVideos.match(allVideos[videoNum].children[0].pathname.slice(7,allVideos[videoNum].children[0].pathname.length-1)) != null)
  233.     {
  234.       const div = document.createElement('thumbnailOverlay');
  235.       div.style.background = '#2c2a2d';
  236.       div.style.borderRadius = '2px';
  237.       div.style.color = '#908f90';
  238.       div.innerHTML = 'WATCHED';
  239.       div.style.fontSize = '11px';
  240.       div.style.right = '4px';
  241.       div.style.padding = '3px 4px 3px 4px';
  242.       div.style.position = 'absolute';
  243.       div.style.top = '4px';
  244.       div.style.fontFamily = 'Roboto, Arial, sans-serif';
  245.  
  246.  
  247.       if (allVideos[videoNum].className == "video-card")
  248.       {
  249.         document.getElementsByClassName('video-card-image')[videoNum].style.opacity = '0.25';
  250.       }
  251.  
  252.       else if (allVideos[videoNum].className == "channel-videos-image-container")
  253.       {
  254.         document.getElementsByClassName('channel-videos-image')[videoNum-globalVideos.length].style.opacity = '0.25';
  255.       }
  256.  
  257.       allVideos[videoNum].appendChild(div);
  258.     }
  259.   }
  260. }
  261.  
  262. // Mark Watched Videos - END //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  263.  
  264.  
  265.  
  266.  
  267.  
  268.  
  269. // Filter Comments by Word ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  270.  
  271. async function filterComments()
  272. {  
  273.   if(document.getElementById('div-amount-removed-comments') == null && document.getElementById("menu_0") == null)
  274.   {
  275.     const comment = document.getElementsByClassName('comment-wrapper');              		// Fetches the comments from the element
  276.     const totalNumComments = comment.length;												// Counts nº of comments
  277.     let regexWholeWord = /\b(example2|example1)\b/gi;
  278.     let regexCombLetters = /(example word|\[comment removed\]|W­w­w|3vvs)/gi;
  279.     let userWhiteList = /(exampleUser4|exampleUser3)/g;
  280.   	let userBlackList = await GM.getValue("blackList");										// Loads the list of watched videos
  281.  
  282.     let themeColor; let themeTxtClr; let thmBorderClr; let thmBtnOutline;
  283.     let borderTopRemoved = false;
  284.  
  285.         // [For Debugging] //////////////////////////////////////////////////////////////////////////////////////////
  286.         let allComments = "";			// Variable where the removed comments are stored.
  287.         let nRemoved = 0;					// Counts removed comments.
  288.  
  289.  
  290.  
  291.             if(document.getElementById("night-theme").classList == "user-link") 
  292.             {
  293.               themeColor = "#dee0dd"; themeTxtClr = "#4d4b4e"; thmBorderClr = "#4d4b4e"; thmBtnOutline = "outline: #d2d2d2 outset 2px;";
  294.               createDebug("blackList",userBlackList,"Blacklist: ", " Users", themeColor, themeTxtClr, thmBorderClr, thmBtnOutline);
  295.             }
  296.  
  297.             else
  298.             {
  299.               themeColor = "#211f22"; themeTxtClr = "#908f90"; thmBorderClr = "white"; thmBtnOutline = "outline: none;";
  300.               createDebug("blackList",userBlackList,"Blacklist: ", " Users", themeColor, themeTxtClr, thmBorderClr, thmBtnOutline);
  301.             }
  302.  
  303.  
  304.  
  305.       	// If it's the first time using the script it would get an undefined error without this.
  306.         if (document.getElementById("txt-debug-list").value == "undefined")
  307.         {
  308.           await GM.setValue("blackList", "/(exampleUser1)/g");
  309.           alert("Script initialized. Please refresh page.");
  310.         }
  311.  
  312.     let parsedBlacklist = new RegExp(document.getElementById("txt-debug-list").value.substr(1).slice(0,-2),"g");
  313. 		
  314.     // Checks comment by comment whether they contain any word from the regex lists; if they do those comments'll be removed.
  315.     for (commentNum = 0; commentNum < totalNumComments; commentNum++)
  316.     {
  317.       const innerHtmlUser = comment[commentNum].innerHTML.split(">")[6].split("<")[0];
  318.       const textContentComment = comment[commentNum].getElementsByTagName("p")[0].textContent;
  319.  
  320.       
  321.       if (innerHtmlUser.match(parsedBlacklist) != null && comment[commentNum].style.display != 'none' && innerHtmlUser.match(userWhiteList) == null ||
  322.          comment[commentNum].getElementsByClassName("reply-to").length != 0 &&
  323.           comment[commentNum].getElementsByClassName("reply-to")[0].textContent.match(parsedBlacklist) != null)
  324.       {
  325.         // Removes comment
  326.         if (comment[commentNum].parentNode.parentNode.className != "child-comments")
  327.         {
  328.         	comment[commentNum].parentNode.style.display = 'none';
  329.         }
  330.         
  331.         else
  332.         {
  333.         	comment[commentNum].style.display = 'none';
  334.         }
  335.  
  336.         
  337.             // [For Debugging - Lists all removed comments and the reason for their blocked state] //////////////////////////////////////////////////////////
  338.         		if (comment[commentNum].getElementsByClassName("reply-to").length != 0 &&
  339.                 comment[commentNum].getElementsByClassName("reply-to")[0].textContent.match(parsedBlacklist) != null)
  340.             {
  341.               allComments += '\n' + commentNum + ' - innerHTML\n\nUser [ ' + innerHtmlUser + ' ]\n\n * \n\nReason (reply-to): ' +
  342.                 comment[commentNum].children[2].innerText.split(comment[commentNum].children[2].children[0].textContent)[1] +
  343.                 '\n\n\n' + '-'.repeat(60) + '\n' + '-'.repeat(60) + '\n\n';
  344.             }
  345.         
  346.         		else
  347.             {
  348.               allComments += '\n' + commentNum + ' - innerHTML\n\nUser [ ' + innerHtmlUser + ' ]\n\n * \n\nReason (userBlackList): ' +
  349.                 innerHtmlUser.match(parsedBlacklist) + '\n\n\n' + '-'.repeat(60) + '\n' + '-'.repeat(60) + '\n\n';
  350.             }
  351.  
  352.             nRemoved += 1;
  353.       }
  354.  
  355.  
  356.  
  357.       else if (textContentComment.match(regexWholeWord) != null && comment[commentNum].style.display != 'none' && innerHtmlUser.match(userWhiteList) == null ||
  358.           textContentComment.match(regexCombLetters) != null && comment[commentNum].style.display != 'none' && innerHtmlUser.match(userWhiteList) == null)
  359.       {
  360.  
  361.         // Removes comment
  362.         if (comment[commentNum].parentNode.parentNode.className != "child-comments") { comment[commentNum].parentNode.style.display = 'none'; }
  363.         else { comment[commentNum].style.display = 'none'; }
  364.  
  365.  
  366.             // [For Debugging] //////////////////////////////////////////////////////////////////////////////////////////////////////
  367.             allComments += '\n' + commentNum + ' - textContent\n\nUser [ ' + innerHtmlUser + ' ]\n\n"' +
  368.               textContentComment + '"\n\n * \n\nReason (regexWholeWord): ' +
  369.               textContentComment.match(regexWholeWord) + '\n\nReason (regexCombLetters): ' +
  370.               textContentComment.match(regexCombLetters) + '\n\n\n' + '-'.repeat(60) + '\n' + '-'.repeat(60) + '\n\n';
  371.  
  372.             nRemoved += 1;
  373.       }
  374.     }
  375.  
  376.  
  377.  
  378.     // If original top comment is hidden, removes top-border of new top comment to match original's look.
  379.     if(document.getElementById('comment-list').childElementCount > 1 && comment[0].parentNode.style.display == 'none')
  380.     {
  381.       for (cmmnt = 0; cmmnt < totalNumComments; cmmnt++)
  382.       {
  383.         if (borderTopRemoved == true) { break; }
  384.  
  385.         else if (document.getElementById('comment-list').children[cmmnt].style.display == '')
  386.         {
  387.           document.getElementById('comment-list').children[cmmnt].children[0].style.borderTop = 'none';
  388.           borderTopRemoved = true;
  389.         }
  390.       }
  391.     }
  392.     
  393.     
  394.     // [Removed Comments List - For Debugging] - Creates a div, from the function (btnForDataDisplay), with the message below.
  395.     
  396.     
  397.           // Comments list
  398.           const commentsElementType = "div";
  399.           const commentsElementId = "txt-amount-removed-comments";
  400.           const commentsElementStyle = "display:block; position:absolute; bottom:1%; right:0.5%; width:49.3%; height:88%; overflow:auto; " +
  401.                 "background-color:" + themeColor + "; color:" + themeTxtClr + "; border:4px solid " + thmBorderClr + "; text-align:center; z-index:inherit;";
  402.           const removedCommentsElementStyle = "position:absolute; top:1%; right:0.5%; background-color:" + themeColor + "; color:" + themeTxtClr +
  403.                 "; font-size:1vw; font-weight:bold; width:49.3%; height:11%; border:4px solid " + thmBorderClr + "; line-height:275%;";
  404.  
  405.           // List
  406.           elementForDataDisplay(nRemoved + ' Comment(s) Removed!','div','div-amount-removed-comments',removedCommentsElementStyle,'div-debug');
  407.           elementForDataDisplay(allComments,commentsElementType,commentsElementId,commentsElementStyle,'div-debug');
  408.           document.getElementById(commentsElementId).scrollTo(0,0);
  409.  
  410.     
  411.     
  412.     // [W.I.P] - Adds a button to block comments.
  413.     addCommentBlockBtn(totalNumComments);
  414.     
  415.   }
  416. }
  417.  
  418. // Filter Comments by Word - END //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  419.  
  420.  
  421.  
  422.  
  423.  
  424.  
  425. // [For Debugging] - Create an element where the removed comments will be displayed (for debugging reasons) //////////////////////////////////////////////////////////
  426. //// Instead of using JS's alert(), an element is instead created to display the comments.
  427. //// Base source: https://stackoverflow.com/a/19020973
  428.  
  429. async function createDebug(GMvalue, cUserBlackList, listName, listOf, bgColor, txtColor, borderColor, btnOutline)
  430. {
  431.   if(document.getElementById("btn-debug") == null)
  432.   {
  433.      // Background div and btn for textarea & removed comments
  434.      elementForDataDisplay( "", "div", "div-debug", "display:none; position:absolute; top:69%; left:19.9%; width:60.1vw; height:30vw; background-color:" + bgColor + "; " +
  435.             "color:" + txtColor + "; text-align:center; z-index:inherit;", 'nav-top-menu' );
  436.     
  437.     
  438.     // Debug Button
  439.     const btnDebugInnerTxt = 'Debug Menu';
  440.     const btnDebugId = "btn-debug";
  441.     const btnDebugStyle = "position:absolute; top:29%; right:25%; background-color:" + bgColor + "; color:" + txtColor + "; font-size: 0.9vw; width: 12vw; height: 1.9vw;" + btnOutline;
  442.     btnForDataDisplay(btnDebugInnerTxt,btnDebugId,btnDebugStyle,document.getElementById("div-debug"));
  443.  
  444.     const divTitleElementStyle = "position:absolute; top:-1%; left:-1%; background-color:" + bgColor + "; color:" + txtColor + "; font-size:0.9vw; font-weight:bold; " +
  445.           "line-height:275%; border:4px solid " + borderColor + "; width:61.7%;";
  446.  
  447.     // Textarea
  448.     const debugListElementType = "textarea";
  449.     const debugListElementId = "txt-debug-list";
  450.     const debugListElementPlacement = "div-debug-editable-list";
  451.     const textDebugListElementStyle = "display:block; position:absolute; bottom:-1%; left:-1%; width:102%; height:92%; overflow:auto; " +
  452.           "background-color:" + bgColor + "; color:" + txtColor + "; border:4px solid " + borderColor + "; text-align:center; z-index:inherit;";
  453.  
  454.  
  455.     // Background div for textarea & button
  456.     elementForDataDisplay( "", "div", "div-debug-editable-list", "display:block; position:absolute; top:1%; left:0.5%; width:49.3%; height:98%; background-color:" + bgColor + "; " +
  457.           "color:" + txtColor + "; border:4px solid " + borderColor + "; text-align:center; z-index:inherit;", 'div-debug' );
  458.  
  459.     btnSaveList(bgColor, txtColor, btnOutline);
  460.     // async onclick - source: https://stackoverflow.com/a/67509739
  461.     document.getElementById("btn-save-list").onclick = async ()=>{alert("List saved!"); await GM.setValue(GMvalue, document.getElementById("txt-debug-list").value)};
  462.  
  463.     // Textarea with watched videos list
  464.     elementForDataDisplay( cUserBlackList, debugListElementType, debugListElementId, textDebugListElementStyle, debugListElementPlacement );
  465.     document.getElementById(debugListElementId).scrollTo(0,0);
  466.  
  467.     // Title Element
  468.     elementForDataDisplay(listName + document.getElementById("txt-debug-list").innerHTML.split("|").length + listOf + " | Editable List","div","div-marked-videos-title",divTitleElementStyle,"div-debug-editable-list");
  469.   }
  470.   
  471.   detectMutation();
  472. }
  473.  
  474.  
  475.  
  476. function btnSaveList(btnBgColor, btnTxtColor, svBtnOutline)
  477. {
  478.   var btnElement = document.createElement("button");
  479.   btnElement.setAttribute("id","btn-save-list");
  480.   btnElement.setAttribute("style","position:absolute; top:1.3%; left:61.5%; background-color:" + btnBgColor + "; color:" + btnTxtColor + "; font-size:0.9vw; width:11vw; height:1.9vw;" + svBtnOutline);
  481.   btnElement.innerHTML = "Save List";
  482.   document.getElementById('div-debug-editable-list').appendChild(btnElement);
  483. }
  484.  
  485.  
  486. // Reusable block - Create an element where text is displayed
  487. function elementForDataDisplay(textData,elementType,elementId,elementStyle,elementHtmlPlacement)
  488. {
  489.   var txtElemnt = document.createElement(elementType);
  490.   txtElemnt.setAttribute("id",elementId);
  491.   txtElemnt.setAttribute("style",elementStyle);
  492.   txtElemnt.innerText = textData;
  493.   document.getElementById(elementHtmlPlacement).appendChild(txtElemnt);
  494. }
  495.  
  496.  
  497. // Reusable block - Create the button to open/close the element where the text is displayed
  498. function btnForDataDisplay(btnTxt, btnId, btnStyle, btnTargetId)
  499. {
  500.   var btnElement = document.createElement("button");
  501.   btnElement.setAttribute("id",btnId);
  502.   btnElement.setAttribute("style",btnStyle);
  503.   btnElement.innerHTML = btnTxt;
  504.   document.getElementById('nav-top-menu').appendChild(btnElement);
  505.   
  506. 	document.getElementById(btnId).onclick = function (){if (btnTargetId.style.display !== "none") { btnTargetId.style.display = "none"; } else { btnTargetId.style.display = "block"; } };
  507. }
  508.  
  509.  
  510.  
  511.  
  512.  
  513.  
  514. // [W.I.P.] - Add button to each comment that opens a blocking menu /////////////////////////////////////////////////////////////////////////
  515. //// Later on it'll allow the user to choose a way to block the comment (keywords or username), and do it on the front-end.
  516.  
  517. // Create comment's menu button
  518. function addCommentBlockBtn(CommentAmmount)
  519. {
  520.   let btnColor;
  521.   let btnOpacity;
  522.   
  523.   
  524.   if(document.getElementById("night-theme").classList == "user-link") { btnColor = "rgb(238, 238, 238)"; btnOpacity = "0.75"; }
  525.   else  { btnColor = "rgb(23, 23, 23)"; btnOpacity = "0.5";  }
  526.   
  527.   
  528.   if(document.getElementsByClassName('comment-wrapper')[0].children[3].children[2].innerHTML.indexOf("btnMenuScript") == -1)
  529.   {
  530.     for (commentNum = 0; commentNum < CommentAmmount; commentNum++)
  531.     {
  532.  
  533.       var menuElement = document.createElement("button");
  534.  
  535.       menuElement.setAttribute("id","menu_" + commentNum);
  536.       menuElement.setAttribute("class","action");
  537.       menuElement.setAttribute("style","display:inherit; position:relative; background-color:"+ btnColor + "; text-align:center; font-size:.9em; line-height:inherit; opacity:" + btnOpacity + "; border: outset; margin: auto; width: 85px; border-radius: 15px;");
  538.       menuElement.innerText = "Block User";
  539.  
  540.   	  document.getElementsByClassName('comment-wrapper')[commentNum].children[3].children[2].appendChild(menuElement);
  541.  
  542.       blockComment(commentNum);
  543.     }
  544.   }
  545.  
  546.   else
  547.   {
  548.     return;
  549.   }
  550. }
  551.  
  552. // Create Comment's 'Block by Username' Button
  553. async function blockComment(num)
  554. {
  555.   var blacklistStart = document.getElementById("txt-debug-list").value.substring(0,2);
  556.   var blacklistAfterNew = document.getElementById("txt-debug-list").value.substring(2);
  557.  
  558.   // Display confirmation message
  559.   var userName = document.getElementById("menu_" + num).parentElement.parentElement.parentElement.innerHTML.split('>')[6].slice(0,-6).toString();
  560.   var sentence = "Block " + userName + "?";
  561.   document.getElementById("menu_" + num).onclick = async ()=>{if (confirm(sentence) == true) {await GM.setValue("blackList", blacklistStart + userName + "|" + blacklistAfterNew); alert("Blocked! Please refresh page."); document.getElementsByClassName("comment")[num].style.display = "none";}};
  562. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址