Move current selected/highlighted song with arrow keys.

[PixelPotts]

It would be nice if you could use the arrow keys to move up or down by a single song per keypress.

If I press the DOWN KEY, it will move the blue highlight cursor down to the next song or the UP KEY and previous song. Whether or not this should play the newly highlight song... I do not know. Currently the arrows move the scroll bar by a small amount up or down, and I presume no one uses this intentionally for scrolling as it is cucumbersome.

A nice touch might be to keep the cursor centered vertically in the container such that moving up or down "moves" the list but the highlight remains in position. Ideally this would not be a hard anchoring to the center, but a small window in which the cursor can move around without affecting the position of the list; when it goes out of that bound above or below, then the list itself moves, keeping the cursor in that box.

I mean, moving in the light gray area (below image) would not reposition/scroll the list, but would only move the cursor. Outside of the light gray area, the cursor stays put and the list scrolls.

[mmontag]

Ah yes, List View selectable row behavior. Of course, this is a must-have for any software purporting to honor Winamp. Something that Spotify does (YouTube Music doesn't and Rdio never did).

I've put it off until now, waiting for someone to request it. I want to hear from the people.

If I can piggyback the browser's built-in focus mechanism, then we get the "selection following" behavior for free...

[mmontag]

items = null; fidx = 0; listview = document.querySelector('.App-main-content-area'); window.addEventListener('keydown', e => { if (!['ArrowUp','ArrowDown'].includes(e.key)) return; e.preventDefault(); items = listview.querySelectorAll('a'); if (e.key === 'ArrowUp') { fidx = Math.max(0, fidx-1); } if (e.key === 'ArrowDown') { fidx = Math.min(items.length-1, fidx+1); } items.item(fidx).focus(); }); document.styleSheets[0].insertRule('.App-main-content-area>div>div>div:focus-within{box-shadow: 0 0 0 10px inset #66d6}');