Merge branch 'owen-report-previous' into owen

backend/logic/actions/users.js

@@ -537,7 +537,6 @@ export default {
 					next(null, {
 						_id,
 						username,
-						name: username,
 						email: {
 							address: email,
 							verificationToken

frontend/src/components/FloatingBox.vue

@@ -13,10 +13,10 @@
 			top: top + 'px',
 			left: left + 'px'
 		}"
-		@mousedown="onResizeBox"
+		@mousedown.left="onResizeBox"
 	>
-		<div class="box-header item-draggable" @mousedown="onDragBox">
-			<slot name="header"></slot>
+		<div class="box-header item-draggable" @mousedown.left="onDragBox">
+			<button class="delete" @click.prevent="toggleBox()" />
 		</div>
 		<div class="box-body">
 			<slot name="body"></slot>
@@ -151,23 +151,31 @@ export default {
 	overflow: auto;
 	border: 1px solid var(--light-grey-2);
 	border-radius: 5px;
-	padding: 10px;
 	min-height: 50px !important;
 	min-width: 50px !important;
+	padding: 0;
 
 	.box-header {
 		z-index: 100000001;
 		background-color: var(--primary-color);
-		padding: 10px;
 		display: block;
-		height: 10px;
+		height: 24px;
 		width: 100%;
+
+		.delete {
+			position: absolute;
+			height: 20px;
+			width: 20px;
+			top: 2px;
+			right: 2px;
+		}
 	}
 
 	.box-body {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-evenly;
+		padding: 10px;
 
 		span {
 			padding: 3px 6px;

frontend/src/components/modals/Report.vue

@@ -198,6 +198,15 @@
 				>
 					<span>&nbsp;Cancel</span>
 				</a>
+				<div class="right">
+					<a
+						v-if="previousSong !== null && song !== previousSong"
+						class="button is-primary"
+						@click="reportSong(previousSong)"
+					>
+						<span>&nbsp;Report Previous Song</span>
+					</a>
+				</div>
 			</template>
 		</modal>
 		<view-report v-if="modals.viewReport" />
@@ -348,7 +357,8 @@ export default {
 	},
 	computed: {
 		...mapState({
-			song: state => state.modals.report.song
+			song: state => state.modals.report.song,
+			previousSong: state => state.station.previousSong
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals
@@ -421,7 +431,8 @@ export default {
 			);
 		},
 		...mapActions("modalVisibility", ["openModal", "closeModal"]),
-		...mapActions("modals/viewReport", ["viewReport"])
+		...mapActions("modals/viewReport", ["viewReport"]),
+		...mapActions("modals/report", ["reportSong"])
 	}
 };
 </script>

frontend/src/pages/Station/index.vue

@@ -762,6 +762,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>
@@ -882,8 +922,12 @@ export default {
 				typeof this.currentSong.disliked === "boolean"
 			);
 		},
+		aModalIsOpen() {
+			return Object.keys(this.currentlyActive).length > 0;
+		},
 		...mapState("modalVisibility", {
-			modals: state => state.modals
+			modals: state => state.modals,
+			currentlyActive: state => state.currentlyActive
 		}),
 		...mapState("modals/editSong", {
 			video: state => state.video
@@ -1000,6 +1044,12 @@ export default {
 		);
 
 		this.socket.on("event:station.nextSong", res => {
+			const previousSong = this.currentSong.youtubeId
+				? this.currentSong
+				: null;
+
+			this.updatePreviousSong(previousSong);
+
 			const { currentSong, startedAt, paused, timePaused } = res.data;
 
 			this.setCurrentSong({
@@ -1904,6 +1954,12 @@ export default {
 		resetPlayerDebugBox() {
 			this.$refs.playerDebugBox.resetBox();
 		},
+		toggleKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.toggleBox();
+		},
+		resetKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.resetBox();
+		},
 		join() {
 			this.socket.dispatch(
 				"stations.join",
@@ -2009,11 +2065,12 @@ export default {
 							keyboardShortcuts.registerShortcut(
 								"station.pauseResume",
 								{
-									keyCode: 32,
+									keyCode: 32, // Spacebar
 									shift: false,
 									ctrl: true,
 									preventDefault: true,
 									handler: () => {
+										if (this.aModalIsOpen) return;
 										if (this.stationPaused)
 											this.resumeStation();
 										else this.pauseStation();
@@ -2024,11 +2081,12 @@ export default {
 							keyboardShortcuts.registerShortcut(
 								"station.skipStation",
 								{
-									keyCode: 39,
+									keyCode: 39, // Right arrow key
 									shift: false,
 									ctrl: true,
 									preventDefault: true,
 									handler: () => {
+										if (this.aModalIsOpen) return;
 										this.skipStation();
 									}
 								}
@@ -2038,11 +2096,12 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.lowerVolumeLarge",
 							{
-								keyCode: 40,
+								keyCode: 40, // Down arrow key
 								shift: false,
 								ctrl: true,
 								preventDefault: true,
 								handler: () => {
+									if (this.aModalIsOpen) return;
 									this.volumeSliderValue -= 1000;
 									this.changeVolume();
 								}
@@ -2052,11 +2111,12 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.lowerVolumeSmall",
 							{
-								keyCode: 40,
+								keyCode: 40, // Down arrow key
 								shift: true,
 								ctrl: true,
 								preventDefault: true,
 								handler: () => {
+									if (this.aModalIsOpen) return;
 									this.volumeSliderValue -= 100;
 									this.changeVolume();
 								}
@@ -2066,11 +2126,12 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.increaseVolumeLarge",
 							{
-								keyCode: 38,
+								keyCode: 38, // Up arrow key
 								shift: false,
 								ctrl: true,
 								preventDefault: true,
 								handler: () => {
+									if (this.aModalIsOpen) return;
 									this.volumeSliderValue += 1000;
 									this.changeVolume();
 								}
@@ -2080,11 +2141,12 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.increaseVolumeSmall",
 							{
-								keyCode: 38,
+								keyCode: 38, // Up arrow key
 								shift: true,
 								ctrl: true,
 								preventDefault: true,
 								handler: () => {
+									if (this.aModalIsOpen) return;
 									this.volumeSliderValue += 100;
 									this.changeVolume();
 								}
@@ -2094,16 +2156,44 @@ export default {
 						keyboardShortcuts.registerShortcut(
 							"station.toggleDebug",
 							{
-								keyCode: 68,
+								keyCode: 68, // D key
 								shift: false,
 								ctrl: true,
 								preventDefault: true,
 								handler: () => {
+									if (this.aModalIsOpen) return;
 									this.togglePlayerDebugBox();
 								}
 							}
 						);
 
+						keyboardShortcuts.registerShortcut(
+							"station.toggleKeyboardShortcutsHelper",
+							{
+								keyCode: 191, // '/' key
+								ctrl: true,
+								preventDefault: true,
+								handler: () => {
+									if (this.aModalIsOpen) return;
+									this.toggleKeyboardShortcutsHelper();
+								}
+							}
+						);
+
+						keyboardShortcuts.registerShortcut(
+							"station.resetKeyboardShortcutsHelper",
+							{
+								keyCode: 191, // '/' key
+								ctrl: true,
+								shift: true,
+								preventDefault: true,
+								handler: () => {
+									if (this.aModalIsOpen) return;
+									this.resetKeyboardShortcutsHelper();
+								}
+							}
+						);
+
 						// UNIX client time before ping
 						const beforePing = Date.now();
 						this.socket.dispatch("apis.ping", res => {
@@ -2210,6 +2300,7 @@ export default {
 			"updateUserCount",
 			"updateUsers",
 			"updateCurrentSong",
+			"updatePreviousSong",
 			"updateNextSong",
 			"updateSongsList",
 			"repositionSongInList",

frontend/src/store/modules/station.js

@@ -10,6 +10,7 @@ const state = {
 		loggedOut: []
 	},
 	currentSong: {},
+	previousSong: null,
 	nextSong: null,
 	songsList: [],
 	stationPaused: true,
@@ -40,6 +41,9 @@ const actions = {
 	updateCurrentSong: ({ commit }, currentSong) => {
 		commit("updateCurrentSong", currentSong);
 	},
+	updatePreviousSong: ({ commit }, previousSong) => {
+		commit("updatePreviousSong", previousSong);
+	},
 	updateNextSong: ({ commit }, nextSong) => {
 		commit("updateNextSong", nextSong);
 	},
@@ -98,6 +102,7 @@ const mutations = {
 			loggedOut: []
 		};
 		state.currentSong = {};
+		state.previousSong = null;
 		state.nextSong = null;
 		state.songsList = [];
 		state.stationPaused = true;
@@ -118,6 +123,9 @@ const mutations = {
 	updateCurrentSong(state, currentSong) {
 		state.currentSong = currentSong;
 	},
+	updatePreviousSong(state, previousSong) {
+		state.previousSong = previousSong;
+	},
 	updateNextSong(state, nextSong) {
 		state.nextSong = nextSong;
 	},