Pomodoro-timer dla Spotify i Yandex.Muzyki

Timer Pomodoro dla serwisów muzycznych: Bookmarklet JavaScript do automatyzacji pauzy

Programiści pracujący zdalnie często napotykają rozpraszające powiadomienia. Jednym ze sposobów na utrzymanie koncentracji jest technika Pomodoro z automatycznym pauzowaniem muzyki przez timer. Można to zrealizować za pomocą bookmarkletu: kodu JavaScript w zakładce przeglądarki, który wstrzymuje muzykę po określonym czasie bez dodatkowych aplikacji.

Początkowo idea polegała na pauzowaniu Spotify po 25 minutach. Podstawowy kod używa setTimeout do kliknięcia przycisku pauzy:

setTimeout(() => { document.querySelector("[data-testid='control-button-playpause']").click()}, 5000)

Tutaj setTimeout przyjmuje funkcję zwrotną i opóźnienie w milisekundach. Selektor [data-testid='control-button-playpause'] znajduje przycisk, .click() symuluje naciśnięcie. Dla 25 minut: 1000 60 25.

Problemy prostego podejścia i ich rozwiązanie

Prosty skrypt ma wady: wymaga ręcznego wprowadzania, działa tylko w konsoli, psuje się bez przycisku, ograniczony do Spotify.

Rozwiązanie — bookmarklet. Tworzy się zakładkę z prefiksem javascript: i kodem:

javascript:setTimeout(() => {
  document.querySelector("[data-testid='control-button-playpause']")
    .click()
}, 5000)

Dodajemy sprawdzenie obecności przycisku i powiadomienie:

(() => {
    const stopButton = document.querySelector("[data-testid='control-button-playpause']");

    if (!stopButton) {
        alert("A przycisku nie ma 😭");
        return;
    }

    setTimeout(() => {stopButton.click()}, 5000);
    alert("Timer uruchomiony 🍅⏰")
})()

Zarządzanie timerem: uruchamianie i zatrzymywanie

Aby przerwać sesję, wprowadza się ID timera w cookie. Pełny kod sprawdza obecność aktywnego timera, zatrzymuje go przez clearTimeout lub uruchamia nowy:

javascript:(() => {
    const time = 1000 * 60 * 25;
    
    const stopButton = document.querySelector("[data-testid='control-button-playpause']");

    const timerID = document.cookie.split('; ').find(row => row.startsWith('myPomodoroMusic='))?.split('=')[1];

    if (!stopButton) {
        alert("A przycisku nie ma 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Timer zatrzymany`);
        document.cookie = `myPomodoroMusic=${timerID}; expires=${ new Date().toUTCString() }; path=/;`;
        return;
    }

    window.myPomodoroMusic = setTimeout(() => {stopButton.click()}, time);

    document.cookie = `myPomodoroMusic=${window.myPomodoroMusic}; expires=${ new Date(Date.now() + time).toUTCString() }; path=/;`;

    alert(`Uruchomiono timer na ${time / 1000 / 60} min`);
})()

Cookie przechowuje ID do wygaśnięcia timera lub czyszczenia przy zatrzymaniu. Pozwala to na ponowne uruchamianie bez przeładowania strony.

Obsługa popularnych serwisów

Rozszerzenie na kilka platform poprzez funkcję getPauseButton, określającą domenę i selektor:

• Spotify: [data-testid='control-button-playpause']
• Yandex Music: [aria-label='Pause']
• Zvuk: [id='theme-provider'] > div > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > button:nth-of-type(2)
• VK Muzyka: [data-testid='audio-player-controls-state-button']
• YouTube: [aria-keyshortcuts='k']

Pełny ostateczny kod:

javascript:(() => {
    const time = 1000 * 60 * 25;

    const getPauseButton = () => {
        const url = window.location.href;
        const domain = new URL(url).hostname;
        switch (domain) {
            case "open.spotify.com":
                return document.querySelector("[data-testid='control-button-playpause']");
            case "music.yandex.ru":
                return document.querySelector("[aria-label='Pause']");
            case "zvuk.com":
                return document.querySelector("[id='theme-provider'] > div > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > button:nth-of-type(2)");
            case "vk.com":
                return document.querySelector("[data-testid='audio-player-controls-state-button']");
            case "www.youtube.com":
                return document.querySelector("[aria-keyshortcuts='k']");
            default:
                return null;
        }
    }
    
    const stopButton = getPauseButton();

    const timerID = document.cookie.split('; ').find(row => row.startsWith('myPomodoroMusic='))?.split('=')[1];

    if (!stopButton) {
        alert("A przycisku nie ma 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Timer zatrzymany`);
        document.cookie = `myPomodoroMusic=${timerID}; expires=${ new Date().toUTCString() }; path=/;`;
        return;
    }

    window.myPomodoroMusic = setTimeout(() => {stopButton.click()}, time);

    document.cookie = `myPomodoroMusic=${window.myPomodoroMusic}; expires=${ new Date(Date.now() + time).toUTCString() }; path=/;`;

    alert(`Uruchomiono timer na ${time / 1000 / 60} min`);
})()

Co jest ważne

• Bookmarklet używa cookie do przechowywania ID timera, zapewniając zatrzymanie bez przeładowania.
• Switch po domenie określa selektor przycisku pauzy dla Spotify, Yandex Music, Zvuka, VK i YouTube.
• Sprawdzenie obecności przycisku zapobiega błędom; alert informuje o statusie.
• Kod działa w przeglądarce bez rozszerzeń, odpowiedni dla programistów średniego i zaawansowanego poziomu.
• Selekcje opierają się na data-testid, aria-label i aria-keyshortcuts dla niezawodności.

— Editorial Team