feat(Station): added keyboard shortcuts box

frontend/src/pages/Station/index.vue

@@ -768,6 +768,46 @@
 				>
 			</template>
 		</floating-box>
+		<floating-box
+			id="keyboardShortcutsHelper"
+			ref="keyboardShortcutsHelper"
+		>
+			<template #body>
+				<div>
+					<div v-if="isOwnerOrAdmin()">
+						<span class="biggest"><b>Admin/owner</b></span>
+						<span><b>Ctrl + Space</b> - Pause/resume station</span>
+						<span><b>Ctrl + Numpad right</b> - Skip station</span>
+					</div>
+					<hr v-if="isOwnerOrAdmin()" />
+					<div>
+						<span class="biggest"><b>Volume</b></span>
+						<span
+							><b>Ctrl + Numpad up/down</b> - Volume up/down
+							10%</span
+						>
+						<span
+							><b>Ctrl + Shift + Numpad up/down</b> - Volume
+							up/down 10%</span
+						>
+					</div>
+					<hr />
+					<div>
+						<span class="biggest"><b>Misc</b></span>
+						<span><b>Ctrl + D</b> - Toggles debug box</span>
+						<span><b>Ctrl + Shift + D</b> - Resets debug box</span>
+						<span
+							><b>Ctrl + /</b> - Toggles keyboard shortcuts
+							box</span
+						>
+						<span
+							><b>Ctrl + Shift + /</b> - Resets keyboard shortcuts
+							box</span
+						>
+					</div>
+				</div>
+			</template>
+		</floating-box>
 
 		<Z404 v-if="!exists"></Z404>
 	</div>
@@ -1908,6 +1948,12 @@ export default {
 		resetPlayerDebugBox() {
 			this.$refs.playerDebugBox.resetBox();
 		},
+		toggleKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.toggleBox();
+		},
+		resetKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.resetBox();
+		},
 		join() {
 			this.socket.dispatch(
 				"stations.join",
@@ -2013,7 +2059,7 @@ export default {
 							keyboardShortcuts.registerShortcut(
 								"station.pauseResume",
 								{
-									keyCode: 32,
+									keyCode: 32, // Spacebar
 									shift: false,
 									ctrl: true,
 									preventDefault: true,
@@ -2028,7 +2074,7 @@ export default {
 							keyboardShortcuts.registerShortcut(
 								"station.skipStation",
 								{
-									keyCode: 39,
+									keyCode: 39, // Right arrow key
 									shift: false,
 									ctrl: true,
 									preventDefault: true,
@@ -2042,7 +2088,7 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.lowerVolumeLarge",
 							{
-								keyCode: 40,
+								keyCode: 40, // Down arrow key
 								shift: false,
 								ctrl: true,
 								preventDefault: true,
@@ -2056,7 +2102,7 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.lowerVolumeSmall",
 							{
-								keyCode: 40,
+								keyCode: 40, // Down arrow key
 								shift: true,
 								ctrl: true,
 								preventDefault: true,
@@ -2070,7 +2116,7 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.increaseVolumeLarge",
 							{
-								keyCode: 38,
+								keyCode: 38, // Up arrow key
 								shift: false,
 								ctrl: true,
 								preventDefault: true,
@@ -2084,7 +2130,7 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.increaseVolumeSmall",
 							{
-								keyCode: 38,
+								keyCode: 38, // Up arrow key
 								shift: true,
 								ctrl: true,
 								preventDefault: true,
@@ -2098,7 +2144,7 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.toggleDebug",
 							{
-								keyCode: 68,
+								keyCode: 68, // D key
 								shift: false,
 								ctrl: true,
 								preventDefault: true,
@@ -2108,6 +2154,31 @@ export default {
 							}
 						);
 
+						keyboardShortcuts.registerShortcut(
+							"station.toggleKeyboardShortcutsHelper",
+							{
+								keyCode: 191, // '/' key
+								ctrl: true,
+								preventDefault: true,
+								handler: () => {
+									this.toggleKeyboardShortcutsHelper();
+								}
+							}
+						);
+
+						keyboardShortcuts.registerShortcut(
+							"station.resetKeyboardShortcutsHelper",
+							{
+								keyCode: 191, // '/' key
+								ctrl: true,
+								shift: true,
+								preventDefault: true,
+								handler: () => {
+									this.resetKeyboardShortcutsHelper();
+								}
+							}
+						);
+
 						// UNIX client time before ping
 						const beforePing = Date.now();
 						this.socket.dispatch("apis.ping", res => {