Removed previous song from and added song item to report modal

frontend/src/components/SongItem.vue

@@ -65,7 +65,10 @@
 			<p v-if="duration" class="song-duration">
 				{{ utils.formatTime(song.duration) }}
 			</p>
-			<div class="universal-item-actions">
+			<div
+				class="universal-item-actions"
+				v-if="disabledActions.indexOf('all') === -1"
+			>
 				<tippy
 					v-if="loggedIn"
 					interactive="true"
@@ -83,6 +86,7 @@
 						>
 					</template>
 					<a
+						v-if="disabledActions.indexOf('youtube') === -1"
 						target="_blank"
 						:href="
 							`https://www.youtube.com/watch?v=${song.youtubeId}`
@@ -93,6 +97,7 @@
 						<div class="youtube-icon"></div>
 					</a>
 					<i
+						v-if="disabledActions.indexOf('report') === -1"
 						class="material-icons report-icon"
 						@click="report(song)"
 						content="Report Song"
@@ -100,7 +105,10 @@
 					>
 						flag
 					</i>
-					<add-to-playlist-dropdown :song="song">
+					<add-to-playlist-dropdown
+						v-if="disabledActions.indexOf('addToPlaylist') === -1"
+						:song="song"
+					>
 						<i
 							slot="button"
 							class="material-icons add-to-playlist-icon"
@@ -110,7 +118,11 @@
 						>
 					</add-to-playlist-dropdown>
 					<i
-						v-if="loggedIn && userRole === 'admin'"
+						v-if="
+							loggedIn &&
+								userRole === 'admin' &&
+								disabledActions.indexOf('edit') === -1
+						"
 						class="material-icons edit-icon"
 						@click="edit(song)"
 						content="Edit Song"
@@ -121,7 +133,9 @@
 					<slot name="actions" />
 				</tippy>
 				<a
-					v-else
+					v-if="
+						!loggedIn && disabledActions.indexOf('youtube') === -1
+					"
 					target="_blank"
 					:href="`https://www.youtube.com/watch?v=${song.youtubeId}`"
 					content="View on Youtube"
@@ -162,6 +176,10 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		disabledActions: {
+			type: Array,
+			default: () => []
+		},
 		header: {
 			type: String,
 			default: null

frontend/src/components/modals/Report.vue

@@ -1,86 +1,12 @@
 <template>
 	<modal title="Report">
 		<div slot="body">
-			<div class="columns song-types">
-				<div v-if="previousSong !== null" class="column song-type">
-					<div
-						class="card is-fullwidth"
-						:class="{ 'is-highlight-active': isPreviousSongActive }"
-						@click="highlight('previousSong')"
-					>
-						<header class="card-header">
-							<p class="card-header-title">Previous Song</p>
-						</header>
-						<div class="card-content">
-							<article class="media">
-								<figure class="media-left">
-									<song-thumbnail
-										class="image is-64x64"
-										:song="previousSong"
-									/>
-								</figure>
-								<div class="media-content">
-									<div class="content">
-										<p>
-											<strong>{{
-												previousSong.title
-											}}</strong>
-											<br />
-											<small>{{
-												previousSong.artists.join(", ")
-											}}</small>
-										</p>
-									</div>
-								</div>
-							</article>
-						</div>
-						<a
-							href="#"
-							class="absolute-a"
-							@click="highlight('previousSong')"
-						/>
-					</div>
-				</div>
-				<div v-if="localSong !== null" class="column song-type">
-					<div
-						class="card is-fullwidth"
-						:class="{ 'is-highlight-active': isLocalSongActive }"
-						@click="highlight('localSong')"
-					>
-						<header class="card-header">
-							<p class="card-header-title">Selected Song</p>
-						</header>
-						<div class="card-content">
-							<article class="media">
-								<figure class="media-left">
-									<song-thumbnail
-										class="image is-64x64"
-										:song="localSong"
-									/>
-								</figure>
-								<div class="media-content">
-									<div class="content">
-										<p>
-											<strong>{{
-												localSong.title
-											}}</strong>
-											<br />
-											<small>{{
-												localSong.artists.join(", ")
-											}}</small>
-										</p>
-									</div>
-								</div>
-							</article>
-						</div>
-						<a
-							href="#"
-							class="absolute-a"
-							@click="highlight('localSong')"
-						/>
-					</div>
-				</div>
-			</div>
+			<song-item
+				:song="localSong"
+				:large-thumbnail="true"
+				:disabled-actions="['report']"
+				header="Selected Song.."
+			/>
 			<div class="edit-report-wrapper">
 				<div class="columns is-multiline">
 					<div
@@ -134,15 +60,13 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
+import SongItem from "@/components/SongItem.vue";
 import Modal from "../Modal.vue";
-import SongThumbnail from "../SongThumbnail.vue";
 
 export default {
-	components: { Modal, SongThumbnail },
+	components: { Modal, SongItem },
 	data() {
 		return {
-			isPreviousSongActive: false,
-			isLocalSongActive: true,
 			localSong: null,
 			report: {
 				resolved: false,
@@ -195,7 +119,6 @@ export default {
 			return 400 - this.report.description.length;
 		},
 		...mapState({
-			previousSong: state => state.station.previousSong,
 			song: state => state.modals.report.song
 		}),
 		...mapGetters({
@@ -216,17 +139,6 @@ export default {
 				if (res.status === "success") this.closeModal("report");
 			});
 		},
-		highlight(type) {
-			if (type === "localSong") {
-				this.report.youtubeId = this.localSong.youtubeId;
-				this.isPreviousSongActive = false;
-				this.isLocalSongActive = true;
-			} else if (type === "previousSong") {
-				this.report.youtubeId = this.previousSong.youtubeId;
-				this.isLocalSongActive = false;
-				this.isPreviousSongActive = true;
-			}
-		},
 		toggleIssue(name, reason) {
 			for (let z = 0; z < this.report.issues.length; z += 1) {
 				if (this.report.issues[z].name === name) {
@@ -246,26 +158,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h6 {
-	margin-bottom: 15px;
-}
-
-.song-type:first-of-type {
-	padding-left: 0;
-}
-.song-type:last-of-type {
-	padding-right: 0;
-}
-
-.thumbnail.image.is-64x64 {
-	min-width: 64px;
-	margin: 0;
-}
-
-.media-content {
-	display: flex;
-	align-items: center;
-	height: 64px;
+.edit-report-wrapper {
+	margin-top: 20px;
 }
 
 .radio-controls .control {
@@ -283,16 +177,8 @@ h6 {
 	}
 }
 
-.card {
-	border-radius: 5px;
-}
-
 .columns {
 	margin-left: unset;
 	margin-right: unset;
 }
-
-.is-highlight-active {
-	border: 3px var(--primary-color) solid;
-}
 </style>

frontend/src/pages/Station/index.vue

@@ -763,12 +763,6 @@ export default {
 		);
 
 		this.socket.on("event:songs.next", res => {
-			const previousSong = this.currentSong.youtubeId
-				? this.currentSong
-				: null;
-
-			this.updatePreviousSong(previousSong);
-
 			const { currentSong } = res.data;
 
 			this.updateCurrentSong(currentSong || {});
@@ -1845,7 +1839,6 @@ export default {
 			"updateUserCount",
 			"updateUsers",
 			"updateCurrentSong",
-			"updatePreviousSong",
 			"updateNextSong",
 			"updateSongsList",
 			"repositionSongInList",

frontend/src/store/modules/station.js

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