User option to toggle auto-skipping of disliked songs

frontend/src/App.vue

@@ -84,6 +84,11 @@ export default {
 
 		if (nightmode) this.enableNightMode();
 		else this.disableNightMode();
+
+		const autoSkipDisliked =
+			false || JSON.parse(localStorage.getItem("autoSkipDisliked"));
+
+		this.changeAutoSkipDisliked(autoSkipDisliked);
 	},
 	mounted() {
 		document.onkeydown = ev => {
@@ -173,7 +178,10 @@ export default {
 				.classList.remove("night-mode");
 		},
 		...mapActions("modals", ["closeCurrentModal"]),
-		...mapActions("user/preferences", ["changeNightmode"])
+		...mapActions("user/preferences", [
+			"changeNightmode",
+			"changeAutoSkipDisliked"
+		])
 	}
 };
 </script>
@@ -504,7 +512,7 @@ button.delete:focus {
 		height: 36px;
 		border-radius: 3px 0 0 3px;
 		border-right: 0;
-		border-colour: $light-grey-2;
+		border-color: $light-grey-2;
 	}
 
 	.button {

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

@@ -7,6 +7,17 @@
 				<p>Use nightmode</p>
 			</label>
 		</p>
+		<p class="control is-expanded checkbox-control">
+			<input
+				type="checkbox"
+				id="autoSkipDisliked"
+				v-model="localAutoSkipDisliked"
+			/>
+			<label for="autoSkipDisliked">
+				<span></span>
+				<p>Automatically vote to skip disliked songs</p>
+			</label>
+		</p>
 		<button class="button is-primary save-changes" @click="saveChanges()">
 			Save changes
 		</button>
@@ -19,25 +30,40 @@ import { mapState, mapActions } from "vuex";
 export default {
 	data() {
 		return {
-			localNightmode: false
+			localNightmode: false,
+			localAutoSkipDisliked: false
 		};
 	},
 	computed: mapState({
-		nightmode: state => state.user.preferences.nightmode
+		nightmode: state => state.user.preferences.nightmode,
+		autoSkipDisliked: state => state.user.preferences.autoSkipDisliked
 	}),
 	mounted() {
 		this.localNightmode = this.nightmode;
+		this.localAutoSkipDisliked = this.autoSkipDisliked;
 	},
 	methods: {
 		saveChanges() {
 			if (this.localNightmode !== this.nightmode)
 				this.changeNightmodeLocal();
+			if (this.localAutoSkipDisliked !== this.autoSkipDisliked)
+				this.changeAutoSkipDislikedLocal();
 		},
 		changeNightmodeLocal() {
 			localStorage.setItem("nightmode", this.localNightmode);
 			this.changeNightmode(this.localNightmode);
 		},
-		...mapActions("user/preferences", ["changeNightmode"])
+		changeAutoSkipDislikedLocal() {
+			localStorage.setItem(
+				"autoSkipDisliked",
+				this.localAutoSkipDisliked
+			);
+			this.changeAutoSkipDisliked(this.localAutoSkipDisliked);
+		},
+		...mapActions("user/preferences", [
+			"changeNightmode",
+			"changeAutoSkipDisliked"
+		])
 	}
 };
 </script>

frontend/src/pages/Station/index.vue

@@ -484,7 +484,10 @@ export default {
 							if (this.currentSong.songId === song.songId) {
 								this.liked = song.liked;
 								this.disliked = song.disliked;
-								if (song.disliked === true)
+								if (
+									this.autoSkipDisliked &&
+									song.disliked === true
+								)
 									this.voteSkipStation();
 							}
 						}

frontend/src/store/modules/user.js

@@ -217,16 +217,23 @@ const modules = {
 	preferences: {
 		namespaced: true,
 		state: {
-			nightmode: true
+			nightmode: true,
+			autoSkipDisliked: true
 		},
 		actions: {
 			changeNightmode: ({ commit }, nightmode) => {
 				commit("changeNightmode", nightmode);
+			},
+			changeAutoSkipDisliked: ({ commit }, autoSkipDisliked) => {
+				commit("changeAutoSkipDisliked", autoSkipDisliked);
 			}
 		},
 		mutations: {
 			changeNightmode(state, nightmode) {
 				state.nightmode = nightmode;
+			},
+			changeAutoSkipDisliked(state, autoSkipDisliked) {
+				state.autoSkipDisliked = autoSkipDisliked;
 			}
 		}
 	}