Advertisement
alien_fx_fiend

Original Version /w Missing Chapters Marked

Dec 29th, 2024
27
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.02 KB | Source Code | 0 0
  1. /* Start JS 23px notch, buffer/ played colors, 10px height */
  2. // First, inject the CSS
  3. const style = document.createElement('style');
  4. style.textContent = `
  5. .custom-youtube-notch {
  6.     position: absolute;
  7.     width: 23px;
  8.     height: 23px;
  9.     background-color: black;
  10.     border: 2px solid white;
  11.     border-radius: 50%;
  12.     z-index: 999999;
  13.     pointer-events: none;
  14.     transform: translateX(-50%) translateY(-50%);
  15. }
  16.  
  17. /* Make buffered progress hot pink */
  18. .html5-load-progress, .ytp-load-progress {
  19.     background-color: black !important;
  20. }
  21.  
  22. /* Make played progress indigo */
  23. .html5-play-progress, .ytp-play-progress {
  24.     background-color: indigo !important;
  25. }
  26.  
  27. /* Make unplayed progress yellow */
  28. .ytp-progress-bar {
  29.     background-color: yellow !important;
  30. }
  31.  
  32. /* Make sure the hover preview also matches indigo */
  33. .html5-hover-progress, .ytp-hover-progress {
  34.     background-color: indigo !important;
  35. }
  36.  
  37. /* Ensure proper layering */
  38. .html5-progress-list, .ytp-progress-list {
  39.     z-index: 99998 !important;
  40. }
  41.  
  42. /* Make progress bar thicker */
  43. .html5-progress-bar-container, .ytp-progress-bar-container {
  44.     height: 10px !important;
  45. }
  46.  
  47. .html5-progress-bar, .ytp-progress-bar {
  48.     height: 10px !important;
  49. }
  50.  
  51. .html5-progress-list, .ytp-progress-list {
  52.     height: 10px !important;
  53. }
  54.  
  55. .ytp-progress-bar .ytp-play-progress,
  56. .ytp-progress-bar .ytp-load-progress,
  57. .ytp-progress-bar .ytp-hover-progress {
  58.     height: 10px !important;
  59. }
  60.  
  61. /* Update these styles in your JavaScript */
  62. /* Make played progress indigo */
  63. .ytp-progress-bar .ytp-play-progress,
  64. .ytp-progress-bar-container .ytp-play-progress,
  65. .ytp-progress-bar .ytp-play-progress.ytp-swatch-background-color {
  66.     background: indigo !important;
  67.     background-color: indigo !important;
  68. }
  69.  
  70. /* Adjust the scrubber container for the thicker bar */
  71. .html5-scrubber-container, .ytp-scrubber-container {
  72.     height: 10px !important;
  73. }
  74.  
  75. /* When hovering, make it even thicker */
  76. .ytp-progress-bar-container:hover {
  77.     height: 15px !important;
  78. }
  79.  
  80. .ytp-progress-bar-container:hover .ytp-progress-bar,
  81. .ytp-progress-bar-container:hover .ytp-progress-list,
  82. .ytp-progress-bar-container:hover .ytp-play-progress,
  83. .ytp-progress-bar-container:hover .ytp-load-progress,
  84. .ytp-progress-bar-container:hover .ytp-hover-progress {
  85.     height: 15px !important;
  86. }
  87. `;
  88. document.head.appendChild(style);
  89.  
  90. function enforceProgressBarColor() {
  91.     const playProgress = document.querySelector('.ytp-play-progress');
  92.     if (playProgress) {
  93.         playProgress.style.setProperty('background', 'indigo', 'important');
  94.         playProgress.style.setProperty('background-color', 'indigo', 'important');
  95.     }
  96.     if (progressBar) {
  97.         progressBar.style.setProperty('background', 'yellow', 'important');
  98.         progressBar.style.setProperty('background-color', 'yellow', 'important');
  99.     }
  100. }
  101.  
  102. // Function to create or update the notch
  103. function updateNotch() {
  104.     let progressBar = document.querySelector('.ytp-progress-bar');
  105.     let player = document.querySelector('.html5-main-video');
  106.     let progressBarContainer = document.querySelector('.ytp-progress-bar-container');
  107.    
  108.     if (!progressBar || !player || !progressBarContainer) return;
  109.  
  110.     // Create notch if it doesn't exist
  111.     let notch = document.querySelector('.custom-youtube-notch');
  112.     if (!notch) {
  113.         notch = document.createElement('div');
  114.         notch.className = 'custom-youtube-notch';
  115.         progressBarContainer.appendChild(notch);
  116.     }
  117.  
  118.     // Calculate position
  119.     let progress = (player.currentTime / player.duration) * 100;
  120.     let progressBarRect = progressBar.getBoundingClientRect();
  121.     let position = (progressBarRect.width * progress) / 100;
  122.  
  123.     // Update notch position
  124.     notch.style.left = `${position}px`;
  125.     notch.style.top = '50%';
  126.     notch.style.display = 'block';
  127. }
  128.  
  129. // Function to start the interval
  130. function startNotchUpdate() {
  131.     // Initial update
  132.     updateNotch();
  133.     enforceProgressBarColor();
  134.    
  135.     // Set interval for updates
  136.     return setInterval(updateNotch, 1000);
  137. }
  138.  
  139. // Function to initialize and handle page changes
  140. function initialize() {
  141.     let interval;
  142.  
  143.     // Observer for detecting player load
  144.     const observer = new MutationObserver((mutations) => {
  145.         if (document.querySelector('.html5-main-video')) {
  146.             if (!interval) {
  147.                 interval = startNotchUpdate();
  148.             }
  149.         }
  150.     });
  151.  
  152.     // Start observing
  153.     observer.observe(document.body, {
  154.         childList: true,
  155.         subtree: true
  156.     });
  157.  
  158.     // Handle navigation (for YouTube's SPA nature)
  159.     let lastUrl = location.href;
  160.     new MutationObserver(() => {
  161.         const url = location.href;
  162.         if (url !== lastUrl) {
  163.             lastUrl = url;
  164.             clearInterval(interval);
  165.             interval = startNotchUpdate();
  166.         }
  167.     }).observe(document.body, {subtree: true, childList: true});
  168. }
  169.  
  170. // Start the script
  171. initialize();
  172. /* End JS 23px notch, buffer/ played colors, 10px height */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement