dotfiles/spicetify/extensions/keyboardShortcut.js

461 lines
14 KiB
JavaScript
Raw Normal View History

2022-01-18 01:25:46 -05:00
//@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;
}