Added currently playing to manage station modal

backend/logic/actions/stations.js

@@ -913,7 +913,8 @@ export default {
 						// genres: station.genres,
 						// blacklistedGenres: station.blacklistedGenres,
 						theme: station.theme,
-						paused: station.paused
+						paused: station.paused,
+						currentSong: station.currentSong
 					};
 
 					next(null, data);

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

@@ -123,6 +123,17 @@
 							</confirm>
 						</div>
 						<hr class="section-horizontal-rule" />
+						<song-item
+							v-if="currentSong._id"
+							:song="currentSong"
+							:large-thumbnail="true"
+							:requested-by="
+								station.type === 'community' &&
+									station.partyMode === true
+							"
+							header="Currently Playing.."
+							class="currently-playing"
+						/>
 						<queue sector="manageStation" />
 					</div>
 				</div>
@@ -167,6 +178,7 @@ import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
 
 import Confirm from "@/components/Confirm.vue";
 import Queue from "@/components/Queue.vue";
+import SongItem from "@/components/SongItem.vue";
 import Modal from "../../Modal.vue";
 
 import Settings from "./Tabs/Settings.vue";
@@ -179,6 +191,7 @@ export default {
 		Modal,
 		Confirm,
 		Queue,
+		SongItem,
 		Settings,
 		Playlists,
 		Search,
@@ -204,7 +217,8 @@ export default {
 			station: state => state.station,
 			originalStation: state => state.originalStation,
 			songsList: state => state.songsList,
-			stationPaused: state => state.stationPaused
+			stationPaused: state => state.stationPaused,
+			currentSong: state => state.currentSong
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -216,6 +230,12 @@ export default {
 				const { station } = res.data;
 				this.editStation(station);
 
+				const currentSong = res.data.station.currentSong
+					? res.data.station.currentSong
+					: {};
+
+				this.updateCurrentSong(currentSong);
+
 				this.updateStationPaused(res.data.station.paused);
 
 				this.socket.dispatch(
@@ -273,6 +293,12 @@ export default {
 			this.timePaused = res.data.timePaused;
 			this.updateStationPaused(false);
 		});
+
+		this.socket.on("event:songs.next", res => {
+			const { currentSong } = res.data;
+
+			this.updateCurrentSong(currentSong || {});
+		});
 	},
 	beforeDestroy() {
 		this.repositionSongInList([]);
@@ -337,7 +363,8 @@ export default {
 			"clearStation",
 			"updateSongsList",
 			"repositionSongInList",
-			"updateStationPaused"
+			"updateStationPaused",
+			"updateCurrentSong"
 		]),
 		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
@@ -416,25 +443,30 @@ export default {
 		height: 100%;
 		overflow-y: auto;
 		flex-grow: 1;
-		.section .queue-title {
-			display: flex;
-			line-height: 30px;
-			.material-icons {
-				margin-left: 5px;
-				margin-bottom: 5px;
-				font-size: 28px;
-				cursor: pointer;
-				&:first-of-type {
-					margin-left: auto;
-				}
-				&.skip-station {
-					color: var(--red);
-				}
-				&.resume-station,
-				&.pause-station {
-					color: var(--primary-color);
+		.section {
+			.queue-title {
+				display: flex;
+				line-height: 30px;
+				.material-icons {
+					margin-left: 5px;
+					margin-bottom: 5px;
+					font-size: 28px;
+					cursor: pointer;
+					&:first-of-type {
+						margin-left: auto;
+					}
+					&.skip-station {
+						color: var(--red);
+					}
+					&.resume-station,
+					&.pause-station {
+						color: var(--primary-color);
+					}
 				}
 			}
+			.currently-playing {
+				margin-bottom: 10px;
+			}
 		}
 	}
 }

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

@@ -8,7 +8,8 @@ export default {
 		includedPlaylists: [],
 		excludedPlaylists: [],
 		songsList: [],
-		stationPaused: true
+		stationPaused: true,
+		currentSong: {}
 	},
 	getters: {},
 	actions: {
@@ -32,6 +33,9 @@ export default {
 		},
 		updateStationPaused: ({ commit }, stationPaused) => {
 			commit("updateStationPaused", stationPaused);
+		},
+		updateCurrentSong: ({ commit }, currentSong) => {
+			commit("updateCurrentSong", currentSong);
 		}
 	},
 	mutations: {
@@ -75,6 +79,9 @@ export default {
 		},
 		updateStationPaused(state, stationPaused) {
 			state.stationPaused = stationPaused;
+		},
+		updateCurrentSong(state, currentSong) {
+			state.currentSong = currentSong;
 		}
 	}
 };