// Observe changes to the player bar
const observer = new MutationObserver(() => {
    const playerBar = document.querySelector('ytmusic-player-bar');
    const titleElement = playerBar?.querySelector('.title');
    const videoMode = document.querySelector('ytmusic-player[player-ui-state=FULLSCREEN][video-mode]');

    if (!playerBar || !titleElement) return;

    // Check if we're in fullscreen mode
    if (document.fullscreenElement) {
        // Create or update a duplicate title element above the player bar
        let duplicateTitle = document.getElementById('fullscreen-duplicate-title');
        if (!duplicateTitle) {
            duplicateTitle = document.createElement('div');
            duplicateTitle.id = 'fullscreen-duplicate-title';
            duplicateTitle.style.position = 'absolute';
            duplicateTitle.style.bottom = '124px'; /* Adjust height above player bar */
            duplicateTitle.style.left = '54%';
            duplicateTitle.style.fontSize = '5.2em';
            duplicateTitle.style.color = '#ffffff';
            duplicateTitle.style.opacity = '0.6';
            duplicateTitle.style.textAlign = 'left';
            duplicateTitle.style.textShadow = '0px 0px 5px rgba(0,0,0,0.8)';
            duplicateTitle.style.zIndex = '101';
            duplicateTitle.style.pointerEvents = 'none';
            if(!videoMode) {
              document.body.appendChild(duplicateTitle);
            }
        }
        duplicateTitle.textContent = titleElement.textContent; // Update text
        console.log(duplicateTitle);
    } else {
        // Remove duplicate title if not in fullscreen
        const duplicateTitle = document.getElementById('fullscreen-duplicate-title');
        if (duplicateTitle) duplicateTitle.remove();
    }
});

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