Report songs from the queue on station pages

frontend/src/pages/Station/Report.vue

@@ -2,7 +2,10 @@
 	<modal title="Report">
 		<div slot="body">
 			<div class="columns song-types">
-				<div v-if="previousSong !== null" class="column song-type">
+				<div
+					v-if="previousSong !== null && localQueueSong === null"
+					class="column song-type"
+				>
 					<div
 						class="card is-fullwidth"
 						:class="{ 'is-highlight-active': isPreviousSongActive }"
@@ -43,7 +46,10 @@
 						/>
 					</div>
 				</div>
-				<div v-if="currentSong !== {}" class="column song-type">
+				<div
+					v-if="currentSong !== {} && localQueueSong === null"
+					class="column song-type"
+				>
 					<div
 						class="card is-fullwidth"
 						:class="{ 'is-highlight-active': isCurrentSongActive }"
@@ -84,6 +90,38 @@
 						/>
 					</div>
 				</div>
+				<div v-if="localQueueSong !== null" class="column song-type">
+					<div class="card is-fullwidth">
+						<header class="card-header">
+							<p class="card-header-title">Queue Song</p>
+						</header>
+						<div class="card-content">
+							<article class="media">
+								<figure class="media-left">
+									<p class="image is-64x64">
+										<img
+											:src="localQueueSong.thumbnail"
+											onerror='this.src="/assets/notes-transparent.png"'
+										/>
+									</p>
+								</figure>
+								<div class="media-content">
+									<div class="content">
+										<p>
+											<strong>{{
+												localQueueSong.title
+											}}</strong>
+											<br />
+											<small>{{
+												localQueueSong.artists
+											}}</small>
+										</p>
+									</div>
+								</div>
+							</article>
+						</div>
+					</div>
+				</div>
 			</div>
 			<div class="edit-report-wrapper">
 				<div class="columns is-multiline">
@@ -156,6 +194,7 @@ export default {
 		return {
 			isPreviousSongActive: false,
 			isCurrentSongActive: true,
+			localQueueSong: null,
 			report: {
 				resolved: false,
 				songId: "",
@@ -174,7 +213,8 @@ export default {
 					reasons: [
 						"Doesn't exist",
 						"It's private",
-						"It's not available in my country"
+						"It's not available in my country",
+						"Unofficial"
 					]
 				},
 				{
@@ -207,7 +247,8 @@ export default {
 		},
 		...mapState({
 			currentSong: state => state.station.currentSong,
-			previousSong: state => state.station.previousSong
+			previousSong: state => state.station.previousSong,
+			queueSong: state => state.station.reportQueueSong
 		})
 	},
 	mounted() {
@@ -216,6 +257,12 @@ export default {
 		});
 
 		this.report.songId = this.currentSong.songId;
+
+		if (this.queueSong !== null) {
+			this.localQueueSong = this.queueSong;
+			this.report.songId = this.queueSong.songId;
+			this.updateReportQueueSong(null);
+		}
 	},
 	methods: {
 		create() {
@@ -252,6 +299,7 @@ export default {
 				}
 			}
 		},
+		...mapActions("station", ["updateReportQueueSong"]),
 		...mapActions("modals", ["closeModal"])
 	}
 };

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -58,7 +58,7 @@
 					"
 					class="material-icons"
 					id="report-queue-item"
-					@click="openModal({ sector: 'station', modal: 'report' })"
+					@click="reportQueueSong(song)"
 					>flag</i
 				>
 				<i
@@ -115,6 +115,11 @@ export default {
 		};
 	},
 	methods: {
+		reportQueueSong(song) {
+			this.updateReportQueueSong(song);
+			this.openModal({ sector: "station", modal: "report" });
+		},
+		...mapActions("station", ["updateReportQueueSong"]),
 		...mapActions("modals", ["openModal"]),
 		formatDistance,
 		parseISO
@@ -149,15 +154,17 @@ export default {
 	}
 
 	#thumbnail {
-		width: 60px;
-		height: 60px;
+		width: 65px;
+		height: 65px;
+		margin: -7.5px;
+		border-radius: 3px 0 0 3px;
 	}
 
 	#song-info {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		margin-left: 25px;
+		margin-left: 20px;
 
 		*:not(i) {
 			margin: 0;

frontend/src/store/modules/station.js

@@ -11,7 +11,8 @@ const state = {
 	songsList: [],
 	stationPaused: true,
 	localPaused: false,
-	noSong: true
+	noSong: true,
+	reportQueueSong: null
 };
 
 const getters = {};
@@ -35,6 +36,9 @@ const actions = {
 	updatePreviousSong: ({ commit }, previousSong) => {
 		commit("updatePreviousSong", previousSong);
 	},
+	updateReportQueueSong: ({ commit }, reportQueueSong) => {
+		commit("updateReportQueueSong", reportQueueSong);
+	},
 	updateSongsList: ({ commit }, songsList) => {
 		commit("updateSongsList", songsList);
 	},
@@ -81,6 +85,9 @@ const mutations = {
 	updatePreviousSong(state, previousSong) {
 		state.previousSong = previousSong;
 	},
+	updateReportQueueSong(state, reportQueueSong) {
+		state.reportQueueSong = reportQueueSong;
+	},
 	updateSongsList(state, songsList) {
 		state.songsList = songsList;
 	},