feat(nightmode):use nightmode logged out, last known value saved locally, keyboard shortcut

Signed-off-by: Jonathan <theflametrooper@gmail.com>

backend/core.js

@@ -625,7 +625,9 @@ export default class CoreClass {
 							}
 						} else if (
 							job.parentJob &&
-							job.parentJob.childJobs.find(childJob => childJob.status !== "FINISHED") === undefined
+							job.parentJob.childJobs.find(childJob =>
+								childJob ? childJob.status !== "FINISHED" : true
+							) === undefined
 						) {
 							if (job.parentJob.status !== "WAITING_ON_CHILD_JOB") {
 								this.log(

frontend/src/App.vue

@@ -97,6 +97,35 @@ export default {
 			this.keyIsDown = "";
 		};
 
+		// ctrl + alt + n
+		keyboardShortcuts.registerShortcut("nightmode", {
+			keyCode: 78,
+			ctrl: true,
+			alt: true,
+			handler: () => {
+				localStorage.setItem("nightmode", !this.nightmode);
+
+				if (this.loggedIn) {
+					this.socket.dispatch(
+						"users.updatePreferences",
+						{
+							nightmode: !this.nightmode,
+							autoSkipDisliked: false,
+							activityLogPublic: false,
+							anonymousSongRequests: false,
+							activityWatch: false
+						},
+						res => {
+							if (res.status !== "success")
+								new Toast(res.message);
+						}
+					);
+				}
+
+				this.changeNightmode(!this.nightmode);
+			}
+		});
+
 		keyboardShortcuts.registerShortcut("closeModal", {
 			keyCode: 27,
 			shift: false,
@@ -149,6 +178,11 @@ export default {
 			}
 		});
 
+		if (localStorage.getItem("nightmode") === "true") {
+			this.changeNightmode(true);
+			this.enableNightMode();
+		}
+
 		this.socket.dispatch("users.getPreferences", res => {
 			if (res.status === "success") {
 				const { preferences } = res.data;

frontend/src/components/layout/MainHeader.vue

@@ -24,14 +24,14 @@
 		<div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
 			<router-link
 				v-if="role === 'admin'"
-				class="nav-item is-tab admin"
+				class="nav-item admin"
 				to="/admin"
 			>
 				<strong>Admin</strong>
 			</router-link>
 			<span v-if="loggedIn" class="grouped">
 				<router-link
-					class="nav-item is-tab"
+					class="nav-item "
 					:to="{
 						name: 'profile',
 						params: { username }
@@ -39,10 +39,10 @@
 				>
 					Profile
 				</router-link>
-				<router-link class="nav-item is-tab" to="/settings"
+				<router-link class="nav-item" to="/settings"
 					>Settings</router-link
 				>
-				<a class="nav-item is-tab" href="#" @click="logout()">Logout</a>
+				<a class="nav-item" href="#" @click="logout()">Logout</a>
 			</span>
 			<span v-if="!loggedIn && !hideLoggedOut" class="grouped">
 				<a class="nav-item" href="#" @click="openModal('login')"
@@ -52,12 +52,29 @@
 					>Register</a
 				>
 			</span>
+			<div class="nav-item" id="nightmode-toggle">
+				<p class="is-expanded checkbox-control">
+					<label class="switch">
+						<input
+							type="checkbox"
+							id="instant-nightmode"
+							v-model="localNightmode"
+						/>
+						<span class="slider round"></span>
+					</label>
+
+					<label for="instant-nightmode">
+						<p>Nightmode</p>
+					</label>
+				</p>
+			</div>
 		</div>
 	</nav>
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import Toast from "toasters";
+import { mapState, mapGetters, mapActions } from "vuex";
 
 export default {
 	props: {
@@ -67,6 +84,7 @@ export default {
 	},
 	data() {
 		return {
+			localNightmode: null,
 			isMobile: false,
 			frontendDomain: "",
 			siteSettings: {
@@ -75,20 +93,68 @@ export default {
 			}
 		};
 	},
-	computed: mapState({
-		modals: state => state.modalVisibility.modals.header,
-		role: state => state.user.auth.role,
-		loggedIn: state => state.user.auth.loggedIn,
-		username: state => state.user.auth.username
-	}),
+	computed: {
+		...mapState({
+			modals: state => state.modalVisibility.modals.header,
+			role: state => state.user.auth.role,
+			loggedIn: state => state.user.auth.loggedIn,
+			username: state => state.user.auth.username,
+			autoSkipDisliked: state => state.user.preferences.autoSkipDisliked,
+			activityLogPublic: state =>
+				state.user.preferences.activityLogPublic,
+			anonymousSongRequests: state =>
+				state.user.preferences.anonymousSongRequests,
+			activityWatch: state => state.user.preferences.activityWatch
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	watch: {
+		localNightmode(newValue, oldValue) {
+			if (oldValue === null) return;
+
+			localStorage.setItem("nightmode", this.localNightmode);
+
+			if (this.loggedIn) {
+				this.socket.dispatch(
+					"users.updatePreferences",
+					{
+						nightmode: this.localNightmode,
+						autoSkipDisliked: this.autoSkipDisliked,
+						activityLogPublic: this.activityLogPublic,
+						anonymousSongRequests: this.anonymousSongRequests,
+						activityWatch: this.activityWatch
+					},
+					res => {
+						if (res.status !== "success") new Toast(res.message);
+					}
+				);
+			}
+
+			this.changeNightmode(this.localNightmode);
+		}
+	},
 	async mounted() {
+		this.localNightmode = JSON.parse(localStorage.getItem("nightmode"));
+
+		this.socket.dispatch("users.getPreferences", res => {
+			if (res.status === "success")
+				this.localNightmode = res.data.preferences.nightmode;
+		});
+
+		this.socket.on("keep.event:user.preferences.updated", res => {
+			this.localNightmode = res.data.preferences.nightmode;
+		});
+
 		this.frontendDomain = await lofig.get("frontendDomain");
 		this.siteSettings = await lofig.get("siteSettings");
 	},
 
 	methods: {
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/auth", ["logout"])
+		...mapActions("user/auth", ["logout"]),
+		...mapActions("user/preferences", ["changeNightmode"])
 	}
 };
 </script>

frontend/src/main.js

@@ -215,6 +215,7 @@ lofig.folder = "../config/default.json";
 			preferences.autoSkipDisliked
 		);
 
+		localStorage.setItem("nightmode", preferences.nightmode);
 		store.dispatch(
 			"user/preferences/changeNightmode",
 			preferences.nightmode

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

@@ -171,12 +171,10 @@ export default {
 				res => {
 					if (res.status !== "success") {
 						new Toast(res.message);
-
 						return this.$refs.saveButton.handleFailedSave();
 					}
 
 					new Toast("Successfully updated preferences");
-
 					return this.$refs.saveButton.handleSuccessfulSave();
 				}
 			);