a simple web player for subsonic tinysub.devins.page
subsonic navidrome javascript
11
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: improve keyboard guide

intergrav 6cdf531d 9ab9f0a4

+15 -21
+4 -4
src/css/components.css
··· 379 379 border: 1px solid var(--border); 380 380 padding: 1rem; 381 381 max-height: 100%; 382 - max-width: 24rem; 382 + min-width: 24rem; 383 383 overflow-y: auto; 384 384 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); 385 385 display: flex; ··· 399 399 } 400 400 401 401 #keyboard-help-modal .shortcuts-grid { 402 - display: flex; 403 - flex-direction: column; 404 - gap: 1rem; 402 + display: grid; 403 + grid-template-columns: 1fr 1fr; 404 + gap: 1rem 2rem; 405 405 } 406 406 407 407 #keyboard-help-modal .shortcut-section-group {
+11 -13
src/index.html
··· 152 152 <div class="shortcut-section-group"> 153 153 <h3>playback</h3> 154 154 <div class="shortcuts-items-grid"> 155 - <kbd>Space</kbd><span>play/pause</span> <kbd>J</kbd 156 - ><span>seek -10s</span> <kbd>L</kbd><span>seek +10s</span> 157 - <kbd>Alt+J</kbd><span>previous track</span> <kbd>Alt+L</kbd 158 - ><span>next track</span> <kbd>Shift+R</kbd 155 + <kbd>Space</kbd><span>play/pause</span> <kbd>J / L</kbd 156 + ><span>seek ±10s</span> <kbd>Alt+J / Alt+L</kbd 157 + ><span>previous / next</span> <kbd>Shift+R</kbd 159 158 ><span>toggle loop</span> 160 159 </div> 161 160 </div> ··· 163 162 <h3>library</h3> 164 163 <div class="shortcuts-items-grid"> 165 164 <kbd>↑ / ↓</kbd><span>navigate rows</span> <kbd>Home / End</kbd 166 - ><span>first / last row</span> <kbd>Page Up / Down</kbd 165 + ><span>first / last row</span> <kbd>Page Up / Page Down</kbd 167 166 ><span>jump ±10 rows</span> <kbd>Enter</kbd 168 167 ><span>expand/collapse</span> <kbd>P</kbd 169 168 ><span>add to queue</span> <kbd>Alt+P</kbd><span>play next</span> 170 - <kbd>Esc</kbd><span>clear focus</span> 169 + <kbd>Esc</kbd><span>clear selection</span> 171 170 </div> 172 171 </div> 173 172 <div class="shortcut-section-group"> 174 173 <h3>queue</h3> 175 174 <div class="shortcuts-items-grid"> 176 - <kbd>↑ / ↓</kbd><span>navigate rows</span> <kbd>Shift + ↑ / ↓</kbd 177 - ><span>extend selection</span> <kbd>Home / End</kbd 178 - ><span>first / last row</span> <kbd>Page Up / Down</kbd 175 + <kbd>↑ / ↓</kbd><span>navigate rows</span> <kbd>Home / End</kbd 176 + ><span>first / last row</span> <kbd>Page Up / Page Down</kbd 179 177 ><span>jump ±10 rows</span> <kbd>Alt + ↑ / ↓</kbd 180 178 ><span>move selected rows</span> <kbd>Enter</kbd 181 - ><span>play selected row</span> <kbd>Delete / Backspace</kbd 179 + ><span>play selected row</span> <kbd>Delete</kbd 182 180 ><span>remove selected</span> <kbd>Menu</kbd 183 - ><span>context menu</span> <kbd>Ctrl+A</kbd 184 - ><span>select all</span> <kbd>Esc</kbd 185 - ><span>clear selection</span> 181 + ><span>context menu</span><kbd>Ctrl+A</kbd><span>select all</span 182 + ><kbd>Shift + ↑ / ↓</kbd><span>extend selection</span> 183 + <kbd>Esc</kbd><span>clear selection</span> 186 184 </div> 187 185 </div> 188 186 </div>
-4
src/js/input.js
··· 383 383 if (!e.shiftKey) return; // Shift+/ for keyboard help (?) 384 384 e.preventDefault(); 385 385 const helpModalEl = document.getElementById("keyboard-help-modal"); 386 - if (!helpModalEl) break; 387 - 388 386 if (helpModalEl.classList.contains("hidden")) { 389 387 showModal(helpModalEl, { 390 388 focusSelector: "button, input", 391 389 closeOnClickOutside: true, 392 390 }); 393 - } else { 394 - hideModal("keyboard-help-modal"); 395 391 } 396 392 break; 397 393 }