Moved queue to components and worked more on manage station

backend/logic/actions/stations.js

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

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

@@ -71,7 +71,8 @@
 		<button
 			class="button is-primary tab-actionable-button"
 			v-if="
-				loggedIn &&
+				sector === 'station' &&
+					loggedIn &&
 					station.type === 'community' &&
 					station.partyMode &&
 					((station.locked && isOwnerOnly()) ||
@@ -90,7 +91,9 @@
 		</button>
 		<button
 			class="button is-primary tab-actionable-button"
-			v-if="loggedIn && station.type === 'official'"
+			v-if="
+				sector === 'station' && loggedIn && station.type === 'official'
+			"
 			@click="
 				openModal({
 					sector: 'station',
@@ -104,7 +107,8 @@
 		<button
 			class="button is-primary tab-actionable-button disabled"
 			v-if="
-				!loggedIn &&
+				sector === 'station' &&
+					!loggedIn &&
 					((station.type === 'community' &&
 						station.partyMode &&
 						!station.locked) ||
@@ -147,6 +151,12 @@ import Confirm from "@/components/Confirm.vue";
 
 export default {
 	components: { draggable, SongItem, Confirm },
+	props: {
+		sector: {
+			type: String,
+			default: "station"
+		}
+	},
 	data() {
 		return {
 			dismissedWarning: false,
@@ -157,10 +167,20 @@ export default {
 	computed: {
 		queue: {
 			get() {
+				if (this.sector === "manageStation") {
+					return this.$store.state.modals.manageStation.songsList;
+				}
 				return this.$store.state.station.songsList;
 			},
 			set(queue) {
-				this.$store.commit("station/updateSongsList", queue);
+				if (this.sector === "manageStation") {
+					this.$store.commit(
+						"modals/manageStation/updateSongsList",
+						queue
+					);
+				} else {
+					this.$store.commit("station/updateSongsList", queue);
+				}
 			}
 		},
 		dragOptions() {
@@ -177,6 +197,7 @@ export default {
 			userRole: state => state.user.auth.role,
 			station: state => state.station.station,
 			songsList: state => state.station.songsList,
+			otherSongsList: state => state.modals.manageStation.songsList,
 			noSong: state => state.station.noSong
 		}),
 		...mapGetters({

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

@@ -123,7 +123,7 @@
 							</confirm>
 						</div>
 						<hr class="section-horizontal-rule" />
-						<queue />
+						<queue sector="manageStation" />
 					</div>
 				</div>
 			</div>
@@ -166,9 +166,9 @@ import Toast from "toasters";
 import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
 
 import Confirm from "@/components/Confirm.vue";
+import Queue from "@/components/Queue.vue";
 import Modal from "../../Modal.vue";
 
-import Queue from "../../../pages/Station/Sidebar/Queue.vue";
 import Settings from "./Tabs/Settings.vue";
 import Playlists from "./Tabs/Playlists.vue";
 import Search from "./Tabs/Search.vue";
@@ -200,12 +200,11 @@ export default {
 			userId: state => state.user.auth.userId,
 			role: state => state.user.auth.role
 		}),
-		...mapState("station", {
-			stationPaused: state => state.stationPaused
-		}),
 		...mapState("modals/manageStation", {
 			station: state => state.station,
-			originalStation: state => state.originalStation
+			originalStation: state => state.originalStation,
+			songsList: state => state.songsList,
+			stationPaused: state => state.stationPaused
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -217,6 +216,8 @@ export default {
 				const { station } = res.data;
 				this.editStation(station);
 
+				this.updateStationPaused(res.data.station.paused);
+
 				this.socket.dispatch(
 					"stations.getStationIncludedPlaylistsById",
 					this.stationId,
@@ -236,6 +237,16 @@ export default {
 						}
 					}
 				);
+
+				this.socket.dispatch(
+					"stations.getQueue",
+					this.stationId,
+					res => {
+						if (res.status === "success") {
+							this.updateSongsList(res.data.queue);
+						}
+					}
+				);
 			} else {
 				new Toast(`Station with that ID not found`);
 				this.closeModal({
@@ -244,8 +255,27 @@ export default {
 				});
 			}
 		});
+
+		this.socket.on("event:queue.update", res => {
+			this.updateSongsList(res.data.queue);
+		});
+
+		this.socket.on("event:queue.repositionSong", res => {
+			this.repositionSongInList(res.data.song);
+		});
+
+		this.socket.on("event:stations.pause", res => {
+			this.pausedAt = res.data.pausedAt;
+			this.updateStationPaused(true);
+		});
+
+		this.socket.on("event:stations.resume", res => {
+			this.timePaused = res.data.timePaused;
+			this.updateStationPaused(false);
+		});
 	},
 	beforeDestroy() {
+		this.repositionSongInList([]);
 		this.clearStation();
 	},
 	methods: {
@@ -304,7 +334,10 @@ export default {
 			"editStation",
 			"setIncludedPlaylists",
 			"setExcludedPlaylists",
-			"clearStation"
+			"clearStation",
+			"updateSongsList",
+			"repositionSongInList",
+			"updateStationPaused"
 		]),
 		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
@@ -316,6 +349,7 @@ export default {
 	z-index: 1800;
 	.modal-card {
 		width: 1300px;
+		height: 100%;
 		overflow: auto;
 		.tab > button {
 			width: 100%;

frontend/src/pages/Station/Sidebar/index.vue

@@ -43,7 +43,7 @@ import { mapActions, mapState } from "vuex";
 
 import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
 
-import Queue from "./Queue.vue";
+import Queue from "@/components/Queue.vue";
 import Users from "./Users.vue";
 import Playlists from "./Playlists.vue";
 

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

@@ -6,16 +6,33 @@ export default {
 		originalStation: {},
 		station: {},
 		includedPlaylists: [],
-		excludedPlaylists: []
+		excludedPlaylists: [],
+		songsList: [],
+		stationPaused: true
 	},
 	getters: {},
 	actions: {
-		editStation: ({ commit }, station) => commit("editStation", station),
-		setIncludedPlaylists: ({ commit }, includedPlaylists) =>
-			commit("setIncludedPlaylists", includedPlaylists),
-		setExcludedPlaylists: ({ commit }, excludedPlaylists) =>
-			commit("setExcludedPlaylists", excludedPlaylists),
-		clearStation: ({ commit }) => commit("clearStation")
+		editStation: ({ commit }, station) => {
+			commit("editStation", station);
+		},
+		setIncludedPlaylists: ({ commit }, includedPlaylists) => {
+			commit("setIncludedPlaylists", includedPlaylists);
+		},
+		setExcludedPlaylists: ({ commit }, excludedPlaylists) => {
+			commit("setExcludedPlaylists", excludedPlaylists);
+		},
+		clearStation: ({ commit }) => {
+			commit("clearStation");
+		},
+		updateSongsList: ({ commit }, songsList) => {
+			commit("updateSongsList", songsList);
+		},
+		repositionSongInList: ({ commit }, song) => {
+			commit("repositionSongInList", song);
+		},
+		updateStationPaused: ({ commit }, stationPaused) => {
+			commit("updateStationPaused", stationPaused);
+		}
 	},
 	mutations: {
 		editStation(state, station) {
@@ -35,6 +52,29 @@ export default {
 		clearStation(state) {
 			state.originalStation = null;
 			state.station = null;
+		},
+		updateSongsList(state, songsList) {
+			state.songsList = songsList;
+		},
+		repositionSongInList(state, song) {
+			if (
+				state.songsList[song.newIndex] &&
+				state.songsList[song.newIndex].youtubeId === song.youtubeId
+			)
+				return;
+
+			const { songsList } = state;
+
+			songsList.splice(
+				song.newIndex,
+				0,
+				songsList.splice(song.oldIndex, 1)[0]
+			);
+
+			state.songsList = songsList;
+		},
+		updateStationPaused(state, stationPaused) {
+			state.stationPaused = stationPaused;
 		}
 	}
 };