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

README.md

@@ -1,4 +1,5 @@
 
+  
 # MusareNode
 
 Based off of the original [Musare](https://github.com/Musare/MusareMeteor), which utilized Meteor.
@@ -56,41 +57,42 @@ Once you've installed the required tools:
 
 3. `cp backend/config/template.json backend/config/default.json`
 
-   Values:
-   The `mode` should be either "development" or "production". No more explanation needed.  
-   The `secret` key can be whatever. It's used by express's session module.  
-   The `domain` should be the url where the site will be accessible from, usually `http://localhost` for non-Docker.  
-   The `serverDomain` should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.  
-   The `serverPort` should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker.  
-   `isDocker` if you are using Docker or not.  
-   The `apis.youtube.key` value can be obtained by setting up a [YouTube API Key](https://developers.google.com/youtube/v3/getting-started). You need to use the YouTube Data API v3, and create an API key.  
-   The `apis.recaptcha.secret` value can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).  
-   The `apis.github` values can be obtained by setting up a [GitHub OAuth Application](https://github.com/settings/developers). You need to fill in some values to create the OAuth application. The homepage is the homepage of frontend. The authorization callback url is the backend url with `/auth/github/authorize/callback` added at the end. For example `http://localhost:8080/auth/github/authorize/callback`.  
-   The `apis.discord.token` is the token for the Discord bot.  
-   The `apis.discord.loggingServer` is the Discord logging server id.  
-   The `apis.discord.loggingChannel` is the Discord logging channel id.  
-   The `apis.mailgun` values can be obtained by setting up a [Mailgun account](http://www.mailgun.com/), or you can disable it.  
-   The `apis.spotify` values can be obtained by setting up a [Spotify client id](https://developer.spotify.com/dashboard/applications), or you can disable it.  
-   The `redis.url` url should be left alone for Docker, and changed to `redis://localhost:6379/0` for non-Docker.  
-   The `redis.password` should be the Redis password you either put in your `startRedis.cmd` file for Windows, or `.env` for docker.  
-   The `mongo.url` needs to have the proper password for the MongoDB musare user, and for non-Docker you need to replace `@musare:27017` with `@localhost:27017`.  
-   The `cookie.domain` value should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.  
-   The `cookie.secure` value should be `true` for SSL connections, and `false` for normal http connections.  
+|Property|Description|
+|--|--|
+|`mode`|Should be either `development` or `production`. No more explanation needed.|
+|`secret`|Whatever you want - used by express's session module.|
+|`domain`|Should be the url where the site will be accessible from,usually `http://localhost` for non-Docker.|
+|`serverDomain`|Should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.|
+|`serverPort`|Should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker.|
+|`isDocker`|Self-explanatory. Are you using Docker?|
+|`serverPort`|Should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker.|
+|`apis.youtube.key`|Can be obtained by setting up a [YouTube API Key](https://developers.google.com/youtube/v3/getting-started). You need to use the YouTube Data API v3, and create an API key.|
+|`apis.recaptcha.secret`|Can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).|
+|`apis.github`|Can be obtained by setting up a [GitHub OAuth Application](https://github.com/settings/developers). You need to fill in some values to create the OAuth application. The homepage is the homepage of frontend. The authorization callback url is the backend url with `/auth/github/authorize/callback` added at the end. For example `http://localhost:8080/auth/github/authorize/callback`.|
+|`apis.discord.token`|Token for the Discord bot.|
+|`apis.discord.loggingServer`|Server ID of the Discord logging server.|
+|`apis.discord.loggingChannel`|ID of the channel to be used in the Discord logging server.|
+|`apis.mailgun`|Can be obtained by setting up a [Mailgun account](http://www.mailgun.com/), or you can disable it.|
+|`apis.spotify`|Can be obtained by setting up a [Spotify client id](https://developer.spotify.com/dashboard/applications), or you can disable it.|
+|`redis.url`|Should be left alone for Docker, and changed to `redis://localhost:6379/0` for non-Docker.|
+|`redis.password`|Should be the Redis password you either put in your `startRedis.cmd` file for Windows, or `.env` for docker.|
+|`mongo.url`|Needs to have the proper password for the MongoDB musare user, and for non-Docker you need to replace `@musare:27017` with `@localhost:27017`.|
+|`cookie.domain`|Should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.|
+|`cookie.secure`|Should be `true` for SSL connections, and `false` for normal http connections.|
 
 4. `cp frontend/build/config/template.json frontend/build/config/default.json`
 
-   Values:  
-   The `serverDomain` should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.
-   The `frontendDomain` should be the url where the frontend will be accessible from, usually `http://localhost` for docker or `http://localhost:80` for non-Docker.
-   The `frontendPort` should be the port where the frontend will be accessible from, should always be port `81` for Docker, and is recommended to be port `80` for non-Docker.
-   The `recaptcha.key` value can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).
-   The `cookie.domain` value should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.
-   The `cookie.secure` value should be `true` for SSL connections, and `false` for normal http connections.
-   The `siteSettings.logo` should be the path to the logo image, by default it is `/assets/wordmark.png`.
-   The `siteSettings.siteName` should be the name of the site.
-   The `siteSettings.socialLinks.` `github`,`twitter`,`facebook` and `github` are set to the official Musare accounts by default but can be changed. 
-
-Now you have different paths here.
+|Property|Description|
+|--|--|
+|`serverDomain`|Should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.|
+|`frontendDomain`|Should be the url where the frontend will be accessible from, usually `http://localhost` for docker or `http://localhost:80` for non-Docker.|
+|`frontendPort`|Should be the port where the frontend will be accessible from, should always be port `81` for Docker, and is recommended to be port `80` for non-Docker.|
+|`recaptcha.key`|Can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).|
+|`cookie.domain`|Should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.|
+|`cookie.secure`|Should be `true` for SSL connections, and `false` for normal http connections.|
+|`siteSettings.logo`|Path to the logo image, by default it is `/assets/wordmark.png`.|
+|`siteSettings.siteName`|Should be the name of the site.|
+|`siteSettings.socialLinks`|`github`, `twitter` and `facebook` are set to the official Musare accounts by default, but can be changed.|
 
 ### Installing with Docker
 

backend/logic/io.js

@@ -119,6 +119,7 @@ module.exports = class extends coreClass {
 									cb = () => {
 										this.logger.info("IO_MODULE", `There was no callback provided for ${name}.`);
 									}
+								else args.pop();
 
 								try { await this._validateHook(); } catch { return cb({status: 'failure', message: 'Lockdown'}); } 
 

frontend/components/Admin/News.vue

@@ -231,8 +231,7 @@ export default {
 				features: [],
 				improvements: [],
 				upcoming: []
-			},
-			editing: {}
+			}
 		};
 	},
 	mounted() {
@@ -255,6 +254,9 @@ export default {
 	computed: {
 		...mapState("modals", {
 			modals: state => state.modals.admin
+		}),
+		...mapState("admin/news", {
+			editing: state => state.editing
 		})
 	},
 	methods: {
@@ -303,26 +305,9 @@ export default {
 			);
 		},
 		editNews(news) {
-			this.editing = news;
+			this.editNews(news);
 			this.openModal({ sector: "admin", modal: "editNews" });
 		},
-		updateNews(close) {
-			this.socket.emit(
-				"news.update",
-				this.editing._id,
-				this.editing,
-				res => {
-					Toast.methods.addToast(res.message, 4000);
-					if (res.status === "success") {
-						if (close)
-							this.closeModal({
-								sector: "admin",
-								modal: "editNews"
-							});
-					}
-				}
-			);
-		},
 		addChange(type) {
 			const change = document.getElementById(`new-${type}`).value.trim();
 
@@ -342,7 +327,8 @@ export default {
 		init() {
 			this.socket.emit("apis.joinAdminRoom", "news", () => {});
 		},
-		...mapActions("modals", ["openModal", "closeModal"])
+		...mapActions("modals", ["openModal", "closeModal"]),
+		...mapActions("admin/news", ["editNews"])
 	}
 };
 </script>

frontend/components/Admin/Songs.vue

@@ -102,7 +102,6 @@ export default {
 		return {
 			position: 1,
 			maxPosition: 1,
-			songs: [],
 			searchQuery: "",
 			editing: {
 				index: 0,
@@ -121,6 +120,9 @@ export default {
 		},
 		...mapState("modals", {
 			modals: state => state.modals.admin
+		}),
+		...mapState("admin/songs", {
+			songs: state => state.songs
 		})
 	},
 	watch: {
@@ -143,41 +145,39 @@ export default {
 		getSet() {
 			this.socket.emit("songs.getSet", this.position, data => {
 				data.forEach(song => {
-					this.songs.push(song);
+					this.addSong(song);
 				});
 				this.position += 1;
 				if (this.maxPosition > this.position - 1) this.getSet();
 			});
 		},
 		init() {
-			this.songs = [];
 			this.socket.emit("songs.length", length => {
 				this.maxPosition = Math.ceil(length / 15);
 				this.getSet();
 			});
 			this.socket.emit("apis.joinAdminRoom", "songs", () => {});
 		},
-		...mapActions("admin/songs", ["stopVideo", "editSong"]),
+		...mapActions("admin/songs", [
+			"stopVideo",
+			"editSong",
+			"addSong",
+			"removeSong",
+			"updateSong"
+		]),
 		...mapActions("modals", ["openModal", "closeModal"])
 	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
 			this.socket.on("event:admin.song.added", song => {
-				this.songs.push(song);
+				this.addSong(song);
 			});
 			this.socket.on("event:admin.song.removed", songId => {
-				this.songs = this.songs.filter(song => {
-					return song._id !== songId;
-				});
+				this.removeSong(songId);
 			});
 			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.updateSong(updatedSong);
 			});
 
 			if (this.socket.connected) {

frontend/components/Modals/AddSongToPlaylist.vue

@@ -2,10 +2,10 @@
 	<modal title="Add Song To Playlist">
 		<template v-slot:body>
 			<h4 class="songTitle">
-				{{ $parent.currentSong.title }}
+				{{ currentSong.title }}
 			</h4>
 			<h5 class="songArtist">
-				{{ $parent.currentSong.artists }}
+				{{ currentSong.artists }}
 			</h5>
 			<aside class="menu">
 				<p class="menu-label">
@@ -38,6 +38,8 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 import { Toast } from "vue-roaster";
 import Modal from "./Modal.vue";
 import io from "../../io";
@@ -53,8 +55,8 @@ export default {
 		};
 	},
 	mounted() {
-		this.songId = this.$parent.currentSong.songId;
-		this.song = this.$parent.currentSong;
+		this.songId = this.currentSong.songId;
+		this.song = this.currentSong;
 		io.getSocket(socket => {
 			this.socket = socket;
 			this.socket.emit("playlists.indexForUser", res => {
@@ -67,11 +69,16 @@ export default {
 			});
 		});
 	},
+	computed: {
+		...mapState("station", {
+			currentSong: state => state.currentSong
+		})
+	},
 	methods: {
 		addSongToPlaylist(playlistId) {
 			this.socket.emit(
 				"playlists.addSongToPlaylist",
-				this.$parent.currentSong.songId,
+				this.currentSong.songId,
 				playlistId,
 				res => {
 					Toast.methods.addToast(res.message, 4000);
@@ -79,7 +86,6 @@ export default {
 						this.playlists[playlistId].songs.push(this.song);
 					}
 					this.recalculatePlaylists();
-					// this.$parent.modals.addSongToPlaylist = false;
 				}
 			);
 		},
@@ -102,7 +108,6 @@ export default {
 						);
 					}
 					this.recalculatePlaylists();
-					// this.$parent.modals.addSongToPlaylist = false;
 				}
 			);
 		},

frontend/components/Modals/AddSongToQueue.vue

@@ -1,13 +1,13 @@
 <template>
 	<modal title="Add Song To Queue">
 		<div slot="body">
-			<aside class="menu" v-if="loggedIn && $parent.type === 'community'">
+			<aside class="menu" v-if="loggedIn && station.type === 'community'">
 				<ul class="menu-list">
 					<li v-for="(playlist, index) in playlists" :key="index">
 						<a
 							href="#"
 							target="_blank"
-							v-on:click="$parent.editPlaylist(playlist._id)"
+							v-on:click="editPlaylist(playlist._id)"
 							>{{ playlist.displayName }}</a
 						>
 						<div class="controls">
@@ -50,7 +50,7 @@
 					>
 				</p>
 			</div>
-			<div class="control is-grouped" v-if="$parent.type === 'official'">
+			<div class="control is-grouped" v-if="station.type === 'official'">
 				<p class="control is-expanded">
 					<input
 						class="input"
@@ -92,7 +92,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 import { Toast } from "vue-roaster";
 import Modal from "./Modal.vue";
@@ -109,30 +109,32 @@ export default {
 		};
 	},
 	computed: mapState({
-		loggedIn: state => state.user.auth.loggedIn
+		loggedIn: state => state.user.auth.loggedIn,
+		station: state => state.station.station
 	}),
 	methods: {
 		isPlaylistSelected(playlistId) {
 			return this.privatePlaylistQueueSelected === playlistId;
 		},
 		selectPlaylist(playlistId) {
-			if (this.$parent.type === "community") {
+			if (this.station.type === "community") {
 				this.privatePlaylistQueueSelected = playlistId;
 				this.$parent.privatePlaylistQueueSelected = playlistId;
 				this.$parent.addFirstPrivatePlaylistSongToQueue();
 			}
 		},
 		unSelectPlaylist() {
-			if (this.$parent.type === "community") {
+			if (this.station.type === "community") {
 				this.privatePlaylistQueueSelected = null;
 				this.$parent.privatePlaylistQueueSelected = null;
 			}
 		},
 		addSongToQueue(songId) {
-			if (this.$parent.type === "community") {
+			console.log(this.station.type);
+			if (this.station.type === "community") {
 				this.socket.emit(
 					"stations.addToQueue",
-					this.$parent.station._id,
+					this.station._id,
 					songId,
 					data => {
 						if (data.status !== "success")
@@ -189,7 +191,8 @@ export default {
 					});
 				}
 			});
-		}
+		},
+		...mapActions("user/playlists", ["editPlaylist"])
 	},
 	mounted() {
 		io.getSocket(socket => {

frontend/components/Modals/EditNews.vue

@@ -4,7 +4,7 @@
 			<label class="label">Title</label>
 			<p class="control">
 				<input
-					v-model="$parent.editing.title"
+					v-model="editing.title"
 					class="input"
 					type="text"
 					placeholder="News Title"
@@ -14,7 +14,7 @@
 			<label class="label">Description</label>
 			<p class="control">
 				<input
-					v-model="$parent.editing.description"
+					v-model="editing.description"
 					class="input"
 					type="text"
 					placeholder="News Description"
@@ -39,7 +39,7 @@
 						>
 					</p>
 					<span
-						v-for="(bug, index) in $parent.editing.bugs"
+						v-for="(bug, index) in editing.bugs"
 						class="tag is-info"
 						:key="index"
 					>
@@ -68,7 +68,7 @@
 						>
 					</p>
 					<span
-						v-for="(feature, index) in $parent.editing.features"
+						v-for="(feature, index) in editing.features"
 						class="tag is-info"
 						:key="index"
 					>
@@ -100,8 +100,7 @@
 						>
 					</p>
 					<span
-						v-for="(improvement, index) in $parent.editing
-							.improvements"
+						v-for="(improvement, index) in editing.improvements"
 						class="tag is-info"
 						:key="index"
 					>
@@ -130,7 +129,7 @@
 						>
 					</p>
 					<span
-						v-for="(upcoming, index) in $parent.editing.upcoming"
+						v-for="(upcoming, index) in editing.upcoming"
 						class="tag is-info"
 						:key="index"
 					>
@@ -144,14 +143,11 @@
 			</div>
 		</div>
 		<div slot="footer">
-			<button
-				class="button is-success"
-				@click="$parent.updateNews(false)"
-			>
+			<button class="button is-success" @click="updateNews(false)">
 				<i class="material-icons save-changes">done</i>
 				<span>&nbsp;Save</span>
 			</button>
-			<button class="button is-success" @click="$parent.updateNews(true)">
+			<button class="button is-success" @click="updateNews(true)">
 				<i class="material-icons save-changes">done</i>
 				<span>&nbsp;Save and close</span>
 			</button>
@@ -183,19 +179,37 @@ export default {
 		addChange(type) {
 			const change = document.getElementById(`edit-${type}`).value.trim();
 
-			if (this.$parent.editing[type].indexOf(change) !== -1)
+			if (this.editing[type].indexOf(change) !== -1)
 				return Toast.methods.addToast(`Tag already exists`, 3000);
 
-			if (change) this.$parent.editing[type].push(change);
+			if (change) this.addChange(type, change);
 			else Toast.methods.addToast(`${type} cannot be empty`, 3000);
 
 			document.getElementById(`edit-${type}`).value = "";
 			return true;
 		},
 		removeChange(type, index) {
-			this.$parent.editing[type].splice(index, 1);
+			this.removeChange(type, index);
+		},
+		updateNews(close) {
+			this.socket.emit(
+				"news.update",
+				this.editing._id,
+				this.editing,
+				res => {
+					Toast.methods.addToast(res.message, 4000);
+					if (res.status === "success") {
+						if (close)
+							this.closeModal({
+								sector: "admin",
+								modal: "editNews"
+							});
+					}
+				}
+			);
 		},
-		...mapActions("modals", ["closeModal"])
+		...mapActions("modals", ["closeModal"]),
+		...mapActions("admin/users", ["addChange", "removeChange"])
 	}
 };
 </script>

frontend/components/Modals/EditSong.vue

@@ -286,7 +286,8 @@ export default {
 	computed: {
 		...mapState("admin/songs", {
 			video: state => state.video,
-			editing: state => state.editing
+			editing: state => state.editing,
+			songs: state => state.songs
 		}),
 		...mapState("modals", {
 			modals: state => state.modals.admin
@@ -399,7 +400,7 @@ export default {
 				res => {
 					Toast.methods.addToast(res.message, 4000);
 					if (res.status === "success") {
-						this.$parent.songs.forEach(originalSong => {
+						this.songs.forEach(originalSong => {
 							const updatedSong = song;
 							if (originalSong._id === updatedSong._id) {
 								Object.keys(originalSong).forEach(n => {

frontend/components/Modals/Login.vue

@@ -61,7 +61,7 @@
 				>
 				<a
 					class="button is-github"
-					:href="$parent.serverDomain + '/auth/github/authorize'"
+					:href="serverDomain + '/auth/github/authorize'"
 					@click="githubRedirect()"
 				>
 					<div class="icon">
@@ -86,7 +86,8 @@ export default {
 	data() {
 		return {
 			email: "",
-			password: ""
+			password: "",
+			serverDomain: ""
 		};
 	},
 	methods: {
@@ -109,6 +110,11 @@ export default {
 		},
 		...mapActions("modals", ["closeModal"]),
 		...mapActions("user/auth", ["login"])
+	},
+	mounted() {
+		lofig.get("serverDomain", res => {
+			this.serverDomain = res;
+		});
 	}
 };
 </script>

frontend/components/Modals/Playlists/Edit.vue

@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 import { Toast } from "vue-roaster";
 import Modal from "../Modal.vue";
@@ -343,8 +343,7 @@ export default {
 			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
-						.editPlaylist;
+					this.closeModal();
 				}
 			});
 		},
@@ -367,7 +366,8 @@ export default {
 					Toast.methods.addToast(res.message, 4000);
 				}
 			);
-		}
+		},
+		...mapActions("modals", ["closeModal"])
 	}
 };
 </script>

frontend/components/Modals/Register.vue

@@ -68,7 +68,7 @@
 				>
 				<a
 					class="button is-github"
-					:href="$parent.serverDomain + '/auth/github/authorize'"
+					:href="serverDomain + '/auth/github/authorize'"
 					@click="githubRedirect()"
 				>
 					<div class="icon">
@@ -95,10 +95,15 @@ export default {
 			recaptcha: {
 				key: "",
 				token: ""
-			}
+			},
+			serverDomain: ""
 		};
 	},
 	mounted() {
+		lofig.get("serverDomain", res => {
+			this.serverDomain = res;
+		});
+
 		lofig.get("recaptcha", obj => {
 			this.recaptcha.key = obj.key;
 

frontend/components/Modals/Report.vue

@@ -2,10 +2,7 @@
 	<modal title="Report">
 		<div slot="body">
 			<div class="columns song-types">
-				<div
-					v-if="$parent.previousSong !== null"
-					class="column song-type"
-				>
+				<div v-if="previousSong !== null" class="column song-type">
 					<div
 						class="card is-fullwidth"
 						:class="{ 'is-highlight-active': isPreviousSongActive }"
@@ -21,9 +18,7 @@
 								<figure class="media-left">
 									<p class="image is-64x64">
 										<img
-											:src="
-												$parent.previousSong.thumbnail
-											"
+											:src="previousSong.thumbnail"
 											onerror='this.src="/assets/notes-transparent.png"'
 										/>
 									</p>
@@ -32,13 +27,11 @@
 									<div class="content">
 										<p>
 											<strong>{{
-												$parent.previousSong.title
+												previousSong.title
 											}}</strong>
 											<br />
 											<small>{{
-												$parent.previousSong.artists.split(
-													" ,"
-												)
+												previousSong.artists.split(" ,")
 											}}</small>
 										</p>
 									</div>
@@ -52,7 +45,7 @@
 						/>
 					</div>
 				</div>
-				<div v-if="$parent.currentSong !== {}" class="column song-type">
+				<div v-if="currentSong !== {}" class="column song-type">
 					<div
 						class="card is-fullwidth"
 						:class="{ 'is-highlight-active': isCurrentSongActive }"
@@ -68,7 +61,7 @@
 								<figure class="media-left">
 									<p class="image is-64x64">
 										<img
-											:src="$parent.currentSong.thumbnail"
+											:src="currentSong.thumbnail"
 											onerror='this.src="/assets/notes-transparent.png"'
 										/>
 									</p>
@@ -77,13 +70,11 @@
 									<div class="content">
 										<p>
 											<strong>{{
-												$parent.currentSong.title
+												currentSong.title
 											}}</strong>
 											<br />
 											<small>{{
-												$parent.currentSong.artists.split(
-													" ,"
-												)
+												currentSong.artists.split(" ,")
 											}}</small>
 										</p>
 									</div>
@@ -158,7 +149,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 import { Toast } from "vue-roaster";
 import Modal from "./Modal.vue";
@@ -173,7 +164,7 @@ export default {
 			isCurrentSongActive: true,
 			report: {
 				resolved: false,
-				songId: this.$parent.currentSong.songId,
+				songId: this.currentSong.songId,
 				description: "",
 				issues: [
 					{ name: "Video", reasons: [] },
@@ -216,6 +207,10 @@ export default {
 			]
 		};
 	},
+	computed: mapState({
+		currentSong: state => state.station.currentSong,
+		previousSong: state => state.station.previousSong
+	}),
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
@@ -239,11 +234,11 @@ export default {
 		},
 		highlight(type) {
 			if (type === "currentSong") {
-				this.report.songId = this.$parent.currentSong.songId;
+				this.report.songId = this.currentSong.songId;
 				this.isPreviousSongActive = false;
 				this.isCurrentSongActive = true;
 			} else if (type === "previousSong") {
-				this.report.songId = this.$parent.previousSong.songId;
+				this.report.songId = this.previousSong.songId;
 				this.isCurrentSongActive = false;
 				this.isPreviousSongActive = true;
 			}

frontend/components/Sidebars/Playlist.vue

@@ -14,7 +14,7 @@
 							<a
 								v-if="
 									isNotSelected(playlist._id) &&
-										!$parent.station.partyMode
+										!station.partyMode
 								"
 								href="#"
 								@click="selectPlaylist(playlist._id)"
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 import { Toast } from "vue-roaster";
 import io from "../../io";
@@ -57,6 +57,11 @@ export default {
 			playlists: []
 		};
 	},
+	computed: {
+		...mapState("modals", {
+			modals: state => state.modals.station
+		})
+	},
 	methods: {
 		edit(id) {
 			this.editPlaylist(id);
@@ -65,7 +70,7 @@ export default {
 		selectPlaylist(id) {
 			this.socket.emit(
 				"stations.selectPrivatePlaylist",
-				this.$parent.station._id,
+				this.station._id,
 				id,
 				res => {
 					if (res.status === "failure")
@@ -76,10 +81,7 @@ export default {
 		},
 		isNotSelected(id) {
 			// TODO Also change this once it changes for a station
-			if (
-				this.$parent.station &&
-				this.$parent.station.privatePlaylist === id
-			)
+			if (this.station && this.station.privatePlaylist === id)
 				return false;
 			return true;
 		},

frontend/components/Sidebars/SongsList.vue

@@ -1,18 +1,18 @@
 <template>
 	<div class="sidebar" transition="slide">
 		<div class="inner-wrapper">
-			<div v-if="$parent.type === 'community'" class="title">
+			<div v-if="station.type === 'community'" class="title">
 				Queue
 			</div>
 			<div v-else class="title">
 				Playlist
 			</div>
 
-			<article v-if="!$parent.noSong" class="media">
-				<figure v-if="$parent.currentSong.thumbnail" class="media-left">
+			<article v-if="!noSong" class="media">
+				<figure v-if="currentSong.thumbnail" class="media-left">
 					<p class="image is-64x64">
 						<img
-							:src="$parent.currentSong.thumbnail"
+							:src="currentSong.thumbnail"
 							onerror="this.src='/assets/notes-transparent.png'"
 						/>
 					</p>
@@ -21,22 +21,22 @@
 					<div class="content">
 						<p>
 							Current Song:
-							<strong>{{ $parent.currentSong.title }}</strong>
+							<strong>{{ currentSong.title }}</strong>
 							<br />
-							<small>{{ $parent.currentSong.artists }}</small>
+							<small>{{ currentSong.artists }}</small>
 						</p>
 					</div>
 				</div>
 				<div class="media-right">
-					{{ $parent.formatTime($parent.currentSong.duration) }}
+					{{ $parent.formatTime(currentSong.duration) }}
 				</div>
 			</article>
-			<p v-if="$parent.noSong" class="center">
+			<p v-if="noSong" class="center">
 				There is currently no song playing.
 			</p>
 
 			<article
-				v-for="(song, index) in $parent.songsList"
+				v-for="(song, index) in songsList"
 				:key="index"
 				class="media"
 			>
@@ -49,8 +49,8 @@
 						<small>{{ song.artists.join(", ") }}</small>
 						<div
 							v-if="
-								$parent.type === 'community' &&
-									$parent.station.partyMode === true
+								station.type === 'community' &&
+									station.partyMode === true
 							"
 						>
 							<small>
@@ -78,16 +78,16 @@
 			</article>
 			<div
 				v-if="
-					$parent.type === 'community' &&
+					station.type === 'community' &&
 						loggedIn &&
-						$parent.station.partyMode === true
+						station.partyMode === true
 				"
 			>
 				<button
 					v-if="
-						($parent.station.locked && isOwnerOnly()) ||
-							!$parent.station.locked ||
-							($parent.station.locked &&
+						(station.locked && isOwnerOnly()) ||
+							!station.locked ||
+							(station.locked &&
 								isAdminOnly() &&
 								dismissedWarning)
 					"
@@ -103,7 +103,7 @@
 				</button>
 				<button
 					v-if="
-						$parent.station.locked &&
+						station.locked &&
 							isAdminOnly() &&
 							!isOwnerOnly() &&
 							!dismissedWarning
@@ -114,11 +114,7 @@
 					THIS STATION'S QUEUE IS LOCKED.
 				</button>
 				<button
-					v-if="
-						$parent.station.locked &&
-							!isAdminOnly() &&
-							!isOwnerOnly()
-					"
+					v-if="station.locked && !isAdminOnly() && !isOwnerOnly()"
 					class="button add-to-queue add-to-queue-disabled"
 				>
 					THIS STATION'S QUEUE IS LOCKED.
@@ -144,11 +140,15 @@ export default {
 	computed: mapState({
 		loggedIn: state => state.user.auth.loggedIn,
 		userId: state => state.user.auth.userId,
-		role: state => state.user.auth.role
+		role: state => state.user.auth.role,
+		station: state => state.station.station,
+		currentSong: state => state.station.currentSong,
+		songsList: state => state.station.songsList,
+		noSong: state => state.station.noSong
 	}),
 	methods: {
 		isOwnerOnly() {
-			return this.loggedIn && this.userId === this.$parent.station.owner;
+			return this.loggedIn && this.userId === this.station.owner;
 		},
 		isAdminOnly() {
 			return this.loggedIn && this.role === "admin";
@@ -156,7 +156,7 @@ export default {
 		removeFromQueue(songId) {
 			window.socket.emit(
 				"stations.removeFromQueue",
-				this.$parent.station._id,
+				this.station._id,
 				songId,
 				res => {
 					if (res.status === "success") {

frontend/components/Sidebars/UsersList.vue

@@ -4,10 +4,10 @@
 			<div class="title">
 				Users
 			</div>
-			<h5 class="center">Total users: {{ $parent.userCount }}</h5>
+			<h5 class="center">Total users: {{ userCount }}</h5>
 			<aside class="menu">
 				<ul class="menu-list">
-					<li v-for="(username, index) in $parent.users" :key="index">
+					<li v-for="(username, index) in users" :key="index">
 						<router-link
 							:to="{ name: 'profile', params: { username } }"
 							target="_blank"
@@ -21,6 +21,17 @@
 	</div>
 </template>
 
+<script>
+import { mapState } from "vuex";
+
+export default {
+	computed: mapState({
+		users: state => state.station.users,
+		userCount: state => state.station.userCount
+	})
+};
+</script>
+
 <style lang="scss" scoped>
 @import "styles/global.scss";
 

frontend/components/Station/CommunityHeader.vue

@@ -15,7 +15,7 @@
 			</div>
 
 			<div class="nav-center stationDisplayName">
-				{{ $parent.station.displayName }}
+				{{ station.displayName }}
 			</div>
 
 			<span class="nav-toggle" v-on:click="controlBar = !controlBar">
@@ -90,7 +90,7 @@
 						<span class="icon-purpose">Skip current song</span>
 					</a>
 					<a
-						v-if="isOwner() && $parent.paused"
+						v-if="isOwner() && paused"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.resumeStation()"
@@ -101,7 +101,7 @@
 						<span class="icon-purpose">Resume station</span>
 					</a>
 					<a
-						v-if="isOwner() && !$parent.paused"
+						v-if="isOwner() && !paused"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.pauseStation()"
@@ -113,9 +113,9 @@
 					</a>
 					<hr />
 				</div>
-				<div v-if="loggedIn && !$parent.noSong">
+				<div v-if="loggedIn && !noSong">
 					<a
-						v-if="!isOwner() && loggedIn && !$parent.noSong"
+						v-if="!isOwner() && loggedIn && !noSong"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.voteSkipStation()"
@@ -124,12 +124,12 @@
 							<i class="material-icons">skip_next</i>
 						</span>
 						<span class="skip-votes">{{
-							$parent.currentSong.skipVotes
+							currentSong.skipVotes
 						}}</span>
 						<span class="icon-purpose">Skip current song</span>
 					</a>
 					<a
-						v-if="loggedIn && !$parent.noSong"
+						v-if="loggedIn && !noSong"
 						class="sidebar-item"
 						href="#"
 						@click="
@@ -149,7 +149,7 @@
 					<hr />
 				</div>
 				<a
-					v-if="$parent.station.partyMode === true"
+					v-if="station.partyMode === true"
 					class="sidebar-item"
 					href="#"
 					@click="$parent.toggleSidebar('songslist')"
@@ -206,7 +206,11 @@ export default {
 	computed: mapState({
 		loggedIn: state => state.user.auth.loggedIn,
 		userId: state => state.user.auth.userId,
-		role: state => state.user.auth.role
+		username: state => state.user.auth.username,
+		role: state => state.user.auth.role,
+		station: state => state.station.station,
+		paused: state => state.station.paused,
+		noSong: state => state.station.noSong
 	}),
 	mounted() {
 		lofig.get("frontendDomain", res => {
@@ -222,19 +226,18 @@ export default {
 		isOwner() {
 			return (
 				this.loggedIn &&
-				(this.role === "admin" ||
-					this.userId === this.$parent.station.owner)
+				(this.role === "admin" || this.userId === this.station.owner)
 			);
 		},
 		settings() {
 			this.editStation({
-				_id: this.$parent.station._id,
-				name: this.$parent.station.name,
-				type: this.$parent.type,
-				partyMode: this.$parent.station.partyMode,
-				description: this.$parent.station.description,
-				privacy: this.$parent.station.privacy,
-				displayName: this.$parent.station.displayName
+				_id: this.station._id,
+				name: this.station.name,
+				type: this.station.type,
+				partyMode: this.station.partyMode,
+				description: this.station.description,
+				privacy: this.station.privacy,
+				displayName: this.station.displayName
 			});
 			this.openModal({
 				sector: "station",

frontend/components/Station/OfficialHeader.vue

@@ -11,7 +11,7 @@
 			</div>
 
 			<div class="nav-center stationDisplayName">
-				{{ $parent.station.displayName }}
+				{{ station.displayName }}
 			</div>
 
 			<span class="nav-toggle" v-on:click="controlBar = !controlBar">
@@ -85,7 +85,7 @@
 						<span class="icon-purpose">Skip current song</span>
 					</a>
 					<a
-						v-if="isOwner() && !$parent.paused"
+						v-if="isOwner() && !paused"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.pauseStation()"
@@ -96,7 +96,7 @@
 						<span class="icon-purpose">Pause station</span>
 					</a>
 					<a
-						v-if="isOwner() && $parent.paused"
+						v-if="isOwner() && paused"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.resumeStation()"
@@ -110,7 +110,7 @@
 				</div>
 				<div v-if="loggedIn">
 					<a
-						v-if="$parent.type === 'official' && loggedIn"
+						v-if="station.type === 'official' && loggedIn"
 						class="sidebar-item"
 						href="#"
 						@click="
@@ -126,7 +126,7 @@
 						<span class="icon-purpose">Add song to queue</span>
 					</a>
 					<a
-						v-if="!isOwner() && loggedIn && !$parent.noSong"
+						v-if="!isOwner() && loggedIn && !noSong"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.voteSkipStation()"
@@ -135,14 +135,12 @@
 							<i class="material-icons">skip_next</i>
 						</span>
 						<span class="skip-votes">{{
-							$parent.currentSong.skipVotes
+							currentSong.skipVotes
 						}}</span>
 						<span class="icon-purpose">Skip current song</span>
 					</a>
 					<a
-						v-if="
-							loggedIn && !$parent.noSong && !$parent.simpleSong
-						"
+						v-if="loggedIn && !noSong && !currentSong.simpleSong"
 						class="sidebar-item"
 						href="#"
 						@click="
@@ -158,7 +156,7 @@
 						<span class="icon-purpose">Report a song</span>
 					</a>
 					<a
-						v-if="loggedIn && !$parent.noSong"
+						v-if="loggedIn && !noSong"
 						class="sidebar-item"
 						href="#"
 						@click="
@@ -223,7 +221,11 @@ export default {
 	computed: mapState({
 		role: state => state.user.auth.role,
 		username: state => state.user.auth.username,
-		loggedIn: state => state.user.auth.loggedIn
+		loggedIn: state => state.user.auth.loggedIn,
+		station: state => state.station.station,
+		currentSong: state => state.station.currentSong,
+		paused: state => state.station.paused,
+		noSong: state => state.station.noSong
 	}),
 	mounted() {
 		lofig.get("frontendDomain", res => {
@@ -241,13 +243,13 @@ export default {
 		},
 		settings() {
 			this.editStation({
-				_id: this.$parent.station._id,
-				name: this.$parent.station.name,
-				type: this.$parent.type,
-				partyMode: this.$parent.station.partyMode,
-				description: this.$parent.station.description,
-				privacy: this.$parent.station.privacy,
-				displayName: this.$parent.station.displayName
+				_id: this.station._id,
+				name: this.station.name,
+				type: this.station.type,
+				partyMode: this.station.partyMode,
+				description: this.station.description,
+				privacy: this.station.privacy,
+				displayName: this.station.displayName
 			});
 			this.openModal({
 				sector: "station",

frontend/components/Station/Station.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
-		<official-header v-if="type == 'official'" />
-		<community-header v-if="type == 'community'" />
+		<official-header v-if="station.type == 'official'" />
+		<community-header v-if="station.type == 'community'" />
 
 		<song-queue v-if="modals.addSongToQueue" />
 		<add-to-playlist v-if="modals.addSongToPlaylist" />
@@ -26,7 +26,7 @@
 				<h1>No song is currently playing</h1>
 				<h4
 					v-if="
-						type === 'community' &&
+						station.type === 'community' &&
 							station.partyMode &&
 							this.loggedIn &&
 							(!station.locked ||
@@ -48,7 +48,7 @@
 				</h4>
 				<h4
 					v-if="
-						type === 'community' &&
+						station.type === 'community' &&
 							!station.partyMode &&
 							this.userId === station.owner &&
 							!station.privatePlaylist
@@ -63,7 +63,7 @@
 				</h4>
 				<h1
 					v-if="
-						type === 'community' &&
+						station.type === 'community' &&
 							!station.partyMode &&
 							this.userId === station.owner &&
 							station.privatePlaylist
@@ -99,7 +99,7 @@
 				<div
 					class="desktop-only column is-3-desktop card playlistCard experimental"
 				>
-					<div v-if="type === 'community'" class="title">
+					<div v-if="station.type === 'community'" class="title">
 						Queue
 					</div>
 					<div v-else class="title">
@@ -172,7 +172,7 @@
 						</div>
 					</article>
 					<a
-						v-if="type === 'community' && loggedIn"
+						v-if="station.type === 'community' && loggedIn"
 						class="button add-to-queue"
 						href="#"
 						@click="
@@ -293,7 +293,7 @@
 							</div>
 						</div>
 						<div
-							v-if="!simpleSong"
+							v-if="!currentSong.simpleSong"
 							class="column is-3-desktop experimental"
 						>
 							<img
@@ -445,13 +445,9 @@ export default {
 			loading: true,
 			ready: false,
 			exists: true,
-			type: "",
 			playerReady: false,
-			previousSong: null,
-			currentSong: {},
 			player: undefined,
 			timePaused: 0,
-			paused: false,
 			muted: false,
 			timeElapsed: "0:00",
 			liked: false,
@@ -461,16 +457,11 @@ export default {
 				users: false,
 				playlist: false
 			},
-			noSong: false,
-			simpleSong: false,
-			songsList: [],
 			timeBeforePause: 0,
 			skipVotes: 0,
 			privatePlaylistQueueSelected: null,
 			automaticallyRequestedSongId: null,
 			systemDifference: 0,
-			users: [],
-			userCount: 0,
 			attemptsToPlayVideo: 0,
 			canAutoplay: true,
 			lastTimeRequestedIfCanAutoplay: 0
@@ -481,7 +472,11 @@ export default {
 			modals: state => state.modals.station
 		}),
 		...mapState("station", {
-			station: state => state.station
+			station: state => state.station,
+			currentSong: state => state.currentSong,
+			songsList: state => state.songsList,
+			paused: state => state.paused,
+			noSong: state => state.noSong
 		}),
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
@@ -739,7 +734,7 @@ export default {
 			}
 		},
 		resumeLocalStation() {
-			this.paused = false;
+			this.updatePaused(false);
 			if (!this.noSong) {
 				if (this.playerReady) {
 					this.player.seekTo(
@@ -751,7 +746,7 @@ export default {
 			}
 		},
 		pauseLocalStation() {
-			this.paused = true;
+			this.updatePaused(true);
 			if (!this.noSong) {
 				this.timeBeforePause = this.getTimeElapsed();
 				if (this.playerReady) this.player.pauseVideo();
@@ -880,7 +875,7 @@ export default {
 		},
 		addFirstPrivatePlaylistSongToQueue() {
 			let isInQueue = false;
-			if (this.type === "community") {
+			if (this.station.type === "community") {
 				this.songsList.forEach(queueSong => {
 					if (queueSong.requestedBy === this.userId) isInQueue = true;
 				});
@@ -951,7 +946,8 @@ export default {
 						locked,
 						partyMode,
 						owner,
-						privatePlaylist
+						privatePlaylist,
+						type
 					} = res.data;
 
 					document.title = `Musare - ${displayName}`;
@@ -965,30 +961,23 @@ export default {
 						locked,
 						partyMode,
 						owner,
-						privatePlaylist
+						privatePlaylist,
+						type
 					});
-					this.currentSong = res.data.currentSong
+					const currentSong = res.data.currentSong
 						? res.data.currentSong
 						: {};
-					if (this.currentSong.artists)
-						this.currentSong.artists = this.currentSong.artists.join(
-							", "
-						);
-					this.type = res.data.type;
+					if (currentSong.artists)
+						currentSong.artists = currentSong.artists.join(", ");
+					this.updateCurrentSong(currentSong);
 					this.startedAt = res.data.startedAt;
-					this.paused = res.data.paused;
+					this.updatePaused(res.data.paused);
 					this.timePaused = res.data.timePaused;
-					this.userCount = res.data.userCount;
-					this.users = res.data.users;
+					this.updateUserCount(res.data.userCount);
+					this.updateUsers(res.data.users);
 					this.pausedAt = res.data.pausedAt;
 					if (res.data.currentSong) {
-						this.noSong = false;
-						this.simpleSong =
-							res.data.currentSong.likes === -1 &&
-							res.data.currentSong.dislikes === -1;
-						if (this.simpleSong) {
-							this.currentSong.skipDuration = 0;
-						}
+						this.updateNoSong(false);
 						this.youtubeReady();
 						this.playVideo();
 						this.socket.emit(
@@ -1003,7 +992,7 @@ export default {
 						);
 					} else {
 						if (this.playerReady) this.player.pauseVideo();
-						this.noSong = true;
+						this.updateNoSong(true);
 					}
 					// UNIX client time before ping
 					const beforePing = Date.now();
@@ -1030,7 +1019,15 @@ export default {
 			});
 		},
 		...mapActions("modals", ["openModal"]),
-		...mapActions("station", ["joinStation"])
+		...mapActions("station", [
+			"joinStation",
+			"updateUserCount",
+			"updateUsers",
+			"updateCurrentSong",
+			"updateSongsList",
+			"updatePaused",
+			"updateNoSong"
+		])
 	},
 	mounted() {
 		Date.currently = () => {
@@ -1056,23 +1053,22 @@ export default {
 				}
 			});
 			this.socket.on("event:songs.next", data => {
-				this.previousSong = this.currentSong.songId
+				const previousSong = this.currentSong.songId
 					? this.currentSong
 					: null;
-				this.currentSong = data.currentSong ? data.currentSong : {};
+				this.updatePreviousSong(previousSong);
+				this.updateCurrentSong(
+					data.currentSong ? data.currentSong : {}
+				);
 				this.startedAt = data.startedAt;
-				this.paused = data.paused;
+				this.updatePaused(data.paused);
 				this.timePaused = data.timePaused;
 				if (data.currentSong) {
-					this.noSong = false;
+					this.updateNoSong(false);
 					if (this.currentSong.artists)
 						this.currentSong.artists = this.currentSong.artists.join(
 							", "
 						);
-					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(
@@ -1087,7 +1083,7 @@ export default {
 					);
 				} else {
 					if (this.playerReady) this.player.pauseVideo();
-					this.noSong = true;
+					this.updateNoSong(true);
 				}
 
 				let isInQueue = false;
@@ -1166,7 +1162,8 @@ export default {
 			});
 
 			this.socket.on("event:queue.update", queue => {
-				if (this.type === "community") this.songsList = queue;
+				if (this.station.type === "community")
+					this.updateSongsList(queue);
 			});
 
 			this.socket.on("event:song.voteSkipSong", () => {
@@ -1174,29 +1171,29 @@ export default {
 			});
 
 			this.socket.on("event:privatePlaylist.selected", playlistId => {
-				if (this.type === "community") {
+				if (this.station.type === "community") {
 					this.station.privatePlaylist = playlistId;
 				}
 			});
 
 			this.socket.on("event:partyMode.updated", partyMode => {
-				if (this.type === "community") {
+				if (this.station.type === "community") {
 					this.station.partyMode = partyMode;
 				}
 			});
 
 			this.socket.on("event:newOfficialPlaylist", playlist => {
-				if (this.type === "official") {
-					this.songsList = playlist;
+				if (this.station.type === "official") {
+					this.updateSongsList(playlist);
 				}
 			});
 
 			this.socket.on("event:users.updated", users => {
-				this.users = users;
+				this.updateUsers(users);
 			});
 
 			this.socket.on("event:userCount.updated", userCount => {
-				this.userCount = userCount;
+				this.updateUserCount(userCount);
 			});
 
 			this.socket.on("event:queueLockToggled", locked => {

frontend/components/User/Settings.vue

@@ -109,7 +109,7 @@
 			<a
 				v-if="!github"
 				class="button is-github"
-				:href="`${$parent.serverDomain}/auth/github/link`"
+				:href="`${serverDomain}/auth/github/link`"
 			>
 				<div class="icon">
 					<img class="invert" src="/assets/social/github.svg" />
@@ -166,13 +166,18 @@ export default {
 			github: false,
 			setNewPassword: "",
 			passwordStep: 1,
-			passwordCode: ""
+			passwordCode: "",
+			serverDomain: ""
 		};
 	},
 	computed: mapState({
 		userId: state => state.user.auth.userId
 	}),
 	mounted() {
+		lofig.get("serverDomain", res => {
+			this.serverDomain = res;
+		});
+
 		io.getSocket(socket => {
 			this.socket = socket;
 			this.socket.emit("users.findBySession", res => {
@@ -181,7 +186,6 @@ export default {
 					this.password = this.user.password;
 					this.github = this.user.github;
 				} else {
-					this.$parent.isLoginActive = true;
 					Toast.methods.addToast(
 						"Your are currently not signed in",
 						3000

frontend/store/modules/admin.js

@@ -16,7 +16,8 @@ const modules = {
 				autoPlayed: false,
 				currentTime: 0
 			},
-			editing: {}
+			editing: {},
+			songs: []
 		},
 		getters: {},
 		actions: {
@@ -30,7 +31,11 @@ const modules = {
 					commit("getCurrentTime", fixedVal);
 					resolve(state.video.currentTime);
 				});
-			}
+			},
+			addSong: ({ commit }, song) => commit("addSong", song),
+			removeSong: ({ commit }, songId) => commit("removeSong", songId),
+			updateSong: ({ commit }, updatedSong) =>
+				commit("updateSong", updatedSong)
 		},
 		mutations: {
 			editSong(state, song) {
@@ -62,6 +67,20 @@ const modules = {
 						}
 					);
 				}
+			},
+			addSong(state, song) {
+				state.songs.push(song);
+			},
+			removeSong(state, songId) {
+				state.songs = state.songs.filter(song => {
+					return song._id !== songId;
+				});
+			},
+			updateSong(state, updatedSong) {
+				state.songs.forEach((song, index) => {
+					if (song._id === updatedSong._id)
+						state.songs.$set(index, updatedSong);
+				});
 			}
 		}
 	},
@@ -127,6 +146,31 @@ const modules = {
 				state.editing = user;
 			}
 		}
+	},
+	news: {
+		namespaced: true,
+		state: {
+			editing: {}
+		},
+		getters: {},
+		actions: {
+			editNews: ({ commit }, news) => commit("editNews", news),
+			addNews: ({ commit }, type, change) =>
+				commit("addChange", type, change),
+			removeChange: ({ commit }, type, index) =>
+				commit("removeChange", type, index)
+		},
+		mutations: {
+			editNews(state, news) {
+				state.editing = news;
+			},
+			addChange(state, type, change) {
+				state.editing[type].push(change);
+			},
+			removeChange(state, type, index) {
+				state.editing[type].splice(index, 1);
+			}
+		}
 	}
 };
 

frontend/store/modules/station.js

@@ -2,7 +2,14 @@
 
 const state = {
 	station: {},
-	editing: {}
+	editing: {},
+	userCount: 0,
+	users: [],
+	currentSong: {},
+	previousSong: {},
+	songsList: [],
+	paused: true,
+	noSong: true
 };
 
 const getters = {};
@@ -13,6 +20,27 @@ const actions = {
 	},
 	editStation: ({ commit }, station) => {
 		commit("editStation", station);
+	},
+	updateUserCount: ({ commit }, userCount) => {
+		commit("updateUserCount", userCount);
+	},
+	updateUsers: ({ commit }, users) => {
+		commit("updateUsers", users);
+	},
+	updateCurrentSong: ({ commit }, currentSong) => {
+		commit("updateCurrentSong", currentSong);
+	},
+	updatePreviousSong: ({ commit }, previousSong) => {
+		commit("updatePreviousSong", previousSong);
+	},
+	updateSongsList: ({ commit }, songsList) => {
+		commit("updateSongsList", songsList);
+	},
+	updatePaused: ({ commit }, paused) => {
+		commit("updatePaused", paused);
+	},
+	updateNoSong: ({ commit }, noSong) => {
+		commit("updateNoSong", noSong);
 	}
 };
 
@@ -22,6 +50,34 @@ const mutations = {
 	},
 	editStation(state, station) {
 		state.editing = { ...station };
+	},
+	updateUserCount(state, userCount) {
+		state.userCount = userCount;
+	},
+	updateUsers(state, users) {
+		state.users = users;
+	},
+	updateCurrentSong(state, currentSong) {
+		if (currentSong.likes === -1 && currentSong.dislikes === -1) {
+			currentSong.skipDuration = 0;
+			currentSong.simpleSong = true;
+		} else {
+			currentSong.simpleSong = false;
+		}
+
+		state.currentSong = currentSong;
+	},
+	updatePreviousSong(state, previousSong) {
+		state.previousSong = previousSong;
+	},
+	updateSongsList(state, songsList) {
+		state.songsList = songsList;
+	},
+	updatePaused(state, paused) {
+		state.paused = paused;
+	},
+	updateNoSong(state, noSong) {
+		state.noSong = noSong;
 	}
 };