a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
feat: improve keyboard guide
+15
-21
+4
-4
src/css/components.css
+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
+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
-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
}