Added party mode playlist selection logic

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -26,9 +26,9 @@
 				</button>
 			</div>
 			<div class="tab" v-show="tab === 'current'">
-				<div v-if="includedPlaylists.length > 0">
+				<div v-if="currentPlaylists.length > 0">
 					<playlist-item
-						v-for="(playlist, index) in includedPlaylists"
+						v-for="(playlist, index) in currentPlaylists"
 						:key="'key-' + index"
 						:playlist="playlist"
 						:show-owner="true"
@@ -136,7 +136,7 @@
 											station.partyMode)) &&
 										!isSelected(playlist._id)
 								"
-								@click="selectPlaylist(playlist._id)"
+								@click="selectPlaylist(playlist)"
 								class="material-icons play-icon"
 								:content="
 									station.partyMode
@@ -225,7 +225,7 @@
 												station.partyMode) &&
 											!isSelected(playlist._id)
 									"
-									@click="selectPlaylist(playlist._id)"
+									@click="selectPlaylist(playlist)"
 									class="material-icons play-icon"
 									:content="
 										station.partyMode
@@ -320,17 +320,25 @@ export default {
 				this.$store.commit("user/playlists/setPlaylists", playlists);
 			}
 		},
+		currentPlaylists() {
+			if (this.station.type === "community" && this.station.partyMode) {
+				return this.partyPlaylists;
+			}
+			return this.includedPlaylists;
+		},
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
 			role: state => state.user.auth.role,
 			myUserId: state => state.user.auth.userId,
-			userId: state => state.user.auth.userId
+			userId: state => state.user.auth.userId,
+			partyPlaylists: state => state.station.partyPlaylists
 		}),
 		...mapState("modals/manageStation", {
 			station: state => state.station,
 			originalStation: state => state.originalStation,
 			includedPlaylists: state => state.includedPlaylists,
-			excludedPlaylists: state => state.excludedPlaylists
+			excludedPlaylists: state => state.excludedPlaylists,
+			songsList: state => state.songsList
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -445,16 +453,22 @@ export default {
 			this.editPlaylist(playlistId);
 			this.openModal({ sector: "station", modal: "editPlaylist" });
 		},
-		selectPlaylist(id) {
+		selectPlaylist(playlist) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				new Toast(
-					"Error: Party mode playlist selection not added yet."
-				);
+				if (!this.isSelected(playlist.id)) {
+					this.partyPlaylists.push(playlist);
+					this.addPartyPlaylistSongToQueue();
+					new Toast(
+						"Successfully selected playlist to auto request songs."
+					);
+				} else {
+					new Toast("Error: Playlist already selected.");
+				}
 			} else {
 				this.socket.dispatch(
 					"stations.includePlaylist",
 					this.station._id,
-					id,
+					playlist._id,
 					res => {
 						new Toast(res.message);
 					}
@@ -463,9 +477,18 @@ export default {
 		},
 		deselectPlaylist(id) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				new Toast(
-					"Error: Party mode playlist selection not added yet."
-				);
+				let selected = false;
+				this.currentPlaylists.forEach((playlist, index) => {
+					if (playlist._id === id) {
+						selected = true;
+						this.partyPlaylists.splice(index, 1);
+					}
+				});
+				if (selected) {
+					new Toast("Successfully deselected playlist.");
+				} else {
+					new Toast("Playlist not selected.");
+				}
 			} else {
 				this.socket.dispatch(
 					"stations.removeIncludedPlaylist",
@@ -478,13 +501,9 @@ export default {
 			}
 		},
 		isSelected(id) {
-			if (this.station.type === "community" && this.station.partyMode) {
-				// Party mode playlist selection not added yet.
-				return false;
-			}
 			// TODO Also change this once it changes for a station
 			let selected = false;
-			this.includedPlaylists.forEach(playlist => {
+			this.currentPlaylists.forEach(playlist => {
 				if (playlist._id === id) selected = true;
 			});
 			return selected;
@@ -518,7 +537,46 @@ export default {
 				}
 			);
 		},
-		...mapActions("station", ["updatePrivatePlaylistQueueSelected"]),
+		addPartyPlaylistSongToQueue() {
+			let isInQueue = false;
+			if (
+				this.station.type === "community" &&
+				this.station.partyMode === true
+			) {
+				this.songsList.forEach(queueSong => {
+					if (queueSong.requestedBy === this.userId) isInQueue = true;
+				});
+				if (!isInQueue && this.partyPlaylists) {
+					const selectedPlaylist = this.partyPlaylists[
+						Math.floor(Math.random() * this.partyPlaylists.length)
+					];
+					if (
+						selectedPlaylist._id &&
+						selectedPlaylist.songs.length > 0
+					) {
+						const selectedSong =
+							selectedPlaylist.songs[
+								Math.floor(
+									Math.random() *
+										selectedPlaylist.songs.length
+								)
+							];
+						if (selectedSong.youtubeId) {
+							this.socket.dispatch(
+								"stations.addToQueue",
+								this.station._id,
+								selectedSong.youtubeId,
+								data => {
+									if (data.status !== "success")
+										new Toast("Error auto queueing song");
+								}
+							);
+						}
+					}
+				}
+			}
+		},
+		...mapActions("station", ["updatePartyPlaylists"]),
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])
 	}

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

@@ -28,7 +28,7 @@
 										station.partyMode) &&
 									!isSelected(playlist._id)
 							"
-							@click="selectPlaylist(playlist._id)"
+							@click="selectPlaylist(playlist)"
 							class="material-icons play-icon"
 							:content="
 								station.partyMode
@@ -98,16 +98,22 @@ export default {
 		};
 	},
 	computed: {
+		currentPlaylists() {
+			if (this.station.type === "community" && this.station.partyMode) {
+				return this.partyPlaylists;
+			}
+			return this.includedPlaylists;
+		},
 		...mapState({
 			role: state => state.user.auth.role,
 			userId: state => state.user.auth.userId
 		}),
 		...mapState("station", {
 			station: state => state.station,
-			privatePlaylistQueueSelected: state =>
-				state.privatePlaylistQueueSelected,
+			partyPlaylists: state => state.partyPlaylists,
 			includedPlaylists: state => state.includedPlaylists,
-			excludedPlaylists: state => state.excludedPlaylists
+			excludedPlaylists: state => state.excludedPlaylists,
+			songsList: state => state.songsList
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -189,16 +195,22 @@ export default {
 			this.editPlaylist(id);
 			this.openModal({ sector: "station", modal: "editPlaylist" });
 		},
-		selectPlaylist(id) {
+		selectPlaylist(playlist) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				new Toast(
-					"Error: Party mode playlist selection not added yet."
-				);
+				if (!this.isSelected(playlist.id)) {
+					this.partyPlaylists.push(playlist);
+					this.addPartyPlaylistSongToQueue();
+					new Toast(
+						"Successfully selected playlist to auto request songs."
+					);
+				} else {
+					new Toast("Error: Playlist already selected.");
+				}
 			} else {
 				this.socket.dispatch(
 					"stations.includePlaylist",
 					this.station._id,
-					id,
+					playlist._id,
 					res => {
 						new Toast(res.message);
 					}
@@ -207,9 +219,18 @@ export default {
 		},
 		deselectPlaylist(id) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				new Toast(
-					"Error: Party mode playlist selection not added yet."
-				);
+				let selected = false;
+				this.currentPlaylists.forEach((playlist, index) => {
+					if (playlist._id === id) {
+						selected = true;
+						this.partyPlaylists.splice(index, 1);
+					}
+				});
+				if (selected) {
+					new Toast("Successfully deselected playlist.");
+				} else {
+					new Toast("Playlist not selected.");
+				}
 			} else {
 				this.socket.dispatch(
 					"stations.removeIncludedPlaylist",
@@ -222,18 +243,53 @@ export default {
 			}
 		},
 		isSelected(id) {
-			if (this.station.type === "community" && this.station.partyMode) {
-				// Party mode playlist selection not added yet.
-				return false;
-			}
 			// TODO Also change this once it changes for a station
 			let selected = false;
-			this.includedPlaylists.forEach(playlist => {
+			this.currentPlaylists.forEach(playlist => {
 				if (playlist._id === id) selected = true;
 			});
 			return selected;
 		},
-		...mapActions("station", ["updatePrivatePlaylistQueueSelected"]),
+		addPartyPlaylistSongToQueue() {
+			let isInQueue = false;
+			if (
+				this.station.type === "community" &&
+				this.station.partyMode === true
+			) {
+				this.songsList.forEach(queueSong => {
+					if (queueSong.requestedBy === this.userId) isInQueue = true;
+				});
+				if (!isInQueue && this.partyPlaylists) {
+					const selectedPlaylist = this.partyPlaylists[
+						Math.floor(Math.random() * this.partyPlaylists.length)
+					];
+					if (
+						selectedPlaylist._id &&
+						selectedPlaylist.songs.length > 0
+					) {
+						const selectedSong =
+							selectedPlaylist.songs[
+								Math.floor(
+									Math.random() *
+										selectedPlaylist.songs.length
+								)
+							];
+						if (selectedSong.youtubeId) {
+							this.socket.dispatch(
+								"stations.addToQueue",
+								this.station._id,
+								selectedSong.youtubeId,
+								data => {
+									if (data.status !== "success")
+										new Toast("Error auto queueing song");
+								}
+							);
+						}
+					}
+				}
+			}
+		},
+		...mapActions("station", ["updatePartyPlaylists"]),
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("user/playlists", ["editPlaylist"])
 	}

frontend/src/pages/Station/index.vue

@@ -615,8 +615,7 @@
 				<span><b>Local paused</b>: {{ localPaused }}</span>
 				<span><b>No song</b>: {{ noSong }}</span>
 				<span
-					><b>Private playlist queue selected</b>:
-					{{ privatePlaylistQueueSelected }}</span
+					><b>Party playlists selected</b>: {{ partyPlaylists }}</span
 				>
 				<span><b>Station paused</b>: {{ stationPaused }}</span>
 				<span
@@ -689,7 +688,6 @@ export default {
 			disliked: false,
 			timeBeforePause: 0,
 			skipVotes: 0,
-			automaticallyRequestedYoutubeId: null,
 			systemDifference: 0,
 			attemptsToPlayVideo: 0,
 			canAutoplay: true,
@@ -719,8 +717,7 @@ export default {
 			stationPaused: state => state.stationPaused,
 			localPaused: state => state.localPaused,
 			noSong: state => state.noSong,
-			privatePlaylistQueueSelected: state =>
-				state.privatePlaylistQueueSelected,
+			partyPlaylists: state => state.partyPlaylists,
 			includedPlaylists: state => state.includedPlaylists,
 			excludedPlaylists: state => state.excludedPlaylists
 		}),
@@ -839,37 +836,9 @@ export default {
 				if (queueSong.requestedBy === this.userId) isInQueue = true;
 			});
 
-			if (
-				!isInQueue &&
-				this.privatePlaylistQueueSelected &&
-				(this.automaticallyRequestedYoutubeId !==
-					this.currentSong.youtubeId ||
-					!this.currentSong.youtubeId)
-			) {
-				this.addFirstPrivatePlaylistSongToQueue();
+			if (!isInQueue && this.partyPlaylists) {
+				this.addPartyPlaylistSongToQueue();
 			}
-
-			// if (this.station.type === "official") {
-			// 	this.socket.dispatch(
-			// 		"stations.getQueue",
-			// 		this.station._id,
-			// 		res => {
-			// 			if (res.status === "success") {
-			// 				this.updateSongsList(res.data.queue);
-			// 			}
-			// 		}
-			// 	);
-			// }
-
-			// if (
-			// 	!isInQueue &&
-			// 	this.privatePlaylistQueueSelected &&
-			// 	(this.automaticallyRequestedYoutubeId !==
-			// 		this.currentSong.youtubeId ||
-			// 		!this.currentSong.youtubeId)
-			// ) {
-			// 	this.addFirstPrivatePlaylistSongToQueue();
-			// }
 		});
 
 		this.socket.on("event:stations.pause", res => {
@@ -1073,7 +1042,7 @@ export default {
 
 		clearInterval(this.activityWatchVideoDataInterval);
 
-		this.joinStation();
+		this.leaveStation();
 	},
 	methods: {
 		isOwnerOnly() {
@@ -1518,7 +1487,7 @@ export default {
 				}
 			);
 		},
-		addFirstPrivatePlaylistSongToQueue() {
+		addPartyPlaylistSongToQueue() {
 			let isInQueue = false;
 			if (
 				this.station.type === "community" &&
@@ -1527,57 +1496,33 @@ export default {
 				this.songsList.forEach(queueSong => {
 					if (queueSong.requestedBy === this.userId) isInQueue = true;
 				});
-				if (!isInQueue && this.privatePlaylistQueueSelected) {
-					this.socket.dispatch(
-						"playlists.getFirstSong",
-						this.privatePlaylistQueueSelected,
-						res => {
-							if (res.status === "success") {
-								const { song } = res.data;
-								if (song) {
-									if (song.duration < 15 * 60) {
-										this.automaticallyRequestedYoutubeId =
-											song.youtubeId;
-										this.socket.dispatch(
-											"stations.addToQueue",
-											this.station._id,
-											song.youtubeId,
-											data2 => {
-												if (data2.status === "success")
-													this.socket.dispatch(
-														"playlists.moveSongToBottom",
-														this
-															.privatePlaylistQueueSelected,
-														song.youtubeId
-													);
-											}
-										);
-									} else {
-										new Toast(
-											`Top song in playlist was too long to be added.`
-										);
-
-										this.socket.dispatch(
-											"playlists.moveSongToBottom",
-											this.privatePlaylistQueueSelected,
-											song.youtubeId,
-											data3 => {
-												if (data3.status === "success")
-													setTimeout(
-														() =>
-															this.addFirstPrivatePlaylistSongToQueue(),
-														3000
-													);
-											}
-										);
-									}
-								} else
-									new Toast(
-										`Selected playlist has no songs.`
-									);
-							}
+				if (!isInQueue && this.partyPlaylists.length > 0) {
+					const selectedPlaylist = this.partyPlaylists[
+						Math.floor(Math.random() * this.partyPlaylists.length)
+					];
+					if (
+						selectedPlaylist._id &&
+						selectedPlaylist.songs.length > 0
+					) {
+						const selectedSong =
+							selectedPlaylist.songs[
+								Math.floor(
+									Math.random() *
+										selectedPlaylist.songs.length
+								)
+							];
+						if (selectedSong.youtubeId) {
+							this.socket.dispatch(
+								"stations.addToQueue",
+								this.station._id,
+								selectedSong.youtubeId,
+								data => {
+									if (data.status !== "success")
+										new Toast("Error auto queueing song");
+								}
+							);
 						}
-					);
+					}
 				}
 			}
 		},
@@ -1916,6 +1861,7 @@ export default {
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("station", [
 			"joinStation",
+			"leaveStation",
 			"updateUserCount",
 			"updateUsers",
 			"updateCurrentSong",

frontend/src/store/modules/station.js

@@ -2,7 +2,7 @@
 
 const state = {
 	station: {},
-	privatePlaylistQueueSelected: null,
+	partyPlaylists: [],
 	editing: {},
 	userCount: 0,
 	users: {
@@ -26,6 +26,9 @@ const actions = {
 	joinStation: ({ commit }, station) => {
 		commit("joinStation", station);
 	},
+	leaveStation: ({ commit }, station) => {
+		commit("leaveStation", station);
+	},
 	editStation: ({ commit }, station) => {
 		commit("editStation", station);
 	},
@@ -59,8 +62,8 @@ const actions = {
 	updateNoSong: ({ commit }, noSong) => {
 		commit("updateNoSong", noSong);
 	},
-	updatePrivatePlaylistQueueSelected: ({ commit }, status) => {
-		commit("updatePrivatePlaylistQueueSelected", status);
+	updatePartyPlaylists: ({ commit }, playlists) => {
+		commit("updatePartyPlaylists", playlists);
 	},
 	updateIfStationIsFavorited: ({ commit }, { isFavorited }) => {
 		commit("updateIfStationIsFavorited", isFavorited);
@@ -77,6 +80,10 @@ const mutations = {
 	joinStation(state, station) {
 		state.station = { ...station };
 	},
+	leaveStation(state) {
+		state.station = {};
+		state.partyPlaylists = [];
+	},
 	editStation(state, station) {
 		state.editing = { ...station };
 	},
@@ -124,8 +131,8 @@ const mutations = {
 	updateNoSong(state, noSong) {
 		state.noSong = noSong;
 	},
-	updatePrivatePlaylistQueueSelected(state, status) {
-		state.privatePlaylistQueueSelected = status;
+	updatePartyPlaylists(state, playlists) {
+		state.partyPlaylists = playlists;
 	},
 	updateIfStationIsFavorited(state, isFavorited) {
 		state.station.isFavorited = isFavorited;