API tools faq
paste
Advertisement
alien_fx_fiend

YouTube UserScript /w RainbowGradient and Indigo Notch Outer-Glow *FINAL*

alien_fx_fiend
Jan 2nd, 2025 (edited)
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 13.64 KB | Source Code | 0 0
raw download clone embed print report
  1. Can you modify the following YouTube UserScript ProgressBar to display the played progress as a Rainbow-Colored Gradient instead of plain Indigo Background Color? Also an Indigo Outer-Glow for the Player Notch would be ideal. Here's the full code, show modified changes only and code comment hints on where to insert them exactly.
  2. /* OLD SCRIPT INDIGO NO OUTERGLOW SEE BELOW FOR NEW VERSION (BKP FOR POSTERITY) Start JS 23px notch, buffer/ played colors, 10px height */
  3. // First, inject the CSS
  4. const style = document.createElement('style');
  5. style.textContent = `
  6. .custom-youtube-notch {
  7.    position: absolute;
  8.    width: 23px;
  9.    height: 23px;
  10.    background-color: black;
  11.    border: 2px solid white;
  12.    border-radius: 50%;
  13.    z-index: 999999;
  14.    pointer-events: none;
  15.    transform: translateX(-50%) translateY(-50%);
  16. }
  17.  
  18. /* Make buffered progress hot pink */
  19. .html5-load-progress, .ytp-load-progress {
  20.    background-color: black !important;
  21. }
  22.  
  23. /* Make played progress indigo */
  24. .html5-play-progress, .ytp-play-progress {
  25.    background-color: indigo !important;
  26. }
  27.  
  28. /* Style the chapter mark separators using ::before */
  29. .ytp-chapters-container::before,
  30. .ytp-chapter-hover-container::before {
  31.    content: ''; /* Required for pseudo-elements */
  32.    position: absolute;
  33.    top: 0;
  34.    bottom: 0;
  35.    left: 0; /* Position the separator at the left edge */
  36.    width: 4px; /* Adjust the width of the separator */
  37.    background-color: green; /* Adjust the color of the separator */
  38.    z-index: 1; /* Ensure it's above the background */
  39. }
  40.  
  41. /* Remove the border-left from the containers */
  42. .ytp-chapters-container, .ytp-chapter-hover-container {
  43.     z-index: 9999999 !important;
  44.     position: relative;
  45.     left: 0;
  46.     height: 100%;
  47.     /* REMOVE THIS LINE: border-left: 2px solid black !important; */
  48. }
  49.  
  50. /* .ytp-chapters-container, .ytp-chapter-hover-container, .ytp-chapters, .ytp-chapter {
  51. z-index: 9999999 !important;
  52. position: relative !important;
  53. left: 0 !important;
  54. height: 100% !important;
  55. border-left: 4px solid black !important;
  56. opacity: 1.0 !important;
  57. } */
  58.  
  59. /* Make unplayed progress yellow */
  60. .ytp-progress-bar-container {
  61.     background-color: yellow !important;
  62.     opacity: 1.0 !important;
  63.     /*opacity: 1.0 0.6 !important;*/
  64. }
  65.  
  66. /* Make sure the hover preview also matches indigo */
  67. .html5-hover-progress, .ytp-hover-progress {
  68.     background-color: indigo !important;
  69. }
  70.  
  71. /* Ensure proper layering */
  72. .html5-progress-list, .ytp-progress-list {
  73.     z-index: 99998 !important;
  74. }
  75.  
  76. /* Make progress bar thicker */
  77. .html5-progress-bar-container, .ytp-progress-bar-container {
  78.     height: 10px !important;
  79. }
  80.  
  81. .html5-progress-bar, .ytp-progress-bar {
  82.     height: 10px !important;
  83. }
  84.  
  85. .html5-progress-list, .ytp-progress-list {
  86.     height: 10px !important;
  87. }
  88.  
  89. .ytp-progress-bar .ytp-play-progress,
  90. .ytp-progress-bar .ytp-load-progress,
  91. .ytp-progress-bar .ytp-hover-progress {
  92.     height: 10px !important;
  93. }
  94.  
  95. /* Update these styles in your JavaScript */
  96. /* Make played progress indigo */
  97. .ytp-progress-bar .ytp-play-progress,
  98. .ytp-progress-bar-container .ytp-play-progress,
  99. .ytp-progress-bar .ytp-play-progress.ytp-swatch-background-color {
  100.     background: indigo !important;
  101.     background-color: indigo !important;
  102. }
  103.  
  104. /* Adjust the scrubber container for the thicker bar */
  105. .html5-scrubber-container, .ytp-scrubber-container {
  106.     height: 10px !important;
  107. }
  108.  
  109. /* When hovering, make it even thicker */
  110. .ytp-progress-bar-container:hover {
  111.     height: 15px !important;
  112. }
  113.  
  114. .ytp-progress-bar-container:hover .ytp-progress-bar,
  115. .ytp-progress-bar-container:hover .ytp-progress-list,
  116. .ytp-progress-bar-container:hover .ytp-play-progress,
  117. .ytp-progress-bar-container:hover .ytp-load-progress,
  118. .ytp-progress-bar-container:hover .ytp-hover-progress {
  119.     height: 15px !important;
  120. }
  121. `;
  122. document.head.appendChild(style);
  123.  
  124. function enforceProgressBarColor() {
  125.     const playProgress = document.querySelector('.ytp-play-progress');
  126.     if (playProgress) {
  127.         playProgress.style.setProperty('background', 'indigo', 'important');
  128.         playProgress.style.setProperty('background-color', 'indigo', 'important');
  129.     }
  130.     /*if (progressBar) {
  131.          progressBar.style.setProperty('background', 'yellow', 'important');
  132.         progressBar.style.setProperty('background-color', 'yellow', 'important');
  133.  
  134. progressBar.style.setProperty('opacity', '1.0', 'important');
  135.     }*/
  136. }
  137.  
  138. // Function to create or update the notch
  139. function updateNotch() {
  140.     let progressBar = document.querySelector('.ytp-progress-bar');
  141.     let player = document.querySelector('.html5-main-video');
  142.     let progressBarContainer = document.querySelector('.ytp-progress-bar-container');
  143.    
  144.     if (!progressBar || !player || !progressBarContainer) return;
  145.  
  146.     // Create notch if it doesn't exist
  147.     let notch = document.querySelector('.custom-youtube-notch');
  148.     if (!notch) {
  149.         notch = document.createElement('div');
  150.         notch.className = 'custom-youtube-notch';
  151.         progressBarContainer.appendChild(notch);
  152.     }
  153.  
  154.     // Calculate position
  155.     let progress = (player.currentTime / player.duration) * 100;
  156.     let progressBarRect = progressBar.getBoundingClientRect();
  157.     let position = (progressBarRect.width * progress) / 100;
  158.  
  159.     // Update notch position
  160.     notch.style.left = `${position}px`;
  161.     notch.style.top = '50%';
  162.     notch.style.display = 'block';
  163. }
  164.  
  165. // Function to start the interval
  166. function startNotchUpdate() {
  167.     // Initial update
  168.     updateNotch();
  169.     //enforceProgressBarColor();
  170.    
  171.     // Set interval for updates
  172.     return setInterval(updateNotch, 1000);
  173. }
  174.  
  175. // Function to initialize and handle page changes
  176. function initialize() {
  177.     let interval;
  178.  
  179.     // Observer for detecting player load
  180.     const observer = new MutationObserver((mutations) => {
  181.         if (document.querySelector('.html5-main-video')) {
  182.             if (!interval) {
  183.                 interval = startNotchUpdate();
  184.             }
  185.         }
  186.     });
  187.  
  188.     // Start observing
  189.     observer.observe(document.body, {
  190.         childList: true,
  191.         subtree: true
  192.     });
  193.  
  194.     // Handle navigation (for YouTube's SPA nature)
  195.     let lastUrl = location.href;
  196.     new MutationObserver(() => {
  197.         const url = location.href;
  198.         if (url !== lastUrl) {
  199.             lastUrl = url;
  200.             clearInterval(interval);
  201.             interval = startNotchUpdate();
  202.         }
  203.     }).observe(document.body, {subtree: true, childList: true});
  204. }
  205.  
  206. // Start the script
  207. initialize();
  208. /* End JS 23px notch, buffer/ played colors, 10px height */
  209.  
  210. ######################################################################################
  211. ######################################################################################
  212. ##  endroughxfer-urldump #1#
  213. ##  <EOF><EOF> ***UPDATED SCRIPT BELOW***
  214. ######################################################################################
  215. ######################################################################################
  216.  
  217. ```javascript
  218. /* UPDATED NEW SCRIPT !!! Start JS 23px notch, buffer/ played colors, 10px height */
  219. // First, inject the CSS
  220. const style = document.createElement('style');
  221. style.textContent = `
  222. .custom-youtube-notch {
  223.     position: absolute;
  224.     width: 23px;
  225.     height: 23px;
  226.     background-color: black;
  227.     border: 2px solid white;
  228.     border-radius: 50%;
  229.     z-index: 999999;
  230.     pointer-events: none;
  231.     box-shadow: 0 0 8px indigo; /* Add outer glow */
  232.     transform: translateX(-50%) translateY(-50%);
  233. }
  234.  
  235. /* Make buffered progress hot pink */
  236. .html5-load-progress, .ytp-load-progress {
  237.     background-color: black !important;
  238. }
  239.  
  240. /* Make played progress rainbow gradient */
  241. .html5-play-progress, .ytp-play-progress {
  242.     background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Rainbow gradient */
  243.     background-color: transparent !important; /* Override any solid background-color */
  244. }
  245.  
  246. /* Style the chapter mark separators using ::before */
  247. .ytp-chapters-container::before,
  248. .ytp-chapter-hover-container::before {
  249.     content: ''; /* Required for pseudo-elements */
  250.     position: absolute;
  251.     top: 0;
  252.     bottom: 0;
  253.     left: 0; /* Position the separator at the left edge */
  254.     width: 4px; /* Adjust the width of the separator */
  255.     background-color: green; /* Adjust the color of the separator */
  256.     z-index: 1; /* Ensure it's above the background */
  257. }
  258.  
  259. /* Remove the border-left from the containers */
  260. .ytp-chapters-container, .ytp-chapter-hover-container {
  261.     z-index: 9999999 !important;
  262.     position: relative;
  263.     left: 0;
  264.     height: 100%;
  265.     /* REMOVE THIS LINE: border-left: 2px solid black !important; */
  266. }
  267.  
  268. /* .ytp-chapters-container, .ytp-chapter-hover-container, .ytp-chapters, .ytp-chapter {
  269. z-index: 9999999 !important;
  270. position: relative !important;
  271. left: 0 !important;
  272. height: 100% !important;
  273. border-left: 4px solid black !important;
  274. opacity: 1.0 !important;
  275. } */
  276.  
  277. /* Make unplayed progress yellow */
  278. .ytp-progress-bar-container {
  279.     background-color: yellow !important;
  280.     opacity: 1.0 !important;
  281.     /*opacity: 1.0 0.6 !important;*/
  282. }
  283.  
  284. /* Make sure the hover preview also matches indigo */
  285. .html5-hover-progress, .ytp-hover-progress {
  286.     background-color: indigo !important;
  287. }
  288.  
  289. /* Ensure proper layering */
  290. .html5-progress-list, .ytp-progress-list {
  291.     z-index: 99998 !important;
  292. }
  293.  
  294. /* Make progress bar thicker */
  295. .html5-progress-bar-container, .ytp-progress-bar-container {
  296.     height: 10px !important;
  297. }
  298.  
  299. .html5-progress-bar, .ytp-progress-bar {
  300.     height: 10px !important;
  301. }
  302.  
  303. .html5-progress-list, .ytp-progress-list {
  304.     height: 10px !important;
  305. }
  306.  
  307. .ytp-progress-bar .ytp-play-progress,
  308. .ytp-progress-bar .ytp-load-progress,
  309. .ytp-progress-bar .ytp-hover-progress {
  310.     height: 10px !important;
  311. }
  312.  
  313. /* Update these styles in your JavaScript */
  314. /* Make played progress rainbow gradient */
  315. .ytp-progress-bar .ytp-play-progress,
  316. .ytp-progress-bar-container .ytp-play-progress,
  317. .ytp-progress-bar .ytp-play-progress.ytp-swatch-background-color {
  318.     background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) !important; /* Rainbow gradient */
  319.     background-color: transparent !important; /* Override any solid background-color */
  320. }
  321.  
  322. /* Adjust the scrubber container for the thicker bar */
  323. .html5-scrubber-container, .ytp-scrubber-container {
  324.     height: 10px !important;
  325. }
  326.  
  327. /* When hovering, make it even thicker */
  328. .ytp-progress-bar-container:hover {
  329.     height: 15px !important;
  330. }
  331.  
  332. .ytp-progress-bar-container:hover .ytp-progress-bar,
  333. .ytp-progress-bar-container:hover .ytp-progress-list,
  334. .ytp-progress-bar-container:hover .ytp-play-progress,
  335. .ytp-progress-bar-container:hover .ytp-load-progress,
  336. .ytp-progress-bar-container:hover .ytp-hover-progress {
  337.     height: 15px !important;
  338. }
  339. `;
  340. document.head.appendChild(style);
  341.  
  342. function enforceProgressBarColor() {
  343.     const playProgress = document.querySelector('.ytp-play-progress');
  344.     if (playProgress) {
  345.         playProgress.style.setProperty('background', 'linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)', 'important');
  346.         playProgress.style.setProperty('background-color', 'transparent', 'important');
  347.     }
  348.     /*if (progressBar) {
  349.          progressBar.style.setProperty('background', 'yellow', 'important');
  350.         progressBar.style.setProperty('background-color', 'yellow', 'important');
  351.  
  352. progressBar.style.setProperty('opacity', '1.0', 'important');
  353.     }*/
  354. }
  355.  
  356. // Function to create or update the notch
  357. function updateNotch() {
  358.     let progressBar = document.querySelector('.ytp-progress-bar');
  359.     let player = document.querySelector('.html5-main-video');
  360.     let progressBarContainer = document.querySelector('.ytp-progress-bar-container');
  361.  
  362.     if (!progressBar || !player || !progressBarContainer) return;
  363.  
  364.     // Create notch if it doesn't exist
  365.     let notch = document.querySelector('.custom-youtube-notch');
  366.     if (!notch) {
  367.         notch = document.createElement('div');
  368.         notch.className = 'custom-youtube-notch';
  369.         progressBarContainer.appendChild(notch);
  370.     }
  371.  
  372.     // Calculate position
  373.     let progress = (player.currentTime / player.duration) * 100;
  374.     let progressBarRect = progressBar.getBoundingClientRect();
  375.     let position = (progressBarRect.width * progress) / 100;
  376.  
  377.     // Update notch position
  378.     notch.style.left = `${position}px`;
  379.     notch.style.top = '50%';
  380.     notch.style.display = 'block';
  381. }
  382.  
  383. // Function to start the interval
  384. function startNotchUpdate() {
  385.     // Initial update
  386.     updateNotch();
  387.     //enforceProgressBarColor();
  388.  
  389.     // Set interval for updates
  390.     return setInterval(updateNotch, 1000);
  391. }
  392.  
  393. // Function to initialize and handle page changes
  394. function initialize() {
  395.     let interval;
  396.  
  397.     // Observer for detecting player load
  398.     const observer = new MutationObserver((mutations) => {
  399.         if (document.querySelector('.html5-main-video')) {
  400.             if (!interval) {
  401.                 interval = startNotchUpdate();
  402.             }
  403.         }
  404.     });
  405.  
  406.     // Start observing
  407.     observer.observe(document.body, {
  408.         childList: true,
  409.         subtree: true
  410.     });
  411.  
  412.     // Handle navigation (for YouTube's SPA nature)
  413.     let lastUrl = location.href;
  414.     new MutationObserver(() => {
  415.         const url = location.href;
  416.         if (url !== lastUrl) {
  417.             lastUrl = url;
  418.             clearInterval(interval);
  419.             interval = startNotchUpdate();
  420.         }
  421.     }).observe(document.body, {subtree: true, childList: true});
  422. }
  423.  
  424. // Start the script
  425. initialize();
  426. /* End JS 23px notch, buffer/ played colors, 10px height */
  427. ```
Tags: #even-better-eyecandy!!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!