refactor: Move socket.on() usage outside of socket.onConnect()

frontend/src/App.vue

@@ -179,10 +179,6 @@ onMounted(async () => {
 			}
 		);
 
-		socket.on("keep.event:user.session.deleted", () =>
-			window.location.reload()
-		);
-
 		const newUser = !localStorage.getItem("firstVisited");
 		socket.dispatch("news.newest", newUser, (res: NewestResponse) => {
 			if (res.status !== "success") return;
@@ -233,6 +229,10 @@ onMounted(async () => {
 		socketConnected.value = false;
 	}, true);
 
+	socket.on("keep.event:user.session.deleted", () =>
+		window.location.reload()
+	);
+
 	apiDomain.value = await lofig.get("backend.apiDomain");
 
 	router.isReady().then(() => {

frontend/src/components/AddToPlaylistDropdown.vue

@@ -75,34 +75,29 @@ onMounted(() => {
 				if (res.status === "success") setPlaylists(res.data.playlists);
 			}
 		);
+	});
 
-		socket.on(
-			"event:playlist.created",
-			res => addPlaylist(res.data.playlist),
-			{
-				replaceable: true
-			}
-		);
-
-		socket.on(
-			"event:playlist.deleted",
-			res => removePlaylist(res.data.playlistId),
-			{ replaceable: true }
-		);
-
-		socket.on(
-			"event:playlist.displayName.updated",
-			res => {
-				playlists.value.forEach((playlist, index) => {
-					if (playlist._id === res.data.playlistId) {
-						playlists.value[index].displayName =
-							res.data.displayName;
-					}
-				});
-			},
-			{ replaceable: true }
-		);
+	socket.on("event:playlist.created", res => addPlaylist(res.data.playlist), {
+		replaceable: true
 	});
+
+	socket.on(
+		"event:playlist.deleted",
+		res => removePlaylist(res.data.playlistId),
+		{ replaceable: true }
+	);
+
+	socket.on(
+		"event:playlist.displayName.updated",
+		res => {
+			playlists.value.forEach((playlist, index) => {
+				if (playlist._id === res.data.playlistId) {
+					playlists.value[index].displayName = res.data.displayName;
+				}
+			});
+		},
+		{ replaceable: true }
+	);
 });
 </script>
 

frontend/src/components/AdvancedTable.vue

@@ -926,58 +926,59 @@ onMounted(async () => {
 				});
 			}
 		});
-		// TODO, this doesn't address special properties
-		if (props.events && props.events.updated)
-			socket.on(`event:${props.events.updated.event}`, res => {
-				const index = rows.value
-					.map(row => row._id)
-					.indexOf(
-						props.events.updated.id
-							.split(".")
-							.reduce(
-								(previous, current) =>
-									previous &&
-									previous[current] !== null &&
-									previous[current] !== undefined
-										? previous[current]
-										: null,
-								res.data
-							)
-					);
-				const row = props.events.updated.item
-					.split(".")
-					.reduce(
-						(previous, current) =>
-							previous &&
-							previous[current] !== null &&
-							previous[current] !== undefined
-								? previous[current]
-								: null,
-						res.data
-					);
-				updateData(index, row);
-			});
-		if (props.events && props.events.removed)
-			socket.on(`event:${props.events.removed.event}`, res => {
-				const index = rows.value
-					.map(row => row._id)
-					.indexOf(
-						props.events.removed.id
-							.split(".")
-							.reduce(
-								(previous, current) =>
-									previous &&
-									previous[current] !== null &&
-									previous[current] !== undefined
-										? previous[current]
-										: null,
-								res.data
-							)
-					);
-				removeData(index);
-			});
 	});
 
+	// TODO, this doesn't address special properties
+	if (props.events && props.events.updated)
+		socket.on(`event:${props.events.updated.event}`, res => {
+			const index = rows.value
+				.map(row => row._id)
+				.indexOf(
+					props.events.updated.id
+						.split(".")
+						.reduce(
+							(previous, current) =>
+								previous &&
+								previous[current] !== null &&
+								previous[current] !== undefined
+									? previous[current]
+									: null,
+							res.data
+						)
+				);
+			const row = props.events.updated.item
+				.split(".")
+				.reduce(
+					(previous, current) =>
+						previous &&
+						previous[current] !== null &&
+						previous[current] !== undefined
+							? previous[current]
+							: null,
+					res.data
+				);
+			updateData(index, row);
+		});
+	if (props.events && props.events.removed)
+		socket.on(`event:${props.events.removed.event}`, res => {
+			const index = rows.value
+				.map(row => row._id)
+				.indexOf(
+					props.events.removed.id
+						.split(".")
+						.reduce(
+							(previous, current) =>
+								previous &&
+								previous[current] !== null &&
+								previous[current] !== undefined
+									? previous[current]
+									: null,
+							res.data
+						)
+				);
+			removeData(index);
+		});
+
 	if (props.keyboardShortcuts) {
 		// Navigation section
 

frontend/src/components/LongJobs.vue

@@ -43,29 +43,25 @@ onMounted(() => {
 					setJob(res);
 				}
 			});
+		}
+	});
 
-			socket.on("keep.event:longJob.removed", ({ data }) => {
-				removeJob(data.jobId);
-			});
+	socket.on("keep.event:longJob.removed", ({ data }) => {
+		removeJob(data.jobId);
+	});
 
-			socket.on("keep.event:longJob.added", ({ data }) => {
-				if (
-					!activeJobs.value.find(
-						activeJob => activeJob.id === data.jobId
-					)
-				)
-					socket.dispatch("users.getLongJob", data.jobId, {
-						cb: res => {
-							if (res.status === "success") {
-								setJob(res.data.longJob);
-							} else console.log(res.message);
-						},
-						onProgress: res => {
-							setJob(res);
-						}
-					});
+	socket.on("keep.event:longJob.added", ({ data }) => {
+		if (!activeJobs.value.find(activeJob => activeJob.id === data.jobId))
+			socket.dispatch("users.getLongJob", data.jobId, {
+				cb: res => {
+					if (res.status === "success") {
+						setJob(res.data.longJob);
+					} else console.log(res.message);
+				},
+				onProgress: res => {
+					setJob(res);
+				}
 			});
-		}
 	});
 });
 </script>

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

@@ -256,54 +256,54 @@ onMounted(() => {
 			} else new Toast(res.message);
 			gettingSongs.value = false;
 		});
+	});
 
-		socket.on(
-			"event:playlist.song.added",
-			res => {
-				if (playlist.value._id === res.data.playlistId)
-					addSong(res.data.song);
-			},
-			{ modalUuid: props.modalUuid }
-		);
-
-		socket.on(
-			"event:playlist.song.removed",
-			res => {
-				if (playlist.value._id === res.data.playlistId) {
-					// remove song from array of playlists
-					removeSong(res.data.youtubeId);
-				}
-			},
-			{ modalUuid: props.modalUuid }
-		);
-
-		socket.on(
-			"event:playlist.displayName.updated",
-			res => {
-				if (playlist.value._id === res.data.playlistId) {
-					setPlaylist({
-						displayName: res.data.displayName,
-						...playlist.value
-					});
-				}
-			},
-			{ modalUuid: props.modalUuid }
-		);
-
-		socket.on(
-			"event:playlist.song.repositioned",
-			res => {
-				if (playlist.value._id === res.data.playlistId) {
-					const { song, playlistId } = res.data;
-
-					if (playlist.value._id === playlistId) {
-						repositionedSong(song);
-					}
+	socket.on(
+		"event:playlist.song.added",
+		res => {
+			if (playlist.value._id === res.data.playlistId)
+				addSong(res.data.song);
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on(
+		"event:playlist.song.removed",
+		res => {
+			if (playlist.value._id === res.data.playlistId) {
+				// remove song from array of playlists
+				removeSong(res.data.youtubeId);
+			}
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on(
+		"event:playlist.displayName.updated",
+		res => {
+			if (playlist.value._id === res.data.playlistId) {
+				setPlaylist({
+					displayName: res.data.displayName,
+					...playlist.value
+				});
+			}
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on(
+		"event:playlist.song.repositioned",
+		res => {
+			if (playlist.value._id === res.data.playlistId) {
+				const { song, playlistId } = res.data;
+
+				if (playlist.value._id === playlistId) {
+					repositionedSong(song);
 				}
-			},
-			{ modalUuid: props.modalUuid }
-		);
-	});
+			}
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 
 onBeforeUnmount(() => {

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -71,35 +71,33 @@ const toggleIssue = (reportId, issueId) => {
 };
 
 onMounted(() => {
-	socket.onConnect(() => {
-		socket.on(
-			"event:admin.report.created",
-			res => reports.value.unshift(res.data.report),
-			{ modalUuid: props.modalUuid }
-		);
-
-		socket.on(
-			"event:admin.report.resolved",
-			res => resolveReport(res.data.reportId),
-			{ modalUuid: props.modalUuid }
-		);
-
-		socket.on(
-			"event:admin.report.issue.toggled",
-			res => {
-				reports.value.forEach((report, index) => {
-					if (report._id === res.data.reportId) {
-						const issue = reports.value[index].issues.find(
-							issue => issue._id.toString() === res.data.issueId
-						);
-
-						issue.resolved = res.data.resolved;
-					}
-				});
-			},
-			{ modalUuid: props.modalUuid }
-		);
-	});
+	socket.on(
+		"event:admin.report.created",
+		res => reports.value.unshift(res.data.report),
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on(
+		"event:admin.report.resolved",
+		res => resolveReport(res.data.reportId),
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on(
+		"event:admin.report.issue.toggled",
+		res => {
+			reports.value.forEach((report, index) => {
+				if (report._id === res.data.reportId) {
+					const issue = reports.value[index].issues.find(
+						issue => issue._id.toString() === res.data.issueId
+					);
+
+					issue.resolved = res.data.resolved;
+				}
+			});
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 </script>
 

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

@@ -1186,48 +1186,6 @@ onMounted(async () => {
 			);
 		});
 
-		socket.on(
-			`event:admin.song.updated`,
-			res => {
-				if (song.value._id === res.data.song._id)
-					setOriginalValue({
-						title: res.data.song.title,
-						duration: res.data.song.duration,
-						skipDuration: res.data.song.skipDuration,
-						thumbnail: res.data.song.thumbnail,
-						youtubeId: res.data.song.youtubeId,
-						verified: res.data.song.verified,
-						artists: res.data.song.artists,
-						genres: res.data.song.genres,
-						tags: res.data.song.tags,
-						discogs: res.data.song.discogs
-					});
-				if (bulk.value) {
-					const index = items.value
-						.map(item => item.song.youtubeId)
-						.indexOf(res.data.song.youtubeId);
-					if (index >= 0)
-						items.value[index].song = {
-							...items.value[index].song,
-							...res.data.song,
-							updated: true
-						};
-				}
-			},
-			{ modalUuid: props.modalUuid }
-		);
-
-		socket.on(
-			"event:admin.song.removed",
-			res => {
-				if (res.data.songId === song.value._id) {
-					songDeleted.value = true;
-					if (!bulk.value) closeCurrentModal(true);
-				}
-			},
-			{ modalUuid: props.modalUuid }
-		);
-
 		if (bulk.value) {
 			socket.dispatch("apis.joinRoom", "edit-songs");
 
@@ -1248,49 +1206,93 @@ onMounted(async () => {
 					}
 				}
 			);
-
-			socket.on(
-				`event:admin.song.created`,
-				res => {
-					const index = items.value
-						.map(item => item.song.youtubeId)
-						.indexOf(res.data.song.youtubeId);
-					if (index >= 0)
-						items.value[index].song = {
-							...items.value[index].song,
-							...res.data.song,
-							created: true
-						};
-				},
-				{ modalUuid: props.modalUuid }
-			);
-
-			socket.on(
-				`event:admin.song.removed`,
-				res => {
-					const index = items.value
-						.map(item => item.song._id)
-						.indexOf(res.data.songId);
-					if (index >= 0) items.value[index].song.removed = true;
-				},
-				{ modalUuid: props.modalUuid }
-			);
-
-			socket.on(
-				`event:admin.youtubeVideo.removed`,
-				res => {
-					const index = items.value
-						.map(item => item.song.youtubeVideoId)
-						.indexOf(res.videoId);
-					if (index >= 0) items.value[index].song.removed = true;
-				},
-				{ modalUuid: props.modalUuid }
-			);
 		}
 
 		return null;
 	});
 
+	socket.on(
+		`event:admin.song.updated`,
+		res => {
+			if (song.value._id === res.data.song._id)
+				setOriginalValue({
+					title: res.data.song.title,
+					duration: res.data.song.duration,
+					skipDuration: res.data.song.skipDuration,
+					thumbnail: res.data.song.thumbnail,
+					youtubeId: res.data.song.youtubeId,
+					verified: res.data.song.verified,
+					artists: res.data.song.artists,
+					genres: res.data.song.genres,
+					tags: res.data.song.tags,
+					discogs: res.data.song.discogs
+				});
+			if (bulk.value) {
+				const index = items.value
+					.map(item => item.song.youtubeId)
+					.indexOf(res.data.song.youtubeId);
+				if (index >= 0)
+					items.value[index].song = {
+						...items.value[index].song,
+						...res.data.song,
+						updated: true
+					};
+			}
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on(
+		"event:admin.song.removed",
+		res => {
+			if (res.data.songId === song.value._id) {
+				songDeleted.value = true;
+				if (!bulk.value) closeCurrentModal(true);
+			}
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
+	if (bulk.value) {
+		socket.on(
+			`event:admin.song.created`,
+			res => {
+				const index = items.value
+					.map(item => item.song.youtubeId)
+					.indexOf(res.data.song.youtubeId);
+				if (index >= 0)
+					items.value[index].song = {
+						...items.value[index].song,
+						...res.data.song,
+						created: true
+					};
+			},
+			{ modalUuid: props.modalUuid }
+		);
+
+		socket.on(
+			`event:admin.song.removed`,
+			res => {
+				const index = items.value
+					.map(item => item.song._id)
+					.indexOf(res.data.songId);
+				if (index >= 0) items.value[index].song.removed = true;
+			},
+			{ modalUuid: props.modalUuid }
+		);
+
+		socket.on(
+			`event:admin.youtubeVideo.removed`,
+			res => {
+				const index = items.value
+					.map(item => item.song.youtubeVideoId)
+					.indexOf(res.videoId);
+				if (index >= 0) items.value[index].song.removed = true;
+			},
+			{ modalUuid: props.modalUuid }
+		);
+	}
+
 	let volume = parseFloat(localStorage.getItem("volume"));
 	volume = typeof volume === "number" && !Number.isNaN(volume) ? volume : 20;
 	localStorage.setItem("volume", `${volume}`);

frontend/src/components/modals/EditUser.vue

@@ -239,21 +239,20 @@ onMounted(() => {
 				setRole({ role: res.data.role });
 
 				socket.dispatch("apis.joinRoom", `edit-user.${props.userId}`);
-
-				socket.on(
-					"event:user.removed",
-					res => {
-						if (res.data.userId === props.userId)
-							closeCurrentModal(true);
-					},
-					{ modalUuid: props.modalUuid }
-				);
 			} else {
 				new Toast("User with that ID not found");
 				closeCurrentModal();
 			}
 		});
 	});
+
+	socket.on(
+		"event:user.removed",
+		res => {
+			if (res.data.userId === props.userId) closeCurrentModal(true);
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 
 onBeforeUnmount(() => {

frontend/src/components/modals/ImportAlbum.vue

@@ -356,10 +356,10 @@ onMounted(() => {
 
 	socket.onConnect(() => {
 		socket.dispatch("apis.joinRoom", "import-album");
+	});
 
-		socket.on("event:admin.song.updated", res => {
-			updateTrackSong(res.data.song);
-		});
+	socket.on("event:admin.song.updated", res => {
+		updateTrackSong(res.data.song);
 	});
 });
 

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

@@ -220,103 +220,95 @@ onMounted(() => {
 						"apis.joinRoom",
 						`manage-station.${stationId.value}`
 					);
+				} else {
+					new Toast(`Station with that ID not found`);
+					closeCurrentModal();
+				}
+			}
+		);
 
-					socket.on(
-						"event:station.updated",
-						res => {
-							updateStation(res.data.station);
-						},
-						{ modalUuid: props.modalUuid }
-					);
+		socket.on(
+			"event:station.updated",
+			res => {
+				updateStation(res.data.station);
+			},
+			{ modalUuid: props.modalUuid }
+		);
 
-					socket.on(
-						"event:station.autofillPlaylist",
-						res => {
-							const { playlist } = res.data;
-							const playlistIndex = autofill.value
-								.map(autofillPlaylist => autofillPlaylist._id)
-								.indexOf(playlist._id);
-							if (playlistIndex === -1)
-								autofill.value.push(playlist);
-						},
-						{ modalUuid: props.modalUuid }
-					);
+		socket.on(
+			"event:station.autofillPlaylist",
+			res => {
+				const { playlist } = res.data;
+				const playlistIndex = autofill.value
+					.map(autofillPlaylist => autofillPlaylist._id)
+					.indexOf(playlist._id);
+				if (playlistIndex === -1) autofill.value.push(playlist);
+			},
+			{ modalUuid: props.modalUuid }
+		);
 
-					socket.on(
-						"event:station.blacklistedPlaylist",
-						res => {
-							const { playlist } = res.data;
-							const playlistIndex = blacklist.value
-								.map(
-									blacklistedPlaylist =>
-										blacklistedPlaylist._id
-								)
-								.indexOf(playlist._id);
-							if (playlistIndex === -1)
-								blacklist.value.push(playlist);
-						},
-						{ modalUuid: props.modalUuid }
-					);
+		socket.on(
+			"event:station.blacklistedPlaylist",
+			res => {
+				const { playlist } = res.data;
+				const playlistIndex = blacklist.value
+					.map(blacklistedPlaylist => blacklistedPlaylist._id)
+					.indexOf(playlist._id);
+				if (playlistIndex === -1) blacklist.value.push(playlist);
+			},
+			{ modalUuid: props.modalUuid }
+		);
 
-					socket.on(
-						"event:station.removedAutofillPlaylist",
-						res => {
-							const { playlistId } = res.data;
-							const playlistIndex = autofill.value
-								.map(playlist => playlist._id)
-								.indexOf(playlistId);
-							if (playlistIndex >= 0)
-								autofill.value.splice(playlistIndex, 1);
-						},
-						{ modalUuid: props.modalUuid }
-					);
+		socket.on(
+			"event:station.removedAutofillPlaylist",
+			res => {
+				const { playlistId } = res.data;
+				const playlistIndex = autofill.value
+					.map(playlist => playlist._id)
+					.indexOf(playlistId);
+				if (playlistIndex >= 0) autofill.value.splice(playlistIndex, 1);
+			},
+			{ modalUuid: props.modalUuid }
+		);
 
-					socket.on(
-						"event:station.removedBlacklistedPlaylist",
-						res => {
-							const { playlistId } = res.data;
-							const playlistIndex = blacklist.value
-								.map(playlist => playlist._id)
-								.indexOf(playlistId);
-							if (playlistIndex >= 0)
-								blacklist.value.splice(playlistIndex, 1);
-						},
-						{ modalUuid: props.modalUuid }
-					);
+		socket.on(
+			"event:station.removedBlacklistedPlaylist",
+			res => {
+				const { playlistId } = res.data;
+				const playlistIndex = blacklist.value
+					.map(playlist => playlist._id)
+					.indexOf(playlistId);
+				if (playlistIndex >= 0)
+					blacklist.value.splice(playlistIndex, 1);
+			},
+			{ modalUuid: props.modalUuid }
+		);
 
-					socket.on(
-						"event:station.deleted",
-						() => {
-							new Toast(
-								`The station you were editing was deleted.`
-							);
-							closeCurrentModal(true);
-						},
-						{ modalUuid: props.modalUuid }
-					);
+		socket.on(
+			"event:station.deleted",
+			() => {
+				new Toast(`The station you were editing was deleted.`);
+				closeCurrentModal(true);
+			},
+			{ modalUuid: props.modalUuid }
+		);
 
-					socket.on(
-						"event:user.station.favorited",
-						res => {
-							if (res.data.stationId === stationId.value)
-								updateIsFavorited(true);
-						},
-						{ modalUuid: props.modalUuid }
-					);
+		socket.on(
+			"event:user.station.favorited",
+			res => {
+				if (res.data.stationId === stationId.value)
+					updateIsFavorited(true);
+			},
+			{ modalUuid: props.modalUuid }
+		);
 
-					socket.on(
-						"event:user.station.unfavorited",
-						res => {
-							if (res.data.stationId === stationId.value)
-								updateIsFavorited(false);
-						},
-						{ modalUuid: props.modalUuid }
-					);
-				} else {
-					new Toast(`Station with that ID not found`);
-					closeCurrentModal();
-				}
-			}
+		socket.on(
+			"event:user.station.unfavorited",
+			res => {
+				if (res.data.stationId === stationId.value)
+					updateIsFavorited(false);
+			},
+			{ modalUuid: props.modalUuid }
 		);
 
 		socket.on(

frontend/src/components/modals/Report.vue

@@ -226,27 +226,27 @@ onMounted(() => {
 				);
 			}
 		});
-
-		socket.on(
-			"event:admin.report.resolved",
-			res => {
-				existingReports.value = existingReports.value.filter(
-					report => report._id !== res.data.reportId
-				);
-			},
-			{ modalUuid: props.modalUuid }
-		);
-
-		socket.on(
-			"event:admin.report.removed",
-			res => {
-				existingReports.value = existingReports.value.filter(
-					report => report._id !== res.data.reportId
-				);
-			},
-			{ modalUuid: props.modalUuid }
-		);
 	});
+
+	socket.on(
+		"event:admin.report.resolved",
+		res => {
+			existingReports.value = existingReports.value.filter(
+				report => report._id !== res.data.reportId
+			);
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on(
+		"event:admin.report.removed",
+		res => {
+			existingReports.value = existingReports.value.filter(
+				report => report._id !== res.data.reportId
+			);
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 </script>
 

frontend/src/components/modals/ViewApiRequest.vue

@@ -54,21 +54,21 @@ onMounted(() => {
 					"apis.joinRoom",
 					`view-api-request.${props.requestId}`
 				);
-
-				socket.on(
-					"event:youtubeApiRequest.removed",
-					() => {
-						new Toast("This API request was removed.");
-						closeCurrentModal();
-					},
-					{ modalUuid: props.modalUuid }
-				);
 			} else {
 				new Toast("API request with that ID not found");
 				closeCurrentModal();
 			}
 		});
 	});
+
+	socket.on(
+		"event:youtubeApiRequest.removed",
+		() => {
+			new Toast("This API request was removed.");
+			closeCurrentModal();
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 
 onBeforeUnmount(() => {

frontend/src/components/modals/ViewPunishment.vue

@@ -45,20 +45,20 @@ onMounted(() => {
 					"apis.joinRoom",
 					`view-punishment.${props.punishmentId}`
 				);
-
-				socket.on(
-					"event:admin.punishment.updated",
-					({ data }) => {
-						punishment.value = data.punishment;
-					},
-					{ modalUuid: props.modalUuid }
-				);
 			} else {
 				new Toast("Punishment with that ID not found");
 				closeCurrentModal();
 			}
 		});
 	});
+
+	socket.on(
+		"event:admin.punishment.updated",
+		({ data }) => {
+			punishment.value = data.punishment;
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 
 onBeforeUnmount(() => {

frontend/src/components/modals/ViewReport.vue

@@ -108,43 +108,38 @@ onMounted(() => {
 						}
 					}
 				);
-
-				socket.on(
-					"event:admin.report.resolved",
-					res => {
-						report.value.resolved = res.data.resolved;
-					},
-					{ modalUuid: props.modalUuid }
-				);
-
-				socket.on(
-					"event:admin.report.removed",
-					() => closeCurrentModal(),
-					{
-						modalUuid: props.modalUuid
-					}
-				);
-
-				socket.on(
-					"event:admin.report.issue.toggled",
-					res => {
-						if (props.reportId === res.data.reportId) {
-							const issue = report.value.issues.find(
-								issue =>
-									issue._id.toString() === res.data.issueId
-							);
-
-							issue.resolved = res.data.resolved;
-						}
-					},
-					{ modalUuid: props.modalUuid }
-				);
 			} else {
 				new Toast("Report with that ID not found");
 				closeCurrentModal();
 			}
 		});
 	});
+
+	socket.on(
+		"event:admin.report.resolved",
+		res => {
+			report.value.resolved = res.data.resolved;
+		},
+		{ modalUuid: props.modalUuid }
+	);
+
+	socket.on("event:admin.report.removed", () => closeCurrentModal(), {
+		modalUuid: props.modalUuid
+	});
+
+	socket.on(
+		"event:admin.report.issue.toggled",
+		res => {
+			if (props.reportId === res.data.reportId) {
+				const issue = report.value.issues.find(
+					issue => issue._id.toString() === res.data.issueId
+				);
+
+				issue.resolved = res.data.resolved;
+			}
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 
 onBeforeUnmount(() => {

frontend/src/components/modals/ViewYoutubeVideo.vue

@@ -443,15 +443,6 @@ onMounted(() => {
 						"apis.joinRoom",
 						`view-youtube-video.${video.value._id}`
 					);
-
-					socket.on(
-						"event:youtubeVideo.removed",
-						() => {
-							new Toast("This YouTube video was removed.");
-							closeCurrentModal();
-						},
-						{ modalUuid: props.modalUuid }
-					);
 				} else {
 					new Toast("YouTube video with that ID not found");
 					closeCurrentModal();
@@ -459,6 +450,15 @@ onMounted(() => {
 			}
 		);
 	});
+
+	socket.on(
+		"event:youtubeVideo.removed",
+		() => {
+			new Toast("This YouTube video was removed.");
+			closeCurrentModal();
+		},
+		{ modalUuid: props.modalUuid }
+	);
 });
 
 onBeforeUnmount(() => {

frontend/src/composables/useSortablePlaylists.ts

@@ -72,102 +72,103 @@ export const useSortablePlaylists = () => {
 				if (res.status === "success") setPlaylists(res.data.playlists);
 				orderOfPlaylists.value = calculatePlaylistOrder(); // order in regards to the database
 			});
+		});
 
-			socket.on(
-				"event:playlist.created",
-				res => addPlaylist(res.data.playlist),
-				{ replaceable: true }
-			);
+		socket.on(
+			"event:playlist.created",
+			res => addPlaylist(res.data.playlist),
+			{ replaceable: true }
+		);
 
-			socket.on(
-				"event:playlist.deleted",
-				res => removePlaylist(res.data.playlistId),
-				{ replaceable: true }
-			);
+		socket.on(
+			"event:playlist.deleted",
+			res => removePlaylist(res.data.playlistId),
+			{ replaceable: true }
+		);
 
-			socket.on(
-				"event:playlist.song.added",
-				res => {
-					playlists.value.forEach((playlist, index) => {
-						if (playlist._id === res.data.playlistId) {
-							playlists.value[index].songs.push(res.data.song);
-						}
-					});
-				},
-				{ replaceable: true }
-			);
+		socket.on(
+			"event:playlist.song.added",
+			res => {
+				playlists.value.forEach((playlist, index) => {
+					if (playlist._id === res.data.playlistId) {
+						playlists.value[index].songs.push(res.data.song);
+					}
+				});
+			},
+			{ replaceable: true }
+		);
 
-			socket.on(
-				"event:playlist.song.removed",
-				res => {
-					playlists.value.forEach((playlist, playlistIndex) => {
-						if (playlist._id === res.data.playlistId) {
-							playlists.value[playlistIndex].songs.forEach(
-								(song, songIndex) => {
-									if (song.youtubeId === res.data.youtubeId) {
-										playlists.value[
-											playlistIndex
-										].songs.splice(songIndex, 1);
-									}
+		socket.on(
+			"event:playlist.song.removed",
+			res => {
+				playlists.value.forEach((playlist, playlistIndex) => {
+					if (playlist._id === res.data.playlistId) {
+						playlists.value[playlistIndex].songs.forEach(
+							(song, songIndex) => {
+								if (song.youtubeId === res.data.youtubeId) {
+									playlists.value[playlistIndex].songs.splice(
+										songIndex,
+										1
+									);
 								}
-							);
-						}
-					});
-				},
-				{ replaceable: true }
-			);
+							}
+						);
+					}
+				});
+			},
+			{ replaceable: true }
+		);
 
-			socket.on(
-				"event:playlist.displayName.updated",
-				res => {
-					playlists.value.forEach((playlist, index) => {
-						if (playlist._id === res.data.playlistId) {
-							playlists.value[index].displayName =
-								res.data.displayName;
-						}
-					});
-				},
-				{ replaceable: true }
-			);
+		socket.on(
+			"event:playlist.displayName.updated",
+			res => {
+				playlists.value.forEach((playlist, index) => {
+					if (playlist._id === res.data.playlistId) {
+						playlists.value[index].displayName =
+							res.data.displayName;
+					}
+				});
+			},
+			{ replaceable: true }
+		);
 
-			socket.on(
-				"event:playlist.privacy.updated",
-				res => {
-					playlists.value.forEach((playlist, index) => {
-						if (playlist._id === res.data.playlist._id) {
-							playlists.value[index].privacy =
-								res.data.playlist.privacy;
-						}
-					});
-				},
-				{ replaceable: true }
-			);
+		socket.on(
+			"event:playlist.privacy.updated",
+			res => {
+				playlists.value.forEach((playlist, index) => {
+					if (playlist._id === res.data.playlist._id) {
+						playlists.value[index].privacy =
+							res.data.playlist.privacy;
+					}
+				});
+			},
+			{ replaceable: true }
+		);
 
-			socket.on(
-				"event:user.orderOfPlaylists.updated",
-				res => {
-					const order = res.data.order.filter(playlistId =>
-						playlists.value.find(
-							playlist =>
-								playlist._id === playlistId &&
-								(isCurrentUser.value ||
-									playlist.privacy === "public")
-						)
-					);
-					const sortedPlaylists = [];
-
-					playlists.value.forEach(playlist => {
-						const playlistOrder = order.indexOf(playlist._id);
-						if (playlistOrder >= 0)
-							sortedPlaylists[playlistOrder] = playlist;
-					});
-
-					playlists.value = sortedPlaylists;
-					orderOfPlaylists.value = calculatePlaylistOrder();
-				},
-				{ replaceable: true }
-			);
-		});
+		socket.on(
+			"event:user.orderOfPlaylists.updated",
+			res => {
+				const order = res.data.order.filter(playlistId =>
+					playlists.value.find(
+						playlist =>
+							playlist._id === playlistId &&
+							(isCurrentUser.value ||
+								playlist.privacy === "public")
+					)
+				);
+				const sortedPlaylists = [];
+
+				playlists.value.forEach(playlist => {
+					const playlistOrder = order.indexOf(playlist._id);
+					if (playlistOrder >= 0)
+						sortedPlaylists[playlistOrder] = playlist;
+				});
+
+				playlists.value = sortedPlaylists;
+				orderOfPlaylists.value = calculatePlaylistOrder();
+			},
+			{ replaceable: true }
+		);
 	});
 
 	onBeforeUnmount(() => {

frontend/src/pages/Home.vue

@@ -189,145 +189,145 @@ onMounted(async () => {
 		socket.dispatch("apis.joinRoom", "home");
 
 		fetchStations();
+	});
 
-		socket.on("event:station.created", res => {
-			const { station } = res.data;
+	socket.on("event:station.created", res => {
+		const { station } = res.data;
 
-			if (stations.value.find(_station => _station._id === station._id)) {
-				stations.value.forEach(s => {
-					const _station = s;
-					if (_station._id === station._id) {
-						_station.privacy = station.privacy;
-					}
-				});
-			} else {
-				if (!station.currentSong)
-					station.currentSong = {
-						thumbnail: "/assets/notes-transparent.png"
-					};
-				if (station.currentSong && !station.currentSong.thumbnail)
-					station.currentSong.ytThumbnail = `https://img.youtube.com/vi/${station.currentSong.youtubeId}/mqdefault.jpg`;
-				stations.value.push(station);
-			}
-		});
+		if (stations.value.find(_station => _station._id === station._id)) {
+			stations.value.forEach(s => {
+				const _station = s;
+				if (_station._id === station._id) {
+					_station.privacy = station.privacy;
+				}
+			});
+		} else {
+			if (!station.currentSong)
+				station.currentSong = {
+					thumbnail: "/assets/notes-transparent.png"
+				};
+			if (station.currentSong && !station.currentSong.thumbnail)
+				station.currentSong.ytThumbnail = `https://img.youtube.com/vi/${station.currentSong.youtubeId}/mqdefault.jpg`;
+			stations.value.push(station);
+		}
+	});
 
-		socket.on("event:station.deleted", res => {
-			const { stationId } = res.data;
+	socket.on("event:station.deleted", res => {
+		const { stationId } = res.data;
 
-			const station = stations.value.find(
-				station => station._id === stationId
-			);
+		const station = stations.value.find(
+			station => station._id === stationId
+		);
 
-			if (station) {
-				const stationIndex = stations.value.indexOf(station);
-				stations.value.splice(stationIndex, 1);
+		if (station) {
+			const stationIndex = stations.value.indexOf(station);
+			stations.value.splice(stationIndex, 1);
 
-				if (station.isFavorited)
-					orderOfFavoriteStations.value =
-						orderOfFavoriteStations.value.filter(
-							favoritedId => favoritedId !== stationId
-						);
-			}
-		});
+			if (station.isFavorited)
+				orderOfFavoriteStations.value =
+					orderOfFavoriteStations.value.filter(
+						favoritedId => favoritedId !== stationId
+					);
+		}
+	});
 
-		socket.on("event:station.userCount.updated", res => {
-			const station = stations.value.find(
-				station => station._id === res.data.stationId
-			);
+	socket.on("event:station.userCount.updated", res => {
+		const station = stations.value.find(
+			station => station._id === res.data.stationId
+		);
 
-			if (station) station.userCount = res.data.userCount;
-		});
+		if (station) station.userCount = res.data.userCount;
+	});
 
-		socket.on("event:station.updated", res => {
-			const stationIndex = stations.value
-				.map(station => station._id)
-				.indexOf(res.data.station._id);
+	socket.on("event:station.updated", res => {
+		const stationIndex = stations.value
+			.map(station => station._id)
+			.indexOf(res.data.station._id);
 
-			if (stationIndex !== -1) {
-				stations.value[stationIndex] = {
-					...stations.value[stationIndex],
-					...res.data.station
-				};
-			}
-		});
+		if (stationIndex !== -1) {
+			stations.value[stationIndex] = {
+				...stations.value[stationIndex],
+				...res.data.station
+			};
+		}
+	});
 
-		socket.on("event:station.nextSong", res => {
-			const station = stations.value.find(
-				station => station._id === res.data.stationId
-			);
+	socket.on("event:station.nextSong", res => {
+		const station = stations.value.find(
+			station => station._id === res.data.stationId
+		);
 
-			if (station) {
-				let newSong = res.data.currentSong;
+		if (station) {
+			let newSong = res.data.currentSong;
 
-				if (!newSong)
-					newSong = {
-						thumbnail: "/assets/notes-transparent.png"
-					};
+			if (!newSong)
+				newSong = {
+					thumbnail: "/assets/notes-transparent.png"
+				};
 
-				station.currentSong = newSong;
-			}
-		});
+			station.currentSong = newSong;
+		}
+	});
 
-		socket.on("event:station.pause", res => {
-			const station = stations.value.find(
-				station => station._id === res.data.stationId
-			);
+	socket.on("event:station.pause", res => {
+		const station = stations.value.find(
+			station => station._id === res.data.stationId
+		);
 
-			if (station) station.paused = true;
-		});
+		if (station) station.paused = true;
+	});
 
-		socket.on("event:station.resume", res => {
-			const station = stations.value.find(
-				station => station._id === res.data.stationId
-			);
+	socket.on("event:station.resume", res => {
+		const station = stations.value.find(
+			station => station._id === res.data.stationId
+		);
 
-			if (station) station.paused = false;
-		});
+		if (station) station.paused = false;
+	});
 
-		socket.on("event:user.station.favorited", res => {
-			const { stationId } = res.data;
+	socket.on("event:user.station.favorited", res => {
+		const { stationId } = res.data;
 
-			const station = stations.value.find(
-				station => station._id === stationId
-			);
+		const station = stations.value.find(
+			station => station._id === stationId
+		);
 
-			if (station) {
-				station.isFavorited = true;
-				orderOfFavoriteStations.value.push(stationId);
-			}
-		});
+		if (station) {
+			station.isFavorited = true;
+			orderOfFavoriteStations.value.push(stationId);
+		}
+	});
 
-		socket.on("event:user.station.unfavorited", res => {
-			const { stationId } = res.data;
+	socket.on("event:user.station.unfavorited", res => {
+		const { stationId } = res.data;
 
-			const station = stations.value.find(
-				station => station._id === stationId
-			);
+		const station = stations.value.find(
+			station => station._id === stationId
+		);
 
-			if (station) {
-				station.isFavorited = false;
-				orderOfFavoriteStations.value =
-					orderOfFavoriteStations.value.filter(
-						favoritedId => favoritedId !== stationId
-					);
-			}
-		});
+		if (station) {
+			station.isFavorited = false;
+			orderOfFavoriteStations.value =
+				orderOfFavoriteStations.value.filter(
+					favoritedId => favoritedId !== stationId
+				);
+		}
+	});
 
-		socket.on("event:user.orderOfFavoriteStations.updated", res => {
-			orderOfFavoriteStations.value = res.data.order;
-		});
+	socket.on("event:user.orderOfFavoriteStations.updated", res => {
+		orderOfFavoriteStations.value = res.data.order;
+	});
 
-		socket.on("event:station.djs.added", res => {
-			if (res.data.user._id === userId.value) fetchStations();
-		});
+	socket.on("event:station.djs.added", res => {
+		if (res.data.user._id === userId.value) fetchStations();
+	});
 
-		socket.on("event:station.djs.removed", res => {
-			if (res.data.user._id === userId.value) fetchStations();
-		});
+	socket.on("event:station.djs.removed", res => {
+		if (res.data.user._id === userId.value) fetchStations();
+	});
 
-		socket.on("keep.event:user.role.updated", () => {
-			fetchStations();
-		});
+	socket.on("keep.event:user.role.updated", () => {
+		fetchStations();
 	});
 
 	// ctrl + alt + f

frontend/src/pages/News.vue

@@ -50,33 +50,31 @@ onMounted(() => {
 		);
 
 		socket.dispatch("apis.joinRoom", "news");
+	});
 
-		socket.on("event:news.created", (res: NewsCreatedResponse) =>
-			news.value.unshift(res.data.news)
-		);
-
-		socket.on("event:news.updated", (res: NewsUpdatedResponse) => {
-			if (res.data.news.status === "draft") {
-				news.value = news.value.filter(
-					item => item._id !== res.data.news._id
-				);
-				return;
-			}
-
-			for (let n = 0; n < news.value.length; n += 1) {
-				if (news.value[n]._id === res.data.news._id)
-					news.value[n] = {
-						...news.value[n],
-						...res.data.news
-					};
-			}
-		});
+	socket.on("event:news.created", (res: NewsCreatedResponse) =>
+		news.value.unshift(res.data.news)
+	);
 
-		socket.on("event:news.deleted", (res: NewsRemovedResponse) => {
+	socket.on("event:news.updated", (res: NewsUpdatedResponse) => {
+		if (res.data.news.status === "draft") {
 			news.value = news.value.filter(
-				item => item._id !== res.data.newsId
+				item => item._id !== res.data.news._id
 			);
-		});
+			return;
+		}
+
+		for (let n = 0; n < news.value.length; n += 1) {
+			if (news.value[n]._id === res.data.news._id)
+				news.value[n] = {
+					...news.value[n],
+					...res.data.news
+				};
+		}
+	});
+
+	socket.on("event:news.deleted", (res: NewsRemovedResponse) => {
+		news.value = news.value.filter(item => item._id !== res.data.newsId);
 	});
 });
 </script>

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

@@ -84,32 +84,32 @@ onMounted(() => {
 				getSet();
 			}
 		});
+	});
 
-		socket.on("event:activity.updated", res => {
-			activities.value.find(
-				activity => activity._id === res.data.activityId
-			).payload.message = res.data.message;
-		});
+	socket.on("event:activity.updated", res => {
+		activities.value.find(
+			activity => activity._id === res.data.activityId
+		).payload.message = res.data.message;
+	});
 
-		socket.on("event:activity.created", res => {
-			activities.value.unshift(res.data.activity);
-			offsettedFromNextSet.value += 1;
-		});
+	socket.on("event:activity.created", res => {
+		activities.value.unshift(res.data.activity);
+		offsettedFromNextSet.value += 1;
+	});
 
-		socket.on("event:activity.hidden", res => {
-			activities.value = activities.value.filter(
-				activity => activity._id !== res.data.activityId
-			);
+	socket.on("event:activity.hidden", res => {
+		activities.value = activities.value.filter(
+			activity => activity._id !== res.data.activityId
+		);
 
-			offsettedFromNextSet.value -= 1;
-		});
+		offsettedFromNextSet.value -= 1;
+	});
 
-		socket.on("event:activity.removeAllForUser", () => {
-			activities.value = [];
-			position.value = 1;
-			maxPosition.value = 1;
-			offsettedFromNextSet.value = 0;
-		});
+	socket.on("event:activity.removeAllForUser", () => {
+		activities.value = [];
+		position.value = 1;
+		maxPosition.value = 1;
+		offsettedFromNextSet.value = 0;
 	});
 });
 

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

@@ -78,26 +78,26 @@ onMounted(() => {
 				localActivityWatch.value = preferences.activityWatch;
 			}
 		});
+	});
 
-		socket.on("keep.event:user.preferences.updated", res => {
-			const { preferences } = res.data;
+	socket.on("keep.event:user.preferences.updated", res => {
+		const { preferences } = res.data;
 
-			if (preferences.nightmode !== undefined)
-				localNightmode.value = preferences.nightmode;
+		if (preferences.nightmode !== undefined)
+			localNightmode.value = preferences.nightmode;
 
-			if (preferences.autoSkipDisliked !== undefined)
-				localAutoSkipDisliked.value = preferences.autoSkipDisliked;
+		if (preferences.autoSkipDisliked !== undefined)
+			localAutoSkipDisliked.value = preferences.autoSkipDisliked;
 
-			if (preferences.activityLogPublic !== undefined)
-				localActivityLogPublic.value = preferences.activityLogPublic;
+		if (preferences.activityLogPublic !== undefined)
+			localActivityLogPublic.value = preferences.activityLogPublic;
 
-			if (preferences.anonymousSongRequests !== undefined)
-				localAnonymousSongRequests.value =
-					preferences.anonymousSongRequests;
+		if (preferences.anonymousSongRequests !== undefined)
+			localAnonymousSongRequests.value =
+				preferences.anonymousSongRequests;
 
-			if (preferences.activityWatch !== undefined)
-				localActivityWatch.value = preferences.activityWatch;
-		});
+		if (preferences.activityWatch !== undefined)
+			localActivityWatch.value = preferences.activityWatch;
 	});
 });
 </script>

frontend/src/pages/Settings/index.vue

@@ -50,35 +50,35 @@ onMounted(() => {
 			if (res.status === "success") setUser(res.data.user);
 			else new Toast("You're not currently signed in.");
 		});
-
-		socket.on("event:user.password.linked", () =>
-			updateOriginalUser({
-				property: "password",
-				value: true
-			})
-		);
-
-		socket.on("event:user.password.unlinked", () =>
-			updateOriginalUser({
-				property: "password",
-				value: false
-			})
-		);
-
-		socket.on("event:user.github.linked", () =>
-			updateOriginalUser({
-				property: "github",
-				value: true
-			})
-		);
-
-		socket.on("event:user.github.unlinked", () =>
-			updateOriginalUser({
-				property: "github",
-				value: false
-			})
-		);
 	});
+
+	socket.on("event:user.password.linked", () =>
+		updateOriginalUser({
+			property: "password",
+			value: true
+		})
+	);
+
+	socket.on("event:user.password.unlinked", () =>
+		updateOriginalUser({
+			property: "password",
+			value: false
+		})
+	);
+
+	socket.on("event:user.github.linked", () =>
+		updateOriginalUser({
+			property: "github",
+			value: true
+		})
+	);
+
+	socket.on("event:user.github.unlinked", () =>
+		updateOriginalUser({
+			property: "github",
+			value: false
+		})
+	);
 });
 </script>
 

frontend/src/pages/Station/index.vue

@@ -1146,215 +1146,208 @@ onMounted(async () => {
 				}
 			}
 		);
+	});
 
-		socket.on("event:station.nextSong", res => {
-			const { currentSong, startedAt, paused, timePaused } = res.data;
-
-			setCurrentSong({
-				currentSong,
-				startedAt,
-				paused,
-				timePaused,
-				pausedAt: 0
-			});
-		});
+	socket.onDisconnect(() => {
+		const _currentSong = currentSong.value;
+		if (nextSong.value)
+			setNextCurrentSong(
+				{
+					currentSong: nextSong.value,
+					startedAt: Date.now() + getTimeRemaining(),
+					paused: false,
+					timePaused: 0
+				},
+				true
+			);
+		else
+			setNextCurrentSong(
+				{
+					currentSong: null,
+					startedAt: 0,
+					paused: false,
+					timePaused: 0,
+					pausedAt: 0
+				},
+				true
+			);
+		window.stationNextSongTimeout = setTimeout(() => {
+			if (!noSong.value && currentSong.value._id === _currentSong._id)
+				skipSong();
+		}, getTimeRemaining());
+	}, true);
 
-		socket.on("event:station.pause", res => {
-			pausedAt.value = res.data.pausedAt;
-			updateStationPaused(true);
-			pauseLocalPlayer();
+	socket.on("event:station.nextSong", res => {
+		const { currentSong, startedAt, paused, timePaused } = res.data;
 
-			clearTimeout(window.stationNextSongTimeout);
+		setCurrentSong({
+			currentSong,
+			startedAt,
+			paused,
+			timePaused,
+			pausedAt: 0
 		});
+	});
 
-		socket.on("event:station.resume", res => {
-			timePaused.value = res.data.timePaused;
-			updateStationPaused(false);
-			if (!localPaused.value) resumeLocalPlayer();
+	socket.on("event:station.pause", res => {
+		pausedAt.value = res.data.pausedAt;
+		updateStationPaused(true);
+		pauseLocalPlayer();
 
-			autoRequestSong();
-		});
+		clearTimeout(window.stationNextSongTimeout);
+	});
 
-		socket.on("event:station.deleted", () => {
-			router.push({
-				path: "/",
-				query: {
-					toast: "The station you were in was deleted."
-				}
-			});
-		});
+	socket.on("event:station.resume", res => {
+		timePaused.value = res.data.timePaused;
+		updateStationPaused(false);
+		if (!localPaused.value) resumeLocalPlayer();
 
-		socket.on("event:ratings.liked", res => {
-			if (!noSong.value) {
-				if (res.data.youtubeId === currentSong.value.youtubeId) {
-					updateCurrentSongRatings(res.data);
-				}
+		autoRequestSong();
+	});
+
+	socket.on("event:station.deleted", () => {
+		router.push({
+			path: "/",
+			query: {
+				toast: "The station you were in was deleted."
 			}
 		});
+	});
 
-		socket.on("event:ratings.disliked", res => {
-			if (!noSong.value) {
-				if (res.data.youtubeId === currentSong.value.youtubeId) {
-					updateCurrentSongRatings(res.data);
-				}
+	socket.on("event:ratings.liked", res => {
+		if (!noSong.value) {
+			if (res.data.youtubeId === currentSong.value.youtubeId) {
+				updateCurrentSongRatings(res.data);
 			}
-		});
+		}
+	});
 
-		socket.on("event:ratings.unliked", res => {
-			if (!noSong.value) {
-				if (res.data.youtubeId === currentSong.value.youtubeId) {
-					updateCurrentSongRatings(res.data);
-				}
+	socket.on("event:ratings.disliked", res => {
+		if (!noSong.value) {
+			if (res.data.youtubeId === currentSong.value.youtubeId) {
+				updateCurrentSongRatings(res.data);
 			}
-		});
+		}
+	});
 
-		socket.on("event:ratings.undisliked", res => {
-			if (!noSong.value) {
-				if (res.data.youtubeId === currentSong.value.youtubeId) {
-					updateCurrentSongRatings(res.data);
-				}
+	socket.on("event:ratings.unliked", res => {
+		if (!noSong.value) {
+			if (res.data.youtubeId === currentSong.value.youtubeId) {
+				updateCurrentSongRatings(res.data);
 			}
-		});
+		}
+	});
 
-		socket.on("event:ratings.updated", res => {
-			if (!noSong.value) {
-				if (res.data.youtubeId === currentSong.value.youtubeId) {
-					updateOwnCurrentSongRatings(res.data);
-				}
+	socket.on("event:ratings.undisliked", res => {
+		if (!noSong.value) {
+			if (res.data.youtubeId === currentSong.value.youtubeId) {
+				updateCurrentSongRatings(res.data);
 			}
-		});
+		}
+	});
 
-		socket.on("event:station.queue.updated", res => {
-			updateSongsList(res.data.queue);
+	socket.on("event:ratings.updated", res => {
+		if (!noSong.value) {
+			if (res.data.youtubeId === currentSong.value.youtubeId) {
+				updateOwnCurrentSongRatings(res.data);
+			}
+		}
+	});
 
-			let nextSong = null;
-			if (songsList.value[0])
-				nextSong = songsList.value[0].youtubeId
-					? songsList.value[0]
-					: null;
+	socket.on("event:station.queue.updated", res => {
+		updateSongsList(res.data.queue);
 
-			updateNextSong(nextSong);
+		let nextSong = null;
+		if (songsList.value[0])
+			nextSong = songsList.value[0].youtubeId ? songsList.value[0] : null;
 
-			autoRequestSong();
-		});
+		updateNextSong(nextSong);
 
-		socket.on("event:station.queue.song.repositioned", res => {
-			repositionSongInList(res.data.song);
+		autoRequestSong();
+	});
 
-			let nextSong = null;
-			if (songsList.value[0])
-				nextSong = songsList.value[0].youtubeId
-					? songsList.value[0]
-					: null;
+	socket.on("event:station.queue.song.repositioned", res => {
+		repositionSongInList(res.data.song);
 
-			updateNextSong(nextSong);
-		});
+		let nextSong = null;
+		if (songsList.value[0])
+			nextSong = songsList.value[0].youtubeId ? songsList.value[0] : null;
 
-		socket.on("event:station.toggleSkipVote", res => {
-			if (currentSong.value)
-				updateCurrentSongSkipVotes({
-					skipVotes: res.data.voted
-						? currentSong.value.skipVotes + 1
-						: currentSong.value.skipVotes - 1,
-					skipVotesCurrent: null,
-					voted:
-						res.data.userId === userId.value
-							? res.data.voted
-							: currentSong.value.voted
-				});
-		});
+		updateNextSong(nextSong);
+	});
 
-		socket.on("event:station.updated", async res => {
-			const { name, theme, privacy } = res.data.station;
+	socket.on("event:station.toggleSkipVote", res => {
+		if (currentSong.value)
+			updateCurrentSongSkipVotes({
+				skipVotes: res.data.voted
+					? currentSong.value.skipVotes + 1
+					: currentSong.value.skipVotes - 1,
+				skipVotesCurrent: null,
+				voted:
+					res.data.userId === userId.value
+						? res.data.voted
+						: currentSong.value.voted
+			});
+	});
 
-			if (!hasPermission("stations.view") && privacy === "private") {
-				router.push({
-					path: "/",
-					query: {
-						toast: "The station you were in was made private."
-					}
-				});
-			} else {
-				if (station.value.name !== name) {
-					await router.push(
-						`${name}?${Object.keys(route.query)
-							.map(
-								key =>
-									`${encodeURIComponent(
-										key
-									)}=${encodeURIComponent(
-										JSON.stringify(route.query[key])
-									)}`
-							)
-							.join("&")}`
-					);
+	socket.on("event:station.updated", async res => {
+		const { name, theme, privacy } = res.data.station;
 
-					// eslint-disable-next-line no-restricted-globals
-					history.replaceState({ ...history.state, ...{} }, null);
+		if (!hasPermission("stations.view") && privacy === "private") {
+			router.push({
+				path: "/",
+				query: {
+					toast: "The station you were in was made private."
 				}
+			});
+		} else {
+			if (station.value.name !== name) {
+				await router.push(
+					`${name}?${Object.keys(route.query)
+						.map(
+							key =>
+								`${encodeURIComponent(
+									key
+								)}=${encodeURIComponent(
+									JSON.stringify(route.query[key])
+								)}`
+						)
+						.join("&")}`
+				);
 
-				if (station.value.theme !== theme)
-					document.getElementsByTagName(
-						"html"
-					)[0].style.cssText = `--primary-color: var(--${theme})`;
-
-				updateStation(res.data.station);
+				// eslint-disable-next-line no-restricted-globals
+				history.replaceState({ ...history.state, ...{} }, null);
 			}
-		});
 
-		socket.on("event:station.users.updated", res =>
-			updateUsers(res.data.users)
-		);
+			if (station.value.theme !== theme)
+				document.getElementsByTagName(
+					"html"
+				)[0].style.cssText = `--primary-color: var(--${theme})`;
 
-		socket.on("event:station.userCount.updated", res =>
-			updateUserCount(res.data.userCount)
-		);
+			updateStation(res.data.station);
+		}
+	});
 
-		socket.on("event:user.station.favorited", res => {
-			if (res.data.stationId === station.value._id)
-				updateIfStationIsFavorited({ isFavorited: true });
-		});
+	socket.on("event:station.users.updated", res =>
+		updateUsers(res.data.users)
+	);
 
-		socket.on("event:user.station.unfavorited", res => {
-			if (res.data.stationId === station.value._id)
-				updateIfStationIsFavorited({ isFavorited: false });
-		});
+	socket.on("event:station.userCount.updated", res =>
+		updateUserCount(res.data.userCount)
+	);
 
-		socket.on("event:station.djs.added", res => {
-			if (res.data.user._id === userId.value)
-				updatePermissions().then(() => {
-					if (
-						!hasPermission("stations.view") &&
-						station.value.privacy === "private"
-					)
-						router.push({
-							path: "/",
-							query: {
-								toast: "You no longer have access to the station you were in."
-							}
-						});
-				});
-			addDj(res.data.user);
-		});
+	socket.on("event:user.station.favorited", res => {
+		if (res.data.stationId === station.value._id)
+			updateIfStationIsFavorited({ isFavorited: true });
+	});
 
-		socket.on("event:station.djs.removed", res => {
-			if (res.data.user._id === userId.value)
-				updatePermissions().then(() => {
-					if (
-						!hasPermission("stations.view") &&
-						station.value.privacy === "private"
-					)
-						router.push({
-							path: "/",
-							query: {
-								toast: "You no longer have access to the station you were in."
-							}
-						});
-				});
-			removeDj(res.data.user);
-		});
+	socket.on("event:user.station.unfavorited", res => {
+		if (res.data.stationId === station.value._id)
+			updateIfStationIsFavorited({ isFavorited: false });
+	});
 
-		socket.on("keep.event:user.role.updated", () => {
+	socket.on("event:station.djs.added", res => {
+		if (res.data.user._id === userId.value)
 			updatePermissions().then(() => {
 				if (
 					!hasPermission("stations.view") &&
@@ -1367,37 +1360,40 @@ onMounted(async () => {
 						}
 					});
 			});
-		});
+		addDj(res.data.user);
 	});
 
-	socket.onDisconnect(() => {
-		const _currentSong = currentSong.value;
-		if (nextSong.value)
-			setNextCurrentSong(
-				{
-					currentSong: nextSong.value,
-					startedAt: Date.now() + getTimeRemaining(),
-					paused: false,
-					timePaused: 0
-				},
-				true
-			);
-		else
-			setNextCurrentSong(
-				{
-					currentSong: null,
-					startedAt: 0,
-					paused: false,
-					timePaused: 0,
-					pausedAt: 0
-				},
-				true
-			);
-		window.stationNextSongTimeout = setTimeout(() => {
-			if (!noSong.value && currentSong.value._id === _currentSong._id)
-				skipSong();
-		}, getTimeRemaining());
-	}, true);
+	socket.on("event:station.djs.removed", res => {
+		if (res.data.user._id === userId.value)
+			updatePermissions().then(() => {
+				if (
+					!hasPermission("stations.view") &&
+					station.value.privacy === "private"
+				)
+					router.push({
+						path: "/",
+						query: {
+							toast: "You no longer have access to the station you were in."
+						}
+					});
+			});
+		removeDj(res.data.user);
+	});
+
+	socket.on("keep.event:user.role.updated", () => {
+		updatePermissions().then(() => {
+			if (
+				!hasPermission("stations.view") &&
+				station.value.privacy === "private"
+			)
+				router.push({
+					path: "/",
+					query: {
+						toast: "You no longer have access to the station you were in."
+					}
+				});
+		});
+	});
 
 	frontendDevMode.value = await lofig.get("mode");
 	mediasession.value = await lofig.get("siteSettings.mediasession");