🏠 Home　

Youtube Hide Paused Gradient by Sapioit

Removes the annoying gradients visible when pausing a video.


Install this script? 
  1. // ==UserScript==
  2. // @name        Youtube Hide Paused Gradient by Sapioit
  3. // @namespace   Sapioit
  4. // @copyright   Sapioit, 2020 - Present
  5. // @author      sapioitgmail.com
  6. // @license     GPL-2.0-only; http://www.gnu.org/licenses/gpl-2.0.txt
  7. // @icon        https://youtube.com/favicon.ico
  8. // @match       https://www.youtube.com/*
  9. // @match       http*://*.youtube.com/*
  10. // @match       http*://youtube.com/*
  11. // @match       https://youtu.be/*
  12. // @match       http*://*.youtu.be/*
  13. // @description Removes the annoying gradients visible when pausing a video.
  14. // @version     1.6.0.1
  15. // @grant       GM_addStyle
  16. // @grant       GM_registerMenuCommand
  17. // @grant       GM_setValue
  18. // @grant       GM_getValue
  19. // ==/UserScript==
  20. localStorage.setItem('currentWatchMetadataValued', 0);
  21. localStorage.setItem('consecutiveUnchangedCounted', 0);
  22. const isFocused = () => typeof document.hidden !== undefined ? !document.hidden : null;
  23. function title_changed (count = 3) {
  24. console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed: %cChecking title.", "color: yellow; background-color: black;", "color: white");
  25. // Check if the value of the title (the first "yt-formatted-string.style-scope.ytd-watch-metadata" element) has changed
  26. let firstWatchMetadataElement = document.querySelector('h1 yt-formatted-string.style-scope.ytd-watch-metadata');
  27. if ( firstWatchMetadataElement === null || (typeof firstWatchMetadataElement) === 'undefined') {
  28. console.info("Youtube Hide Paused Gradient by Sapioit: title_changed: %cThe 'h1 yt-formatted-string.style-scope.ytd-watch-metadata' is either NULL or UNDEFINED.", "color: red");
  29. console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed: %c", "color: red", "color: default", firstWatchMetadataElement , (typeof firstWatchMetadataElement));
  30. return false;
  31. }
  32. console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed:", "color: cyan", (firstWatchMetadataElement.textContent.trim()) );
  33. console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed:", "color: cyan", (firstWatchMetadataElement.textContent.trim() !== '') , ' ' , (firstWatchMetadataElement) );
  34. if ( firstWatchMetadataElement.textContent.trim() !== '') {
  35. // Get the current value of the title
  36. let currentWatchMetadataValue = firstWatchMetadataElement.textContent.trim();
  37. console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed: %cTitle found.", "color: yellow; background-color: black;", "color: white");
  38. // Get the consecutive unchanged count from localStorage, or set it to 0 if it's not available
  39. let consecutiveUnchangedCount = parseInt(localStorage.getItem('consecutiveUnchangedCounted')) || 0;
  40. // Increment the consecutiveUnchangedCount if the value is the same
  41. consecutiveUnchangedCount++;
  42. // Update the stored value and consecutiveUnchangedCount in localStorage
  43. localStorage.setItem('currentWatchMetadataValued', currentWatchMetadataValue);
  44. localStorage.setItem('consecutiveUnchangedCounted', consecutiveUnchangedCount.toString());
  45. console.log("Youtube Hide Paused Gradient by Sapioit: title_changed: Try nr #" + (1+consecutiveUnchangedCount) );
  46. // Check if the current value is the same as the previous one stored in localStorage
  47. if (localStorage.getItem('currentWatchMetadataValued') === currentWatchMetadataValue) {
  48. // Stop the function if the title value hasn't changed for the last three checks (consecutiveUnchangedCount is less than 4)
  49. if ( consecutiveUnchangedCount < (count+1) ) {
  50. console.log("Youtube Hide Paused Gradient by Sapioit: title_changed: First 'yt-formatted-string.style-scope.ytd-watch-metadata' element has not changed for the last three checks. Stopping check.");
  51. return false; // Return that the title has not changed.
  52. } else {
  53. // Reset the consecutiveUnchangedCount if the value has changed
  54. consecutiveUnchangedCount = 0;
  55. // Update the stored value and consecutiveUnchangedCount in localStorage
  56. localStorage.setItem('currentWatchMetadataValued', currentWatchMetadataValue);
  57. localStorage.setItem('consecutiveUnchangedCounted', consecutiveUnchangedCount.toString());
  58. return true; // Return that the title has changed.
  59. }
  60. } else {
  61. // Reset the consecutiveUnchangedCount if the value has changed
  62. consecutiveUnchangedCount = 0;
  63. // Update the stored value and consecutiveUnchangedCount in localStorage
  64. localStorage.setItem('currentWatchMetadataValued', currentWatchMetadataValue);
  65. localStorage.setItem('consecutiveUnchangedCounted', consecutiveUnchangedCount.toString());
  66. return true; // Return that the title has changed.
  67. }
  68. } else {
  69. console.log("Youtube Hide Paused Gradient by Sapioit: title_changed: Checking title FAILED.");
  70. }
  71. return false; // Return that the title has changed.
  72. // Usage example:
  73. if ( title_changed() ){
  74. return;
  75. }
  76. if ( title_changed(8) ){
  77. return;
  78. }
  79. }
  80. function swapButtonsSaveShare(){
  81. if ( !isFocused() || title_changed(8) ){
  82. return;
  83. }
  84. console.log("Youtube Hide Paused Gradient by Sapioit: swapButtons:: Checking if 'Save' button is inside the top-level-buttons-computed element.");
  85. let isSaveButtonInside = document.querySelector('div#top-level-buttons-computed.top-level-buttons.style-scope.ytd-menu-renderer button[aria-label="Save to playlist"]');
  86. console.info('%cYoutube Hide Paused Gradient by Sapioit: swapButtons: %c', "color: cyan", isSaveButtonInside, (typeof isSaveButtonInside));
  87. if (isSaveButtonInside) {
  88. console.log("Youtube Hide Paused Gradient by Sapioit: swapButtons: 'Save' button is inside the top-level-buttons-computed element.");
  89. console.log("Youtube Hide Paused Gradient by Sapioit: swapButtons:: " + JSON.stringify(isSaveButtonInside));
  90. //GM_addStyle('div#top-level-buttons-computed.top-level-buttons.style-scope.ytd-menu-renderer button[aria-label="Save to playlist"] { background-color: red;}');
  91. return;
  92. }
  93. console.log("Youtube Hide Paused Gradient by Sapioit: swapButtons: 'Save' button is NOT inside the top-level-buttons-computed element.");
  94. let saveButton = document.querySelector('ytd-button-renderer[button-renderer][button-next] button[aria-label="Save to playlist"]');
  95. let shareButton = document.querySelector('ytd-button-renderer[button-renderer][button-next] button[aria-label="Share"]');
  96. if (saveButton && shareButton) {
  97. let saveButtonParent = saveButton.parentElement;
  98. let shareButtonParent = shareButton.parentElement;
  99. // Create placeholder elements to hold the buttons temporarily
  100. const placeholder1 = document.createElement('div');
  101. const placeholder2 = document.createElement('div');
  102. // Move the buttons to their respective placeholder positions
  103. saveButtonParent.insertBefore(placeholder1, saveButton);
  104. shareButtonParent.insertBefore(placeholder2, shareButton);
  105. shareButtonParent.insertBefore(saveButton, placeholder2);
  106. saveButtonParent.insertBefore(shareButton, placeholder1);
  107. // Remove the placeholders
  108. saveButtonParent.removeChild(placeholder1);
  109. shareButtonParent.removeChild(placeholder2);
  110. // Swap Save2 with a new Share2
  111. let save2Button = document.querySelector('tp-yt-paper-item[aria-disabled="false"] yt-formatted-string[role="option"][class="style-scope ytd-menu-service-item-renderer"]');
  112. if (save2Button) {
  113. let saveButtonParent = saveButton.parentElement;
  114. // Swap the positions of saveButton and shareButton in their respective parents
  115. saveButtonParent.insertBefore(shareButton, saveButton.nextSibling);
  116. // Create new HTML for the modified share2Button
  117. let newShare2ButtonHTML = '<ytd-menu-service-item-renderer class="style-scope ytd-menu-popup-renderer iron-selected" use-icons="" system-icons="" role="menuitem" tabindex="-1" aria-selected="true"><!--css-build:shady--><!--css-build:shady--><tp-yt-paper-item class="style-scope ytd-menu-service-item-renderer" style-target="host" role="option" tabindex="0" aria-disabled="false"><!--css-build:shady--><yt-icon class="style-scope ytd-menu-service-item-renderer"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; fill: currentcolor;"><svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M15 5.63 20.66 12 15 18.37V14h-1c-3.96 0-7.14 1-9.75 3.09 1.84-4.07 5.11-6.4 9.89-7.1l.86-.13V5.63M14 3v6C6.22 10.13 3.11 15.33 2 21c2.78-3.97 6.44-6 12-6v6l8-9-8-9z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon></div><yt-formatted-string class="style-scope ytd-menu-service-item-renderer">Share</yt-formatted-string><ytd-badge-supported-renderer class="style-scope ytd-menu-service-item-renderer" disable-upgrade="" hidden=""></ytd-badge-supported-renderer></tp-yt-paper-item></ytd-menu-service-item-renderer>';
  118. // Create a new DOM element from the HTML string
  119. const parser = new DOMParser();
  120. const newShare2Button = parser.parseFromString(newShare2ButtonHTML, "text/html").body.firstChild;
  121. // Add the newShare2Button after the saveButton
  122. saveButtonParent.insertBefore(newShare2Button, saveButton.nextSibling);
  123. }
  124. /*let newShareButton = '<button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading " aria-label="Share" style=""><div class="yt-spec-button-shape-next__icon" aria-hidden="true"><yt-icon style="width: 24px; height: 24px;"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; fill: currentcolor;"><svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M15 5.63 20.66 12 15 18.37V14h-1c-3.96 0-7.14 1-9.75 3.09 1.84-4.07 5.11-6.4 9.89-7.1l.86-.13V5.63M14 3v6C6.22 10.13 3.11 15.33 2 21c2.78-3.97 6.44-6 12-6v6l8-9-8-9z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon></div><div class="cbox yt-spec-button-shape-next__button-text-content"><span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Share</span></div><yt-touch-feedback-shape style="border-radius: inherit;"><div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true"><div class="yt-spec-touch-feedback-shape__stroke" style=""></div><div class="yt-spec-touch-feedback-shape__fill" style=""></div></div></yt-touch-feedback-shape></button>';
  125. let newSaveButton = '<button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading " aria-label="Save to playlist" style=""><div class="yt-spec-button-shape-next__icon" aria-hidden="true"><yt-icon style="width: 24px; height: 24px;"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; fill: currentcolor;"><svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M22 13h-4v4h-2v-4h-4v-2h4V7h2v4h4v2zm-8-6H2v1h12V7zM2 12h8v-1H2v1zm0 4h8v-1H2v1z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon></div><div class="cbox yt-spec-button-shape-next__button-text-content"><span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Save</span></div><yt-touch-feedback-shape style="border-radius: inherit;"><div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true"><div class="yt-spec-touch-feedback-shape__stroke" style=""></div><div class="yt-spec-touch-feedback-shape__fill" style=""></div></div></yt-touch-feedback-shape></button>';
  126. function createTrustedHTML(inputString) {
  127. const parser = new DOMParser();
  128. const doc = parser.parseFromString(inputString, "text/html");
  129. const fragment = doc.body;
  130. return fragment.outerHTML;
  131. }
  132. function escapeHTML(inputString) {
  133. return inputString.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  134. }
  135. newShareButton = createTrustedHTML(newShareButton);
  136. newSaveButton = createTrustedHTML(newSaveButton);
  137. shareButton.outerHTML = newSaveButton;
  138. saveButton.outerHTML = newShareButton;*/
  139. // To remove the old "Save" and "Share" buttons, uncomment the lines below:
  140. // saveButtonParent.removeChild(saveButton);
  141. // shareButtonParent.removeChild(shareButton);
  142. }
  143. console.info("%cYoutube Hide Paused Gradient by Sapioit: swapButtons: Finishing swapping.", "color: cyan");
  144. }
  145. function add_hover_tooltips() {
  146. /*var video_titles = document.getElementsByTagName("h3").getElementsByClassName("ytd-compact-video-renderer").getElementsByTagName("span");*/
  147. /*var video_titles = document.querySelector("span.ytd-compact-video-renderer");*/
  148. //var video_titles = document.getElementsByTagName("span").getElementsByClassName("ytd-compact-video-renderer");
  149. /*var video_titles = document.querySelectorAll("span.ytd-compact-video-renderer");*/
  150. var video_titles = document.querySelectorAll("span.ytd-compact-video-renderer, #video-title");
  151. for(var i=0; i<video_titles.length; i++){
  152. console.log(video_titles[i]);
  153. var current_title = video_titles[i].getAttribute("title");
  154. video_titles[i].setAttribute("alt", current_title);
  155. video_titles[i].setAttribute("data-title", current_title);
  156. video_titles[i].setAttribute("data-tooltip", current_title);
  157. }
  158. /*
  159. video_titles = document.querySelectorAll("#video-title");
  160. for(i=0; i<video_titles.length; i++){
  161. console.log(video_titles[i]);
  162. current_title = video_titles[i].getAttribute("title");
  163. video_titles[i].setAttribute("alt", current_title);
  164. video_titles[i].setAttribute("data-title", current_title);
  165. video_titles[i].setAttribute("data-tooltip", current_title);
  166. }
  167. */
  168. }
  169. window.onloadstart = function(){setTimeout(function () {
  170. add_hover_tooltips();
  171. }, 0.001*1000)}; //loads after 0.001 seconds
  172. window.addEventListener('keydown', function(e) {
  173. let play_button = document.querySelector('button.ytp-play-button');
  174. let valid_target = e.target === document.body || e.target === document.querySelector('#player-api');
  175. let pressed_space = e.keyCode === 32 || e.keyCode === 'Space'; // Space
  176. if (play_button && valid_target && pressed_space) {
  177. console.log("Youtube Hide Paused Gradient by Sapioit: Pressed pause or r###me.");
  178. e.preventDefault();
  179. playButton.click();
  180. }
  181. });
  182. if (typeof document.getElementsByClassName("ytp-gradient-top")[0] != "undefined") {
  183. document.getElementsByClassName("ytp-gradient-top")[0].style.display = 'none';
  184. }
  185. if (typeof document.getElementsByClassName("ytp-gradient-top")[0] != "undefined") {
  186. document.getElementsByClassName("ytp-gradient-top")[0].style.opacity = '0';
  187. }
  188. if (typeof document.getElementsByClassName("ytp-gradient-bottom")[0] != "undefined") {
  189. document.getElementsByClassName("ytp-gradient-bottom")[0].style.display = 'none';
  190. }
  191. if (typeof document.getElementsByClassName("ytp-gradient-bottom")[0] != "undefined") {
  192. document.getElementsByClassName("ytp-gradient-bottom")[0].style.opacity = '0';
  193. }
  194. /*
  195. document.getElementsByClassName("ytp-gradient-top")[0].style.display = 'none';
  196. document.getElementsByClassName("ytp-gradient-top")[0].style.opacity = '0';
  197. document.getElementsByClassName("ytp-gradient-bottom")[0].style.display = 'none';
  198. document.getElementsByClassName("ytp-gradient-bottom")[0].style.opacity = '0';
  199. */
  200. GM_addStyle('.ytp-caption-window-container { top: 2% !important; }');
  201. GM_addStyle('.ytp-gradient-top { display: none !important; opacity: 0 !important; }');
  202. GM_addStyle('.ytp-gradient-top { width: none !important; opacity: 0 !important; }');
  203. GM_addStyle('button div.ytp-autonav-toggle-button-container { display: none !important;}');
  204. GM_addStyle('[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  205. //GM_addStyle('.ytp-button[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  206. GM_addStyle('--ytd-engagement-panel-section-list-rendere { display: none !important;}');
  207. GM_addStyle('.ytp-time-display > span { padding: 3px; background: rgba(0, 0, 0, 0.5); }');
  208. //GM_addStyle('.ytd-thumbnail-overlay-time-status-renderen { transition-duration: 0s; }');
  209. window.onload = function(){setTimeout(function () {
  210. GM_addStyle('button div.ytp-autonav-toggle-button-container { display: none !important;}');
  211. GM_addStyle('[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  212. GM_addStyle('--ytd-engagement-panel-section-list-rendere { display: none !important;}');
  213. GM_addStyle('#video-title.ytd-compact-video-renderer { overflow: none !important;}');
  214. GM_addStyle('ytd-button-renderer > yt-button-shape > button[aria-label="Thanks"] { display: none !important; }');
  215. //GM_addStyle('ytd-button-renderer > yt-button-shape > button[aria-label="Save to playlist"] { display: inline-block !important; }');
  216. add_hover_tooltips();
  217. swapButtonsSaveShare();
  218. setTimeout(function () {
  219. swapButtonsSaveShare();
  220. }, 5*1000) //loads after 5 seconds
  221. //GM_addStyle('.ytd-thumbnail-overlay-time-status-renderen { transition-duration: 0s; }');
  222. }, 5*1000)}; //loads after 5 seconds
  223. function repeaterFunction(){
  224. if ( title_changed(8) ){
  225. return;
  226. }
  227. GM_addStyle('button div.ytp-autonav-toggle-button-container { display: none !important;}');
  228. GM_addStyle('[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  229. GM_addStyle('--ytd-engagement-panel-section-list-rendere { display: none !important;}');
  230. add_hover_tooltips();
  231. swapButtonsSaveShare();
  232. setTimeout(repeaterFunction, 30*1000); //loads every 30 seconds
  233. }
  234. repeaterFunction();
  235. GM_addStyle("span[data-tooltip]:before { z-index:301; content: attr(data-tooltip);  position: absolute;  opacity: 0;  padding: 10px;  background: black;  color: white;}    span[data-tooltip]:hover:before {  opacity: 1;} ");
  236. GM_addStyle(".yt-simple-endpoint[title]:before { z-index:301; content: attr(title);  position: absolute;  opacity: 0;  padding: 10px;  background: black;  color: white;}    .yt-simple-endpoint[title]:hover:before {  opacity: 1 !important;} ");
  237. // <ytd-engagement-panel-section-list-renderer class="style-scope ytd-watch-flexy" visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED">GM_addStyle(a);