refactor: fixed, moved and improved autorequest functionality in stations

frontend/src/components/PlaylistTabBase.vue

@@ -894,7 +894,7 @@ export default {
 			}
 			if (type === "autorequest")
 				return new Promise(resolve => {
-					this.autoRequest.push(playlist);
+					this.addPlaylistToAutoRequest(playlist);
 					new Toast(
 						"Successfully selected playlist to auto request songs."
 					);
@@ -932,20 +932,9 @@ export default {
 				});
 			if (type === "autorequest")
 				return new Promise(resolve => {
-					let selected = false;
-					this.autoRequest.forEach((playlist, index) => {
-						if (playlist._id === playlistId) {
-							selected = true;
-							this.autoRequest.splice(index, 1);
-						}
-					});
-					if (selected) {
-						new Toast("Successfully deselected playlist.");
-						resolve();
-					} else {
-						new Toast("Playlist not selected.");
-						resolve();
-					}
+					this.removePlaylistFromAutoRequest(playlistId);
+					new Toast("Successfully deselected playlist.");
+					resolve();
 				});
 			return false;
 		},
@@ -1001,7 +990,11 @@ export default {
 			});
 		},
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["setPlaylists"])
+		...mapActions("user/playlists", ["setPlaylists"]),
+		...mapActions("station", [
+			"addPlaylistToAutoRequest",
+			"removePlaylistFromAutoRequest"
+		])
 	}
 };
 </script>

frontend/src/components/Request.vue

@@ -178,14 +178,13 @@
 				v-show="tab === 'autorequest'"
 				:type="'autorequest'"
 				:sector="sector"
-				@selected="autoRequestSong()"
 				:modal-uuid="modalUuid"
 			/>
 		</div>
 	</div>
 </template>
 <script>
-import { mapActions, mapState, mapGetters } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
@@ -292,10 +291,6 @@ export default {
 			role: state => state.auth.role,
 			userId: state => state.auth.userId
 		}),
-		...mapState("station", {
-			autoRequest: state => state.autoRequest,
-			autoRequestLock: state => state.autoRequestLock
-		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})
@@ -304,51 +299,12 @@ export default {
 		this.sitename = await lofig.get("siteSettings.sitename");
 
 		this.showTab("songs");
-
-		this.socket.on("event:station.queue.updated", () =>
-			this.autoRequestSong()
-		);
 	},
 	methods: {
 		showTab(tab) {
 			this.$refs[`${tab}-tab`].scrollIntoView({ block: "nearest" });
 			this.tab = tab;
 		},
-		autoRequestSong() {
-			if (
-				!this.autoRequestLock &&
-				this.songsList.length < 50 &&
-				this.currentUserQueueSongs <
-					this.station.requests.limit * 0.5 &&
-				this.autoRequest.length > 0
-			) {
-				const selectedPlaylist =
-					this.autoRequest[
-						Math.floor(Math.random() * this.autoRequest.length)
-					];
-				if (selectedPlaylist._id && selectedPlaylist.songs.length > 0) {
-					const selectedSong =
-						selectedPlaylist.songs[
-							Math.floor(
-								Math.random() * selectedPlaylist.songs.length
-							)
-						];
-					if (selectedSong.youtubeId) {
-						this.updateAutoRequestLock(true);
-						this.socket.dispatch(
-							"stations.addToQueue",
-							this.station._id,
-							selectedSong.youtubeId,
-							data => {
-								this.updateAutoRequestLock(false);
-								if (data.status !== "success")
-									this.autoRequestSong();
-							}
-						);
-					}
-				}
-			}
-		},
 		addSongToQueue(youtubeId, index) {
 			this.socket.dispatch(
 				"stations.addToQueue",
@@ -367,8 +323,7 @@ export default {
 					}
 				}
 			);
-		},
-		...mapActions("station", ["updateAutoRequest", "updateAutoRequestLock"])
+		}
 	}
 };
 </script>

frontend/src/pages/Station/index.vue

@@ -805,6 +805,7 @@ export default {
 			localPaused: state => state.localPaused,
 			noSong: state => state.noSong,
 			autoRequest: state => state.autoRequest,
+			autoRequestLock: state => state.autoRequestLock,
 			autofill: state => state.autofill,
 			blacklist: state => state.blacklist
 		}),
@@ -819,6 +820,11 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
+	watch: {
+		"autoRequest.length": function autoRequestWatcher() {
+			this.autoRequestSong();
+		}
+	},
 	async mounted() {
 		this.editSongModalWatcher = this.$store.watch(
 			state =>
@@ -961,6 +967,8 @@ export default {
 			this.timePaused = res.data.timePaused;
 			this.updateStationPaused(false);
 			if (!this.localPaused) this.resumeLocalPlayer();
+
+			this.autoRequestSong();
 		});
 
 		this.socket.on("event:station.deleted", () => {
@@ -1018,6 +1026,8 @@ export default {
 					: null;
 
 			this.updateNextSong(nextSong);
+
+			this.autoRequestSong();
 		});
 
 		this.socket.on("event:station.queue.song.repositioned", res => {
@@ -1166,6 +1176,50 @@ export default {
 				);
 			} else ms.removeMediaSessionData(0);
 		},
+		autoRequestSong() {
+			if (
+				!this.autoRequestLock &&
+				this.songsList.length < 50 &&
+				this.currentUserQueueSongs <
+					this.station.requests.limit * 0.5 &&
+				this.autoRequest.length > 0
+			) {
+				const selectedPlaylist =
+					this.autoRequest[
+						Math.floor(Math.random() * this.autoRequest.length)
+					];
+				if (selectedPlaylist._id && selectedPlaylist.songs.length > 0) {
+					const selectedSong =
+						selectedPlaylist.songs[
+							Math.floor(
+								Math.random() * selectedPlaylist.songs.length
+							)
+						];
+					if (selectedSong.youtubeId) {
+						this.updateAutoRequestLock(true);
+						this.socket.dispatch(
+							"stations.addToQueue",
+							this.station._id,
+							selectedSong.youtubeId,
+							data => {
+								this.updateAutoRequestLock(false);
+								if (data.status !== "success") {
+									setTimeout(
+										() => {
+											this.autoRequestSong();
+										},
+										data.message ===
+											"That song is already in the queue."
+											? 5000
+											: 1000
+									);
+								}
+							}
+						);
+					}
+				}
+			}
+		},
 		removeFromQueue(youtubeId) {
 			window.socket.dispatch(
 				"stations.removeFromQueue",
@@ -2130,7 +2184,8 @@ export default {
 			"setBlacklist",
 			"updateCurrentSongRatings",
 			"updateOwnCurrentSongRatings",
-			"updateCurrentSongSkipVotes"
+			"updateCurrentSongSkipVotes",
+			"updateAutoRequestLock"
 		]),
 		...mapActions("modals/editSong", ["stopVideo"])
 	}

frontend/src/store/modules/station.js

@@ -88,6 +88,12 @@ const actions = {
 		{ skipVotes, skipVotesCurrent }
 	) => {
 		commit("updateCurrentSongSkipVotes", { skipVotes, skipVotesCurrent });
+	},
+	addPlaylistToAutoRequest: ({ commit }, playlist) => {
+		commit("addPlaylistToAutoRequest", playlist);
+	},
+	removePlaylistFromAutoRequest: ({ commit }, playlistId) => {
+		commit("removePlaylistFromAutoRequest", playlistId);
 	}
 };
 
@@ -188,6 +194,16 @@ const mutations = {
 		state.currentSong.skipVotes = skipVotes;
 		if (skipVotesCurrent !== null)
 			state.currentSong.skipVotesCurrent = skipVotesCurrent;
+	},
+	addPlaylistToAutoRequest(state, playlist) {
+		state.autoRequest.push(playlist);
+	},
+	removePlaylistFromAutoRequest(state, playlistId) {
+		state.autoRequest.forEach((playlist, index) => {
+			if (playlist._id === playlistId) {
+				state.autoRequest.splice(index, 1);
+			}
+		});
 	}
 };