Pomodoro-časovač pro Spotify a Yandex.Music

Pomodoro timer pro hudební služby pomocí JavaScript bookmarkletu

Vývojáři na dálku často čelí rušivým upozorněním. Jedním ze způsobů, jak udržet koncentraci, je Pomodoro technika s automatickým pozastavením hudby podle časovače. To lze implementovat pomocí bookmarkletu: JavaScript kódu v záložce prohlížeče, který po nastavené době pozastaví hudbu bez dalších aplikací.

Původní myšlenka je pozastavení Spotify po 25 minutách. Základní kód využívá setTimeout pro kliknutí na tlačítko pauzy:

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

Zde setTimeout přijímá zpětné volání a zpoždění v milisekundách. Selektor [data-testid='control-button-playpause'] najde tlačítko, .click() simuluje kliknutí. Pro 25 minut: 1000 60 25.

Problémy jednoduchého přístupu a jejich řešení

Jednoduchý skript má nedostatky: vyžaduje ruční zadávání, funguje pouze v konzoli, selže bez tlačítka, omezený na Spotify.

Řešením je bookmarklet. Vytvoří se záložka s prefixem javascript: a kódem:

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

Přidáme kontrolu přítomnosti tlačítka a upozornění:

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

    if (!stopButton) {
        alert("Ale tlačítko tu není 😭");
        return;
    }

    setTimeout(() => {stopButton.click()}, 5000);
    alert("Časovač spuštěn 🍅⏰")
})()

Správa časovače: spuštění a zastavení

Pro přerušení sezení se zavádí ID časovače v cookie. Úplný kód kontroluje přítomnost aktivního časovače, zastaví ho pomocí clearTimeout nebo spustí nový:

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("Ale tlačítko tu není 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Časovač zastaven`);
        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(`Spuštěn časovač na ${time / 1000 / 60} min`);
})()

Cookie ukládá ID do vypršení časovače nebo vymazání při zastavení. To umožňuje restartování bez obnovení stránky.

Podpora oblíbených služeb

Rozšíření na více platforem pomocí funkce getPauseButton, která určuje doménu a selektor:

• Spotify: [data-testid='control-button-playpause']
• Yandex Music: [aria-label='Pauza']
• Zvuk: složitý CSS selektor [id='theme-provider'] > div > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > button:nth-of-type(2)
• VK Hudba: [data-testid='audio-player-controls-state-button']
• YouTube: [aria-keyshortcuts='k']

Úplný výsledný kód:

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='Pauza']");
            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("Ale tlačítko tu není 😭");
        return;
    }

    if (timerID) {
        clearTimeout(Number(timerID));
        alert(`Časovač zastaven`);
        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(`Spuštěn časovač na ${time / 1000 / 60} min`);
})()

Co je důležité

• Bookmarklet využívá cookie pro ukládání ID časovače, zajišťuje zastavení bez obnovení stránky.
• Switch podle domény určuje selektor tlačítka pauzy pro Spotify, Yandex Music, Zvuk, VK a YouTube.
• Kontrola přítomnosti tlačítka zabraňuje chybám; alert upozorňuje na stav.
• Kód funguje v prohlížeči bez rozšíření, vhodný pro middle/senior vývojáře.
• Selektory jsou založeny na data-testid, aria-label a aria-keyshortcuts pro spolehlivost.

— Editorial Team