dotfiles/spicetify/extensions/keyboardShortcut.js

//@ts-check

// NAME: Keyboard Shortcut
// AUTHOR: khanhas
// DESCRIPTION: Register a few more keybinds to support keyboard-driven navigation in Spotify client.

/// <reference path="../globals.d.ts" />

(function KeyboardShortcut() {
    if (!Spicetify.Keyboard) {
        setTimeout(KeyboardShortcut, 1000);
        return;
    }

    const SCROLL_STEP = 50;

    /**
     * Register your own keybind with function `registerBind`
     *
     * Syntax:
     *     registerBind(keyName, ctrl, shift, alt, callback)
     *
     * ctrl, shift and alt are boolean, true or false
     *
     * Valid keyName:
     * - BACKSPACE       - C               - Y               - F3
     * - TAB             - D               - Z               - F4
     * - ENTER           - E               - WINDOW_LEFT     - F5
     * - SHIFT           - F               - WINDOW_RIGHT    - F6
     * - CTRL            - G               - SELECT          - F7
     * - ALT             - H               - NUMPAD_0        - F8
     * - PAUSE/BREAK     - I               - NUMPAD_1        - F9
     * - CAPS            - J               - NUMPAD_2        - F10
     * - ESCAPE          - K               - NUMPAD_3        - F11
     * - SPACE           - L               - NUMPAD_4        - F12
     * - PAGE_UP         - M               - NUMPAD_5        - NUM_LOCK
     * - PAGE_DOWN       - N               - NUMPAD_6        - SCROLL_LOCK
     * - END             - O               - NUMPAD_7        - ;
     * - HOME            - P               - NUMPAD_8        - =
     * - ARROW_LEFT      - Q               - NUMPAD_9        - ,
     * - ARROW_UP        - R               - MULTIPLY        - -
     * - ARROW_RIGHT     - S               - ADD             - /
     * - ARROW_DOWN      - T               - SUBTRACT        - `
     * - INSERT          - U               - DECIMAL_POINT   - [
     * - DELETE          - V               - DIVIDE          - \
     * - A               - W               - F1              - ]
     * - B               - X               - F2              - "
     *
     * Use one of keyName as a string. If key that you want isn't in that list,
     * you can also put its keycode number in keyName as a number.
     *
     * callback is name of function you want your shortcut to bind to. It also
     * returns one KeyboardEvent parameter.
     *
     * Following are my default keybinds, use them as examples.
     */

    // Ctrl + Tab and Ctrl + Shift + Tab to switch sidebar items
    registerBind("TAB", true, false, false, rotateSidebarDown);
    registerBind("TAB", true, true, false, rotateSidebarUp);

    // Ctrl + Q to open Queue page
    registerBind("Q", true, false, false, clickQueueButton);

    // Shift + H and Shift + L to go back and forward page
    registerBind("H", false, true, false, clickNavigatingBackButton);
    registerBind("L", false, true, false, clickNavigatingForwardButton);

    // PageUp, PageDown to focus on iframe app before scrolling
    registerBind("PAGE_UP", false, true, false, focusOnApp);
    registerBind("PAGE_DOWN", false, true, false, focusOnApp);

    // J and K to vertically scroll app
    registerBind("J", false, false, false, appScrollDown);
    registerBind("K", false, false, false, appScrollUp);

    // G and Shift + G to scroll to top and to bottom
    registerBind("G", false, false, false, appScrollTop);
    registerBind("G", false, true, false, appScrollBottom);

    // M to Like/Unlike track
    registerBind("M", false, false, false, Spicetify.Player.toggleHeart);

    // Forward Slash to open search page
    registerBind("/", false, false, false, openSearchPage);

    if (window.navigator.userAgent.indexOf("Win") === -1) {
        // CTRL + Arrow Left Next and CTRL + Arrow Right  Previous Song
        registerBind("ARROW_RIGHT", true, false, false, nextSong);
        registerBind("ARROW_LEFT", true, false, false, previousSong);

        // CTRL + Arrow Up Increase Volume CTRL + Arrow Down Decrease Volume
        registerBind("ARROW_UP", true, false, false, increaseVolume);
        registerBind("ARROW_DOWN", true, false, false, decreaseVolume);
    }

    // F to activate Link Follow function
    const vim = new VimBind();
    registerBind("F", false, false, false, vim.activate.bind(vim));
    // Esc to cancel Link Follow
    vim.setCancelKey("ESCAPE");

    function rotateSidebarDown() {
        rotateSidebar(1);
    }

    function rotateSidebarUp() {
        rotateSidebar(-1);
    }

    function clickQueueButton() {
        document.querySelector(".control-button-wrapper .spoticon-queue-16").click();
    }

    function clickNavigatingBackButton() {
        document.querySelector(".main-topBar-historyButtons .main-topBar-back").click();
    }

    function clickNavigatingForwardButton() {
        document.querySelector(".main-topBar-historyButtons .main-topBar-forward").click();
    }

    function appScrollDown() {
        const app = focusOnApp();
        if (app) {
            app.scrollBy(0, SCROLL_STEP);
        }
    }

    function appScrollUp() {
        const app = focusOnApp();
        if (app) {
            app.scrollBy(0, -SCROLL_STEP);
        }
    }

    function appScrollBottom() {
        const app = focusOnApp();
        app.scroll(0, app.scrollHeight);
    }

    function appScrollTop() {
        const app = focusOnApp();
        app.scroll(0, 0);
    }

    function nextSong() {
        document.querySelector(".main-skipForwardButton-button").click();
    }

    function previousSong() {
        document.querySelector(".main-skipBackButton-button").click();
    }

    function increaseVolume() {
        Spicetify.Player.origin.setVolume(Spicetify.Player.getVolume() + 0.1);
    }

    function decreaseVolume() {
        Spicetify.Player.origin.setVolume(Spicetify.Player.getVolume() - 0.1);
    }

    /**
     *
     * @param {KeyboardEvent} event
     */
    function openSearchPage(event) {
        const searchInput = document.querySelector(".main-topBar-topbarContentWrapper input");
        if (searchInput) {
            searchInput.focus();
        } else {
            const sidebarItem = document.querySelector(`.main-navBar-navBar a[href="/search"]`);
            if (sidebarItem) {
                sidebarItem.click();
            }
        }

        event.preventDefault();
    }

    /**
     *
     * @param {Spicetify.Keyboard.ValidKey} keyName
     * @param {boolean} ctrl
     * @param {boolean} shift
     * @param {boolean} alt
     * @param {(event: KeyboardEvent) => void} callback
     */
    function registerBind(keyName, ctrl, shift, alt, callback) {
        const key = Spicetify.Keyboard.KEYS[keyName];

        Spicetify.Keyboard.registerShortcut(
            {
                key,
                ctrl,
                shift,
                alt,
            },
            (event) => {
                if (!vim.isActive) {
                    callback(event);
                }
            }
        );
    }

    function focusOnApp() {
        return document.querySelector("main .os-viewport");
    }

    /**
     * @returns {number}
     */
    function findActiveIndex(allItems) {
        const active = document.querySelector(
            ".main-navBar-navBarLinkActive, .main-collectionLinkButton-selected, .main-rootlist-rootlistItemLinkActive"
        );
        if (!active) {
            return -1;
        }

        let index = 0;
        for (const item of allItems) {
            if (item === active) {
                return index;
            }

            index++;
        }
    }

    /**
     *
     * @param {1 | -1} direction
     */
    function rotateSidebar(direction) {
        const allItems = document.querySelectorAll(
            ".main-navBar-navBarLink, .main-collectionLinkButton-collectionLinkButton, .main-rootlist-rootlistItemLink"
        );
        const maxIndex = allItems.length - 1;
        let index = findActiveIndex(allItems) + direction;

        if (index < 0) index = maxIndex;
        else if (index > maxIndex) index = 0;

        let toClick = allItems[index];
        if (!toClick.hasAttribute("href")) {
            toClick = toClick.querySelector(".main-rootlist-rootlistItemLink");
        }

        toClick.click();
    }
})();

function VimBind() {
    const elementQuery = ["[href]", "button", "td.tl-play", "td.tl-number", "tr.TableRow"].join(",");

    const keyList = "qwertasdfgzxcvyuiophjklbnm".split("");

    const lastKeyIndex = keyList.length - 1;

    this.isActive = false;

    const vimOverlay = document.createElement("div");
    vimOverlay.id = "vim-overlay";
    vimOverlay.style.zIndex = "9999";
    vimOverlay.style.position = "absolute";
    vimOverlay.style.width = "100%";
    vimOverlay.style.height = "100%";
    vimOverlay.style.display = "none";
    vimOverlay.innerHTML = `<style>
.vim-key {
    position: fixed;
    padding: 3px 6px;
    background-color: black;
    border-radius: 3px;
    border: solid 2px white;
    color: white;
    text-transform: lowercase;
    line-height: normal;
    font-size: 14px;
    font-weight: 500;
}
</style>`;
    document.body.append(vimOverlay);

    const mousetrap = new Spicetify.Mousetrap(document);
    mousetrap.bind(keyList, listenToKeys.bind(this), "keypress");
    // Pause mousetrap event emitter
    const orgStopCallback = mousetrap.stopCallback;
    mousetrap.stopCallback = () => true;

    /**
     *
     * @param {KeyboardEvent} event
     */
    this.activate = function (event) {
        vimOverlay.style.display = "block";

        const vimkey = getVims();
        if (vimkey.length > 0) {
            vimkey.forEach((e) => e.remove());
            return;
        }

        let firstKey = 0;
        let secondKey = 0;

        getLinks().forEach((e) => {
            if (e.style.display === "none" || e.style.visibility === "hidden" || e.style.opacity === "0") {
                return;
            }

            const bound = e.getBoundingClientRect();
            let owner = document.body;

            let top = bound.top;
            let left = bound.left;

            if (
                bound.bottom > owner.clientHeight ||
                bound.left > owner.clientWidth ||
                bound.right < 0 ||
                bound.top < 0 ||
                bound.width === 0 ||
                bound.height === 0
            ) {
                return;
            }

            vimOverlay.append(createKey(e, keyList[firstKey] + keyList[secondKey], top, left));

            secondKey++;
            if (secondKey > lastKeyIndex) {
                secondKey = 0;
                firstKey++;
            }
        });

        this.isActive = true;
        setTimeout(() => (mousetrap.stopCallback = orgStopCallback.bind(mousetrap)), 100);
    };

    /**
     *
     * @param {KeyboardEvent} event
     */
    this.deactivate = function (event) {
        mousetrap.stopCallback = () => true;
        this.isActive = false;
        vimOverlay.style.display = "none";
        getVims().forEach((e) => e.remove());
    };

    function getLinks() {
        const elements = Array.from(document.querySelectorAll(elementQuery));
        return elements;
    }

    function getVims() {
        return Array.from(vimOverlay.getElementsByClassName("vim-key"));
    }

    /**
     * @param {KeyboardEvent} event
     */
    function listenToKeys(event) {
        if (!this.isActive) {
            return;
        }

        const vimkey = getVims();

        if (vimkey.length === 0) {
            this.deactivate(event);
            return;
        }

        for (const div of vimkey) {
            const text = div.innerText.toLowerCase();
            if (text[0] !== event.key) {
                div.remove();
                continue;
            }

            const newText = text.slice(1);
            if (newText.length === 0) {
                click(div.target);
                this.deactivate(event);
                return;
            }

            div.innerText = newText;
        }

        if (vimOverlay.childNodes.length === 1) {
            this.deactivate(event);
        }
    }

    function click(element) {
        if (element.hasAttribute("href") || element.tagName === "BUTTON") {
            element.click();
            return;
        }

        const findButton = element.querySelector(`button[data-ta-id="play-button"]`) || element.querySelector(`button[data-button="play"]`);
        if (findButton) {
            findButton.click();
            return;
        }
        alert("Let me know where you found this button, please. I can't click this for you without that information.");
        return;
        // TableCell case where play button is hidden
        // Index number is in first column
        const index = parseInt(element.firstChild.innerText) - 1;
        const context = getContextUri();
        if (index >= 0 && context) {
            console.log(index);
            console.log(context);

            //Spicetify.PlaybackControl.playFromResolver(context, { index }, () => {});
            return;
        }
    }

    function createKey(target, key, top, left) {
        const div = document.createElement("span");
        div.classList.add("vim-key");
        div.innerText = key;
        div.style.top = top + "px";
        div.style.left = left + "px";
        div.target = target;
        return div;
    }

    function getContextUri() {
        const username = __spotify.username;
        const activeApp = localStorage.getItem(username + ":activeApp");
        if (activeApp) {
            try {
                return JSON.parse(activeApp).uri.replace("app:", "");
            } catch {
                return null;
            }
        }

        return null;
    }

    /**
     *
     * @param {Spicetify.Keyboard.ValidKey} key
     */
    this.setCancelKey = function (key) {
        mousetrap.bind(Spicetify.Keyboard.KEYS[key], this.deactivate.bind(this));
    };

    return this;
}