feat(PlaylistSongItem): you can now report or edit a song from in a playlist

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/components/modals/EditPlaylist/index.vue

@@ -276,6 +276,25 @@
 												>error</i
 											>
 
+											<i
+												v-if="!song.simpleSong"
+												class="material-icons report-icon"
+												@click="
+													reportSongInPlaylist(song)
+												"
+											>
+												flag
+											</i>
+											<i
+												v-if="!song.simpleSong"
+												class="material-icons edit-icon"
+												@click="
+													editSongInPlaylist(song)
+												"
+											>
+												edit
+											</i>
+
 											<i
 												v-if="
 													userId ===
@@ -459,6 +478,14 @@ export default {
 		});
 	},
 	methods: {
+		editSongInPlaylist(song) {
+			this.$parent.editingSongId = song._id;
+			this.openModal({ sector: "station", modal: "editSong" });
+		},
+		reportSongInPlaylist(song) {
+			this.reportSong(song);
+			this.openModal({ sector: "station", modal: "report" });
+		},
 		importPlaylist() {
 			let isImportingPlaylist = true;
 
@@ -681,7 +708,8 @@ export default {
 				);
 			}
 		},
-		...mapActions("modalVisibility", ["closeModal"])
+		...mapActions("modals/report", ["reportSong"]),
+		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };
 </script>

frontend/src/components/modals/Report.vue

@@ -3,7 +3,7 @@
 		<div slot="body">
 			<div class="columns song-types">
 				<div
-					v-if="previousSong !== null && localQueueSong === null"
+					v-if="previousSong !== null && localSong === null"
 					class="column song-type"
 				>
 					<div
@@ -32,7 +32,7 @@
 											}}</strong>
 											<br />
 											<small>{{
-												previousSong.artists
+												previousSong.artists.join(", ")
 											}}</small>
 										</p>
 									</div>
@@ -47,7 +47,7 @@
 					</div>
 				</div>
 				<div
-					v-if="currentSong !== {} && localQueueSong === null"
+					v-if="currentSong !== {} && localSong === null"
 					class="column song-type"
 				>
 					<div
@@ -76,7 +76,7 @@
 											}}</strong>
 											<br />
 											<small>{{
-												currentSong.artists
+												currentSong.artists.join(", ")
 											}}</small>
 										</p>
 									</div>
@@ -90,17 +90,17 @@
 						/>
 					</div>
 				</div>
-				<div v-if="localQueueSong !== null" class="column song-type">
+				<div v-if="localSong !== null" class="column song-type">
 					<div class="card is-fullwidth">
 						<header class="card-header">
-							<p class="card-header-title">Queue Song</p>
+							<p class="card-header-title">Song</p>
 						</header>
 						<div class="card-content">
 							<article class="media">
 								<figure class="media-left">
 									<p class="image is-64x64">
 										<img
-											:src="localQueueSong.thumbnail"
+											:src="localSong.thumbnail"
 											onerror='this.src="/assets/notes-transparent.png"'
 										/>
 									</p>
@@ -109,11 +109,11 @@
 									<div class="content">
 										<p>
 											<strong>{{
-												localQueueSong.title
+												localSong.title
 											}}</strong>
 											<br />
 											<small>{{
-												localQueueSong.artists
+												localSong.artists.join(", ")
 											}}</small>
 										</p>
 									</div>
@@ -194,7 +194,7 @@ export default {
 		return {
 			isPreviousSongActive: false,
 			isCurrentSongActive: true,
-			localQueueSong: null,
+			localSong: null,
 			report: {
 				resolved: false,
 				songId: "",
@@ -248,7 +248,7 @@ export default {
 		...mapState({
 			currentSong: state => state.station.currentSong,
 			previousSong: state => state.station.previousSong,
-			queueSong: state => state.station.reportQueueSong
+			song: state => state.modals.report.song
 		})
 	},
 	mounted() {
@@ -258,10 +258,10 @@ 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);
+		if (this.song !== null) {
+			this.localSong = this.song;
+			this.report.songId = this.song.songId;
+			this.reportSong(null);
 		}
 	},
 	methods: {
@@ -299,7 +299,7 @@ export default {
 				}
 			}
 		},
-		...mapActions("station", ["updateReportQueueSong"]),
+		...mapActions("modals/report", ["reportSong"]),
 		...mapActions("modalVisibility", ["closeModal"])
 	}
 };

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

@@ -63,7 +63,7 @@
 							song.dislikes !== -1
 					"
 					class="material-icons report-icon"
-					@click="reportQueueSong(song)"
+					@click="report(song)"
 				>
 					flag
 				</i>
@@ -127,11 +127,11 @@ export default {
 		};
 	},
 	methods: {
-		reportQueueSong(song) {
-			this.updateReportQueueSong(song);
+		report(song) {
+			this.reportSong(song);
 			this.openModal({ sector: "station", modal: "report" });
 		},
-		...mapActions("station", ["updateReportQueueSong"]),
+		...mapActions("modals/report", ["reportSong"]),
 		...mapActions("modalVisibility", ["openModal"]),
 		formatDistance,
 		parseISO

frontend/src/store/index.js

@@ -13,6 +13,7 @@ import editUserModal from "./modules/modals/editUser";
 import editNewsModal from "./modules/modals/editNews";
 import viewPunishmentModal from "./modules/modals/viewPunishment";
 import viewReportModal from "./modules/modals/viewReport";
+import reportModal from "./modules/modals/report";
 
 Vue.use(Vuex);
 
@@ -31,7 +32,8 @@ export default new Vuex.Store({
 				editUser: editUserModal,
 				editNews: editNewsModal,
 				viewPunishment: viewPunishmentModal,
-				viewReport: viewReportModal
+				viewReport: viewReportModal,
+				report: reportModal
 			}
 		}
 	},

frontend/src/store/modules/modals/report.js

@@ -0,0 +1,16 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		song: {}
+	},
+	actions: {
+		reportSong: ({ commit }, song) => commit("reportSong", song)
+	},
+	mutations: {
+		reportSong(state, song) {
+			state.song = song;
+		}
+	}
+};

frontend/src/store/modules/station.js

@@ -14,8 +14,7 @@ const state = {
 	songsList: [],
 	stationPaused: true,
 	localPaused: false,
-	noSong: true,
-	reportQueueSong: null
+	noSong: true
 };
 
 const getters = {};
@@ -39,9 +38,6 @@ const actions = {
 	updatePreviousSong: ({ commit }, previousSong) => {
 		commit("updatePreviousSong", previousSong);
 	},
-	updateReportQueueSong: ({ commit }, reportQueueSong) => {
-		commit("updateReportQueueSong", reportQueueSong);
-	},
 	updateSongsList: ({ commit }, songsList) => {
 		commit("updateSongsList", songsList);
 	},
@@ -88,9 +84,6 @@ const mutations = {
 	updatePreviousSong(state, previousSong) {
 		state.previousSong = previousSong;
 	},
-	updateReportQueueSong(state, reportQueueSong) {
-		state.reportQueueSong = reportQueueSong;
-	},
 	updateSongsList(state, songsList) {
 		state.songsList = songsList;
 	},