Merge branch 'polishing' of https://github.com/Musare/MusareNode into polishing

backend/logic/youtube.js

@@ -305,9 +305,8 @@ class _YouTubeModule extends CoreClass {
 						YouTubeModule.log("ERROR", "GET_PLAYLIST_PAGE", `${err.message}`);
 						if (err.message === "Request failed with status code 404") {
 							return reject(new Error("Playlist not found. Is the playlist public/unlisted?"));
-						} else {
-							return reject(new Error("An error has occured. Please try again later."));
 						}
+						return reject(new Error("An error has occured. Please try again later."));
 					});
 			});
 		});

frontend/package-lock.json

@@ -10467,9 +10467,9 @@
       }
     },
     "toasters": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/toasters/-/toasters-2.1.2.tgz",
-      "integrity": "sha512-TE2aDJjfQZsg9obZnuXnUeJft90FVz02Stx75lULqZtzZpYajpbk5xk9Za4V1ruTiPjYCRjGRDD2GHEmFh2Gvg=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/toasters/-/toasters-2.3.0.tgz",
+      "integrity": "sha512-3BaJ9SYFOL9VNh9YXqUIpR5beX+qLit35xi7iSMLi6CH8GR/8RCEz5EaWeCcH+Z1VD6whv0amPLtBWWGgkoiSw=="
     },
     "toidentifier": {
       "version": "1.0.0",

frontend/package.json

@@ -47,7 +47,7 @@
     "date-fns": "^2.19.0",
     "eslint-config-airbnb-base": "^13.2.0",
     "html-webpack-plugin": "^5.3.1",
-    "toasters": "^2.2.3",
+    "toasters": "^2.3.0",
     "vue": "^2.6.12",
     "vue-content-loader": "^0.2.3",
     "vue-loader": "^15.9.6",

frontend/src/App.vue

@@ -51,24 +51,8 @@ export default {
 	},
 	watch: {
 		socketConnected(connected) {
-			if (!connected)
-				new Toast({
-					content: "Could not connect to the server.",
-					persistant: true
-				});
-			else {
-				// better implementation once vue-roaster is updated
-				document
-					.getElementById("toasts-content")
-					.childNodes.forEach(toast => {
-						if (
-							toast.innerHTML ===
-							"Could not connect to the server."
-						) {
-							toast.remove();
-						}
-					});
-			}
+			if (!connected) this.disconnectedMessage.show();
+			else this.disconnectedMessage.hide();
 		},
 		nightmode(nightmode) {
 			if (nightmode) this.enableNightMode();
@@ -114,6 +98,14 @@ export default {
 			localStorage.removeItem("github_redirect");
 		}
 
+		this.disconnectedMessage = new Toast({
+			content: "Could not connect to the server.",
+			persistent: true,
+			interactable: false
+		});
+
+		this.disconnectedMessage.hide();
+
 		ws.onConnect(true, () => {
 			this.socketConnected = true;
 		});

frontend/src/api/admin/reports.js

@@ -7,7 +7,7 @@ export default {
 	resolve(reportId) {
 		return new Promise((resolve, reject) =>
 			ws.socket.dispatch("reports.resolve", reportId, res => {
-				new Toast({ content: res.message, timeout: 3000 });
+				new Toast(res.message);
 				if (res.status === "success")
 					return resolve({ status: "success" });
 				return reject(new Error(res.message));

frontend/src/api/auth.js

@@ -84,7 +84,7 @@ export default {
 						return window.location.reload();
 					});
 				}
-				new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 				return reject(new Error(res.message));
 			});
 		});

frontend/src/aw.js

@@ -14,6 +14,7 @@ const notConnectedToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 notConnectedToast.hide();
 
 const sendingVideoDataToast = new Toast({
@@ -21,6 +22,7 @@ const sendingVideoDataToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 sendingVideoDataToast.hide();
 
 const deniedToast = new Toast({
@@ -29,6 +31,7 @@ const deniedToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 deniedToast.hide();
 
 const competitorToast = new Toast({
@@ -37,6 +40,7 @@ const competitorToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 competitorToast.hide();
 
 export default {
@@ -127,11 +131,7 @@ export default {
 		if (data.type === "pong") {
 			gotPong = true;
 			notConnectedToast.hide();
-			new Toast({
-				content:
-					"Got pong, connected to ActivityWatch Musare extension",
-				timeout: 8000
-			});
+			new Toast("Got pong, connected to ActivityWatch Musare extension");
 		}
 
 		if (data.type === "denied") {
@@ -154,11 +154,9 @@ export default {
 					this.attemptPing.apply(this);
 				}, 1000);
 			} else {
-				new Toast({
-					content:
-						"Couldn't connect to ActivityWatch Musare extension.",
-					timeout: 8000
-				});
+				new Toast(
+					"Couldn't connect to ActivityWatch Musare extension."
+				);
 			}
 		}
 	}

frontend/src/components/ActivityItem.vue

@@ -185,6 +185,7 @@ export default {
 		min-width: 70.5px;
 		max-width: 70.5px;
 		height: 70.5px;
+		margin-left: 0px;
 
 		&.red {
 			background-color: var(--red);

frontend/src/components/AddToPlaylistDropdown.vue

@@ -107,7 +107,7 @@ export default {
 					this.song.songId,
 					playlist._id,
 					res => {
-						new Toast({ content: res.message, timeout: 4000 });
+						new Toast(res.message);
 
 						if (res.status === "success") {
 							this.playlists[playlistIndex].songs.push(this.song);
@@ -120,7 +120,7 @@ export default {
 					this.song.songId,
 					playlist._id,
 					res => {
-						new Toast({ content: res.message, timeout: 4000 });
+						new Toast(res.message);
 
 						if (res.status === "success") {
 							this.playlists[playlistIndex].songs.forEach(

frontend/src/components/modals/AddSongToQueue.vue

@@ -263,36 +263,24 @@ export default {
 					songId,
 					data => {
 						if (data.status !== "success")
-							new Toast({
-								content: `Error: ${data.message}`,
-								timeout: 8000
-							});
+							new Toast(`Error: ${data.message}`);
 						else {
 							this.search.songs.results[
 								index
 							].isAddedToQueue = true;
 
-							new Toast({
-								content: `${data.message}`,
-								timeout: 4000
-							});
+							new Toast(data.message);
 						}
 					}
 				);
 			} else {
 				this.socket.dispatch("songs.request", songId, data => {
 					if (data.status !== "success")
-						new Toast({
-							content: `Error: ${data.message}`,
-							timeout: 8000
-						});
+						new Toast(`Error: ${data.message}`);
 					else {
 						this.search.songs.results[index].isAddedToQueue = true;
 
-						new Toast({
-							content: `${data.message}`,
-							timeout: 4000
-						});
+						new Toast(data.message);
 					}
 				});
 			}
@@ -302,10 +290,7 @@ export default {
 
 			// import query is blank
 			if (!this.search.playlist.query)
-				return new Toast({
-					content: "Please enter a YouTube playlist URL.",
-					timeout: 4000
-				});
+				return new Toast("Please enter a YouTube playlist URL.");
 
 			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
 			const splitQuery = regex.exec(this.search.playlist.query);
@@ -320,11 +305,9 @@ export default {
 			// don't give starting import message instantly in case of instant error
 			setTimeout(() => {
 				if (isImportingPlaylist) {
-					new Toast({
-						content:
-							"Starting to import your playlist. This can take some time to do.",
-						timeout: 4000
-					});
+					new Toast(
+						"Starting to import your playlist. This can take some time to do."
+					);
 				}
 			}, 750);
 

frontend/src/components/modals/CreateCommunityStation.vue

@@ -65,43 +65,29 @@ export default {
 			const { name, displayName, description } = this.newCommunity;
 
 			if (!name || !displayName || !description)
-				return new Toast({
-					content: "Please fill in all fields",
-					timeout: 8000
-				});
+				return new Toast("Please fill in all fields");
 
 			if (!validation.isLength(name, 2, 16))
-				return new Toast({
-					content: "Name must have between 2 and 16 characters.",
-					timeout: 8000
-				});
+				return new Toast("Name must have between 2 and 16 characters.");
 
 			if (!validation.regex.az09_.test(name))
-				return new Toast({
-					content:
-						"Invalid name format. Allowed characters: a-z, 0-9 and _.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid name format. Allowed characters: a-z, 0-9 and _."
+				);
 
 			if (!validation.isLength(displayName, 2, 32))
-				return new Toast({
-					content:
-						"Display name must have between 2 and 32 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Display name must have between 2 and 32 characters."
+				);
 			if (!validation.regex.ascii.test(displayName))
-				return new Toast({
-					content:
-						"Invalid display name format. Only ASCII characters are allowed.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid display name format. Only ASCII characters are allowed."
+				);
 
 			if (!validation.isLength(description, 2, 200))
-				return new Toast({
-					content:
-						"Description must have between 2 and 200 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Description must have between 2 and 200 characters."
+				);
 
 			let characters = description.split("");
 
@@ -110,10 +96,7 @@ export default {
 			});
 
 			if (characters.length !== 0)
-				return new Toast({
-					content: "Invalid description format.",
-					timeout: 8000
-				});
+				return new Toast("Invalid description format.");
 
 			return this.socket.dispatch(
 				"stations.create",
@@ -125,15 +108,12 @@ export default {
 				},
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: `You have added the station successfully`,
-							timeout: 4000
-						});
+						new Toast(`You have added the station successfully`);
 						this.closeModal({
 							sector: "home",
 							modal: "createCommunityStation"
 						});
-					} else new Toast({ content: res.message, timeout: 4000 });
+					} else new Toast(res.message);
 				}
 			);
 		},

frontend/src/components/modals/CreatePlaylist.vue

@@ -58,23 +58,19 @@ export default {
 			const { displayName } = this.playlist;
 
 			if (!validation.isLength(displayName, 2, 32))
-				return new Toast({
-					content:
-						"Display name must have between 2 and 32 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Display name must have between 2 and 32 characters."
+				);
 			if (!validation.regex.ascii.test(displayName))
-				return new Toast({
-					content:
-						"Invalid display name format. Only ASCII characters are allowed.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid display name format. Only ASCII characters are allowed."
+				);
 
 			return this.socket.dispatch(
 				"playlists.create",
 				this.playlist,
 				res => {
-					new Toast({ content: res.message, timeout: 3000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.closeModal({

frontend/src/components/modals/EditNews.vue

@@ -190,10 +190,7 @@ export default {
 				const news = res.data;
 				this.editNews(news);
 			} else {
-				new Toast({
-					content: "News with that ID not found",
-					timeout: 3000
-				});
+				new Toast("News with that ID not found");
 				this.closeModal({
 					sector: this.sector,
 					modal: "editNews"
@@ -206,17 +203,10 @@ export default {
 			const change = document.getElementById(`edit-${type}`).value.trim();
 
 			if (this.news[type].indexOf(change) !== -1)
-				return new Toast({
-					content: `Tag already exists`,
-					timeout: 3000
-				});
+				return new Toast(`Tag already exists`);
 
 			if (change) this.addChange({ type, change });
-			else
-				new Toast({
-					content: `${type} cannot be empty`,
-					timeout: 3000
-				});
+			else new Toast(`${type} cannot be empty`);
 
 			document.getElementById(`edit-${type}`).value = "";
 			return true;
@@ -230,7 +220,7 @@ export default {
 				this.news._id,
 				this.news,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 					if (res.status === "success") {
 						if (close)
 							this.closeModal({

frontend/src/components/modals/EditPlaylist.vue

@@ -419,11 +419,7 @@ export default {
 				this.playlist = res.data;
 				this.playlist.songs.sort((a, b) => a.position - b.position);
 				this.playlist.oldId = res.data._id;
-			} else
-				new Toast({
-					content: res.message,
-					timeout: 4000
-				});
+			} else new Toast(res.message);
 		});
 
 		this.socket.on("event:playlist.addSong", data => {
@@ -483,10 +479,7 @@ export default {
 
 			// import query is blank
 			if (!this.search.playlist.query)
-				return new Toast({
-					content: "Please enter a YouTube playlist URL.",
-					timeout: 4000
-				});
+				return new Toast("Please enter a YouTube playlist URL.");
 
 			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
 			const splitQuery = regex.exec(this.search.playlist.query);
@@ -501,11 +494,9 @@ export default {
 			// don't give starting import message instantly in case of instant error
 			setTimeout(() => {
 				if (isImportingPlaylist) {
-					new Toast({
-						content:
-							"Starting to import your playlist. This can take some time to do.",
-						timeout: 4000
-					});
+					new Toast(
+						"Starting to import your playlist. This can take some time to do."
+					);
 				}
 			}, 750);
 
@@ -553,7 +544,7 @@ export default {
 				this.playlist._id,
 				songsBeingChanged,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				}
 			);
 		},
@@ -569,7 +560,7 @@ export default {
 				"playlists.shuffle",
 				this.playlist._id,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 					if (res.status === "success") {
 						this.playlist.songs = res.data.songs.sort(
 							(a, b) => a.position - b.position
@@ -585,7 +576,7 @@ export default {
 				id,
 				this.playlist._id,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 					if (res.status === "success")
 						this.search.songs.results[index].isAddedToQueue = true;
 				}
@@ -594,12 +585,12 @@ export default {
 		removeSongFromPlaylist(id) {
 			if (this.playlist.displayName === "Liked Songs") {
 				this.socket.dispatch("songs.unlike", id, res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				});
 			}
 			if (this.playlist.displayName === "Disliked Songs") {
 				this.socket.dispatch("songs.undislike", id, res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				});
 			} else {
 				this.socket.dispatch(
@@ -607,7 +598,7 @@ export default {
 					id,
 					this.playlist._id,
 					res => {
-						new Toast({ content: res.message, timeout: 4000 });
+						new Toast(res.message);
 					}
 				);
 			}
@@ -615,30 +606,26 @@ export default {
 		renamePlaylist() {
 			const { displayName } = this.playlist;
 			if (!validation.isLength(displayName, 2, 32))
-				return new Toast({
-					content:
-						"Display name must have between 2 and 32 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Display name must have between 2 and 32 characters."
+				);
 			if (!validation.regex.ascii.test(displayName))
-				return new Toast({
-					content:
-						"Invalid display name format. Only ASCII characters are allowed.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid display name format. Only ASCII characters are allowed."
+				);
 
 			return this.socket.dispatch(
 				"playlists.updateDisplayName",
 				this.playlist._id,
 				this.playlist.displayName,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				}
 			);
 		},
 		removePlaylist() {
 			this.socket.dispatch("playlists.remove", this.playlist._id, res => {
-				new Toast({ content: res.message, timeout: 3000 });
+				new Toast(res.message);
 				if (res.status === "success") {
 					this.closeModal({
 						sector: "station",
@@ -671,17 +658,10 @@ export default {
 					a.click();
 					window.URL.revokeObjectURL(url);
 
-					new Toast({
-						content: "Successfully downloaded playlist.",
-						timeout: 3000
-					});
+					new Toast("Successfully downloaded playlist.");
 				})
 				.catch(
-					() =>
-						new Toast({
-							content: "Failed to export and download playlist.",
-							timeout: 3000
-						})
+					() => new Toast("Failed to export and download playlist.")
 				);
 		},
 		moveSongToTop(index) {
@@ -710,7 +690,7 @@ export default {
 					this.playlist._id,
 					privacy,
 					res => {
-						new Toast({ content: res.message, timeout: 4000 });
+						new Toast(res.message);
 					}
 				);
 			}
@@ -722,16 +702,8 @@ export default {
 				songId,
 				data => {
 					if (data.status !== "success")
-						new Toast({
-							content: `Error: ${data.message}`,
-							timeout: 8000
-						});
-					else {
-						new Toast({
-							content: `${data.message}`,
-							timeout: 4000
-						});
-					}
+						new Toast(`Error: ${data.message}`);
+					else new Toast(data.message);
 				}
 			);
 		},

frontend/src/components/modals/EditSong.vue

@@ -723,20 +723,16 @@ export default {
 									) {
 										this.video.player.stopVideo();
 										this.video.paused = true;
-										return new Toast({
-											content:
-												"Video can't play. Specified duration is bigger than the YouTube song duration.",
-											timeout: 4000
-										});
+										return new Toast(
+											"Video can't play. Specified duration is bigger than the YouTube song duration."
+										);
 									}
 									if (this.song.duration <= 0) {
 										this.video.player.stopVideo();
 										this.video.paused = true;
-										return new Toast({
-											content:
-												"Video can't play. Specified duration has to be more than 0 seconds.",
-											timeout: 4000
-										});
+										return new Toast(
+											"Video can't play. Specified duration has to be more than 0 seconds."
+										);
 									}
 
 									if (
@@ -756,10 +752,7 @@ export default {
 						}
 					});
 				} else {
-					new Toast({
-						content: "Song with that ID not found",
-						timeout: 3000
-					});
+					new Toast("Song with that ID not found");
 					this.closeModal({
 						sector: this.sector,
 						modal: "editSong"
@@ -971,18 +964,12 @@ export default {
 
 			if (!song.title) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content: "Please fill in all fields",
-					timeout: 8000
-				});
+				return new Toast("Please fill in all fields");
 			}
 
 			if (!song.thumbnail) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content: "Please fill in all fields",
-					timeout: 8000
-				});
+				return new Toast("Please fill in all fields");
 			}
 
 			// Duration
@@ -991,30 +978,25 @@ export default {
 				this.youtubeVideoDuration
 			) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content:
-						"Duration can't be higher than the length of the video",
-					timeout: 8000
-				});
+				return new Toast(
+					"Duration can't be higher than the length of the video"
+				);
 			}
 
 			// Title
 			if (!validation.isLength(song.title, 1, 100)) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content: "Title must have between 1 and 100 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Title must have between 1 and 100 characters."
+				);
 			}
 
 			// Artists
 			if (song.artists.length < 1 || song.artists.length > 10) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content:
-						"Invalid artists. You must have at least 1 artist and a maximum of 10 artists.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid artists. You must have at least 1 artist and a maximum of 10 artists."
+				);
 			}
 
 			let error;
@@ -1034,7 +1016,7 @@ export default {
 
 			if (error) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({ content: error, timeout: 8000 });
+				return new Toast(error);
 			}
 
 			// Genres
@@ -1058,24 +1040,19 @@ export default {
 
 			if (error) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({ content: error, timeout: 8000 });
+				return new Toast(error);
 			}
 
 			// Thumbnail
 			if (!validation.isLength(song.thumbnail, 1, 256)) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content:
-						"Thumbnail must have between 8 and 256 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Thumbnail must have between 8 and 256 characters."
+				);
 			}
 			if (this.useHTTPS && song.thumbnail.indexOf("https://") !== 0) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content: 'Thumbnail must start with "https://".',
-					timeout: 8000
-				});
+				return new Toast('Thumbnail must start with "https://".');
 			}
 
 			if (
@@ -1084,16 +1061,13 @@ export default {
 				song.thumbnail.indexOf("https://") !== 0
 			) {
 				saveButtonRef.handleFailedSave();
-				return new Toast({
-					content: 'Thumbnail must start with "http://".',
-					timeout: 8000
-				});
+				return new Toast('Thumbnail must start with "http://".');
 			}
 
 			saveButtonRef.status = "disabled";
 
 			return this.socket.dispatch(`songs.update`, song._id, song, res => {
-				new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 
 				if (res.status === "success")
 					saveButtonRef.handleSuccessfulSave();
@@ -1175,15 +1149,13 @@ export default {
 			this.socket.dispatch("apis.searchDiscogs", query, page, res => {
 				if (res.status === "success") {
 					if (page === 1)
-						new Toast({
-							content: `Successfully searched. Got ${res.results.length} results.`,
-							timeout: 4000
-						});
+						new Toast(
+							`Successfully searched. Got ${res.results.length} results.`
+						);
 					else
-						new Toast({
-							content: `Successfully got ${res.results.length} more results.`,
-							timeout: 4000
-						});
+						new Toast(
+							`Successfully got ${res.results.length} more results.`
+						);
 
 					if (page === 1) {
 						this.discogs.apiResults = [];
@@ -1215,7 +1187,7 @@ export default {
 
 					this.discogs.page = page;
 					this.discogs.disableLoadMore = false;
-				} else new Toast({ content: res.message, timeout: 8000 });
+				} else new Toast(res.message);
 			});
 		},
 		loadNextDiscogsPage() {
@@ -1322,37 +1294,25 @@ export default {
 					.value.toLowerCase()
 					.trim();
 				if (this.song.genres.indexOf(genre) !== -1)
-					return new Toast({
-						content: "Genre already exists",
-						timeout: 3000
-					});
+					return new Toast("Genre already exists");
 				if (genre) {
 					this.song.genres.push(genre);
 					document.getElementById("new-genre").value = "";
 					return false;
 				}
 
-				return new Toast({
-					content: "Genre cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Genre cannot be empty");
 			}
 			if (type === "artists") {
 				const artist = document.getElementById("new-artist").value;
 				if (this.song.artists.indexOf(artist) !== -1)
-					return new Toast({
-						content: "Artist already exists",
-						timeout: 3000
-					});
+					return new Toast("Artist already exists");
 				if (document.getElementById("new-artist").value !== "") {
 					this.song.artists.push(artist);
 					document.getElementById("new-artist").value = "";
 					return false;
 				}
-				return new Toast({
-					content: "Artist cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Artist cannot be empty");
 			}
 
 			return false;

frontend/src/components/modals/EditStation.vue

@@ -638,10 +638,7 @@ export default {
 				// 	JSON.stringify(this.station.blacklistedGenres)
 				// );
 			} else {
-				new Toast({
-					content: "Station with that ID not found",
-					timeout: 3000
-				});
+				new Toast("Station with that ID not found");
 				this.closeModal({
 					sector: this.sector,
 					modal: "editStation"
@@ -704,25 +701,17 @@ export default {
 			) {
 				this.$refs.saveButton.handleFailedSave();
 
-				new Toast({
-					content: "Please make a change before saving.",
-					timeout: 8000
-				});
+				new Toast("Please make a change before saving.");
 			}
 		},
 		updateName() {
 			const { name } = this.station;
 			if (!validation.isLength(name, 2, 16))
-				return new Toast({
-					content: "Name must have between 2 and 16 characters.",
-					timeout: 8000
-				});
+				return new Toast("Name must have between 2 and 16 characters.");
 			if (!validation.regex.az09_.test(name))
-				return new Toast({
-					content:
-						"Invalid name format. Allowed characters: a-z, 0-9 and _.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid name format. Allowed characters: a-z, 0-9 and _."
+				);
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -731,7 +720,7 @@ export default {
 				this.station._id,
 				name,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.originalStation.name = name;
@@ -746,18 +735,14 @@ export default {
 			const { displayName } = this.station;
 
 			if (!validation.isLength(displayName, 2, 32))
-				return new Toast({
-					content:
-						"Display name must have between 2 and 32 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Display name must have between 2 and 32 characters."
+				);
 
 			if (!validation.regex.ascii.test(displayName))
-				return new Toast({
-					content:
-						"Invalid display name format. Only ASCII characters are allowed.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid display name format. Only ASCII characters are allowed."
+				);
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -766,7 +751,7 @@ export default {
 				this.station._id,
 				displayName,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.originalStation.displayName = displayName;
@@ -780,21 +765,16 @@ export default {
 		updateDescription() {
 			const { description } = this.station;
 			if (!validation.isLength(description, 2, 200))
-				return new Toast({
-					content:
-						"Description must have between 2 and 200 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Description must have between 2 and 200 characters."
+				);
 
 			let characters = description.split("");
 			characters = characters.filter(character => {
 				return character.charCodeAt(0) === 21328;
 			});
 			if (characters.length !== 0)
-				return new Toast({
-					content: "Invalid description format.",
-					timeout: 8000
-				});
+				return new Toast("Invalid description format.");
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -803,7 +783,7 @@ export default {
 				this.station._id,
 				description,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.originalStation.description = description;
@@ -827,7 +807,7 @@ export default {
 				this.station._id,
 				this.station.privacy,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.originalStation.privacy = this.station.privacy;
@@ -846,7 +826,7 @@ export default {
 				this.station._id,
 				this.station.genres,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						const genres = JSON.parse(
@@ -871,7 +851,7 @@ export default {
 				this.station._id,
 				this.station.blacklistedGenres,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						const blacklistedGenres = JSON.parse(
@@ -900,7 +880,7 @@ export default {
 				this.station._id,
 				this.station.partyMode,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.originalStation.partyMode = this.station.partyMode;
@@ -924,7 +904,7 @@ export default {
 				this.station._id,
 				this.station.playMode,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.originalStation.playMode = this.station.playMode;
@@ -951,18 +931,14 @@ export default {
 						if (this.originalStation)
 							this.originalStation.locked = res.data;
 
-						new Toast({
-							content: `Toggled queue lock successfully to ${res.data}`,
-							timeout: 4000
-						});
+						new Toast(
+							`Toggled queue lock successfully to ${res.data}`
+						);
 
 						return this.$refs.saveButton.handleSuccessfulSave();
 					}
 
-					new Toast({
-						content: "Failed to toggle queue lock.",
-						timeout: 8000
-					});
+					new Toast("Failed to toggle queue lock.");
 
 					return this.$refs.saveButton.handleFailedSave();
 				}
@@ -981,7 +957,7 @@ export default {
 				this.station._id,
 				this.station.theme,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 
 					if (res.status === "success") {
 						this.originalStation.theme = this.station.theme;
@@ -999,7 +975,7 @@ export default {
 						sector: "station",
 						modal: "editStation"
 					});
-				return new Toast({ content: res.message, timeout: 8000 });
+				return new Toast(res.message);
 			});
 		},
 		blurGenreInput() {
@@ -1064,40 +1040,28 @@ export default {
 			if (type === "genres") {
 				const genre = this.genreInputValue.toLowerCase().trim();
 				if (this.station.genres.indexOf(genre) !== -1)
-					return new Toast({
-						content: "Genre already exists",
-						timeout: 3000
-					});
+					return new Toast("Genre already exists");
 				if (genre) {
 					this.station.genres.push(genre);
 					this.genreInputValue = "";
 					return false;
 				}
 
-				return new Toast({
-					content: "Genre cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Genre cannot be empty");
 			}
 			if (type === "blacklist-genres") {
 				const genre = this.blacklistGenreInputValue
 					.toLowerCase()
 					.trim();
 				if (this.station.blacklistedGenres.indexOf(genre) !== -1)
-					return new Toast({
-						content: "Blacklist genre already exists",
-						timeout: 3000
-					});
+					return new Toast("Blacklist genre already exists");
 				if (genre) {
 					this.station.blacklistedGenres.push(genre);
 					this.blacklistGenreInputValue = "";
 					return false;
 				}
 
-				return new Toast({
-					content: "Blacklist genre cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Blacklist genre cannot be empty");
 			}
 
 			return false;

frontend/src/components/modals/EditUser.vue

@@ -121,10 +121,7 @@ export default {
 				const user = res.data;
 				this.editUser(user);
 			} else {
-				new Toast({
-					content: "User with that ID not found",
-					timeout: 3000
-				});
+				new Toast("User with that ID not found");
 				this.closeModal({
 					sector: this.sector,
 					modal: "editUser"
@@ -136,49 +133,42 @@ export default {
 		updateUsername() {
 			const { username } = this.user;
 			if (!validation.isLength(username, 2, 32))
-				return new Toast({
-					content: "Username must have between 2 and 32 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Username must have between 2 and 32 characters."
+				);
 			if (!validation.regex.custom("a-zA-Z0-9_-").test(username))
-				return new Toast({
-					content:
-						"Invalid username format. Allowed characters: a-z, A-Z, 0-9, _ and -.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid username format. Allowed characters: a-z, A-Z, 0-9, _ and -."
+				);
 
 			return this.socket.dispatch(
 				`users.updateUsername`,
 				this.user._id,
 				username,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				}
 			);
 		},
 		updateEmail() {
 			const email = this.user.email.address;
 			if (!validation.isLength(email, 3, 254))
-				return new Toast({
-					content: "Email must have between 3 and 254 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Email must have between 3 and 254 characters."
+				);
 			if (
 				email.indexOf("@") !== email.lastIndexOf("@") ||
 				!validation.regex.emailSimple.test(email) ||
 				!validation.regex.ascii.test(email)
 			)
-				return new Toast({
-					content: "Invalid email format.",
-					timeout: 8000
-				});
+				return new Toast("Invalid email format.");
 
 			return this.socket.dispatch(
 				`users.updateEmail`,
 				this.user._id,
 				email,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				}
 			);
 		},
@@ -188,23 +178,20 @@ export default {
 				this.user._id,
 				this.user.role,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				}
 			);
 		},
 		banUser() {
 			const { reason } = this.ban;
 			if (!validation.isLength(reason, 1, 64))
-				return new Toast({
-					content: "Reason must have between 1 and 64 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Reason must have between 1 and 64 characters."
+				);
 			if (!validation.regex.ascii.test(reason))
-				return new Toast({
-					content:
-						"Invalid reason format. Only ascii characters are allowed.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid reason format. Only ascii characters are allowed."
+				);
 
 			return this.socket.dispatch(
 				`users.banUserById`,
@@ -212,13 +199,13 @@ export default {
 				this.ban.reason,
 				this.ban.expiresAt,
 				res => {
-					new Toast({ content: res.message, timeout: 4000 });
+					new Toast(res.message);
 				}
 			);
 		},
 		removeSessions() {
 			this.socket.dispatch(`users.removeSessions`, this.user._id, res => {
-				new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 			});
 		},
 		...mapActions("modals/editUser", ["editUser"]),

frontend/src/components/modals/Login.vue

@@ -103,9 +103,7 @@ export default {
 				.then(res => {
 					if (res.status === "success") window.location.reload();
 				})
-				.catch(
-					err => new Toast({ content: err.message, timeout: 5000 })
-				);
+				.catch(err => new Toast(err.message));
 		},
 		resetPassword() {
 			this.closeModal({ sector: "header", modal: "login" });

frontend/src/components/modals/Register.vue

@@ -227,10 +227,7 @@ export default {
 				!this.email.valid ||
 				!this.password.valid
 			)
-				return new Toast({
-					content: "Please ensure all fields are valid.",
-					timeout: 5000
-				});
+				return new Toast("Please ensure all fields are valid.");
 
 			return this.register({
 				username: this.username.value,
@@ -241,9 +238,7 @@ export default {
 				.then(res => {
 					if (res.status === "success") window.location.href = "/";
 				})
-				.catch(
-					err => new Toast({ content: err.message, timeout: 5000 })
-				);
+				.catch(err => new Toast(err.message));
 		},
 		onInputBlur(inputName) {
 			this[inputName].entered = true;

frontend/src/components/modals/Report.vue

@@ -2,10 +2,7 @@
 	<modal title="Report">
 		<div slot="body">
 			<div class="columns song-types">
-				<div
-					v-if="previousSong !== null && localSong === null"
-					class="column song-type"
-				>
+				<div v-if="previousSong !== null" class="column song-type">
 					<div
 						class="card is-fullwidth"
 						:class="{ 'is-highlight-active': isPreviousSongActive }"
@@ -44,35 +41,32 @@
 						/>
 					</div>
 				</div>
-				<div
-					v-if="currentSong !== {} && localSong === null"
-					class="column song-type"
-				>
+				<div v-if="localSong !== null" class="column song-type">
 					<div
 						class="card is-fullwidth"
-						:class="{ 'is-highlight-active': isCurrentSongActive }"
-						@click="highlight('currentSong')"
+						:class="{ 'is-highlight-active': isLocalSongActive }"
+						@click="highlight('localSong')"
 					>
 						<header class="card-header">
-							<p class="card-header-title">Current Song</p>
+							<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="currentSong"
+										:song="localSong"
 									/>
 								</figure>
 								<div class="media-content">
 									<div class="content">
 										<p>
 											<strong>{{
-												currentSong.title
+												localSong.title
 											}}</strong>
 											<br />
 											<small>{{
-												currentSong.artists.join(", ")
+												localSong.artists.join(", ")
 											}}</small>
 										</p>
 									</div>
@@ -82,40 +76,10 @@
 						<a
 							href="#"
 							class="absolute-a"
-							@click="highlight('currentSong')"
+							@click="highlight('localSong')"
 						/>
 					</div>
 				</div>
-				<div v-if="localSong !== null" class="column song-type">
-					<div class="card is-fullwidth">
-						<header class="card-header">
-							<p class="card-header-title">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>
-					</div>
-				</div>
 			</div>
 			<div class="edit-report-wrapper">
 				<div class="columns is-multiline">
@@ -187,7 +151,7 @@ export default {
 	data() {
 		return {
 			isPreviousSongActive: false,
-			isCurrentSongActive: true,
+			isLocalSongActive: true,
 			localSong: null,
 			report: {
 				resolved: false,
@@ -240,7 +204,6 @@ export default {
 			return 400 - this.report.description.length;
 		},
 		...mapState({
-			currentSong: state => state.station.currentSong,
 			previousSong: state => state.station.previousSong,
 			song: state => state.modals.report.song
 		}),
@@ -249,8 +212,6 @@ export default {
 		})
 	},
 	mounted() {
-		this.report.songId = this.currentSong.songId;
-
 		if (this.song !== null) {
 			this.localSong = this.song;
 			this.report.songId = this.song.songId;
@@ -260,7 +221,7 @@ export default {
 	methods: {
 		create() {
 			this.socket.dispatch("reports.create", this.report, res => {
-				new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 				if (res.status === "success")
 					this.closeModal({
 						sector: "station",
@@ -269,13 +230,13 @@ export default {
 			});
 		},
 		highlight(type) {
-			if (type === "currentSong") {
-				this.report.songId = this.currentSong.songId;
+			if (type === "localSong") {
+				this.report.songId = this.localSong.songId;
 				this.isPreviousSongActive = false;
-				this.isCurrentSongActive = true;
+				this.isLocalSongActive = true;
 			} else if (type === "previousSong") {
 				this.report.songId = this.previousSong.songId;
-				this.isCurrentSongActive = false;
+				this.isLocalSongActive = false;
 				this.isPreviousSongActive = true;
 			}
 		},

frontend/src/components/modals/ViewPunishment.vue

@@ -108,10 +108,7 @@ export default {
 					const punishment = res.data;
 					this.viewPunishment(punishment);
 				} else {
-					new Toast({
-						content: "Punishment with that ID not found",
-						timeout: 3000
-					});
+					new Toast("Punishment with that ID not found");
 					this.closeModal({
 						sector: this.sector,
 						modal: "viewPunishment"

frontend/src/components/modals/ViewReport.vue

@@ -120,10 +120,7 @@ export default {
 				const report = res.data;
 				this.viewReport(report);
 			} else {
-				new Toast({
-					content: "Report with that ID not found",
-					timeout: 3000
-				});
+				new Toast("Report with that ID not found");
 				this.closeModal({
 					sector: this.sector,
 					modal: "viewReport"
@@ -142,9 +139,7 @@ export default {
 							modal: "viewReport"
 						});
 				})
-				.catch(
-					err => new Toast({ content: err.message, timeout: 5000 })
-				);
+				.catch(err => new Toast(err.message));
 		},
 		...mapActions("modals/viewReport", ["viewReport", "resolveReport"]),
 		...mapActions("modalVisibility", ["closeModal"])

frontend/src/mixins/SearchYoutube.vue

@@ -47,8 +47,7 @@ export default {
 							isAddedToQueue: false
 						});
 					});
-				} else if (res.status === "error")
-					new Toast({ content: res.message, timeout: 3000 });
+				} else if (res.status === "error") new Toast(res.message);
 			});
 		},
 		loadMoreSongs() {
@@ -71,8 +70,7 @@ export default {
 								isAddedToQueue: false
 							});
 						});
-					} else if (res.status === "error")
-						new Toast({ content: res.message, timeout: 3000 });
+					} else if (res.status === "error") new Toast(res.message);
 				}
 			);
 		}

frontend/src/mixins/SortablePlaylists.vue

@@ -45,14 +45,10 @@ export default {
 				"users.updateOrderOfPlaylists",
 				recalculatedOrder,
 				res => {
-					if (res.status === "failure")
-						return new Toast({
-							content: res.message,
-							timeout: 8000
-						});
+					if (res.status === "failure") return new Toast(res.message);
 
 					this.orderOfPlaylists = this.calculatePlaylistOrder(); // new order in regards to the database
-					return new Toast({ content: res.message, timeout: 4000 });
+					return new Toast(res.message);
 				}
 			);
 		}

frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -242,9 +242,7 @@ export default {
 		},
 		unhide(song) {
 			this.socket.dispatch("songs.unhide", song._id, res => {
-				if (res.status === "success")
-					new Toast({ content: res.message, timeout: 2000 });
-				else new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 			});
 		},
 		getSet() {

frontend/src/pages/Admin/tabs/News.vue

@@ -273,25 +273,16 @@ export default {
 			} = this;
 
 			if (this.creating.title === "")
-				return new Toast({
-					content: "Field (Title) cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Field (Title) cannot be empty");
 			if (this.creating.description === "")
-				return new Toast({
-					content: "Field (Description) cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Field (Description) cannot be empty");
 			if (
 				bugs.length <= 0 &&
 				features.length <= 0 &&
 				improvements.length <= 0 &&
 				upcoming.length <= 0
 			)
-				return new Toast({
-					content: "You must have at least one News Item",
-					timeout: 3000
-				});
+				return new Toast("You must have at least one News Item");
 
 			return this.socket.dispatch(
 				"news.create",
@@ -314,7 +305,7 @@ export default {
 			this.socket.dispatch(
 				"news.remove",
 				news,
-				res => new Toast({ content: res.message, timeout: 8000 })
+				res => new Toast(res.message)
 			);
 		},
 		editNewsClick(news) {
@@ -325,20 +316,14 @@ export default {
 			const change = document.getElementById(`new-${type}`).value.trim();
 
 			if (this.creating[type].indexOf(change) !== -1)
-				return new Toast({
-					content: `Tag already exists`,
-					timeout: 3000
-				});
+				return new Toast(`Tag already exists`);
 
 			if (change) {
 				document.getElementById(`new-${type}`).value = "";
 				this.creating[type].push(change);
 				return true;
 			}
-			return new Toast({
-				content: `${type} cannot be empty`,
-				timeout: 3000
-			});
+			return new Toast(`${type} cannot be empty`);
 		},
 		removeChange(type, index) {
 			this.creating[type].splice(index, 1);

frontend/src/pages/Admin/tabs/Playlists.vue

@@ -150,15 +150,9 @@ export default {
 				"playlists.deleteOrphanedStationPlaylists",
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: `${res.message}`,
-							timeout: 4000
-						});
+						new Toast(res.message);
 					} else {
-						new Toast({
-							content: `Error: ${res.message}`,
-							timeout: 8000
-						});
+						new Toast(`Error: ${res.message}`);
 					}
 				}
 			);
@@ -168,15 +162,9 @@ export default {
 				"playlists.deleteOrphanedGenrePlaylists",
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: `${res.message}`,
-							timeout: 4000
-						});
+						new Toast(res.message);
 					} else {
-						new Toast({
-							content: `Error: ${res.message}`,
-							timeout: 8000
-						});
+						new Toast(`Error: ${res.message}`);
 					}
 				}
 			);
@@ -186,15 +174,9 @@ export default {
 				"playlists.requestOrphanedPlaylistSongs",
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: `${res.message}`,
-							timeout: 4000
-						});
+						new Toast(res.message);
 					} else {
-						new Toast({
-							content: `Error: ${res.message}`,
-							timeout: 8000
-						});
+						new Toast(`Error: ${res.message}`);
 					}
 				}
 			);

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -145,7 +145,7 @@ export default {
 				this.ipBan.reason,
 				this.ipBan.expiresAt,
 				res => {
-					new Toast({ content: res.message, timeout: 6000 });
+					new Toast(res.message);
 				}
 			);
 		},

frontend/src/pages/Admin/tabs/Reports.vue

@@ -117,11 +117,7 @@ export default {
 				this.$route.query.id,
 				res => {
 					if (res.status === "success") this.view(res.data);
-					else
-						new Toast({
-							content: "Report with that ID not found",
-							timeout: 3000
-						});
+					else new Toast("Report with that ID not found");
 				}
 			);
 		}
@@ -145,9 +141,7 @@ export default {
 							modal: "viewReport"
 						});
 				})
-				.catch(
-					err => new Toast({ content: err.message, timeout: 5000 })
-				);
+				.catch(err => new Toast(err.message));
 		},
 		...mapActions("modalVisibility", ["openModal", "closeModal"]),
 		...mapActions("admin/reports", ["resolveReport"])

frontend/src/pages/Admin/tabs/Stations.vue

@@ -245,20 +245,11 @@ export default {
 			} = this;
 
 			if (name === undefined)
-				return new Toast({
-					content: "Field (Name) cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Field (Name) cannot be empty");
 			if (displayName === undefined)
-				return new Toast({
-					content: "Field (Display Name) cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Field (Display Name) cannot be empty");
 			if (description === undefined)
-				return new Toast({
-					content: "Field (Description) cannot be empty",
-					timeout: 3000
-				});
+				return new Toast("Field (Description) cannot be empty");
 
 			return this.socket.dispatch(
 				"stations.create",
@@ -270,9 +261,9 @@ export default {
 					genres,
 					blacklistedGenres
 				},
-				result => {
-					new Toast({ content: result.message, timeout: 3000 });
-					if (result.status === "success")
+				res => {
+					new Toast(res.message);
+					if (res.status === "success")
 						this.newStation = {
 							genres: [],
 							blacklistedGenres: []
@@ -285,7 +276,7 @@ export default {
 				"stations.remove",
 				this.stations[index]._id,
 				res => {
-					new Toast({ content: res.message, timeout: 3000 });
+					new Toast(res.message);
 				}
 			);
 		},
@@ -302,19 +293,13 @@ export default {
 				.value.toLowerCase()
 				.trim();
 			if (this.newStation.genres.indexOf(genre) !== -1)
-				return new Toast({
-					content: "Genre already exists",
-					timeout: 3000
-				});
+				return new Toast("Genre already exists");
 			if (genre) {
 				this.newStation.genres.push(genre);
 				document.getElementById(`new-genre`).value = "";
 				return true;
 			}
-			return new Toast({
-				content: "Genre cannot be empty",
-				timeout: 3000
-			});
+			return new Toast("Genre cannot be empty");
 		},
 		removeGenre(index) {
 			this.newStation.genres.splice(index, 1);
@@ -325,20 +310,14 @@ export default {
 				.value.toLowerCase()
 				.trim();
 			if (this.newStation.blacklistedGenres.indexOf(genre) !== -1)
-				return new Toast({
-					content: "Genre already exists",
-					timeout: 3000
-				});
+				return new Toast("Genre already exists");
 
 			if (genre) {
 				this.newStation.blacklistedGenres.push(genre);
 				document.getElementById(`new-blacklisted-genre`).value = "";
 				return true;
 			}
-			return new Toast({
-				content: "Genre cannot be empty",
-				timeout: 3000
-			});
+			return new Toast("Genre cannot be empty");
 		},
 		removeBlacklistedGenre(index) {
 			this.newStation.blacklistedGenres.splice(index, 1);
@@ -346,15 +325,9 @@ export default {
 		clearEveryStationQueue() {
 			this.socket.dispatch("stations.clearEveryStationQueue", res => {
 				if (res.status === "success") {
-					new Toast({
-						content: `${res.message}`,
-						timeout: 4000
-					});
+					new Toast(res.message);
 				} else {
-					new Toast({
-						content: `Error: ${res.message}`,
-						timeout: 8000
-					});
+					new Toast(`Error: ${res.message}`);
 				}
 			});
 		},

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -252,9 +252,7 @@ export default {
 		},
 		verify(song) {
 			this.socket.dispatch("songs.verify", song.songId, res => {
-				if (res.status === "success")
-					new Toast({ content: res.message, timeout: 2000 });
-				else new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 			});
 		},
 		hide(id) {
@@ -264,9 +262,7 @@ export default {
 			);
 			if (dialogResult !== true) return;
 			this.socket.dispatch("songs.hide", id, res => {
-				if (res.status === "success")
-					new Toast({ content: res.message, timeout: 2000 });
-				else new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 			});
 		},
 		getSet() {

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -333,11 +333,7 @@ export default {
 				res => {
 					if (res.status === "success") {
 						this.edit(res.data.song);
-					} else
-						new Toast({
-							content: "Song with that ID not found",
-							timeout: 3000
-						});
+					} else new Toast("Song with that ID not found");
 				}
 			);
 		}
@@ -354,9 +350,8 @@ export default {
 			);
 			if (dialogResult !== true) return;
 			this.socket.dispatch("songs.unverify", id, res => {
-				if (res.status === "success")
-					new Toast({ content: res.message, timeout: 4000 });
-				else new Toast({ content: res.message, timeout: 8000 });
+				if (res.status === "success") new Toast(res.message);
+				else new Toast(res.message);
 			});
 		},
 		getSet() {

frontend/src/pages/Home.vue

@@ -664,11 +664,8 @@ export default {
 				station._id,
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: "Successfully favorited station.",
-							timeout: 4000
-						});
-					} else new Toast({ content: res.message, timeout: 8000 });
+						new Toast("Successfully favorited station.");
+					} else new Toast(res.message);
 				}
 			);
 		},
@@ -678,11 +675,8 @@ export default {
 				station._id,
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: "Successfully unfavorited station.",
-							timeout: 4000
-						});
-					} else new Toast({ content: res.message, timeout: 8000 });
+						new Toast("Successfully unfavorited station.");
+					} else new Toast(res.message);
 				}
 			);
 		},

frontend/src/pages/Profile/tabs/RecentActivity.vue

@@ -118,8 +118,7 @@ export default {
 	methods: {
 		hideActivity(activityId) {
 			this.socket.dispatch("activities.hideActivity", activityId, res => {
-				if (res.status !== "success")
-					new Toast({ content: res.message, timeout: 3000 });
+				if (res.status !== "success") new Toast(res.message);
 			});
 		},
 		getSet() {

frontend/src/pages/ResetPassword.vue

@@ -328,22 +328,15 @@ export default {
 				this.email.indexOf("@") !== this.email.lastIndexOf("@") ||
 				!validation.regex.emailSimple.test(this.email)
 			)
-				return new Toast({
-					content: "Invalid email format.",
-					timeout: 8000
-				});
+				return new Toast("Invalid email format.");
 
-			if (!this.email)
-				return new Toast({
-					content: "Email cannot be empty",
-					timeout: 8000
-				});
+			if (!this.email) return new Toast("Email cannot be empty");
 
 			this.hasEmailBeenSentAlready = false;
 
 			if (this.mode === "set") {
 				return this.socket.dispatch("users.requestPassword", res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 					if (res.status === "success") {
 						this.step = 2;
 					}
@@ -354,7 +347,7 @@ export default {
 				"users.requestPasswordReset",
 				this.email,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 					if (res.status === "success") {
 						this.code = ""; // in case: already have a code -> request another code
 						this.step = 2;
@@ -363,11 +356,7 @@ export default {
 			);
 		},
 		verifyCode() {
-			if (!this.code)
-				return new Toast({
-					content: "Code cannot be empty",
-					timeout: 8000
-				});
+			if (!this.code) return new Toast("Code cannot be empty");
 
 			return this.socket.dispatch(
 				this.mode === "set"
@@ -375,7 +364,7 @@ export default {
 					: "users.verifyPasswordResetCode",
 				this.code,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 					if (res.status === "success") {
 						this.step = 3;
 					}
@@ -387,16 +376,10 @@ export default {
 				this.validation.newPassword.valid &&
 				!this.validation.newPasswordAgain.valid
 			)
-				return new Toast({
-					content: "Please ensure the passwords match.",
-					timeout: 8000
-				});
+				return new Toast("Please ensure the passwords match.");
 
 			if (!this.validation.newPassword.valid)
-				return new Toast({
-					content: "Please enter a valid password.",
-					timeout: 8000
-				});
+				return new Toast("Please enter a valid password.");
 
 			return this.socket.dispatch(
 				this.mode === "set"
@@ -405,7 +388,7 @@ export default {
 				this.code,
 				this.newPassword,
 				res => {
-					new Toast({ content: res.message, timeout: 8000 });
+					new Toast(res.message);
 					if (res.status === "success") this.step = 4;
 					else this.step = 5;
 				}

frontend/src/pages/Settings/index.vue

@@ -87,10 +87,7 @@ export default {
 			if (res.status === "success") {
 				this.setUser(res.data);
 			} else {
-				new Toast({
-					content: "You're not currently signed in.",
-					timeout: 3000
-				});
+				new Toast("You're not currently signed in.");
 			}
 		});
 

frontend/src/pages/Settings/tabs/Account.vue

@@ -188,27 +188,20 @@ export default {
 			if (!usernameChanged && !emailAddressChanged) {
 				this.$refs.saveButton.handleFailedSave();
 
-				new Toast({
-					content: "Please make a change before saving.",
-					timeout: 8000
-				});
+				new Toast("Please make a change before saving.");
 			}
 		},
 		changeEmail() {
 			const email = this.modifiedUser.email.address;
 			if (!validation.isLength(email, 3, 254))
-				return new Toast({
-					content: "Email must have between 3 and 254 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Email must have between 3 and 254 characters."
+				);
 			if (
 				email.indexOf("@") !== email.lastIndexOf("@") ||
 				!validation.regex.emailSimple.test(email)
 			)
-				return new Toast({
-					content: "Invalid email format.",
-					timeout: 8000
-				});
+				return new Toast("Invalid email format.");
 
 			this.$refs.saveButton.saveStatus = "disabled";
 
@@ -218,13 +211,10 @@ export default {
 				email,
 				res => {
 					if (res.status !== "success") {
-						new Toast({ content: res.message, timeout: 8000 });
+						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast({
-							content: "Successfully changed email address",
-							timeout: 4000
-						});
+						new Toast("Successfully changed email address");
 
 						this.updateOriginalUser({
 							property: "email.address",
@@ -240,17 +230,14 @@ export default {
 			const { username } = this.modifiedUser;
 
 			if (!validation.isLength(username, 2, 32))
-				return new Toast({
-					content: "Username must have between 2 and 32 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Username must have between 2 and 32 characters."
+				);
 
 			if (!validation.regex.azAZ09_.test(username))
-				return new Toast({
-					content:
-						"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _."
+				);
 
 			this.$refs.saveButton.saveStatus = "disabled";
 
@@ -260,13 +247,10 @@ export default {
 				username,
 				res => {
 					if (res.status !== "success") {
-						new Toast({ content: res.message, timeout: 8000 });
+						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast({
-							content: "Successfully changed username",
-							timeout: 4000
-						});
+						new Toast("Successfully changed username");
 
 						this.updateOriginalUser({
 							property: "username",
@@ -289,12 +273,12 @@ export default {
 					});
 				}
 
-				return new Toast({ content: res.message, timeout: 8000 });
+				return new Toast(res.message);
 			});
 		},
 		removeActivities() {
 			this.socket.dispatch("activities.removeAllForUser", res => {
-				new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 			});
 		},
 		...mapActions("settings", ["updateOriginalUser"])

frontend/src/pages/Settings/tabs/Preferences.vue

@@ -104,10 +104,7 @@ export default {
 				this.localActivityLogPublic === this.activityLogPublic &&
 				this.localActivityWatch === this.activityWatch
 			) {
-				new Toast({
-					content: "Please make a change before saving.",
-					timeout: 5000
-				});
+				new Toast("Please make a change before saving.");
 
 				return this.$refs.saveButton.handleFailedSave();
 			}
@@ -124,15 +121,12 @@ export default {
 				},
 				res => {
 					if (res.status !== "success") {
-						new Toast({ content: res.message, timeout: 8000 });
+						new Toast(res.message);
 
 						return this.$refs.saveButton.handleFailedSave();
 					}
 
-					new Toast({
-						content: "Successfully updated preferences",
-						timeout: 4000
-					});
+					new Toast("Successfully updated preferences");
 
 					return this.$refs.saveButton.handleSuccessfulSave();
 				}

frontend/src/pages/Settings/tabs/Profile.vue

@@ -134,20 +134,14 @@ export default {
 			) {
 				this.$refs.saveButton.handleFailedSave();
 
-				new Toast({
-					content: "Please make a change before saving.",
-					timeout: 8000
-				});
+				new Toast("Please make a change before saving.");
 			}
 		},
 		changeName() {
 			const { name } = this.modifiedUser;
 
 			if (!validation.isLength(name, 1, 64))
-				return new Toast({
-					content: "Name must have between 1 and 64 characters.",
-					timeout: 8000
-				});
+				return new Toast("Name must have between 1 and 64 characters.");
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -157,13 +151,10 @@ export default {
 				name,
 				res => {
 					if (res.status !== "success") {
-						new Toast({ content: res.message, timeout: 8000 });
+						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast({
-							content: "Successfully changed name",
-							timeout: 4000
-						});
+						new Toast("Successfully changed name");
 
 						this.updateOriginalUser({
 							property: "name",
@@ -179,10 +170,9 @@ export default {
 			const { location } = this.modifiedUser;
 
 			if (!validation.isLength(location, 0, 50))
-				return new Toast({
-					content: "Location must have between 0 and 50 characters.",
-					timeout: 8000
-				});
+				return new Toast(
+					"Location must have between 0 and 50 characters."
+				);
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -192,13 +182,10 @@ export default {
 				location,
 				res => {
 					if (res.status !== "success") {
-						new Toast({ content: res.message, timeout: 8000 });
+						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast({
-							content: "Successfully changed location",
-							timeout: 4000
-						});
+						new Toast("Successfully changed location");
 
 						this.updateOriginalUser({
 							property: "location",
@@ -214,10 +201,7 @@ export default {
 			const { bio } = this.modifiedUser;
 
 			if (!validation.isLength(bio, 0, 200))
-				return new Toast({
-					content: "Bio must have between 0 and 200 characters.",
-					timeout: 8000
-				});
+				return new Toast("Bio must have between 0 and 200 characters.");
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -227,13 +211,10 @@ export default {
 				bio,
 				res => {
 					if (res.status !== "success") {
-						new Toast({ content: res.message, timeout: 8000 });
+						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast({
-							content: "Successfully changed bio",
-							timeout: 4000
-						});
+						new Toast("Successfully changed bio");
 
 						this.updateOriginalUser({
 							property: "bio",
@@ -256,13 +237,10 @@ export default {
 				avatar,
 				res => {
 					if (res.status !== "success") {
-						new Toast({ content: res.message, timeout: 8000 });
+						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast({
-							content: "Successfully updated avatar type",
-							timeout: 4000
-						});
+						new Toast("Successfully updated avatar type");
 
 						this.updateOriginalUser({
 							property: "avatar",

frontend/src/pages/Settings/tabs/Security.vue

@@ -201,49 +201,39 @@ export default {
 			const newPassword = this.validation.newPassword.value;
 
 			if (this.previousPassword === "")
-				return new Toast({
-					content: "Please enter a previous password.",
-					timeout: 8000
-				});
+				return new Toast("Please enter a previous password.");
 
 			if (!this.validation.newPassword.valid)
-				return new Toast({
-					content: "Please enter a valid new password.",
-					timeout: 8000
-				});
+				return new Toast("Please enter a valid new password.");
 
 			return this.socket.dispatch(
 				"users.updatePassword",
 				this.previousPassword,
 				newPassword,
 				res => {
-					if (res.status !== "success")
-						new Toast({ content: res.message, timeout: 8000 });
+					if (res.status !== "success") new Toast(res.message);
 					else {
 						this.previousPassword = "";
 						this.validation.newPassword.value = "";
 
-						new Toast({
-							content: "Successfully changed password.",
-							timeout: 4000
-						});
+						new Toast("Successfully changed password.");
 					}
 				}
 			);
 		},
 		unlinkPassword() {
 			this.socket.dispatch("users.unlinkPassword", res => {
-				new Toast({ content: res.message, timeout: 8000 });
+				new Toast(res.message);
 			});
 		},
 		unlinkGitHub() {
 			this.socket.dispatch("users.unlinkGitHub", res => {
-				new Toast({ content: res.message, timeout: 8000 });
+				new Toast(res.message);
 			});
 		},
 		removeSessions() {
 			this.socket.dispatch(`users.removeSessions`, this.userId, res => {
-				new Toast({ content: res.message, timeout: 4000 });
+				new Toast(res.message);
 			});
 		}
 	}

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

@@ -182,16 +182,11 @@ export default {
 				if (this.isNotSelected(id)) {
 					this.updatePrivatePlaylistQueueSelected(id);
 					this.$parent.$parent.addFirstPrivatePlaylistSongToQueue();
-					new Toast({
-						content:
-							"Successfully selected playlist to auto request songs.",
-						timeout: 4000
-					});
+					new Toast(
+						"Successfully selected playlist to auto request songs."
+					);
 				} else {
-					new Toast({
-						content: "Error: Playlist already selected.",
-						timeout: 4000
-					});
+					new Toast("Error: Playlist already selected.");
 				}
 			} else {
 				this.socket.dispatch(
@@ -200,16 +195,10 @@ export default {
 					id,
 					res => {
 						if (res.status === "failure") {
-							new Toast({
-								content: res.message,
-								timeout: 8000
-							});
+							new Toast(res.message);
 						} else {
 							this.station.includedPlaylists.push(id);
-							new Toast({
-								content: res.message,
-								timeout: 4000
-							});
+							new Toast(res.message);
 						}
 					}
 				);
@@ -218,10 +207,7 @@ export default {
 		deselectPlaylist(id) {
 			if (this.station.type === "community" && this.station.partyMode) {
 				this.updatePrivatePlaylistQueueSelected(null);
-				new Toast({
-					content: "Successfully deselected playlist.",
-					timeout: 4000
-				});
+				new Toast("Successfully deselected playlist.");
 			} else {
 				this.socket.dispatch(
 					"stations.deselectPrivatePlaylist",
@@ -229,18 +215,14 @@ export default {
 					id,
 					res => {
 						if (res.status === "failure")
-							new Toast({
-								content: res.message,
-								timeout: 8000
-							});
+							return new Toast(res.message);
+
 						this.station.includedPlaylists.splice(
 							this.station.includedPlaylists.indexOf(id),
 							1
 						);
-						new Toast({
-							content: res.message,
-							timeout: 4000
-						});
+
+						return new Toast(res.message);
 					}
 				);
 			}

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

@@ -159,12 +159,8 @@ export default {
 				songId,
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content:
-								"Successfully removed song from the queue.",
-							timeout: 4000
-						});
-					} else new Toast({ content: res.message, timeout: 8000 });
+						new Toast("Successfully removed song from the queue.");
+					} else new Toast(res.message);
 				}
 			);
 		},

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

@@ -94,10 +94,7 @@ export default {
 					this.frontendDomain + this.$route.fullPath
 				);
 			} catch (err) {
-				new Toast({
-					content: "Failed to copy to clipboard.",
-					timeout: 8000
-				});
+				new Toast("Failed to copy to clipboard.");
 			}
 		}
 	}

frontend/src/pages/Station/index.vue

@@ -808,11 +808,9 @@ export default {
 								song.disliked === true
 							) {
 								this.voteSkipStation();
-								new Toast({
-									content:
-										"Automatically voted to skip disliked song.",
-									timeout: 4000
-								});
+								new Toast(
+									"Automatically voted to skip disliked song."
+								);
 							}
 						}
 					}
@@ -1063,12 +1061,8 @@ export default {
 				songId,
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content:
-								"Successfully removed song from the queue.",
-							timeout: 4000
-						});
-					} else new Toast({ content: res.message, timeout: 8000 });
+						new Toast("Successfully removed song from the queue.");
+					} else new Toast(res.message);
 				}
 			);
 		},
@@ -1110,21 +1104,18 @@ export default {
 							console.log("error with youtube video", err);
 
 							if (err.data === 150 && this.loggedIn) {
-								new Toast({
-									content:
-										"Automatically voted to skip as this song isn't available for you.",
-									timeout: 4000
-								});
+								new Toast(
+									"Automatically voted to skip as this song isn't available for you."
+								);
 
 								// automatically vote to skip
 								this.voteSkipStation();
 
 								// persistent message while song is playing
-								const toastMessage =
-									"This song is unavailable for you, but is playing for everyone else.";
-								new Toast({
-									content: toastMessage,
-									persistant: true
+								const persistentToast = new Toast({
+									content:
+										"This song is unavailable for you, but is playing for everyone else.",
+									persistent: true
 								});
 
 								// save current song id
@@ -1137,17 +1128,7 @@ export default {
 											this.currentSong.songId !==
 											erroredSongId
 										) {
-											document
-												.getElementById(
-													"toasts-content"
-												)
-												.childNodes.forEach(toast => {
-													if (
-														toast.innerHTML ===
-														toastMessage
-													)
-														toast.remove();
-												});
+											persistentToast.destroy();
 
 											clearInterval(
 												window.isSongErroredInterval
@@ -1157,11 +1138,9 @@ export default {
 									150
 								);
 							} else {
-								new Toast({
-									content:
-										"There has been an error with the YouTube Embed",
-									timeout: 8000
-								});
+								new Toast(
+									"There has been an error with the YouTube Embed"
+								);
 							}
 						},
 						onStateChange: event => {
@@ -1355,11 +1334,8 @@ export default {
 				this.station._id,
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: "Successfully toggled the queue lock.",
-							timeout: 4000
-						});
-					} else new Toast({ content: res.message, timeout: 8000 });
+						new Toast("Successfully toggled the queue lock.");
+					} else new Toast(res.message);
 				}
 			);
 		},
@@ -1406,16 +1382,11 @@ export default {
 				this.station._id,
 				data => {
 					if (data.status !== "success")
-						new Toast({
-							content: `Error: ${data.message}`,
-							timeout: 8000
-						});
+						new Toast(`Error: ${data.message}`);
 					else
-						new Toast({
-							content:
-								"Successfully skipped the station's current song.",
-							timeout: 4000
-						});
+						new Toast(
+							"Successfully skipped the station's current song."
+						);
 				}
 			);
 		},
@@ -1425,45 +1396,26 @@ export default {
 				this.station._id,
 				data => {
 					if (data.status !== "success")
-						new Toast({
-							content: `Error: ${data.message}`,
-							timeout: 8000
-						});
+						new Toast(`Error: ${data.message}`);
 					else
-						new Toast({
-							content:
-								"Successfully voted to skip the current song.",
-							timeout: 4000
-						});
+						new Toast(
+							"Successfully voted to skip the current song."
+						);
 				}
 			);
 		},
 		resumeStation() {
 			this.socket.dispatch("stations.resume", this.station._id, data => {
 				if (data.status !== "success")
-					new Toast({
-						content: `Error: ${data.message}`,
-						timeout: 8000
-					});
-				else
-					new Toast({
-						content: "Successfully resumed the station.",
-						timeout: 4000
-					});
+					new Toast(`Error: ${data.message}`);
+				else new Toast("Successfully resumed the station.");
 			});
 		},
 		pauseStation() {
 			this.socket.dispatch("stations.pause", this.station._id, data => {
 				if (data.status !== "success")
-					new Toast({
-						content: `Error: ${data.message}`,
-						timeout: 8000
-					});
-				else
-					new Toast({
-						content: "Successfully paused the station.",
-						timeout: 4000
-					});
+					new Toast(`Error: ${data.message}`);
+				else new Toast("Successfully paused the station.");
 			});
 		},
 		toggleMute() {
@@ -1501,10 +1453,7 @@ export default {
 					this.currentSong.songId,
 					data => {
 						if (data.status !== "success")
-							new Toast({
-								content: `Error: ${data.message}`,
-								timeout: 8000
-							});
+							new Toast(`Error: ${data.message}`);
 					}
 				);
 			else
@@ -1513,10 +1462,7 @@ export default {
 					this.currentSong.songId,
 					data => {
 						if (data.status !== "success")
-							new Toast({
-								content: `Error: ${data.message}`,
-								timeout: 8000
-							});
+							new Toast(`Error: ${data.message}`);
 					}
 				);
 		},
@@ -1527,10 +1473,7 @@ export default {
 					this.currentSong.songId,
 					data => {
 						if (data.status !== "success")
-							new Toast({
-								content: `Error: ${data.message}`,
-								timeout: 8000
-							});
+							new Toast(`Error: ${data.message}`);
 					}
 				);
 
@@ -1539,10 +1482,7 @@ export default {
 				this.currentSong.songId,
 				data => {
 					if (data.status !== "success")
-						new Toast({
-							content: `Error: ${data.message}`,
-							timeout: 8000
-						});
+						new Toast(`Error: ${data.message}`);
 				}
 			);
 		},
@@ -1580,10 +1520,9 @@ export default {
 											}
 										);
 									} else {
-										new Toast({
-											content: `Top song in playlist was too long to be added.`,
-											timeout: 3000
-										});
+										new Toast(
+											`Top song in playlist was too long to be added.`
+										);
 
 										this.socket.dispatch(
 											"playlists.moveSongToBottom",
@@ -1600,10 +1539,9 @@ export default {
 										);
 									}
 								} else
-									new Toast({
-										content: `Selected playlist has no songs.`,
-										timeout: 4000
-									});
+									new Toast(
+										`Selected playlist has no songs.`
+									);
 							}
 						}
 					);
@@ -1856,11 +1794,8 @@ export default {
 				this.station._id,
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: "Successfully favorited station.",
-							timeout: 4000
-						});
-					} else new Toast({ content: res.message, timeout: 8000 });
+						new Toast("Successfully favorited station.");
+					} else new Toast(res.message);
 				}
 			);
 		},
@@ -1870,11 +1805,8 @@ export default {
 				this.station._id,
 				res => {
 					if (res.status === "success") {
-						new Toast({
-							content: "Successfully unfavorited station.",
-							timeout: 4000
-						});
-					} else new Toast({ content: res.message, timeout: 8000 });
+						new Toast("Successfully unfavorited station.");
+					} else new Toast(res.message);
 				}
 			);
 		},

frontend/src/ws.js

@@ -1,5 +1,3 @@
-import Toast from "toasters";
-
 // eslint-disable-next-line import/no-cycle
 import store from "./store";
 
@@ -167,10 +165,7 @@ export default {
 		this.socket.onerror = err => {
 			console.log("WS: SOCKET ERROR", err);
 
-			new Toast({
-				content: "Cannot perform this action at this time.",
-				timeout: 8000
-			});
+			// new Toast("Cannot perform this action at this time.");
 		};
 	}
 };