Add setting fields to popup page

Author: kuba2k2

src/core/BeatSaberCore.tsx

@@ -36,8 +36,8 @@ export class BeatSaberCore {
 		logStateButton: false,
 		logTrackPage: false,
 		logWatchers: false,
-		backendHostname: "localhost:23287",
-		backendAuth: "YWRtaW46bmltZGE=",
+		backendHostname: null,
+		backendAuth: null,
 		bsaberLogin: null,
 		bsaberPassword: null,
 		bsaberUsername: null,
@@ -88,6 +88,10 @@ export class BeatSaberCore {
 	}
 
 	public async syncMaps() {
+		if (!BeatSaber.Settings.backendHostname) {
+			return
+		}
+
 		const now = new Date().getTime()
 		if (now - BeatSaber.Settings.lastSyncTime < 2 * 24 * 60 * 60 * 1000) {
 			return

src/core/queue/requests/BookmarkRequest.ts

@@ -14,8 +14,9 @@ export class BookmarkRequest extends MapQueueRequest {
 	}
 
 	async run() {
-		const category = MapCategory.BOOKMARKED
-		console.log("Bookmark", this.type, "by key", this.key)
+		if (!BeatSaber.Settings.backendHostname) {
+			throw new QueueError("Backend is not configured")
+		}
 
 		if (
 			!BeatSaber.Settings.bsaberLogin ||
@@ -24,6 +25,7 @@ export class BookmarkRequest extends MapQueueRequest {
 			throw new QueueError("BeastSaber login data missing")
 		}
 
+		const category = MapCategory.BOOKMARKED
 		let map: Map
 		switch (this.type) {
 			case MapQueueRequestType.ADD:

src/core/queue/requests/DownloadRequest.ts

@@ -1,6 +1,7 @@
 import { Level } from "../../models/Level"
 import { MapCategory } from "../../storage/MapStorage"
 import { MapQueueRequest, MapQueueRequestType } from "../base/MapQueueRequest"
+import { QueueError } from "../base/QueueError"
 
 export class DownloadRequest extends MapQueueRequest {
 	hash: string
@@ -13,9 +14,11 @@ export class DownloadRequest extends MapQueueRequest {
 	}
 
 	async run() {
-		const category = MapCategory.DOWNLOADED
-		console.log("Download", this.type, "by hash", this.hash)
+		if (!BeatSaber.Settings.backendHostname) {
+			throw new QueueError("Backend is not configured")
+		}
 
+		const category = MapCategory.DOWNLOADED
 		let level: Level
 		switch (this.type) {
 			case MapQueueRequestType.ADD:

src/scss/popup-page.scss

@@ -0,0 +1,64 @@
+.bs-queue-button {
+	position: relative;
+
+	& > button {
+		--button-size: 32px;
+		width: unset;
+
+		small {
+			vertical-align: middle;
+			padding: 0 4px;
+		}
+
+		&::before {
+			vertical-align: middle;
+		}
+	}
+
+	.ConnectPopup {
+		&__button {
+			margin: 10px 0;
+		}
+
+		&__content {
+			padding: 0 20px;
+
+			.GlueSectionDivider {
+				padding: 10px 0;
+			}
+
+			.GlueToggle {
+				display: inline-block;
+				margin: 0 10px 0 0;
+			}
+
+			span.bs-setting {
+				vertical-align: top;
+			}
+		}
+
+		ul {
+			margin: 0 -20px;
+		}
+
+		.form-group input {
+			padding: 5px;
+			border: 0;
+			background-color: #333;
+			display: inline-block;
+			width: 100%;
+			color: #fff;
+
+			&::placeholder {
+				color: #949494;
+			}
+
+			&:focus {
+				border-color: #404040;
+				background-color: #404040;
+				color: #fff;
+				outline: 0;
+			}
+		}
+	}
+}

src/scss/queue-button.scss

@@ -7,7 +7,7 @@
 @use "map-list";
 @use "modal";
 @use "now-playing";
-@use "queue-button";
+@use "popup-page";
 @use "search-field";
 @use "spinner";
 @use "track-header";

src/scss/style.scss

@@ -1,3 +1,4 @@
+import { ChangeEvent } from "react"
 import { Subscription } from "rxjs"
 import { TrackQueueRequest } from "../../core/queue/base/TrackQueueRequest"
 import { QueueState } from "../../core/queue/TrackQueue"
@@ -67,19 +68,41 @@ export class PopupPage extends Spicetify.React.Component<
 		return true
 	}
 
+	handleInputChange(
+		key: string,
+		event: ChangeEvent<HTMLInputElement>
+	): boolean {
+		BeatSaber.Settings[key] = event.target.value
+		BeatSaber.saveSettings()
+		this.forceUpdate()
+		return true
+	}
+
 	handleItemClick(request: TrackQueueRequest) {
 		const track = BeatSaber.TrackQueue.getTrack(request.slug)
 		if (!track) return
 		TrackPage.showAsModal(track)
 	}
 
 	render() {
-		const settings = {
+		const toggles = {
 			blockQueue: "Block queue",
-			logQueue: "Enable TrackQueue logging",
-			logStateButton: "Enable StateButton logging",
-			logTrackPage: "Enable TrackPage logging",
-			logWatchers: "Enable UI watchers logging",
+			logQueue: "Debug TrackQueue",
+			logMapQueue: "Debug MapQueue",
+			logStateButton: "Debug StateButton",
+			logTrackPage: "Debug TrackPage",
+			logWatchers: "Debug UI watchers",
+		}
+
+		const inputsBsaber = {
+			bsaberUsername: "Username (profile name)",
+			bsaberLogin: "Login (e-mail or login username)",
+			bsaberPassword: "Password",
+		}
+
+		const inputsBackend = {
+			backendHostname: "Hostname (domain:port)",
+			backendAuth: "Authentication",
 		}
 
 		let requests = this.state.enqueued
@@ -119,7 +142,53 @@ export class PopupPage extends Spicetify.React.Component<
 					</div>
 
 					<div className="ConnectPopup__content">
-						{Object.entries(settings).flatMap(([key, value]) => [
+						<GlueSectionDivider
+							title="Settings"
+							description="BeastSaber login"
+						/>
+						{Object.entries(inputsBsaber).map(([key, value]) => (
+							<div className="form-group">
+								<label htmlFor={key}>{value}</label>
+								<br />
+								<input
+									placeholder={value}
+									className="form-control"
+									type={
+										key.toLowerCase().includes("password")
+											? "password"
+											: "text"
+									}
+									name={key}
+									value={BeatSaber.Settings[key]}
+									onChange={this.handleInputChange.bind(
+										this,
+										key
+									)}
+								/>
+							</div>
+						))}
+
+						<GlueSectionDivider description="Backend config" />
+						{Object.entries(inputsBackend).map(([key, value]) => (
+							<div className="form-group">
+								<label htmlFor={key}>{value}</label>
+								<br />
+								<input
+									placeholder={value}
+									className="form-control"
+									type="text"
+									name={key}
+									value={BeatSaber.Settings[key]}
+									onChange={this.handleInputChange.bind(
+										this,
+										key
+									)}
+								/>
+							</div>
+						))}
+
+						<GlueSectionDivider description="Debugging" />
+						{Object.entries(toggles).flatMap(([key, value]) => [
 							<GlueToggle
 								onChange={this.handleSettingChange.bind(
 									this,
@@ -131,6 +200,8 @@ export class PopupPage extends Spicetify.React.Component<
 							<br />,
 						])}
 
+						<GlueSectionDivider title="Queue" />
+
 						{requests.length == 0 && (
 							<div className="ConnectPopup__info">
 								<p>The queue is currenty empty.</p>

src/ui/pages/PopupPage.tsx

@@ -4,6 +4,7 @@ declare class Button extends Spicetify.ReactComponent.Button {}
 declare class Card extends Spicetify.ReactComponent.Card {}
 declare class CardWithoutLink extends Spicetify.ReactComponent.CardWithoutLink {}
 declare class CircularLoader extends Spicetify.ReactComponent.CircularLoader {}
+declare class GlueSectionDivider extends Spicetify.ReactComponent.GlueSectionDivider {}
 declare class GlueToggle extends Spicetify.ReactComponent.GlueToggle {}
 declare class HeaderBackgroundImage extends Spicetify.ReactComponent.HeaderBackgroundImage {}
 declare class HeaderData extends Spicetify.ReactComponent.HeaderData {}
@@ -85,6 +86,13 @@ declare namespace Spicetify {
 		}
 		class CircularLoader extends React.PureComponent<CircularLoaderProps> {}
 
+		type GlueSectionDividerProps = {
+			children?: React.ReactNode[]
+			description?: string
+			title?: React.ReactNode
+		}
+		class GlueSectionDivider extends React.PureComponent<GlueSectionDividerProps> {}
+
 		type GlueToggleProps = {
 			isActive?: boolean
 			isDisabled?: boolean