☰

YouTube BPM Display

Displays the BPM of a song on YouTube using Spotify API

// ==UserScript==
// @name         YouTube BPM Display
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Displays the BPM of a song on YouTube using Spotify API
// @author       Sergi0
// @match        https://www.youtube.com/*
// @grant        GM_xmlhttpRequest
// @connect      api.spotify.com
// @icon         https://www.freeiconspng.com/uploads/youtube-icon-app-logo-png-9.png
// @license      MIT
// @homepageURL  https://greasyfork.org/es/scripts/511311
// ==/UserScript==

(function() {
    'use strict';

    // 1. Spotify API credentials
    const CLIENT_ID = 'YOUR_SPOTIFY_CLIENT_ID'; // Replace with your Client ID
    const CLIENT_SECRET = 'YOUR_SPOTIFY_CLIENT_SECRET'; // Replace with your Client Secret
    let accessToken = '';
    let lastTitle = '';
    let lastUrl = '';

    // 2. Function to get Spotify access token
    function getAccessToken(callback) {
        if (CLIENT_ID.includes("YOUR_SPOTIFY") || CLIENT_SECRET.includes("YOUR_SPOTIFY")) {
            setTimeout(() => {
                displaySongInfo("Please provide your Spotify API keys to use this script.");
            }, 2000);
            return;
        }

        const authString = btoa(`${CLIENT_ID}:${CLIENT_SECRET}`);
        GM_xmlhttpRequest({
            method: 'POST',
            url: 'https://accounts.spotify.com/api/token',
            headers: {
                'Authorization': `Basic ${authString}`,
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: 'grant_type=client_credentials',
            onload: function(response) {
                if (response.status === 200) {
                    const data = JSON.parse(response.responseText);
                    accessToken = data.access_token;
                    callback();
                } else {
                    setTimeout(() => {
                        displaySongInfo("Invalid Spotify API keys. Please provide valid keys.");
                    }, 2000);
                }
            }
        });
    }

    // Function to detect if full screen mode is active
    function isFullScreen() {
        return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
    }

    // Function to move song-info based on full-screen state
    function handleFullScreenChange() {
        let songInfoElement = document.getElementById('song_info');
        if (songInfoElement) {
            if (isFullScreen()) {
                const fullScreenContainer = document.querySelector('#player-full-bleed-container');
                if (fullScreenContainer) {
                    songInfoElement.remove();
                    fullScreenContainer.appendChild(songInfoElement);
                }
            } else {
                const playerElement = document.querySelector('#player');
                if (playerElement) {
                    songInfoElement.remove();
                    playerElement.appendChild(songInfoElement);
                }
            }
        }
    }

    // 3. Function to search track on Spotify
    function searchTrack(trackName, callback) {
        const query = encodeURIComponent(trackName);
        const apiUrl = `https://api.spotify.com/v1/search?q=${query}&type=track&limit=1`;

        GM_xmlhttpRequest({
            method: 'GET',
            url: apiUrl,
            headers: {
                'Authorization': `Bearer ${accessToken}`
            },
            onload: function(response) {
                if (response.status === 200) {
                    const data = JSON.parse(response.responseText);
                    if (data.tracks.items.length > 0) {
                        const track = data.tracks.items[0];
                        callback(track);
                    } else {
                        displaySongInfo("No track found.");
                    }
                } else {
                    displaySongInfo("Error in search request.");
                }
            }
        });
    }

    // 4. Function to get track features (including BPM)
    function getTrackFeatures(trackId, callback) {
        const apiUrl = `https://api.spotify.com/v1/audio-features/${trackId}`;

        GM_xmlhttpRequest({
            method: 'GET',
            url: apiUrl,
            headers: {
                'Authorization': `Bearer ${accessToken}`
            },
            onload: function(response) {
                if (response.status === 200) {
                    const data = JSON.parse(response.responseText);
                    callback(data.tempo);
                } else {
                    displaySongInfo("Error fetching track features.");
                }
            }
        });
    }

    // 5. Function to display BPM and track information
    function displaySongInfo(message) {
        let existingElement = document.getElementById('song_info');
        if (existingElement) {
            existingElement.remove();
        }

        let songInfoElement = document.createElement('div');
        songInfoElement.id = 'song_info';
        songInfoElement.style.position = 'absolute';
        songInfoElement.style.top = '10px';
        songInfoElement.style.right = '10px';
        songInfoElement.style.backgroundColor = '#ff0000';
        songInfoElement.style.color = 'white';
        songInfoElement.style.padding = '15px';
        songInfoElement.style.borderRadius = '5px';
        songInfoElement.style.fontWeight = 'bold';
        songInfoElement.style.fontSize = '20px';
        songInfoElement.style.textAlign = 'center';
        songInfoElement.innerText = message;

        const playerElement = document.querySelector('#player');
        if (playerElement) {
            playerElement.appendChild(songInfoElement);
        } else {
            console.error("Could not find the player element to add BPM.");
        }

        handleFullScreenChange();
    }

    // 6. Function to update BPM and track information
    function updateSongInfo(bpm, track) {
        let existingElement = document.getElementById('song_info');
        if (existingElement) {
            existingElement.innerText = '';
        } else {
            displaySongInfo('');
            existingElement = document.getElementById('song_info');
        }

        let bpmElement = document.createElement('div');
        bpmElement.id = 'bpm';
        bpmElement.style.fontSize = '60px';
        bpmElement.innerText = `BPM: ${bpm ? bpm.toFixed(2) : 'Not available'}`;

        let artistElement = document.createElement('div');
        artistElement.id = 'artist';
        artistElement.style.fontSize = '20px';
        artistElement.innerText = `Artist: ${track.artists[0].name}`;

        let songElement = document.createElement('div');
        songElement.id = 'song';
        songElement.style.fontSize = '20px';
        songElement.innerText = `Song: ${track.name}`;

        existingElement.appendChild(bpmElement);
        existingElement.appendChild(artistElement);
        existingElement.appendChild(songElement);
    }

    // 7. Main function
    function main() {
        const videoTitleElement = document.querySelector('#title h1');
        if (videoTitleElement) {
            const titleText = videoTitleElement.innerText.trim();
            if (titleText !== lastTitle) {
                lastTitle = titleText;
                searchTrack(titleText, function(track) {
                    if (track) {
                        getTrackFeatures(track.id, function(bpm) {
                            updateSongInfo(bpm, track);
                        });
                    } else {
                        displaySongInfo("No track found.");
                    }
                });
            }
        }
    }

    // 8. Function to wait for the video title indefinitely
    function waitForTitle() {
        const interval = setInterval(() => {
            const videoTitleElement = document.querySelector('#title h1');
            if (videoTitleElement) {
                main();
            }
        }, 1000);
    }

    // 9. Observe changes in URL and full screen mode
    function observeUrlChanges() {
        const urlObserver = new MutationObserver(() => {
            if (location.href !== lastUrl) {
                lastUrl = location.href;
                waitForTitle();
            }
        });

        urlObserver.observe(document.body, { childList: true, subtree: true });
    }

    // 10. Observe fullscreen changes
    function observeFullScreenChanges() {
        document.addEventListener('fullscreenchange', handleFullScreenChange);
    }

    // 11. Load script
    window.addEventListener('load', () => {
        getAccessToken(function() {
            observeUrlChanges();
            observeFullScreenChanges();
            waitForTitle();
        });
    });

})();