LDS Player Controls

lds-player-controls.js

/* LDS Player Controls - @ckalegi
 * https://gist.github.com/ckalegi/f6a23b046af9bdb887a334df4c226a4b
 * 
 * Preview tracks quicker by seeking through and marking for download with keyboard commands
 *
 * // USE:
 * Open folder containing tracks
 * Up/Down arrows - previous/next song
 * Left/Right arrows - Seek forward/back 10 seconds (+CMD for 20 seconds)
 * Space - Play/pause
 * Shift - Toggle 'download' state for track 
 *
 * // CHANGELOG:
 * - 240726 Refactored to handle site's new frontend
 */

let debugMode = false;

const logDebug = (message) => {
    if (debugMode) {
        console.log(message);
    }
};

const debug = (state) => {
    if (state === 'on') {
        debugMode = true;
        console.log('Debug mode is now ON');
    } else if (state === 'off') {
        debugMode = false;
        console.log('Debug mode is now OFF');
    } else {
        console.log('Invalid argument. Use debug("on") or debug("off")');
    }
};

// Function to log the key pressed
const logKeyPressed = (event) => {
    logDebug(`Key pressed: ${event.key}, Key code: ${event.which}`);
};

// Function to initialize key bindings
const initializeKeyBindings = () => {
    const clickElement = (selector) => {
        const element = document.querySelector(selector);
        element?.click() ?? logDebug(`Element with selector '${selector}' not found`);
    };

    const clickPlayingTrackButton = () => {
        const playingTrack = document.querySelector('.playing-anim');
        logDebug('Playing track:', playingTrack);
        const trackItem = playingTrack?.closest('div.group\\/track');
        logDebug('Track item:', trackItem);
        const button = trackItem?.querySelector('svg[size="5"]');
        logDebug('Button:', button);
        button?.click() ?? logDebug('Download toggle button not found or is not a clickable element');
    };

    const clickPlayPauseButton = () => {
        const playPauseButton = document.querySelector('img[src="/play.svg"], img[src="/pause.svg"]');
        if (playPauseButton) {
            playPauseButton.click();
        } else {
            logDebug('Play/pause button not found, starting the first song');
            playFirstSong();
        }
    };

    const seekAudio = (seconds, metaKey) => {
        const audioElement = document.querySelector('audio');
        if (audioElement) {
            const seekAmount = metaKey ? seconds * 2 : seconds;
            audioElement.currentTime += seekAmount;
        } else {
            logDebug('Audio element not found');
        }
    };

    const clickDownloadToggleButton = () => {
        const playingTrack = document.querySelector('.playing-anim');
        logDebug('Playing track:', playingTrack);
        const trackItem = playingTrack?.closest('div.group\\/track');
        logDebug('Track item:', trackItem);
        const downloadButton = trackItem?.querySelector('div:first-child');
        logDebug('Download button:', downloadButton);
        downloadButton?.click() ?? logDebug('Download toggle button not found or is not a clickable element');
    };

    const playFirstSong = () => {
        const firstTrack = document.querySelector('div.group\\/track');
        firstTrack?.click() ?? logDebug('First track not found');
    };

    const keyFunctions = {
        40: () => clickElement('img[src="/next.svg"]'), // Next track
        39: (e) => seekAudio(10, e.metaKey), // Fast forward by 10 seconds or 20 seconds if Cmd is held
        38: () => clickElement('img[src="/prev.svg"]'), // Previous track
        37: (e) => seekAudio(-10, e.metaKey), // Rewind by 10 seconds or 20 seconds if Cmd is held
        16: () => clickDownloadToggleButton(), // Function to click the download toggle button for the playing track
        32: (e) => {
            // Prevent default play/pause when typing in search box
            if (e.target === document.body) {
                e.preventDefault();
                clickPlayPauseButton(); // Click the play/pause button
            }
        }
    };

    const registerBind = (e) => {
        const key = e.which;
        logKeyPressed(e); // Log the key pressed
        // Check if the key has an associated function and prevent default behavior
        if (keyFunctions[key]) {
            e.preventDefault();
            logDebug(`Key pressed: ${key}, Function called: ${keyFunctions[key].name || 'anonymous function'}`);
            keyFunctions[key](e); // Pass the event to the function in case it needs it
        }
    };

    window.addEventListener('keydown', registerBind);
    console.log('To enable debug mode run debug("on")');
};

// Initialize key bindings immediately
initializeKeyBindings();