Просмотр исходного кода

refactor: replaced _this and local with this on the frontend and backend

Kristian Vos 5 лет назад
Родитель
Сommit
6ba23425c9
34 измененных файлов с 609 добавлено и 715 удалено
  1. 4 7
      backend/logic/io.js
  2. 16 21
      backend/logic/stations.js
  3. 11 12
      frontend/App.vue
  4. 3 4
      frontend/auth.js
  5. 33 38
      frontend/components/Admin/EditStation.vue
  6. 14 18
      frontend/components/Admin/News.vue
  7. 10 13
      frontend/components/Admin/Punishments.vue
  8. 17 20
      frontend/components/Admin/QueueSongs.vue
  9. 11 13
      frontend/components/Admin/Reports.vue
  10. 21 24
      frontend/components/Admin/Songs.vue
  11. 11 14
      frontend/components/Admin/Stations.vue
  12. 5 6
      frontend/components/Admin/Statistics.vue
  13. 6 8
      frontend/components/Admin/Users.vue
  14. 21 27
      frontend/components/Modals/AddSongToPlaylist.vue
  15. 20 27
      frontend/components/Modals/AddSongToQueue.vue
  16. 2 5
      frontend/components/Modals/CreateCommunityStation.vue
  17. 44 50
      frontend/components/Modals/EditSong.vue
  18. 23 26
      frontend/components/Modals/EditStation.vue
  19. 1 2
      frontend/components/Modals/EditUser.vue
  20. 2 3
      frontend/components/Modals/MobileAlert.vue
  21. 1 2
      frontend/components/Modals/Playlists/Create.vue
  22. 40 48
      frontend/components/Modals/Playlists/Edit.vue
  23. 2 3
      frontend/components/Modals/Register.vue
  24. 3 5
      frontend/components/Modals/Report.vue
  25. 1 2
      frontend/components/Modals/ViewPunishment.vue
  26. 4 5
      frontend/components/Modals/WhatIsNew.vue
  27. 20 22
      frontend/components/Sidebars/Playlist.vue
  28. 2 2
      frontend/components/Sidebars/SongsList.vue
  29. 209 229
      frontend/components/Station/Station.vue
  30. 1 2
      frontend/components/User/ResetPassword.vue
  31. 14 15
      frontend/components/User/Settings.vue
  32. 5 6
      frontend/components/User/Show.vue
  33. 18 21
      frontend/components/pages/Home.vue
  34. 14 15
      frontend/components/pages/News.vue

+ 4 - 7
backend/logic/io.js

@@ -86,8 +86,6 @@ module.exports = class extends coreClass {
 			this.io.on('connection', async socket => {
 				try { await this._validateHook(); } catch { return; }
 
-				let _this = this;
-
 				let sessionInfo = '';
 				if (socket.session.sessionId) sessionInfo = ` UserID: ${socket.session.userId}.`;
 				if (socket.banned) {
@@ -115,15 +113,14 @@ module.exports = class extends coreClass {
 							let name = `${namespace}.${action}`;
 
 							// listen for this action to be called
-							socket.on(name, async function() {
-								let args = Array.prototype.slice.call(arguments, 0, -1);
-								let cb = arguments[arguments.length - 1];
+							socket.on(name, async (...args) => {
+								let cb = args[args.length - 1];
 								if (typeof cb !== "function")
 									cb = () => {
-										_this.logger.info("IO_MODULE", `There was no callback provided for ${name}.`);
+										this.logger.info("IO_MODULE", `There was no callback provided for ${name}.`);
 									}
 
-								try { await _this._validateHook(); } catch { return cb({status: 'failure', message: 'Lockdown'}); } 
+								try { await this._validateHook(); } catch { return cb({status: 'failure', message: 'Lockdown'}); } 
 
 								// load the session from the cache
 								cache.hget('sessions', socket.session.sessionId, (err, session) => {

+ 16 - 21
backend/logic/stations.js

@@ -122,21 +122,21 @@ module.exports = class extends coreClass {
 		try { await this._validateHook(); } catch { return; }
 
 		if (typeof cb !== 'function') cb = ()=>{};
-		let _this = this;
+
 		async.waterfall([
 			(next) => {
-				_this.getStation(stationId, next);
+				this.getStation(stationId, next);
 			},
 			(station, next) => {
 				if (!station) return next('Station not found.');
 				this.notifications.unschedule(`stations.nextSong?id=${station._id}`);
-				subscription = this.notifications.subscribe(`stations.nextSong?id=${station._id}`, _this.skipStation(station._id), true, station);
+				subscription = this.notifications.subscribe(`stations.nextSong?id=${station._id}`, this.skipStation(station._id), true, station);
 				if (station.paused) return next(true, station);
 				next(null, station);
 			},
 			(station, next) => {
 				if (!station.currentSong) {
-					return _this.skipStation(station._id)((err, station) => {
+					return this.skipStation(station._id)((err, station) => {
 						if (err) return next(err);
 						return next(true, station);
 					});
@@ -161,7 +161,6 @@ module.exports = class extends coreClass {
 	async calculateSongForStation(station, cb) {
 		try { await this._validateHook(); } catch { return; }
 
-		let _this = this;
 		let songList = [];
 		async.waterfall([
 			(next) => {
@@ -202,14 +201,14 @@ module.exports = class extends coreClass {
 			},
 
 			(playlist, next) => {
-				_this.calculateOfficialPlaylistList(station._id, playlist, () => {
+				this.calculateOfficialPlaylistList(station._id, playlist, () => {
 					next(null, playlist);
 				});
 			},
 
 			(playlist, next) => {
 				this.db.models.station.updateOne({_id: station._id}, {$set: {playlist: playlist}}, {runValidators: true}, (err) => {
-					_this.updateStation(station._id, () => {
+					this.updateStation(station._id, () => {
 						next(err, playlist);
 					});
 				});
@@ -224,7 +223,6 @@ module.exports = class extends coreClass {
 	async getStation(stationId, cb) {
 		try { await this._validateHook(); } catch { return; }
 
-		let _this = this;
 		async.waterfall([
 			(next) => {
 				this.cache.hget('stations', stationId, next);
@@ -238,7 +236,7 @@ module.exports = class extends coreClass {
 			(station, next) => {
 				if (station) {
 					if (station.type === 'official') {
-						_this.calculateOfficialPlaylistList(station._id, station.playlist, () => {});
+						this.calculateOfficialPlaylistList(station._id, station.playlist, () => {});
 					}
 					station = this.cache.schemas.station(station);
 					this.cache.hset('stations', stationId, station);
@@ -256,7 +254,6 @@ module.exports = class extends coreClass {
 	async getStationByName(stationName, cb) {
 		try { await this._validateHook(); } catch { return; }
 
-		let _this = this;
 		async.waterfall([
 
 			(next) => {
@@ -266,7 +263,7 @@ module.exports = class extends coreClass {
 			(station, next) => {
 				if (station) {
 					if (station.type === 'official') {
-						_this.calculateOfficialPlaylistList(station._id, station.playlist, ()=>{});
+						this.calculateOfficialPlaylistList(station._id, station.playlist, ()=>{});
 					}
 					station = this.cache.schemas.station(station);
 					this.cache.hset('stations', station._id, station);
@@ -283,7 +280,6 @@ module.exports = class extends coreClass {
 	async updateStation(stationId, cb) {
 		try { await this._validateHook(); } catch { return; }
 
-		let _this = this;
 		async.waterfall([
 
 			(next) => {
@@ -331,7 +327,6 @@ module.exports = class extends coreClass {
 
 	skipStation(stationId) {
 		this.logger.info("STATION_SKIP", `Skipping station ${stationId}.`, false);
-		let _this = this;
 		return async (cb) => {
 			try { await this._validateHook(); } catch { return; }
 
@@ -339,7 +334,7 @@ module.exports = class extends coreClass {
 
 			async.waterfall([
 				(next) => {
-					_this.getStation(stationId, next);
+					this.getStation(stationId, next);
 				},
 				(station, next) => {
 					if (!station) return next('Station not found.');
@@ -380,12 +375,12 @@ module.exports = class extends coreClass {
 						});
 					}
 					if (station.type === 'official' && station.playlist.length === 0) {
-						return _this.calculateSongForStation(station, (err, playlist) => {
+						return this.calculateSongForStation(station, (err, playlist) => {
 							if (err) return next(err);
-							if (playlist.length === 0) return next(null, _this.defaultSong, 0, station);
+							if (playlist.length === 0) return next(null, this.defaultSong, 0, station);
 							else {
 								this.songs.getSong(playlist[0], (err, song) => {
-									if (err || !song) return next(null, _this.defaultSong, 0, station);
+									if (err || !song) return next(null, this.defaultSong, 0, station);
 									return next(null, song, 0, station);
 								});
 							}
@@ -402,10 +397,10 @@ module.exports = class extends coreClass {
 									}
 								});
 							} else {
-								_this.calculateSongForStation(station, (err, newPlaylist) => {
-									if (err) return next(null, _this.defaultSong, 0);
+								this.calculateSongForStation(station, (err, newPlaylist) => {
+									if (err) return next(null, this.defaultSong, 0);
 									this.songs.getSong(newPlaylist[0], (err, song) => {
-										if (err || !song) return next(null, _this.defaultSong, 0);
+										if (err || !song) return next(null, this.defaultSong, 0);
 										station.playlist = newPlaylist;
 										next(null, song, 0);
 									});
@@ -452,7 +447,7 @@ module.exports = class extends coreClass {
 
 				($set, station, next) => {
 					this.db.models.station.updateOne({_id: station._id}, {$set}, (err) => {
-						_this.updateStation(station._id, (err, station) => {
+						this.updateStation(station._id, (err, station) => {
 							if (station.type === 'community' && station.partyMode === true)
 								this.cache.pub('station.queueUpdate', stationId);
 							next(null, station);

+ 11 - 12
frontend/App.vue

@@ -61,38 +61,37 @@ export default {
 				this.closeCurrentModal();
 		};
 
-		const _this = this;
 		if (localStorage.getItem("github_redirect")) {
 			this.$router.go(localStorage.getItem("github_redirect"));
 			localStorage.removeItem("github_redirect");
 		}
 		io.onConnect(true, () => {
-			_this.socketConnected = true;
+			this.socketConnected = true;
 		});
 		io.onConnectError(true, () => {
-			_this.socketConnected = false;
+			this.socketConnected = false;
 		});
 		io.onDisconnect(true, () => {
-			_this.socketConnected = false;
+			this.socketConnected = false;
 		});
 		lofig.get("serverDomain", res => {
-			_this.serverDomain = res;
+			this.serverDomain = res;
 		});
-		_this.$router.onReady(() => {
-			if (_this.$route.query.err) {
-				let { err } = _this.$route.query;
+		this.$router.onReady(() => {
+			if (this.$route.query.err) {
+				let { err } = this.$route.query;
 				err = err
 					.replace(new RegExp("<", "g"), "&lt;")
 					.replace(new RegExp(">", "g"), "&gt;");
-				_this.$router.push({ query: {} });
+				this.$router.push({ query: {} });
 				Toast.methods.addToast(err, 20000);
 			}
-			if (_this.$route.query.msg) {
-				let { msg } = _this.$route.query;
+			if (this.$route.query.msg) {
+				let { msg } = this.$route.query;
 				msg = msg
 					.replace(new RegExp("<", "g"), "&lt;")
 					.replace(new RegExp(">", "g"), "&gt;");
-				_this.$router.push({ query: {} });
+				this.$router.push({ query: {} });
 				Toast.methods.addToast(msg, 20000);
 			}
 		});

+ 3 - 4
frontend/auth.js

@@ -17,11 +17,10 @@ export default {
 	},
 
 	setBanned(ban) {
-		const _this = this;
-		_this.banned = true;
-		_this.ban = ban;
+		this.banned = true;
+		this.ban = ban;
 		bannedCallbacks.forEach(callback => {
-			callback(true, _this.ban);
+			callback(true, this.ban);
 		});
 	},
 

+ 33 - 38
frontend/components/Admin/EditStation.vue

@@ -163,9 +163,8 @@ export default {
 		editing: state => state.editing
 	}),
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 			return socket;
 		});
 	},
@@ -264,8 +263,6 @@ export default {
 			);
 		},
 		updateDescription() {
-			const _this = this;
-
 			const { description } = this.editing;
 			if (!validation.isLength(description, 2, 200))
 				return Toast.methods.addToast(
@@ -288,13 +285,13 @@ export default {
 				description,
 				res => {
 					if (res.status === "success") {
-						if (_this.station) {
-							_this.station.description = description;
+						if (this.station) {
+							this.station.description = description;
 							return description;
 						}
-						_this.$parent.stations.forEach((station, index) => {
-							if (station._id === _this.editing._id) {
-								_this.$parent.stations[
+						this.$parent.stations.forEach((station, index) => {
+							if (station._id === this.editing._id) {
+								this.$parent.stations[
 									index
 								].description = description;
 								return description;
@@ -311,21 +308,21 @@ export default {
 			);
 		},
 		updatePrivacy() {
-			const _this = this;
 			this.socket.emit(
 				"stations.updatePrivacy",
 				this.editing._id,
 				this.editing.privacy,
 				res => {
 					if (res.status === "success") {
-						if (_this.station)
-							_this.station.privacy = _this.editing.privacy;
+						if (this.station)
+							this.station.privacy = this.editing.privacy;
 						else {
-							_this.$parent.stations.forEach((station, index) => {
-								if (station._id === _this.editing._id) {
-									_this.$parent.stations[index].privacy =
-										_this.editing.privacy;
-									return _this.editing.privacy;
+							this.$parent.stations.forEach((station, index) => {
+								if (station._id === this.editing._id) {
+									this.$parent.stations[
+										index
+									].privacy = this.editing.privacy;
+									return this.editing.privacy;
 								}
 
 								return false;
@@ -339,7 +336,6 @@ export default {
 			);
 		},
 		updateGenres() {
-			const _this = this;
 			this.socket.emit(
 				"stations.updateGenres",
 				this.editing._id,
@@ -347,12 +343,12 @@ export default {
 				res => {
 					if (res.status === "success") {
 						const genres = JSON.parse(
-							JSON.stringify(_this.editing.genres)
+							JSON.stringify(this.editing.genres)
 						);
-						if (_this.station) _this.station.genres = genres;
-						_this.$parent.stations.forEach((station, index) => {
-							if (station._id === _this.editing._id) {
-								_this.$parent.stations[index].genres = genres;
+						if (this.station) this.station.genres = genres;
+						this.$parent.stations.forEach((station, index) => {
+							if (station._id === this.editing._id) {
+								this.$parent.stations[index].genres = genres;
 								return genres;
 							}
 
@@ -366,7 +362,6 @@ export default {
 			);
 		},
 		updateBlacklistedGenres() {
-			const _this = this;
 			this.socket.emit(
 				"stations.updateBlacklistedGenres",
 				this.editing._id,
@@ -374,13 +369,13 @@ export default {
 				res => {
 					if (res.status === "success") {
 						const blacklistedGenres = JSON.parse(
-							JSON.stringify(_this.editing.blacklistedGenres)
+							JSON.stringify(this.editing.blacklistedGenres)
 						);
-						if (_this.station)
-							_this.station.blacklistedGenres = blacklistedGenres;
-						_this.$parent.stations.forEach((station, index) => {
-							if (station._id === _this.editing._id) {
-								_this.$parent.stations[
+						if (this.station)
+							this.station.blacklistedGenres = blacklistedGenres;
+						this.$parent.stations.forEach((station, index) => {
+							if (station._id === this.editing._id) {
+								this.$parent.stations[
 									index
 								].blacklistedGenres = blacklistedGenres;
 								return blacklistedGenres;
@@ -396,20 +391,20 @@ export default {
 			);
 		},
 		updatePartyMode() {
-			const _this = this;
 			this.socket.emit(
 				"stations.updatePartyMode",
 				this.editing._id,
 				this.editing.partyMode,
 				res => {
 					if (res.status === "success") {
-						if (_this.station)
-							_this.station.partyMode = _this.editing.partyMode;
-						_this.$parent.stations.forEach((station, index) => {
-							if (station._id === _this.editing._id) {
-								_this.$parent.stations[index].partyMode =
-									_this.editing.partyMode;
-								return _this.editing.partyMode;
+						if (this.station)
+							this.station.partyMode = this.editing.partyMode;
+						this.$parent.stations.forEach((station, index) => {
+							if (station._id === this.editing._id) {
+								this.$parent.stations[
+									index
+								].partyMode = this.editing.partyMode;
+								return this.editing.partyMode;
 							}
 
 							return false;

+ 14 - 18
frontend/components/Admin/News.vue

@@ -236,21 +236,20 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit("news.index", res => {
-				_this.news = res.data;
+			this.socket = socket;
+			this.socket.emit("news.index", res => {
+				this.news = res.data;
 				return res.data;
 			});
-			_this.socket.on("event:admin.news.created", news => {
-				_this.news.unshift(news);
+			this.socket.on("event:admin.news.created", news => {
+				this.news.unshift(news);
 			});
-			_this.socket.on("event:admin.news.removed", news => {
-				_this.news = _this.news.filter(item => item._id !== news._id);
+			this.socket.on("event:admin.news.removed", news => {
+				this.news = this.news.filter(item => item._id !== news._id);
 			});
-			if (_this.socket.connected) _this.init();
-			io.onConnect(() => _this.init());
+			if (this.socket.connected) this.init();
+			io.onConnect(() => this.init());
 		});
 	},
 	computed: {
@@ -260,8 +259,6 @@ export default {
 	},
 	methods: {
 		createNews() {
-			const _this = this;
-
 			const {
 				creating: { bugs, features, improvements, upcoming }
 			} = this;
@@ -287,10 +284,10 @@ export default {
 					3000
 				);
 
-			return _this.socket.emit("news.create", _this.creating, result => {
+			return this.socket.emit("news.create", this.creating, result => {
 				Toast.methods.addToast(result.message, 4000);
 				if (result.status === "success")
-					_this.creating = {
+					this.creating = {
 						title: "",
 						description: "",
 						bugs: [],
@@ -310,16 +307,15 @@ export default {
 			this.openModal({ sector: "admin", modal: "editNews" });
 		},
 		updateNews(close) {
-			const _this = this;
 			this.socket.emit(
 				"news.update",
-				_this.editing._id,
-				_this.editing,
+				this.editing._id,
+				this.editing,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 					if (res.status === "success") {
 						if (close)
-							_this.closeModal({
+							this.closeModal({
 								sector: "admin",
 								modal: "editNews"
 							});

+ 10 - 13
frontend/components/Admin/Punishments.vue

@@ -142,33 +142,30 @@ export default {
 			this.openModal({ sector: "admin", modal: "viewPunishment" });
 		},
 		banIP() {
-			const _this = this;
-			_this.socket.emit(
+			this.socket.emit(
 				"punishments.banIP",
-				_this.ipBan.ip,
-				_this.ipBan.reason,
-				_this.ipBan.expiresAt,
+				this.ipBan.ip,
+				this.ipBan.reason,
+				this.ipBan.expiresAt,
 				res => {
 					Toast.methods.addToast(res.message, 6000);
 				}
 			);
 		},
 		init() {
-			const _this = this;
-			_this.socket.emit("punishments.index", res => {
-				if (res.status === "success") _this.punishments = res.data;
+			this.socket.emit("punishments.index", res => {
+				if (res.status === "success") this.punishments = res.data;
 			});
-			// _this.socket.emit('apis.joinAdminRoom', 'punishments', () => {});
+			// this.socket.emit('apis.joinAdminRoom', 'punishments', () => {});
 		},
 		...mapActions("modals", ["openModal"]),
 		...mapActions("admin/punishments", ["viewPunishment"])
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			if (_this.socket.connected) _this.init();
-			io.onConnect(() => _this.init());
+			this.socket = socket;
+			if (this.socket.connected) this.init();
+			io.onConnect(() => this.init());
 		});
 	}
 };

+ 17 - 20
frontend/components/Admin/QueueSongs.vue

@@ -141,9 +141,8 @@ export default {
 	// },
 	methods: {
 		getSet(position) {
-			const _this = this;
 			this.socket.emit("queueSongs.getSet", position, data => {
-				_this.songs = data;
+				this.songs = data;
 				this.position = position;
 			});
 		},
@@ -171,43 +170,41 @@ export default {
 			});
 		},
 		init() {
-			const _this = this;
-			_this.socket.emit("queueSongs.index", data => {
-				_this.songs = data.songs;
-				_this.maxPosition = Math.round(data.maxLength / 50);
+			this.socket.emit("queueSongs.index", data => {
+				this.songs = data.songs;
+				this.maxPosition = Math.round(data.maxLength / 50);
 			});
-			_this.socket.emit("apis.joinAdminRoom", "queue", () => {});
+			this.socket.emit("apis.joinAdminRoom", "queue", () => {});
 		},
 		...mapActions("admin/songs", ["stopVideo", "editSong"]),
 		...mapActions("modals", ["openModal"])
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 
-			_this.socket.on("event:admin.queueSong.added", queueSong => {
-				_this.songs.push(queueSong);
+			this.socket.on("event:admin.queueSong.added", queueSong => {
+				this.songs.push(queueSong);
 			});
-			_this.socket.on("event:admin.queueSong.removed", songId => {
-				_this.songs = _this.songs.filter(song => {
+			this.socket.on("event:admin.queueSong.removed", songId => {
+				this.songs = this.songs.filter(song => {
 					return song._id !== songId;
 				});
 			});
-			_this.socket.on("event:admin.queueSong.updated", updatedSong => {
-				for (let i = 0; i < _this.songs.length; i += 1) {
-					const song = _this.songs[i];
+			this.socket.on("event:admin.queueSong.updated", updatedSong => {
+				for (let i = 0; i < this.songs.length; i += 1) {
+					const song = this.songs[i];
 					if (song._id === updatedSong._id) {
-						_this.songs.$set(i, updatedSong);
+						this.songs.$set(i, updatedSong);
 					}
 				}
 			});
 
-			if (_this.socket.connected) {
-				_this.init();
+			if (this.socket.connected) {
+				this.init();
 			}
 			io.onConnect(() => {
-				_this.init();
+				this.init();
 			});
 		});
 	}

+ 11 - 13
frontend/components/Admin/Reports.vue

@@ -68,29 +68,28 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			if (_this.socket.connected) _this.init();
-			_this.socket.emit("reports.index", res => {
-				_this.reports = res.data;
+			this.socket = socket;
+			if (this.socket.connected) this.init();
+			this.socket.emit("reports.index", res => {
+				this.reports = res.data;
 			});
-			_this.socket.on("event:admin.report.resolved", reportId => {
-				_this.reports = _this.reports.filter(report => {
+			this.socket.on("event:admin.report.resolved", reportId => {
+				this.reports = this.reports.filter(report => {
 					return report._id !== reportId;
 				});
 			});
-			_this.socket.on("event:admin.report.created", report => {
-				_this.reports.push(report);
+			this.socket.on("event:admin.report.created", report => {
+				this.reports.push(report);
 			});
 			io.onConnect(() => {
-				_this.init();
+				this.init();
 			});
 		});
 
 		if (this.$route.query.id) {
 			this.socket.emit("reports.findOne", this.$route.query.id, res => {
-				if (res.status === "success") _this.view(res.data);
+				if (res.status === "success") this.view(res.data);
 				else
 					Toast.methods.addToast(
 						"Report with that ID not found",
@@ -113,11 +112,10 @@ export default {
 			this.openModal({ sector: "admin", modal: "viewReport" });
 		},
 		resolve(reportId) {
-			const _this = this;
 			this.socket.emit("reports.resolve", reportId, res => {
 				Toast.methods.addToast(res.message, 3000);
 				if (res.status === "success" && this.modals.viewReport)
-					_this.closeModal({
+					this.closeModal({
 						sector: "admin",
 						modal: "viewReport"
 					});

+ 21 - 24
frontend/components/Admin/Songs.vue

@@ -141,53 +141,50 @@ export default {
 			});
 		},
 		getSet() {
-			const _this = this;
-			_this.socket.emit("songs.getSet", _this.position, data => {
+			this.socket.emit("songs.getSet", this.position, data => {
 				data.forEach(song => {
-					_this.songs.push(song);
+					this.songs.push(song);
 				});
-				_this.position += 1;
-				if (_this.maxPosition > _this.position - 1) _this.getSet();
+				this.position += 1;
+				if (this.maxPosition > this.position - 1) this.getSet();
 			});
 		},
 		init() {
-			const _this = this;
-			_this.songs = [];
-			_this.socket.emit("songs.length", length => {
-				_this.maxPosition = Math.ceil(length / 15);
-				_this.getSet();
+			this.songs = [];
+			this.socket.emit("songs.length", length => {
+				this.maxPosition = Math.ceil(length / 15);
+				this.getSet();
 			});
-			_this.socket.emit("apis.joinAdminRoom", "songs", () => {});
+			this.socket.emit("apis.joinAdminRoom", "songs", () => {});
 		},
 		...mapActions("admin/songs", ["stopVideo", "editSong"]),
 		...mapActions("modals", ["openModal", "closeModal"])
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.on("event:admin.song.added", song => {
-				_this.songs.push(song);
+			this.socket = socket;
+			this.socket.on("event:admin.song.added", song => {
+				this.songs.push(song);
 			});
-			_this.socket.on("event:admin.song.removed", songId => {
-				_this.songs = _this.songs.filter(song => {
+			this.socket.on("event:admin.song.removed", songId => {
+				this.songs = this.songs.filter(song => {
 					return song._id !== songId;
 				});
 			});
-			_this.socket.on("event:admin.song.updated", updatedSong => {
-				for (let i = 0; i < _this.songs.length; i += 1) {
-					const song = _this.songs[i];
+			this.socket.on("event:admin.song.updated", updatedSong => {
+				for (let i = 0; i < this.songs.length; i += 1) {
+					const song = this.songs[i];
 					if (song._id === updatedSong._id) {
-						_this.songs.$set(i, updatedSong);
+						this.songs.$set(i, updatedSong);
 					}
 				}
 			});
 
-			if (_this.socket.connected) {
-				_this.init();
+			if (this.socket.connected) {
+				this.init();
 			}
 			io.onConnect(() => {
-				_this.init();
+				this.init();
 			});
 		});
 

+ 11 - 14
frontend/components/Admin/Stations.vue

@@ -192,7 +192,6 @@ export default {
 	},
 	methods: {
 		createStation() {
-			const _this = this;
 			const {
 				newStation: {
 					name,
@@ -219,7 +218,7 @@ export default {
 					3000
 				);
 
-			return _this.socket.emit(
+			return this.socket.emit(
 				"stations.create",
 				{
 					name,
@@ -301,30 +300,28 @@ export default {
 			this.newStation.blacklistedGenres.splice(index, 1);
 		},
 		init() {
-			const _this = this;
-			_this.socket.emit("stations.index", data => {
-				_this.stations = data.stations;
+			this.socket.emit("stations.index", data => {
+				this.stations = data.stations;
 			});
-			_this.socket.emit("apis.joinAdminRoom", "stations", () => {});
+			this.socket.emit("apis.joinAdminRoom", "stations", () => {});
 		},
 		...mapActions("modals", ["openModal"]),
 		...mapActions("admin/stations", ["editStation"])
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			if (_this.socket.connected) _this.init();
-			_this.socket.on("event:admin.station.added", station => {
-				_this.stations.push(station);
+			this.socket = socket;
+			if (this.socket.connected) this.init();
+			this.socket.on("event:admin.station.added", station => {
+				this.stations.push(station);
 			});
-			_this.socket.on("event:admin.station.removed", stationId => {
-				_this.stations = _this.stations.filter(station => {
+			this.socket.on("event:admin.station.removed", stationId => {
+				this.stations = this.stations.filter(station => {
 					return station._id !== stationId;
 				});
 			});
 			io.onConnect(() => {
-				_this.init();
+				this.init();
 			});
 		});
 	}

+ 5 - 6
frontend/components/Admin/Statistics.vue

@@ -144,11 +144,10 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		const minuteCtx = document.getElementById("minuteChart");
 		const hourCtx = document.getElementById("hourChart");
 
-		_this.minuteChart = new Chart(minuteCtx, {
+		this.minuteChart = new Chart(minuteCtx, {
 			type: "line",
 			data: {
 				labels: [
@@ -207,7 +206,7 @@ export default {
 			}
 		});
 
-		_this.hourChart = new Chart(hourCtx, {
+		this.hourChart = new Chart(hourCtx, {
 			type: "line",
 			data: {
 				labels: [
@@ -267,9 +266,9 @@ export default {
 		});
 
 		io.getSocket(socket => {
-			_this.socket = socket;
-			if (_this.socket.connected) _this.init();
-			io.onConnect(() => _this.init());
+			this.socket = socket;
+			if (this.socket.connected) this.init();
+			io.onConnect(() => this.init());
 		});
 	},
 	methods: {

+ 6 - 8
frontend/components/Admin/Users.vue

@@ -86,21 +86,19 @@ export default {
 			this.openModal({ sector: "admin", modal: "editUser" });
 		},
 		init() {
-			const _this = this;
-			_this.socket.emit("users.index", result => {
-				if (result.status === "success") _this.users = result.data;
+			this.socket.emit("users.index", result => {
+				if (result.status === "success") this.users = result.data;
 			});
-			_this.socket.emit("apis.joinAdminRoom", "users", () => {});
+			this.socket.emit("apis.joinAdminRoom", "users", () => {});
 		},
 		...mapActions("admin/users", ["editUser"]),
 		...mapActions("modals", ["openModal"])
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			if (_this.socket.connected) _this.init();
-			io.onConnect(() => _this.init());
+			this.socket = socket;
+			if (this.socket.connected) this.init();
+			io.onConnect(() => this.init());
 		});
 	}
 };

+ 21 - 27
frontend/components/Modals/AddSongToPlaylist.vue

@@ -53,24 +53,22 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		this.songId = this.$parent.currentSong.songId;
 		this.song = this.$parent.currentSong;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit("playlists.indexForUser", res => {
+			this.socket = socket;
+			this.socket.emit("playlists.indexForUser", res => {
 				if (res.status === "success") {
 					res.data.forEach(playlist => {
-						_this.playlists[playlist._id] = playlist;
+						this.playlists[playlist._id] = playlist;
 					});
-					_this.recalculatePlaylists();
+					this.recalculatePlaylists();
 				}
 			});
 		});
 	},
 	methods: {
 		addSongToPlaylist(playlistId) {
-			const _this = this;
 			this.socket.emit(
 				"playlists.addSongToPlaylist",
 				this.$parent.currentSong.songId,
@@ -78,53 +76,49 @@ export default {
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 					if (res.status === "success") {
-						_this.playlists[playlistId].songs.push(_this.song);
+						this.playlists[playlistId].songs.push(this.song);
 					}
-					_this.recalculatePlaylists();
+					this.recalculatePlaylists();
 					// this.$parent.modals.addSongToPlaylist = false;
 				}
 			);
 		},
 		removeSongFromPlaylist(playlistId) {
-			const _this = this;
 			this.socket.emit(
 				"playlists.removeSongFromPlaylist",
-				_this.songId,
+				this.songId,
 				playlistId,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 					if (res.status === "success") {
-						_this.playlists[playlistId].songs.forEach(
+						this.playlists[playlistId].songs.forEach(
 							(song, index) => {
-								if (song.songId === _this.songId)
-									_this.playlists[playlistId].songs.splice(
+								if (song.songId === this.songId)
+									this.playlists[playlistId].songs.splice(
 										index,
 										1
 									);
 							}
 						);
 					}
-					_this.recalculatePlaylists();
+					this.recalculatePlaylists();
 					// this.$parent.modals.addSongToPlaylist = false;
 				}
 			);
 		},
 		recalculatePlaylists() {
-			const _this = this;
-			_this.playlistsArr = Object.values(_this.playlists).map(
-				playlist => {
-					let hasSong = false;
-					for (let i = 0; i < playlist.songs.length; i += 1) {
-						if (playlist.songs[i].songId === _this.songId) {
-							hasSong = true;
-						}
+			this.playlistsArr = Object.values(this.playlists).map(playlist => {
+				let hasSong = false;
+				for (let i = 0; i < playlist.songs.length; i += 1) {
+					if (playlist.songs[i].songId === this.songId) {
+						hasSong = true;
 					}
-
-					playlist.hasSong = hasSong; // eslint-disable-line no-param-reassign
-					_this.playlists[playlist._id] = playlist;
-					return playlist;
 				}
-			);
+
+				playlist.hasSong = hasSong; // eslint-disable-line no-param-reassign
+				this.playlists[playlist._id] = playlist;
+				return playlist;
+			});
 		}
 	}
 };

+ 20 - 27
frontend/components/Modals/AddSongToQueue.vue

@@ -116,26 +116,23 @@ export default {
 			return this.privatePlaylistQueueSelected === playlistId;
 		},
 		selectPlaylist(playlistId) {
-			const _this = this;
-			if (_this.$parent.type === "community") {
-				_this.privatePlaylistQueueSelected = playlistId;
-				_this.$parent.privatePlaylistQueueSelected = playlistId;
-				_this.$parent.addFirstPrivatePlaylistSongToQueue();
+			if (this.$parent.type === "community") {
+				this.privatePlaylistQueueSelected = playlistId;
+				this.$parent.privatePlaylistQueueSelected = playlistId;
+				this.$parent.addFirstPrivatePlaylistSongToQueue();
 			}
 		},
 		unSelectPlaylist() {
-			const _this = this;
-			if (_this.$parent.type === "community") {
-				_this.privatePlaylistQueueSelected = null;
-				_this.$parent.privatePlaylistQueueSelected = null;
+			if (this.$parent.type === "community") {
+				this.privatePlaylistQueueSelected = null;
+				this.$parent.privatePlaylistQueueSelected = null;
 			}
 		},
 		addSongToQueue(songId) {
-			const _this = this;
-			if (_this.$parent.type === "community") {
-				_this.socket.emit(
+			if (this.$parent.type === "community") {
+				this.socket.emit(
 					"stations.addToQueue",
-					_this.$parent.station._id,
+					this.$parent.station._id,
 					songId,
 					data => {
 						if (data.status !== "success")
@@ -147,7 +144,7 @@ export default {
 					}
 				);
 			} else {
-				_this.socket.emit("queueSongs.add", songId, data => {
+				this.socket.emit("queueSongs.add", songId, data => {
 					if (data.status !== "success")
 						Toast.methods.addToast(`Error: ${data.message}`, 8000);
 					else Toast.methods.addToast(`${data.message}`, 4000);
@@ -155,22 +152,20 @@ export default {
 			}
 		},
 		importPlaylist() {
-			const _this = this;
 			Toast.methods.addToast(
 				"Starting to import your playlist. This can take some time to do.",
 				4000
 			);
 			this.socket.emit(
 				"queueSongs.addSetToQueue",
-				_this.importQuery,
+				this.importQuery,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 				}
 			);
 		},
 		submitQuery() {
-			const _this = this;
-			let query = _this.querySearch;
+			let query = this.querySearch;
 			if (query.indexOf("&index=") !== -1) {
 				query = query.split("&index=");
 				query.pop();
@@ -181,12 +176,12 @@ export default {
 				query.pop();
 				query = query.join("");
 			}
-			_this.socket.emit("apis.searchYoutube", query, res => {
+			this.socket.emit("apis.searchYoutube", query, res => {
 				// check for error
 				const { data } = res;
-				_this.queryResults = [];
+				this.queryResults = [];
 				for (let i = 0; i < data.items.length; i += 1) {
-					_this.queryResults.push({
+					this.queryResults.push({
 						id: data.items[i].id.videoId,
 						url: `https://www.youtube.com/watch?v=${this.id}`,
 						title: data.items[i].snippet.title,
@@ -197,14 +192,12 @@ export default {
 		}
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit("playlists.indexForUser", res => {
-				if (res.status === "success") _this.playlists = res.data;
+			this.socket = socket;
+			this.socket.emit("playlists.indexForUser", res => {
+				if (res.status === "success") this.playlists = res.data;
 			});
-			_this.privatePlaylistQueueSelected =
-				_this.$parent.privatePlaylistQueueSelected;
+			this.privatePlaylistQueueSelected = this.$parent.privatePlaylistQueueSelected;
 		});
 	},
 	components: { Modal }

+ 2 - 5
frontend/components/Modals/CreateCommunityStation.vue

@@ -58,9 +58,8 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 		});
 	},
 	methods: {
@@ -114,8 +113,6 @@ export default {
 					8000
 				);
 
-			const _this = this;
-
 			return this.socket.emit(
 				"stations.create",
 				{
@@ -130,7 +127,7 @@ export default {
 							`You have added the station successfully`,
 							4000
 						);
-						_this.closeModal({
+						this.closeModal({
 							sector: "home",
 							modal: "createCommunityStation"
 						});

+ 44 - 50
frontend/components/Modals/EditSong.vue

@@ -294,8 +294,6 @@ export default {
 	},
 	methods: {
 		save(song, close) {
-			const _this = this;
-
 			if (!song.title)
 				return Toast.methods.addToast(
 					"Please fill in all fields",
@@ -395,13 +393,13 @@ export default {
 			}
 
 			return this.socket.emit(
-				`${_this.editing.type}.update`,
+				`${this.editing.type}.update`,
 				song._id,
 				song,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 					if (res.status === "success") {
-						_this.$parent.songs.forEach(originalSong => {
+						this.$parent.songs.forEach(originalSong => {
 							const updatedSong = song;
 							if (originalSong._id === updatedSong._id) {
 								Object.keys(originalSong).forEach(n => {
@@ -412,7 +410,7 @@ export default {
 						});
 					}
 					if (close)
-						_this.closeModal({
+						this.closeModal({
 							sector: "admin",
 							modal: "editSong"
 						});
@@ -420,35 +418,33 @@ export default {
 			);
 		},
 		settings(type) {
-			const _this = this;
 			switch (type) {
 				default:
 					break;
 				case "stop":
-					_this.stopVideo();
-					_this.pauseVideo(true);
+					this.stopVideo();
+					this.pauseVideo(true);
 					break;
 				case "pause":
-					_this.pauseVideo(true);
+					this.pauseVideo(true);
 					break;
 				case "play":
-					_this.pauseVideo(false);
+					this.pauseVideo(false);
 					break;
 				case "skipToLast10Secs":
-					_this.video.player.seekTo(
-						_this.editing.song.duration -
+					this.video.player.seekTo(
+						this.editing.song.duration -
 							10 +
-							_this.editing.song.skipDuration
+							this.editing.song.skipDuration
 					);
 					break;
 			}
 		},
 		changeVolume() {
-			const local = this;
 			const volume = document.getElementById("volumeSlider").value;
 			localStorage.setItem("volume", volume);
-			local.video.player.setVolume(volume);
-			if (volume > 0) local.video.player.unMute();
+			this.video.player.setVolume(volume);
+			if (volume > 0) this.video.player.unMute();
 		},
 		addTag(type) {
 			if (type === "genres") {
@@ -588,8 +584,6 @@ export default {
 		...mapActions("modals", ["closeModal"])
 	},
 	mounted() {
-		const _this = this;
-
 		// if (this.modals.editSong = false) this.video.player.stopVideo();
 
 		// this.loadVideoById(
@@ -600,7 +594,7 @@ export default {
 		this.initCanvas();
 
 		lofig.get("cookie.secure", res => {
-			_this.useHTTPS = res;
+			this.useHTTPS = res;
 		});
 
 		io.getSocket(socket => {
@@ -609,23 +603,23 @@ export default {
 
 		setInterval(() => {
 			if (
-				_this.video.paused === false &&
-				_this.playerReady &&
-				_this.video.player.getCurrentTime() -
-					_this.editing.song.skipDuration >
-					_this.editing.song.duration
+				this.video.paused === false &&
+				this.playerReady &&
+				this.video.player.getCurrentTime() -
+					this.editing.song.skipDuration >
+					this.editing.song.duration
 			) {
-				_this.video.paused = false;
-				_this.video.player.stopVideo();
+				this.video.paused = false;
+				this.video.player.stopVideo();
 			}
 			if (this.playerReady) {
-				_this.getCurrentTime(3).then(time => {
+				this.getCurrentTime(3).then(time => {
 					this.youtubeVideoCurrentTime = time;
 					return time;
 				});
 			}
 
-			if (_this.video.paused === false) _this.drawCanvas();
+			if (this.video.paused === false) this.drawCanvas();
 		}, 200);
 
 		this.video.player = new window.YT.Player("player", {
@@ -639,44 +633,44 @@ export default {
 				showinfo: 0,
 				autoplay: 1
 			},
-			startSeconds: _this.editing.song.skipDuration,
+			startSeconds: this.editing.song.skipDuration,
 			events: {
 				onReady: () => {
 					let volume = parseInt(localStorage.getItem("volume"));
 					volume = typeof volume === "number" ? volume : 20;
-					console.log(`Seekto: ${_this.editing.song.skipDuration}`);
-					_this.video.player.seekTo(_this.editing.song.skipDuration);
-					_this.video.player.setVolume(volume);
-					if (volume > 0) _this.video.player.unMute();
-					this.youtubeVideoDuration = _this.video.player.getDuration();
+					console.log(`Seekto: ${this.editing.song.skipDuration}`);
+					this.video.player.seekTo(this.editing.song.skipDuration);
+					this.video.player.setVolume(volume);
+					if (volume > 0) this.video.player.unMute();
+					this.youtubeVideoDuration = this.video.player.getDuration();
 					this.youtubeVideoNote = "(~)";
-					_this.playerReady = true;
+					this.playerReady = true;
 
-					_this.drawCanvas();
+					this.drawCanvas();
 				},
 				onStateChange: event => {
 					if (event.data === 1) {
-						if (!_this.video.autoPlayed) {
-							_this.video.autoPlayed = true;
-							return _this.video.player.stopVideo();
+						if (!this.video.autoPlayed) {
+							this.video.autoPlayed = true;
+							return this.video.player.stopVideo();
 						}
 
-						_this.video.paused = false;
-						let youtubeDuration = _this.video.player.getDuration();
+						this.video.paused = false;
+						let youtubeDuration = this.video.player.getDuration();
 						this.youtubeVideoDuration = youtubeDuration;
 						this.youtubeVideoNote = "";
-						youtubeDuration -= _this.editing.song.skipDuration;
-						if (_this.editing.song.duration > youtubeDuration + 1) {
+						youtubeDuration -= this.editing.song.skipDuration;
+						if (this.editing.song.duration > youtubeDuration + 1) {
 							this.video.player.stopVideo();
-							_this.video.paused = true;
+							this.video.paused = true;
 							return Toast.methods.addToast(
 								"Video can't play. Specified duration is bigger than the YouTube song duration.",
 								4000
 							);
 						}
-						if (_this.editing.song.duration <= 0) {
+						if (this.editing.song.duration <= 0) {
 							this.video.player.stopVideo();
-							_this.video.paused = true;
+							this.video.paused = true;
 							return Toast.methods.addToast(
 								"Video can't play. Specified duration has to be more than 0 seconds.",
 								4000
@@ -684,11 +678,11 @@ export default {
 						}
 
 						if (
-							_this.video.player.getCurrentTime() <
-							_this.editing.song.skipDuration
+							this.video.player.getCurrentTime() <
+							this.editing.song.skipDuration
 						) {
-							return _this.video.player.seekTo(
-								_this.editing.song.skipDuration
+							return this.video.player.seekTo(
+								this.editing.song.skipDuration
 							);
 						}
 					} else if (event.data === 2) {

+ 23 - 26
frontend/components/Modals/EditStation.vue

@@ -105,9 +105,8 @@ export default {
 		editing: state => state.editing
 	}),
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 			return socket;
 		});
 	},
@@ -197,8 +196,6 @@ export default {
 			);
 		},
 		updateDescription() {
-			const _this = this;
-
 			const { description } = this.editing;
 			if (!validation.isLength(description, 2, 200))
 				return Toast.methods.addToast(
@@ -223,14 +220,14 @@ export default {
 				description,
 				res => {
 					if (res.status === "success") {
-						if (_this.station) {
-							_this.station.description = description;
+						if (this.station) {
+							this.station.description = description;
 							return description;
 						}
 
-						_this.$parent.stations.forEach((station, index) => {
+						this.$parent.stations.forEach((station, index) => {
 							if (station._id === this.editing._id) {
-								_this.$parent.stations[
+								this.$parent.stations[
 									index
 								].description = description;
 								return description;
@@ -247,23 +244,23 @@ export default {
 			);
 		},
 		updatePrivacy() {
-			const _this = this;
 			return this.socket.emit(
 				"stations.updatePrivacy",
 				this.editing._id,
 				this.editing.privacy,
 				res => {
 					if (res.status === "success") {
-						if (_this.station) {
-							_this.station.privacy = _this.editing.privacy;
-							return _this.editing.privacy;
+						if (this.station) {
+							this.station.privacy = this.editing.privacy;
+							return this.editing.privacy;
 						}
 
-						_this.$parent.stations.forEach((station, index) => {
-							if (station._id === _this.editing._id) {
-								_this.$parent.stations[index].privacy =
-									_this.editing.privacy;
-								return _this.editing.privacy;
+						this.$parent.stations.forEach((station, index) => {
+							if (station._id === this.editing._id) {
+								this.$parent.stations[
+									index
+								].privacy = this.editing.privacy;
+								return this.editing.privacy;
 							}
 
 							return false;
@@ -277,23 +274,23 @@ export default {
 			);
 		},
 		updatePartyMode() {
-			const _this = this;
 			return this.socket.emit(
 				"stations.updatePartyMode",
 				this.editing._id,
 				this.editing.partyMode,
 				res => {
 					if (res.status === "success") {
-						if (_this.station) {
-							_this.station.partyMode = _this.editing.partyMode;
-							return _this.editing.partyMode;
+						if (this.station) {
+							this.station.partyMode = this.editing.partyMode;
+							return this.editing.partyMode;
 						}
 
-						_this.$parent.stations.forEach((station, index) => {
-							if (station._id === _this.editing._id) {
-								_this.$parent.stations[index].partyMode =
-									_this.editing.partyMode;
-								return _this.editing.partyMode;
+						this.$parent.stations.forEach((station, index) => {
+							if (station._id === this.editing._id) {
+								this.$parent.stations[
+									index
+								].partyMode = this.editing.partyMode;
+								return this.editing.partyMode;
 							}
 
 							return false;

+ 1 - 2
frontend/components/Modals/EditUser.vue

@@ -206,9 +206,8 @@ export default {
 		...mapActions("modals", ["closeModal"])
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 			return socket;
 		});
 	}

+ 2 - 3
frontend/components/Modals/MobileAlert.vue

@@ -30,9 +30,8 @@ export default {
 	},
 	methods: {
 		toggleModal() {
-			const _this = this;
-			_this.isModalActive = !_this.isModalActive;
-			if (_this.isModalActive) {
+			this.isModalActive = !this.isModalActive;
+			if (this.isModalActive) {
 				setTimeout(() => {
 					this.isModalActive = false;
 				}, 4000);

+ 1 - 2
frontend/components/Modals/Playlists/Create.vue

@@ -39,9 +39,8 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 		});
 	},
 	methods: {

+ 40 - 48
frontend/components/Modals/Playlists/Edit.vue

@@ -156,47 +156,46 @@ export default {
 		editing: state => state.editing
 	}),
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit("playlists.getPlaylist", _this.editing, res => {
-				if (res.status === "success") _this.playlist = res.data;
-				_this.playlist.oldId = res.data._id;
+			this.socket = socket;
+			this.socket.emit("playlists.getPlaylist", this.editing, res => {
+				if (res.status === "success") this.playlist = res.data;
+				this.playlist.oldId = res.data._id;
 			});
-			_this.socket.on("event:playlist.addSong", data => {
-				if (_this.playlist._id === data.playlistId)
-					_this.playlist.songs.push(data.song);
+			this.socket.on("event:playlist.addSong", data => {
+				if (this.playlist._id === data.playlistId)
+					this.playlist.songs.push(data.song);
 			});
-			_this.socket.on("event:playlist.removeSong", data => {
-				if (_this.playlist._id === data.playlistId) {
-					_this.playlist.songs.forEach((song, index) => {
+			this.socket.on("event:playlist.removeSong", data => {
+				if (this.playlist._id === data.playlistId) {
+					this.playlist.songs.forEach((song, index) => {
 						if (song.songId === data.songId)
-							_this.playlist.songs.splice(index, 1);
+							this.playlist.songs.splice(index, 1);
 					});
 				}
 			});
-			_this.socket.on("event:playlist.updateDisplayName", data => {
-				if (_this.playlist._id === data.playlistId)
-					_this.playlist.displayName = data.displayName;
+			this.socket.on("event:playlist.updateDisplayName", data => {
+				if (this.playlist._id === data.playlistId)
+					this.playlist.displayName = data.displayName;
 			});
-			_this.socket.on("event:playlist.moveSongToBottom", data => {
-				if (_this.playlist._id === data.playlistId) {
+			this.socket.on("event:playlist.moveSongToBottom", data => {
+				if (this.playlist._id === data.playlistId) {
 					let songIndex;
-					_this.playlist.songs.forEach((song, index) => {
+					this.playlist.songs.forEach((song, index) => {
 						if (song.songId === data.songId) songIndex = index;
 					});
-					const song = _this.playlist.songs.splice(songIndex, 1)[0];
-					_this.playlist.songs.push(song);
+					const song = this.playlist.songs.splice(songIndex, 1)[0];
+					this.playlist.songs.push(song);
 				}
 			});
-			_this.socket.on("event:playlist.moveSongToTop", data => {
-				if (_this.playlist._id === data.playlistId) {
+			this.socket.on("event:playlist.moveSongToTop", data => {
+				if (this.playlist._id === data.playlistId) {
 					let songIndex;
-					_this.playlist.songs.forEach((song, index) => {
+					this.playlist.songs.forEach((song, index) => {
 						if (song.songId === data.songId) songIndex = index;
 					});
-					const song = _this.playlist.songs.splice(songIndex, 1)[0];
-					_this.playlist.songs.unshift(song);
+					const song = this.playlist.songs.splice(songIndex, 1)[0];
+					this.playlist.songs.unshift(song);
 				}
 			});
 		});
@@ -255,8 +254,7 @@ export default {
 			return this.formatTime(length);
 		},
 		searchForSongs() {
-			const _this = this;
-			let query = _this.songQuery;
+			let query = this.songQuery;
 			if (query.indexOf("&index=") !== -1) {
 				query = query.split("&index=");
 				query.pop();
@@ -267,11 +265,11 @@ export default {
 				query.pop();
 				query = query.join("");
 			}
-			_this.socket.emit("apis.searchYoutube", query, res => {
+			this.socket.emit("apis.searchYoutube", query, res => {
 				if (res.status === "success") {
-					_this.songQueryResults = [];
+					this.songQueryResults = [];
 					for (let i = 0; i < res.data.items.length; i += 1) {
-						_this.songQueryResults.push({
+						this.songQueryResults.push({
 							id: res.data.items[i].id.videoId,
 							url: `https://www.youtube.com/watch?v=${this.id}`,
 							title: res.data.items[i].snippet.title,
@@ -284,39 +282,36 @@ export default {
 			});
 		},
 		addSongToPlaylist(id) {
-			const _this = this;
-			_this.socket.emit(
+			this.socket.emit(
 				"playlists.addSongToPlaylist",
 				id,
-				_this.playlist._id,
+				this.playlist._id,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 				}
 			);
 		},
 		importPlaylist() {
-			const _this = this;
 			Toast.methods.addToast(
 				"Starting to import your playlist. This can take some time to do.",
 				4000
 			);
 			this.socket.emit(
 				"playlists.addSetToPlaylist",
-				_this.importQuery,
-				_this.playlist._id,
+				this.importQuery,
+				this.playlist._id,
 				res => {
 					if (res.status === "success")
-						_this.playlist.songs = res.data;
+						this.playlist.songs = res.data;
 					Toast.methods.addToast(res.message, 4000);
 				}
 			);
 		},
 		removeSongFromPlaylist(id) {
-			const _this = this;
 			this.socket.emit(
 				"playlists.removeSongFromPlaylist",
 				id,
-				_this.playlist._id,
+				this.playlist._id,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 				}
@@ -345,20 +340,18 @@ export default {
 			);
 		},
 		removePlaylist() {
-			const _this = this;
-			_this.socket.emit("playlists.remove", _this.playlist._id, res => {
+			this.socket.emit("playlists.remove", this.playlist._id, res => {
 				Toast.methods.addToast(res.message, 3000);
 				if (res.status === "success") {
-					_this.$parent.modals.editPlaylist = !_this.$parent.modals
+					this.$parent.modals.editPlaylist = !this.$parent.modals
 						.editPlaylist;
 				}
 			});
 		},
 		promoteSong(songId) {
-			const _this = this;
-			_this.socket.emit(
+			this.socket.emit(
 				"playlists.moveSongToTop",
-				_this.playlist._id,
+				this.playlist._id,
 				songId,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
@@ -366,10 +359,9 @@ export default {
 			);
 		},
 		demoteSong(songId) {
-			const _this = this;
-			_this.socket.emit(
+			this.socket.emit(
 				"playlists.moveSongToBottom",
-				_this.playlist._id,
+				this.playlist._id,
 				songId,
 				res => {
 					Toast.methods.addToast(res.message, 4000);

+ 2 - 3
frontend/components/Modals/Register.vue

@@ -99,9 +99,8 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		lofig.get("recaptcha", obj => {
-			_this.recaptcha.key = obj.key;
+			this.recaptcha.key = obj.key;
 
 			const recaptchaScript = document.createElement("script");
 			recaptchaScript.onload = () => {
@@ -109,7 +108,7 @@ export default {
 					grecaptcha
 						.execute(this.recaptcha.key, { action: "login" })
 						.then(token => {
-							_this.recaptcha.token = token;
+							this.recaptcha.token = token;
 						});
 				});
 			};

+ 3 - 5
frontend/components/Modals/Report.vue

@@ -217,19 +217,17 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 		});
 	},
 	methods: {
 		create() {
-			const _this = this;
 			console.log(this.report);
-			_this.socket.emit("reports.create", _this.report, res => {
+			this.socket.emit("reports.create", this.report, res => {
 				Toast.methods.addToast(res.message, 4000);
 				if (res.status === "success")
-					_this.closeModal({
+					this.closeModal({
 						sector: "station",
 						modal: "report"
 					});

+ 1 - 2
frontend/components/Modals/ViewPunishment.vue

@@ -75,9 +75,8 @@ export default {
 		})
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 			return socket;
 		});
 	},

+ 4 - 5
frontend/components/Modals/WhatIsNew.vue

@@ -82,12 +82,11 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(true, socket => {
-			_this.socket = socket;
-			_this.socket.emit("news.newest", res => {
-				_this.news = res.data;
-				if (_this.news && localStorage.getItem("firstVisited")) {
+			this.socket = socket;
+			this.socket.emit("news.newest", res => {
+				this.news = res.data;
+				if (this.news && localStorage.getItem("firstVisited")) {
 					if (localStorage.getItem("whatIsNew")) {
 						if (
 							parseInt(localStorage.getItem("whatIsNew")) <

+ 20 - 22
frontend/components/Sidebars/Playlist.vue

@@ -75,11 +75,10 @@ export default {
 			);
 		},
 		isNotSelected(id) {
-			const _this = this;
 			// TODO Also change this once it changes for a station
 			if (
-				_this.$parent.station &&
-				_this.$parent.station.privatePlaylist === id
+				this.$parent.station &&
+				this.$parent.station.privatePlaylist === id
 			)
 				return false;
 			return true;
@@ -89,44 +88,43 @@ export default {
 	},
 	mounted() {
 		// TODO: Update when playlist is removed/created
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit("playlists.indexForUser", res => {
-				if (res.status === "success") _this.playlists = res.data;
+			this.socket = socket;
+			this.socket.emit("playlists.indexForUser", res => {
+				if (res.status === "success") this.playlists = res.data;
 			});
-			_this.socket.on("event:playlist.create", playlist => {
-				_this.playlists.push(playlist);
+			this.socket.on("event:playlist.create", playlist => {
+				this.playlists.push(playlist);
 			});
-			_this.socket.on("event:playlist.delete", playlistId => {
-				_this.playlists.forEach((playlist, index) => {
+			this.socket.on("event:playlist.delete", playlistId => {
+				this.playlists.forEach((playlist, index) => {
 					if (playlist._id === playlistId) {
-						_this.playlists.splice(index, 1);
+						this.playlists.splice(index, 1);
 					}
 				});
 			});
-			_this.socket.on("event:playlist.addSong", data => {
-				_this.playlists.forEach((playlist, index) => {
+			this.socket.on("event:playlist.addSong", data => {
+				this.playlists.forEach((playlist, index) => {
 					if (playlist._id === data.playlistId) {
-						_this.playlists[index].songs.push(data.song);
+						this.playlists[index].songs.push(data.song);
 					}
 				});
 			});
-			_this.socket.on("event:playlist.removeSong", data => {
-				_this.playlists.forEach((playlist, index) => {
+			this.socket.on("event:playlist.removeSong", data => {
+				this.playlists.forEach((playlist, index) => {
 					if (playlist._id === data.playlistId) {
-						_this.playlists[index].songs.forEach((song, index2) => {
+						this.playlists[index].songs.forEach((song, index2) => {
 							if (song._id === data.songId) {
-								_this.playlists[index].songs.splice(index2, 1);
+								this.playlists[index].songs.splice(index2, 1);
 							}
 						});
 					}
 				});
 			});
-			_this.socket.on("event:playlist.updateDisplayName", data => {
-				_this.playlists.forEach((playlist, index) => {
+			this.socket.on("event:playlist.updateDisplayName", data => {
+				this.playlists.forEach((playlist, index) => {
 					if (playlist._id === data.playlistId) {
-						_this.playlists[index].displayName = data.displayName;
+						this.playlists[index].displayName = data.displayName;
 					}
 				});
 			});

+ 2 - 2
frontend/components/Sidebars/SongsList.vue

@@ -171,9 +171,9 @@ export default {
 		...mapActions("modals", ["openModal"])
 	},
 	mounted() {
-		/* let _this = this;
+		/*
 			io.getSocket((socket) => {
-				_this.socket = socket;
+				this.socket = socket;
 
 			}); */
 	},

+ 209 - 229
frontend/components/Station/Station.vue

@@ -518,15 +518,14 @@ export default {
 			});
 		},
 		youtubeReady() {
-			const local = this;
-			if (!local.player) {
-				local.player = new window.YT.Player("player", {
+			if (!this.player) {
+				this.player = new window.YT.Player("player", {
 					height: 270,
 					width: 480,
-					videoId: local.currentSong.songId,
+					videoId: this.currentSong.songId,
 					startSeconds:
-						local.getTimeElapsed() / 1000 +
-						local.currentSong.skipDuration,
+						this.getTimeElapsed() / 1000 +
+						this.currentSong.skipDuration,
 					playerVars: {
 						controls: 0,
 						iv_load_policy: 3,
@@ -534,60 +533,60 @@ export default {
 						showinfo: 0
 					},
 					events: {
-						onReady() {
-							local.playerReady = true;
+						onReady: () => {
+							this.playerReady = true;
 							let volume = parseInt(
 								localStorage.getItem("volume")
 							);
 
 							volume = typeof volume === "number" ? volume : 20;
 
-							local.player.setVolume(volume);
+							this.player.setVolume(volume);
 
 							if (volume > 0) {
-								local.player.unMute();
+								this.player.unMute();
 							}
 
-							if (local.muted) local.player.mute();
+							if (this.muted) this.player.mute();
 
-							local.playVideo();
+							this.playVideo();
 						},
-						onError(err) {
+						onError: err => {
 							console.log("iframe error", err);
-							local.voteSkipStation();
+							this.voteSkipStation();
 						},
-						onStateChange(event) {
+						onStateChange: event => {
 							if (
 								event.data === 1 &&
-								local.videoLoading === true
+								this.videoLoading === true
 							) {
-								local.videoLoading = false;
-								local.player.seekTo(
-									local.getTimeElapsed() / 1000 +
-										local.currentSong.skipDuration,
+								this.videoLoading = false;
+								this.player.seekTo(
+									this.getTimeElapsed() / 1000 +
+										this.currentSong.skipDuration,
 									true
 								);
-								if (local.paused) local.player.pauseVideo();
-							} else if (event.data === 1 && local.paused) {
-								local.player.seekTo(
-									local.timeBeforePause / 1000,
+								if (this.paused) this.player.pauseVideo();
+							} else if (event.data === 1 && this.paused) {
+								this.player.seekTo(
+									this.timeBeforePause / 1000,
 									true
 								);
-								local.player.pauseVideo();
+								this.player.pauseVideo();
 							}
 							if (
 								event.data === 2 &&
-								!local.paused &&
-								!local.noSong &&
-								local.player.getDuration() / 1000 <
-									local.currentSong.duration
+								!this.paused &&
+								!this.noSong &&
+								this.player.getDuration() / 1000 <
+									this.currentSong.duration
 							) {
-								local.player.seekTo(
-									local.getTimeElapsed() / 1000 +
-										local.currentSong.skipDuration,
+								this.player.seekTo(
+									this.getTimeElapsed() / 1000 +
+										this.currentSong.skipDuration,
 									true
 								);
-								local.player.playVideo();
+								this.player.playVideo();
 							}
 						}
 					}
@@ -595,42 +594,35 @@ export default {
 			}
 		},
 		getTimeElapsed() {
-			const local = this;
-			if (local.currentSong) {
-				let { timePaused } = local;
-				if (local.paused)
-					timePaused += Date.currently() - local.pausedAt;
-				return Date.currently() - local.startedAt - timePaused;
+			if (this.currentSong) {
+				let { timePaused } = this;
+				if (this.paused) timePaused += Date.currently() - this.pausedAt;
+				return Date.currently() - this.startedAt - timePaused;
 			}
 			return 0;
 		},
 		playVideo() {
-			const local = this;
-			if (local.playerReady) {
-				local.videoLoading = true;
-				local.player.loadVideoById(
-					local.currentSong.songId,
-					local.getTimeElapsed() / 1000 +
-						local.currentSong.skipDuration
+			if (this.playerReady) {
+				this.videoLoading = true;
+				this.player.loadVideoById(
+					this.currentSong.songId,
+					this.getTimeElapsed() / 1000 + this.currentSong.skipDuration
 				);
 
 				if (window.stationInterval !== 0)
 					clearInterval(window.stationInterval);
 				window.stationInterval = setInterval(() => {
-					local.resizeSeekerbar();
-					local.calculateTimeElapsed();
+					this.resizeSeekerbar();
+					this.calculateTimeElapsed();
 				}, 150);
 			}
 		},
 		resizeSeekerbar() {
-			const local = this;
-			if (!local.paused) {
+			if (!this.paused) {
 				document.getElementsByClassName(
 					"seeker-bar"
 				)[0].style.width = `${parseFloat(
-					(local.getTimeElapsed() /
-						1000 /
-						local.currentSong.duration) *
+					(this.getTimeElapsed() / 1000 / this.currentSong.duration) *
 						100
 				)}%`;
 			}
@@ -652,79 +644,77 @@ export default {
 			}`;
 		},
 		calculateTimeElapsed() {
-			const local = this;
-
 			if (
-				local.playerReady &&
-				local.currentSong &&
-				local.player.getPlayerState() === -1
+				this.playerReady &&
+				this.currentSong &&
+				this.player.getPlayerState() === -1
 			) {
-				if (local.attemptsToPlayVideo >= 5) {
+				if (this.attemptsToPlayVideo >= 5) {
 					if (
-						Date.now() - local.lastTimeRequestedIfCanAutoplay >
+						Date.now() - this.lastTimeRequestedIfCanAutoplay >
 						2000
 					) {
-						local.lastTimeRequestedIfCanAutoplay = Date.now();
+						this.lastTimeRequestedIfCanAutoplay = Date.now();
 						window.canAutoplay.video().then(({ result }) => {
 							if (result) {
-								local.attemptsToPlayVideo = 0;
-								local.canAutoplay = true;
+								this.attemptsToPlayVideo = 0;
+								this.canAutoplay = true;
 							} else {
-								local.canAutoplay = false;
+								this.canAutoplay = false;
 							}
 						});
 					}
 				} else {
-					local.player.playVideo();
-					local.attemptsToPlayVideo += 1;
+					this.player.playVideo();
+					this.attemptsToPlayVideo += 1;
 				}
 			}
 
-			if (!local.paused) {
-				const timeElapsed = local.getTimeElapsed();
-				const currentPlayerTime = local.player.getCurrentTime() * 1000;
+			if (!this.paused) {
+				const timeElapsed = this.getTimeElapsed();
+				const currentPlayerTime = this.player.getCurrentTime() * 1000;
 
 				const difference = timeElapsed - currentPlayerTime;
 				// console.log(difference123);
 				if (difference < -200) {
 					// console.log("Difference0.8");
-					local.player.setPlaybackRate(0.8);
+					this.player.setPlaybackRate(0.8);
 				} else if (difference < -50) {
 					// console.log("Difference0.9");
-					local.player.setPlaybackRate(0.9);
+					this.player.setPlaybackRate(0.9);
 				} else if (difference < -25) {
 					// console.log("Difference0.99");
-					local.player.setPlaybackRate(0.99);
+					this.player.setPlaybackRate(0.99);
 				} else if (difference > 200) {
 					// console.log("Difference1.2");
-					local.player.setPlaybackRate(1.2);
+					this.player.setPlaybackRate(1.2);
 				} else if (difference > 50) {
 					// console.log("Difference1.1");
-					local.player.setPlaybackRate(1.1);
+					this.player.setPlaybackRate(1.1);
 				} else if (difference > 25) {
 					// console.log("Difference1.01");
-					local.player.setPlaybackRate(1.01);
-				} else if (local.player.getPlaybackRate !== 1.0) {
+					this.player.setPlaybackRate(1.01);
+				} else if (this.player.getPlaybackRate !== 1.0) {
 					// console.log("NDifference1.0");
-					local.player.setPlaybackRate(1.0);
+					this.player.setPlaybackRate(1.0);
 				}
 			}
 
-			/* if (local.currentTime !== undefined && local.paused) {
-				local.timePaused += Date.currently() - local.currentTime;
-				local.currentTime = undefined;
+			/* if (this.currentTime !== undefined && this.paused) {
+				this.timePaused += Date.currently() - this.currentTime;
+				this.currentTime = undefined;
 			} */
 
-			let { timePaused } = local;
-			if (local.paused) timePaused += Date.currently() - local.pausedAt;
+			let { timePaused } = this;
+			if (this.paused) timePaused += Date.currently() - this.pausedAt;
 
 			const duration =
-				(Date.currently() - local.startedAt - timePaused) / 1000;
+				(Date.currently() - this.startedAt - timePaused) / 1000;
 
-			const songDuration = local.currentSong.duration;
-			if (songDuration <= duration) local.player.pauseVideo();
-			if (!local.paused && duration <= songDuration)
-				local.timeElapsed = local.formatTime(duration);
+			const songDuration = this.currentSong.duration;
+			if (songDuration <= duration) this.player.pauseVideo();
+			if (!this.paused && duration <= songDuration)
+				this.timeElapsed = this.formatTime(duration);
 		},
 		toggleLock() {
 			window.socket.emit("stations.toggleLock", this.station._id, res => {
@@ -737,15 +727,14 @@ export default {
 			});
 		},
 		changeVolume() {
-			const local = this;
 			const volume = document.getElementById("volumeSlider").value;
 			localStorage.setItem("volume", volume / 100);
-			if (local.playerReady) {
-				local.player.setVolume(volume / 100);
+			if (this.playerReady) {
+				this.player.setVolume(volume / 100);
 				if (volume > 0) {
-					local.player.unMute();
+					this.player.unMute();
 					localStorage.setItem("muted", false);
-					local.muted = false;
+					this.muted = false;
 				}
 			}
 		},
@@ -769,8 +758,7 @@ export default {
 			}
 		},
 		skipStation() {
-			const _this = this;
-			_this.socket.emit("stations.forceSkip", _this.station._id, data => {
+			this.socket.emit("stations.forceSkip", this.station._id, data => {
 				if (data.status !== "success")
 					Toast.methods.addToast(`Error: ${data.message}`, 8000);
 				else
@@ -781,8 +769,7 @@ export default {
 			});
 		},
 		voteSkipStation() {
-			const _this = this;
-			_this.socket.emit("stations.voteSkip", _this.station._id, data => {
+			this.socket.emit("stations.voteSkip", this.station._id, data => {
 				if (data.status !== "success")
 					Toast.methods.addToast(`Error: ${data.message}`, 8000);
 				else
@@ -793,8 +780,7 @@ export default {
 			});
 		},
 		resumeStation() {
-			const _this = this;
-			_this.socket.emit("stations.resume", _this.station._id, data => {
+			this.socket.emit("stations.resume", this.station._id, data => {
 				if (data.status !== "success")
 					Toast.methods.addToast(`Error: ${data.message}`, 8000);
 				else
@@ -805,8 +791,7 @@ export default {
 			});
 		},
 		pauseStation() {
-			const _this = this;
-			_this.socket.emit("stations.pause", _this.station._id, data => {
+			this.socket.emit("stations.pause", this.station._id, data => {
 				if (data.status !== "success")
 					Toast.methods.addToast(`Error: ${data.message}`, 8000);
 				else
@@ -845,11 +830,10 @@ export default {
 			}
 		},
 		toggleLike() {
-			const _this = this;
-			if (_this.liked)
-				_this.socket.emit(
+			if (this.liked)
+				this.socket.emit(
 					"songs.unlike",
-					_this.currentSong.songId,
+					this.currentSong.songId,
 					data => {
 						if (data.status !== "success")
 							Toast.methods.addToast(
@@ -859,9 +843,9 @@ export default {
 					}
 				);
 			else
-				_this.socket.emit(
+				this.socket.emit(
 					"songs.like",
-					_this.currentSong.songId,
+					this.currentSong.songId,
 					data => {
 						if (data.status !== "success")
 							Toast.methods.addToast(
@@ -872,11 +856,10 @@ export default {
 				);
 		},
 		toggleDislike() {
-			const _this = this;
-			if (_this.disliked)
-				return _this.socket.emit(
+			if (this.disliked)
+				return this.socket.emit(
 					"songs.undislike",
-					_this.currentSong.songId,
+					this.currentSong.songId,
 					data => {
 						if (data.status !== "success")
 							Toast.methods.addToast(
@@ -886,9 +869,9 @@ export default {
 					}
 				);
 
-			return _this.socket.emit(
+			return this.socket.emit(
 				"songs.dislike",
-				_this.currentSong.songId,
+				this.currentSong.songId,
 				data => {
 					if (data.status !== "success")
 						Toast.methods.addToast(`Error: ${data.message}`, 8000);
@@ -896,30 +879,30 @@ export default {
 			);
 		},
 		addFirstPrivatePlaylistSongToQueue() {
-			const _this = this;
 			let isInQueue = false;
-			if (_this.type === "community") {
-				_this.songsList.forEach(queueSong => {
+			if (this.type === "community") {
+				this.songsList.forEach(queueSong => {
 					if (queueSong.requestedBy === this.userId) isInQueue = true;
 				});
-				if (!isInQueue && _this.privatePlaylistQueueSelected) {
-					_this.socket.emit(
+				if (!isInQueue && this.privatePlaylistQueueSelected) {
+					this.socket.emit(
 						"playlists.getFirstSong",
-						_this.privatePlaylistQueueSelected,
+						this.privatePlaylistQueueSelected,
 						data => {
 							if (data.status === "success") {
 								if (data.song.duration < 15 * 60) {
-									_this.automaticallyRequestedSongId =
+									this.automaticallyRequestedSongId =
 										data.song.songId;
-									_this.socket.emit(
+									this.socket.emit(
 										"stations.addToQueue",
-										_this.station._id,
+										this.station._id,
 										data.song.songId,
 										data2 => {
 											if (data2.status === "success") {
-												_this.socket.emit(
+												this.socket.emit(
 													"playlists.moveSongToBottom",
-													_this.privatePlaylistQueueSelected,
+													this
+														.privatePlaylistQueueSelected,
 													data.song.songId,
 													data3 => {
 														if (
@@ -936,9 +919,9 @@ export default {
 										`Top song in playlist was too long to be added.`,
 										3000
 									);
-									_this.socket.emit(
+									this.socket.emit(
 										"playlists.moveSongToBottom",
-										_this.privatePlaylistQueueSelected,
+										this.privatePlaylistQueueSelected,
 										data.song.songId,
 										data3 => {
 											if (data3.status === "success") {
@@ -956,10 +939,9 @@ export default {
 			}
 		},
 		join() {
-			const _this = this;
-			_this.socket.emit("stations.join", _this.stationName, res => {
+			this.socket.emit("stations.join", this.stationName, res => {
 				if (res.status === "success") {
-					_this.loading = false;
+					this.loading = false;
 
 					const {
 						_id,
@@ -974,9 +956,9 @@ export default {
 
 					document.title = `Musare - ${displayName}`;
 
-					_this.joinStation({
+					this.joinStation({
 						_id,
-						name: _this.stationName,
+						name: this.stationName,
 						displayName,
 						description,
 						privacy,
@@ -985,47 +967,47 @@ export default {
 						owner,
 						privatePlaylist
 					});
-					_this.currentSong = res.data.currentSong
+					this.currentSong = res.data.currentSong
 						? res.data.currentSong
 						: {};
-					if (_this.currentSong.artists)
-						_this.currentSong.artists = _this.currentSong.artists.join(
+					if (this.currentSong.artists)
+						this.currentSong.artists = this.currentSong.artists.join(
 							", "
 						);
-					_this.type = res.data.type;
-					_this.startedAt = res.data.startedAt;
-					_this.paused = res.data.paused;
-					_this.timePaused = res.data.timePaused;
-					_this.userCount = res.data.userCount;
-					_this.users = res.data.users;
-					_this.pausedAt = res.data.pausedAt;
+					this.type = res.data.type;
+					this.startedAt = res.data.startedAt;
+					this.paused = res.data.paused;
+					this.timePaused = res.data.timePaused;
+					this.userCount = res.data.userCount;
+					this.users = res.data.users;
+					this.pausedAt = res.data.pausedAt;
 					if (res.data.currentSong) {
-						_this.noSong = false;
-						_this.simpleSong =
+						this.noSong = false;
+						this.simpleSong =
 							res.data.currentSong.likes === -1 &&
 							res.data.currentSong.dislikes === -1;
-						if (_this.simpleSong) {
-							_this.currentSong.skipDuration = 0;
+						if (this.simpleSong) {
+							this.currentSong.skipDuration = 0;
 						}
-						_this.youtubeReady();
-						_this.playVideo();
-						_this.socket.emit(
+						this.youtubeReady();
+						this.playVideo();
+						this.socket.emit(
 							"songs.getOwnSongRatings",
 							res.data.currentSong.songId,
 							data => {
-								if (_this.currentSong.songId === data.songId) {
-									_this.liked = data.liked;
-									_this.disliked = data.disliked;
+								if (this.currentSong.songId === data.songId) {
+									this.liked = data.liked;
+									this.disliked = data.disliked;
 								}
 							}
 						);
 					} else {
-						if (_this.playerReady) _this.player.pauseVideo();
-						_this.noSong = true;
+						if (this.playerReady) this.player.pauseVideo();
+						this.noSong = true;
 					}
 					// UNIX client time before ping
 					const beforePing = Date.now();
-					_this.socket.emit("apis.ping", pong => {
+					this.socket.emit("apis.ping", pong => {
 						// UNIX client time after ping
 						const afterPing = Date.now();
 						// Average time in MS it took between the server responding and the client receiving
@@ -1042,7 +1024,7 @@ export default {
 								"System time difference is bigger than 3 seconds."
 							);
 						}
-						_this.systemDifference = difference;
+						this.systemDifference = difference;
 					});
 				}
 			});
@@ -1051,176 +1033,174 @@ export default {
 		...mapActions("station", ["joinStation"])
 	},
 	mounted() {
-		const _this = this;
-
 		Date.currently = () => {
-			return new Date().getTime() + _this.systemDifference;
+			return new Date().getTime() + this.systemDifference;
 		};
 
-		_this.stationName = _this.$route.params.id;
+		this.stationName = this.$route.params.id;
 
 		window.stationInterval = 0;
 
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 
 			io.removeAllListeners();
-			if (_this.socket.connected) _this.join();
-			io.onConnect(_this.join);
-			_this.socket.emit("stations.findByName", _this.stationName, res => {
+			if (this.socket.connected) this.join();
+			io.onConnect(this.join);
+			this.socket.emit("stations.findByName", this.stationName, res => {
 				if (res.status === "failure") {
-					_this.loading = false;
-					_this.exists = false;
+					this.loading = false;
+					this.exists = false;
 				} else {
-					_this.exists = true;
+					this.exists = true;
 				}
 			});
-			_this.socket.on("event:songs.next", data => {
-				_this.previousSong = _this.currentSong.songId
-					? _this.currentSong
+			this.socket.on("event:songs.next", data => {
+				this.previousSong = this.currentSong.songId
+					? this.currentSong
 					: null;
-				_this.currentSong = data.currentSong ? data.currentSong : {};
-				_this.startedAt = data.startedAt;
-				_this.paused = data.paused;
-				_this.timePaused = data.timePaused;
+				this.currentSong = data.currentSong ? data.currentSong : {};
+				this.startedAt = data.startedAt;
+				this.paused = data.paused;
+				this.timePaused = data.timePaused;
 				if (data.currentSong) {
-					_this.noSong = false;
-					if (_this.currentSong.artists)
-						_this.currentSong.artists = _this.currentSong.artists.join(
+					this.noSong = false;
+					if (this.currentSong.artists)
+						this.currentSong.artists = this.currentSong.artists.join(
 							", "
 						);
-					_this.simpleSong =
+					this.simpleSong =
 						data.currentSong.likes === -1 &&
 						data.currentSong.dislikes === -1;
-					if (_this.simpleSong) _this.currentSong.skipDuration = 0;
-					if (!_this.playerReady) _this.youtubeReady();
-					else _this.playVideo();
-					_this.socket.emit(
+					if (this.simpleSong) this.currentSong.skipDuration = 0;
+					if (!this.playerReady) this.youtubeReady();
+					else this.playVideo();
+					this.socket.emit(
 						"songs.getOwnSongRatings",
 						data.currentSong.songId,
 						song => {
-							if (_this.currentSong.songId === song.songId) {
-								_this.liked = song.liked;
-								_this.disliked = song.disliked;
+							if (this.currentSong.songId === song.songId) {
+								this.liked = song.liked;
+								this.disliked = song.disliked;
 							}
 						}
 					);
 				} else {
-					if (_this.playerReady) _this.player.pauseVideo();
-					_this.noSong = true;
+					if (this.playerReady) this.player.pauseVideo();
+					this.noSong = true;
 				}
 
 				let isInQueue = false;
-				_this.songsList.forEach(queueSong => {
+				this.songsList.forEach(queueSong => {
 					if (queueSong.requestedBy === this.userId) isInQueue = true;
 				});
 				if (
 					!isInQueue &&
-					_this.privatePlaylistQueueSelected &&
-					(_this.automaticallyRequestedSongId !==
-						_this.currentSong.songId ||
-						!_this.currentSong.songId)
+					this.privatePlaylistQueueSelected &&
+					(this.automaticallyRequestedSongId !==
+						this.currentSong.songId ||
+						!this.currentSong.songId)
 				) {
-					_this.addFirstPrivatePlaylistSongToQueue();
+					this.addFirstPrivatePlaylistSongToQueue();
 				}
 			});
 
-			_this.socket.on("event:stations.pause", data => {
-				_this.pausedAt = data.pausedAt;
-				_this.pauseLocalStation();
+			this.socket.on("event:stations.pause", data => {
+				this.pausedAt = data.pausedAt;
+				this.pauseLocalStation();
 			});
 
-			_this.socket.on("event:stations.resume", data => {
-				_this.timePaused = data.timePaused;
-				_this.resumeLocalStation();
+			this.socket.on("event:stations.resume", data => {
+				this.timePaused = data.timePaused;
+				this.resumeLocalStation();
 			});
 
-			_this.socket.on("event:stations.remove", () => {
+			this.socket.on("event:stations.remove", () => {
 				window.location.href = "/";
 				return true;
 			});
 
-			_this.socket.on("event:song.like", data => {
+			this.socket.on("event:song.like", data => {
 				if (!this.noSong) {
-					if (data.songId === _this.currentSong.songId) {
-						_this.currentSong.dislikes = data.dislikes;
-						_this.currentSong.likes = data.likes;
+					if (data.songId === this.currentSong.songId) {
+						this.currentSong.dislikes = data.dislikes;
+						this.currentSong.likes = data.likes;
 					}
 				}
 			});
 
-			_this.socket.on("event:song.dislike", data => {
+			this.socket.on("event:song.dislike", data => {
 				if (!this.noSong) {
-					if (data.songId === _this.currentSong.songId) {
-						_this.currentSong.dislikes = data.dislikes;
-						_this.currentSong.likes = data.likes;
+					if (data.songId === this.currentSong.songId) {
+						this.currentSong.dislikes = data.dislikes;
+						this.currentSong.likes = data.likes;
 					}
 				}
 			});
 
-			_this.socket.on("event:song.unlike", data => {
+			this.socket.on("event:song.unlike", data => {
 				if (!this.noSong) {
-					if (data.songId === _this.currentSong.songId) {
-						_this.currentSong.dislikes = data.dislikes;
-						_this.currentSong.likes = data.likes;
+					if (data.songId === this.currentSong.songId) {
+						this.currentSong.dislikes = data.dislikes;
+						this.currentSong.likes = data.likes;
 					}
 				}
 			});
 
-			_this.socket.on("event:song.undislike", data => {
+			this.socket.on("event:song.undislike", data => {
 				if (!this.noSong) {
-					if (data.songId === _this.currentSong.songId) {
-						_this.currentSong.dislikes = data.dislikes;
-						_this.currentSong.likes = data.likes;
+					if (data.songId === this.currentSong.songId) {
+						this.currentSong.dislikes = data.dislikes;
+						this.currentSong.likes = data.likes;
 					}
 				}
 			});
 
-			_this.socket.on("event:song.newRatings", data => {
+			this.socket.on("event:song.newRatings", data => {
 				if (!this.noSong) {
-					if (data.songId === _this.currentSong.songId) {
-						_this.liked = data.liked;
-						_this.disliked = data.disliked;
+					if (data.songId === this.currentSong.songId) {
+						this.liked = data.liked;
+						this.disliked = data.disliked;
 					}
 				}
 			});
 
-			_this.socket.on("event:queue.update", queue => {
+			this.socket.on("event:queue.update", queue => {
 				if (this.type === "community") this.songsList = queue;
 			});
 
-			_this.socket.on("event:song.voteSkipSong", () => {
+			this.socket.on("event:song.voteSkipSong", () => {
 				if (this.currentSong) this.currentSong.skipVotes += 1;
 			});
 
-			_this.socket.on("event:privatePlaylist.selected", playlistId => {
+			this.socket.on("event:privatePlaylist.selected", playlistId => {
 				if (this.type === "community") {
 					this.station.privatePlaylist = playlistId;
 				}
 			});
 
-			_this.socket.on("event:partyMode.updated", partyMode => {
+			this.socket.on("event:partyMode.updated", partyMode => {
 				if (this.type === "community") {
 					this.station.partyMode = partyMode;
 				}
 			});
 
-			_this.socket.on("event:newOfficialPlaylist", playlist => {
+			this.socket.on("event:newOfficialPlaylist", playlist => {
 				if (this.type === "official") {
 					this.songsList = playlist;
 				}
 			});
 
-			_this.socket.on("event:users.updated", users => {
-				_this.users = users;
+			this.socket.on("event:users.updated", users => {
+				this.users = users;
 			});
 
-			_this.socket.on("event:userCount.updated", userCount => {
-				_this.userCount = userCount;
+			this.socket.on("event:userCount.updated", userCount => {
+				this.userCount = userCount;
 			});
 
-			_this.socket.on("event:queueLockToggled", locked => {
-				_this.station.locked = locked;
+			this.socket.on("event:queueLockToggled", locked => {
+				this.station.locked = locked;
 			});
 		});
 

+ 1 - 2
frontend/components/User/ResetPassword.vue

@@ -86,9 +86,8 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
+			this.socket = socket;
 		});
 	},
 	methods: {

+ 14 - 15
frontend/components/User/Settings.vue

@@ -173,33 +173,32 @@ export default {
 		userId: state => state.user.auth.userId
 	}),
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit("users.findBySession", res => {
+			this.socket = socket;
+			this.socket.emit("users.findBySession", res => {
 				if (res.status === "success") {
-					_this.user = res.data;
-					_this.password = _this.user.password;
-					_this.github = _this.user.github;
+					this.user = res.data;
+					this.password = this.user.password;
+					this.github = this.user.github;
 				} else {
-					_this.$parent.isLoginActive = true;
+					this.$parent.isLoginActive = true;
 					Toast.methods.addToast(
 						"Your are currently not signed in",
 						3000
 					);
 				}
 			});
-			_this.socket.on("event:user.linkPassword", () => {
-				_this.password = true;
+			this.socket.on("event:user.linkPassword", () => {
+				this.password = true;
 			});
-			_this.socket.on("event:user.linkGitHub", () => {
-				_this.github = true;
+			this.socket.on("event:user.linkGitHub", () => {
+				this.github = true;
 			});
-			_this.socket.on("event:user.unlinkPassword", () => {
-				_this.password = false;
+			this.socket.on("event:user.unlinkPassword", () => {
+				this.password = false;
 			});
-			_this.socket.on("event:user.unlinkGitHub", () => {
-				_this.github = false;
+			this.socket.on("event:user.unlinkGitHub", () => {
+				this.github = false;
 			});
 		});
 	},

+ 5 - 6
frontend/components/User/Show.vue

@@ -83,20 +83,19 @@ export default {
 		userId: state => state.user.auth.userId
 	}),
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit(
+			this.socket = socket;
+			this.socket.emit(
 				"users.findByUsername",
-				_this.$route.params.username,
+				this.$route.params.username,
 				res => {
 					if (res.status === "error") this.$router.go("/404");
 					else {
-						_this.user = res.data;
+						this.user = res.data;
 						this.user.createdAt = moment(
 							this.user.createdAt
 						).format("LL");
-						_this.isUser = true;
+						this.isUser = true;
 					}
 				}
 			);

+ 18 - 21
frontend/components/pages/Home.vue

@@ -175,14 +175,13 @@ export default {
 		userId: state => state.user.auth.userId
 	}),
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			if (_this.socket.connected) _this.init();
+			this.socket = socket;
+			if (this.socket.connected) this.init();
 			io.onConnect(() => {
-				_this.init();
+				this.init();
 			});
-			_this.socket.on("event:stations.created", res => {
+			this.socket.on("event:stations.created", res => {
 				const station = res;
 
 				if (!station.currentSong)
@@ -192,19 +191,19 @@ export default {
 				if (station.currentSong && !station.currentSong.thumbnail)
 					station.currentSong.thumbnail =
 						"/assets/notes-transparent.png";
-				_this.stations[station.type].push(station);
+				this.stations[station.type].push(station);
 			});
-			_this.socket.on(
+			this.socket.on(
 				"event:userCount.updated",
 				(stationId, userCount) => {
-					_this.stations.official.forEach(s => {
+					this.stations.official.forEach(s => {
 						const station = s;
 						if (station._id === stationId) {
 							station.userCount = userCount;
 						}
 					});
 
-					_this.stations.community.forEach(s => {
+					this.stations.community.forEach(s => {
 						const station = s;
 						if (station._id === stationId) {
 							station.userCount = userCount;
@@ -212,9 +211,9 @@ export default {
 					});
 				}
 			);
-			_this.socket.on("event:station.nextSong", (stationId, song) => {
+			this.socket.on("event:station.nextSong", (stationId, song) => {
 				let newSong = song;
-				_this.stations.official.forEach(s => {
+				this.stations.official.forEach(s => {
 					const station = s;
 					if (station._id === stationId) {
 						if (!newSong)
@@ -227,7 +226,7 @@ export default {
 					}
 				});
 
-				_this.stations.community.forEach(s => {
+				this.stations.community.forEach(s => {
 					const station = s;
 					if (station._id === stationId) {
 						if (!newSong)
@@ -244,10 +243,9 @@ export default {
 	},
 	methods: {
 		init() {
-			const _this = this;
-			_this.socket.emit("stations.index", data => {
-				_this.stations.community = [];
-				_this.stations.official = [];
+			this.socket.emit("stations.index", data => {
+				this.stations.community = [];
+				this.stations.official = [];
 				if (data.status === "success")
 					data.stations.forEach(s => {
 						const station = s;
@@ -262,16 +260,15 @@ export default {
 							station.currentSong.thumbnail =
 								"/assets/notes-transparent.png";
 						if (station.type === "official")
-							_this.stations.official.push(station);
-						else _this.stations.community.push(station);
+							this.stations.official.push(station);
+						else this.stations.community.push(station);
 					});
 			});
-			_this.socket.emit("apis.joinRoom", "home", () => {});
+			this.socket.emit("apis.joinRoom", "home", () => {});
 		},
 		isOwner(station) {
-			const _this = this;
 			return (
-				station.owner === _this.userId && station.privacy === "public"
+				station.owner === this.userId && station.privacy === "public"
 			);
 		},
 		...mapActions("modals", ["openModal"])

+ 14 - 15
frontend/components/pages/News.vue

@@ -90,27 +90,26 @@ export default {
 		};
 	},
 	mounted() {
-		const _this = this;
 		io.getSocket(socket => {
-			_this.socket = socket;
-			_this.socket.emit("news.index", res => {
-				_this.news = res.data;
-				if (_this.news.length === 0) _this.noFound = true;
+			this.socket = socket;
+			this.socket.emit("news.index", res => {
+				this.news = res.data;
+				if (this.news.length === 0) this.noFound = true;
 			});
-			_this.socket.on("event:admin.news.created", news => {
-				_this.news.unshift(news);
-				_this.noFound = false;
+			this.socket.on("event:admin.news.created", news => {
+				this.news.unshift(news);
+				this.noFound = false;
 			});
-			_this.socket.on("event:admin.news.updated", news => {
-				for (let n = 0; n < _this.news.length; n += 1) {
-					if (_this.news[n]._id === news._id) {
-						_this.news.$set(n, news);
+			this.socket.on("event:admin.news.updated", news => {
+				for (let n = 0; n < this.news.length; n += 1) {
+					if (this.news[n]._id === news._id) {
+						this.news.$set(n, news);
 					}
 				}
 			});
-			_this.socket.on("event:admin.news.removed", news => {
-				_this.news = _this.news.filter(item => item._id !== news._id);
-				if (_this.news.length === 0) _this.noFound = true;
+			this.socket.on("event:admin.news.removed", news => {
+				this.news = this.news.filter(item => item._id !== news._id);
+				if (this.news.length === 0) this.noFound = true;
 			});
 		});
 	},