Progress Bar Tweaks /w Chapters Visible

/* Start JS 23px notch, buffer/ played colors, 10px height */
// First, inject the CSS
const style = document.createElement('style');
style.textContent = `
.custom-youtube-notch {
    position: absolute;
    width: 23px;
    height: 23px;
    background-color: black;
    border: 2px solid white;
    border-radius: 50%;
    z-index: 999999;
    pointer-events: none;
    transform: translateX(-50%) translateY(-50%);
}

/* Make buffered progress hot pink */
.html5-load-progress, .ytp-load-progress {
    background-color: black !important;
}

/* Make played progress indigo */
.html5-play-progress, .ytp-play-progress {
    background-color: indigo !important;
}

/* Make unplayed progress yellow */
.ytp-progress-bar {
    background-color: yellow !important;
}

/* Make sure the hover preview also matches indigo */
.html5-hover-progress, .ytp-hover-progress {
    background-color: indigo !important;
}

/* Ensure proper layering */
.html5-progress-list, .ytp-progress-list {
    z-index: 99998 !important;
}

/* Make progress bar thicker */
.html5-progress-bar-container, .ytp-progress-bar-container {
    height: 10px !important;
}

.html5-progress-bar, .ytp-progress-bar {
    height: 10px !important;
}

.html5-progress-list, .ytp-progress-list {
    height: 10px !important;
}

.ytp-progress-bar .ytp-play-progress,
.ytp-progress-bar .ytp-load-progress,
.ytp-progress-bar .ytp-hover-progress {
    height: 10px !important;
}

/* Update these styles in your JavaScript */
/* Make played progress indigo */
.ytp-progress-bar .ytp-play-progress,
.ytp-progress-bar-container .ytp-play-progress,
.ytp-progress-bar .ytp-play-progress.ytp-swatch-background-color {
    background: indigo !important;
    background-color: indigo !important;
}

/* Adjust the scrubber container for the thicker bar */
.html5-scrubber-container, .ytp-scrubber-container {
    height: 10px !important;
}

/* When hovering, make it even thicker */
.ytp-progress-bar-container:hover {
    height: 15px !important;
}

.ytp-progress-bar-container:hover .ytp-progress-bar,
.ytp-progress-bar-container:hover .ytp-progress-list,
.ytp-progress-bar-container:hover .ytp-play-progress,
.ytp-progress-bar-container:hover .ytp-load-progress,
.ytp-progress-bar-container:hover .ytp-hover-progress {
    height: 15px !important;
}

/* Make chapter markers visible */
.ytp-chapter-hover-container {
    display: block !important;
    opacity: 1 !important;
}

.ytp-progress-bar .ytp-chapter-marker {
    opacity: 1 !important;
    display: block !important;
}

.ytp-progress-bar .ytp-chapter-marker-decoration {
    opacity: 1 !important;
    display: block !important;
    background-color: white !important;
    width: 2px !important;
    height: 100% !important;
}

/* Style for chapter titles */
.ytp-chapter-title-content {
    color: white !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    font-size: 12px !important;
}

/* Make sure chapter markers are always visible */
.ytp-progress-bar-container .ytp-progress-bar .ytp-chapter-marker {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Enhance chapter marker visibility */
.ytp-progress-bar .ytp-chapter-marker::before {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: white !important;
    opacity: 1 !important;
}

`;
document.head.appendChild(style);

function enforceProgressBarColor() {
    const playProgress = document.querySelector('.ytp-play-progress');
    if (playProgress) {
        playProgress.style.setProperty('background', 'indigo', 'important');
        playProgress.style.setProperty('background-color', 'indigo', 'important');
    }
    if (progressBar) {
        progressBar.style.setProperty('background', 'yellow', 'important');
        progressBar.style.setProperty('background-color', 'yellow', 'important');
    }
}

function enforceChapterVisibility() {
    const chapterMarkers = document.querySelectorAll('.ytp-chapter-marker');
    chapterMarkers.forEach(marker => {
        marker.style.setProperty('opacity', '1', 'important');
        marker.style.setProperty('display', 'block', 'important');
    });
}

// Function to create or update the notch
function updateNotch() {
    let progressBar = document.querySelector('.ytp-progress-bar');
    let player = document.querySelector('.html5-main-video');
    let progressBarContainer = document.querySelector('.ytp-progress-bar-container');

    if (!progressBar || !player || !progressBarContainer) return;

    // Create notch if it doesn't exist
    let notch = document.querySelector('.custom-youtube-notch');
    if (!notch) {
        notch = document.createElement('div');
        notch.className = 'custom-youtube-notch';
        progressBarContainer.appendChild(notch);
    }

    // Calculate position
    let progress = (player.currentTime / player.duration) * 100;
    let progressBarRect = progressBar.getBoundingClientRect();
    let position = (progressBarRect.width * progress) / 100;

    // Update notch position
    notch.style.left = `${position}px`;
    notch.style.top = '50%';
    notch.style.display = 'block';
}

// Function to start the interval
function startNotchUpdate() {
    // Initial update
    updateNotch();
    enforceProgressBarColor();
    enforceChapterVisibility();

    // Set interval for updates
    // Set interval for updates
    return setInterval(() => {
        updateNotch();
        enforceChapterVisibility();
    }, 1000);

// Function to initialize and handle page changes
function initialize() {
    let interval;

    // Observer for detecting player load
    const observer = new MutationObserver((mutations) => {
        if (document.querySelector('.html5-main-video')) {
            if (!interval) {
                interval = startNotchUpdate();
            }
        }
    });

    // Start observing
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Handle navigation (for YouTube's SPA nature)
    let lastUrl = location.href;
    new MutationObserver(() => {
        const url = location.href;
        if (url !== lastUrl) {
            lastUrl = url;
            clearInterval(interval);
            interval = startNotchUpdate();
        }
    }).observe(document.body, {subtree: true, childList: true});
}

// Start the script
initialize();
/* End JS 23px notch, buffer/ played colors, 10px height */